ezhizao_yzbh_vue/src/views/business/crm/order/form.vue

<template>
  <!-- 添加或修改项目信息对话框 -->
  <div class="el-drawer__wrapper">
    <el-drawer :title="title" v-model="visible" direction="rtl" size="100%">
      <div class="page-container form-container">
        <div class="form-btns-container">
          <span class="title-label"
            ><el-icon>
              <Document />
            </el-icon>
            合同信息</span
          >

          <el-button
            v-if="form.verifyStatus == 0 && !editStatus"
            type="warning"
            size="small"
            icon="Edit"
            @click="editStatus = true"
            >修改</el-button
          >
          <el-button
            v-if="form.id && editStatus"
            type="info"
            size="small"
            icon="Close"
            @click="
              () => {
                editStatus = false;
                getForm();
              }
            "
            >取消修改</el-button
          >
          <el-button
            v-if="form.id"
            type="success"
            size="small"
            icon="refresh"
            @click="getForm"
          >
            刷新
          </el-button>
          <el-button
            v-show="form.id && !editStatus && form.verifyStatus == 0"
            v-hasPermi="['business:archive:order:verify']"
            type="primary"
            size="small"
            icon="check"
            @click="verifyHandler"
            >审核通过</el-button
          >
          <el-button
            v-show="form.id && !editStatus && form.verifyStatus == 0"
            v-hasPermi="['business:archive:order:verify']"
            type="danger"
            size="small"
            icon="back"
            @click="rejectHandler"
            >驳回</el-button
          >
          <el-button
            v-show="form.alterNumber > 0 && !editStatus"
            v-hasPermi="['business:archive:order:history']"
            type="info"
            size="small"
            icon="Notebook"
            @click="showHistoryList"
            >历史记录</el-button
          >

          <div class="screen-btn" @click="handleScreen">
            <template v-if="!isFullscreen">
              <i class="fa fa-window-maximize" aria-hidden="true" />
              <!-- <span>全屏</span> -->
            </template>
            <template v-else>
              <i class="fa fa-window-restore" aria-hidden="true" />
              <!-- <span>还原</span> -->
            </template>
          </div>
          <div class="close-btn" @click="cancel">
            <i class="fa fa-times" aria-hidden="true" />
            <!-- <span>关闭</span> -->
          </div>
        </div>
        <div
          class="Y-scrollbar"
          style="
            position: absolute;
            top: 32px;
            bottom: 0;
            width: 100%;
            overflow: auto;
          "
        ></div>
        <el-form
          ref="orderRef"
          class="master-container"
          size="small"
          :model="form"
          :rules="rules"
          label-width="100px"
        >
          <el-row :gutter="30">
            <el-col :span="6">
              <el-form-item label="合同编号" prop="contractNo">
                <el-input
                  v-if="editStatus && type !== 'alterOrder'"
                  v-model="form.contractNo"
                  placeholder="请输入合同编号"
                  width="100px"
                />
                <span v-else>{{ form.contractNo }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同类型" prop="contractType">
                <el-radio-group
                  v-if="editStatus || type == 'alterOrder'"
                  v-model="form.contractType"
                  @change="contractTypeChangeHandler"
                >
                  <el-radio :label="0">新签</el-radio>
                  <el-radio :label="1">续签</el-radio>
                </el-radio-group>
                <span v-else>{{
                  form.contractType === 0 ? "新签" : "续签"
                }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户名称" prop="companyId">
                <template v-if="editStatus && type !== 'alterOrder'">
                  <el-autocomplete
                    :fetch-suggestions="querySearchCompanyAsync"
                    :trigger-on-focus="true"
                    v-model="form.companyName"
                    placeholder="请输入客户名称"
                    popper-class="my-autocomplete"
                    clearable
                    @clear="handleClearCompany"
                    @select="handleSelectCompany"
                    style="width: 100%"
                  >
                    <template #append>
                      <el-button icon="Plus" @click="showAddCompanyDialog">
                      </el-button>
                    </template>
                    <template #default="{ item }">
                      <div
                        style="
                          display: flex;
                          flex-direction: row;
                          justify-content: space-between;
                        "
                      >
                        <div class="name" style="font-size: 12px">
                          {{ item.name }}
                        </div>
                      </div>
                    </template>
                  </el-autocomplete>
                  <!-- <el-button @click="showAddCompanyDialog">
                    <el-icon class="el-input__icon">
                      <plus />
                    </el-icon>
                  </el-button> -->
                </template>
                <span v-else>{{ form.companyName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="签约日期" prop="formDate">
                <el-date-picker
                  v-if="editStatus && type !== 'alterOrder'"
                  clearable
                  v-model="form.formDate"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="请选择签约日期"
                >
                </el-date-picker>
                <span v-else>{{ form.formDate }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="签单人" prop="signerName">
                <el-autocomplete
                  v-if="editStatus && type !== 'alterOrder'"
                  :fetch-suggestions="querySearchAsync"
                  :trigger-on-focus="true"
                  style="width: 100%"
                  v-model="form.signerName"
                  placeholder="请输入签单人"
                  popper-class="my-autocomplete"
                  @select="handleSelectEmployee"
                >
                  <template #default="{ item }">
                    <div
                      style="
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                      "
                    >
                      <div class="name" style="font-size: 12px">
                        {{ item.nickName }}
                      </div>
                      <span
                        class="code"
                        style="font-size: 10px; color: darkgrey"
                        >{{ item.userName }}</span
                      >
                    </div>
                  </template>
                </el-autocomplete>
                <span v-else>{{ form.signerName }}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="form.verifyStatus === 4" :span="6">
              <el-form-item label="驳回原因" prop="verifyRemark">
                <span>{{ form.verifyRemark }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8" style="width: 100%">
              <el-form-item
                label="来源"
                prop="sourceCategoryName"
                style="width: 100%"
              >
                <CustomerFormCom
                  ref="CustomerFormComRef"
                  :edit-status="editStatus && type !== 'alterOrder'"
                  :form-data="form"
                  :source-categories="sourceCategories"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="客户标签" prop="customerLabelId">
                <span >{{ selectedOptionLabel }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="甲方" prop="boss">
                <el-input
                  v-if="editStatus"
                  v-model="form.boss"
                  style="width: 100%; margin: 0; padding: 0"
                  placeholder="请输入甲方"
                />
                <span v-else>{{ form.boss }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="备注" prop="remark">
                <el-input
                  v-if="editStatus"
                  v-model="form.remark"
                  show-word-limit
                  maxlength="200"
                  style="width: 100%; margin: 0; padding: 0"
                  placeholder="请输入备注"
                  type="textarea"
                  :rows="2"
                />
                <span v-else>{{ form.remark }}</span>
              </el-form-item>
            </el-col>
            <br />
            <el-col :span="24">
              <el-tabs
                v-model="form.serviceType"
                size="small"
                class="demo-tabs"
                @tab-change="handleServiceTypeClick"
              >
                <el-tab-pane :disabled="!editStatus" label="循环服务" :name="1">
                  <el-row>
                    <el-col :span="24">
                      <el-checkbox-group
                        :disabled="!editStatus"
                        v-model="loops"
                        @change="(arg) => changeDetails('loop', arg)"
                      >
                        <el-checkbox
                          v-for="(item, index) in loopTasks"
                          :key="index"
                          :label="item.id"
                          >{{ item.name }}</el-checkbox
                        >
                      </el-checkbox-group>
                    </el-col>
                    <el-col :span="24">
                      <el-row
                        v-for="(item, index) in loopDetails"
                        :key="index"
                        style="
                          border-radius: 5px;
                          border-color: rgba(0, 0, 0, 20%);
                          border-style: solid;
                          border-width: 1px;
                          margin-bottom: 10px;
                        "
                      >
                        <el-col :span="4" style="padding-top: 18px">
                          <el-form-item label="服务项目">
                            {{ item.taskTypeName }}
                          </el-form-item>
                        </el-col>
                        <el-col :span="4" style="padding-top: 18px">
                          <el-form-item label="月单价">
                            <el-input-number
                              v-if="editStatus"
                              v-model="item.price"
                              :precision="2"
                              :step="0.1"
                              :min="0"
                              :controls="false"
                              @change="
                                (arg) =>
                                  inputChangeHandler('loop', 'price', item, arg)
                              "
                            />
                            <div v-else>{{ rowNum(item.price) }}</div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="4" style="padding-top: 18px">
                          <el-form-item label="服务月数">
                            <el-input-number
                              v-if="editStatus"
                              v-model="item.serviceNum"
                              :step="1"
                              step-strictly
                              :min="0"
                              :controls="false"
                              @change="
                                (arg) =>
                                  inputChangeHandler(
                                    'loop',
                                    'serviceNum',
                                    item,
                                    arg
                                  )
                              "
                            />
                            <div v-else>{{ item.serviceNum }}</div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="4" style="padding-top: 18px">
                          <el-form-item label="赠送月数">
                            <el-input-number
                              v-if="editStatus"
                              v-model="item.freeNum"
                              :step="1"
                              step-strictly
                              :min="0"
                              :controls="false"
                              @change="
                                (arg) =>
                                  inputChangeHandler(
                                    'loop',
                                    'freeNum',
                                    item,
                                    arg
                                  )
                              "
                            />
                            <div v-else>{{ item.freeNum }}</div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="4" style="padding-top: 18px">
                          <el-form-item label="优惠金额">
                            <el-input-number
                              v-if="editStatus"
                              v-model="item.discountAmount"
                              :precision="2"
                              :step="0.1"
                              :min="0"
                              :controls="false"
                              @change="
                                (arg) =>
                                  inputChangeHandler('loop', 'discountAmount', item, arg)
                              "
                            />
                            <div v-else>{{ rowNum(item.discountAmount) }}</div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="4" style="padding-top: 18px">
                          <el-form-item label="合计金额">
                            <div>{{ rowNum(item.amount) }}</div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="4" style="padding-top: 18px" v-if="item.taskTypeId ==4">
                       
                        </el-col>
                        <el-col :span="4" style="padding-top: 18px" v-if="item.taskTypeId ==4">
                          <el-form-item label="所属区">
                            <el-select
                            v-if="editStatus"
                            v-model="item.belongRegion"
                            style="margin-right: 5px"
                          >
                            <el-option
                              v-for="item in belong_region"
                              :key="item.value"
                              :label="item.label"
                              :value="item.id"
                            ></el-option>
                          </el-select>
                          <span v-else>{{item.regionName}}</span>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-col>
              
                    <el-divider />
                  </el-row>
                </el-tab-pane>
                <el-tab-pane
                  :disabled="!editStatus "
                  label="代办服务"
                  :name="2"
                >
                  <el-checkbox-group
                    :disabled="!editStatus"
                    v-model="onces"
                    @change="(arg) => changeDetails('once', arg)"
                  >
                    <el-checkbox
                      v-for="(item, index) in onceTasks"
                      :key="index"
                      :label="item.id"
                      >{{ item.name }}</el-checkbox
                    >
                  </el-checkbox-group>
                  <el-col :span="24">
                    <el-row
                      v-for="(item, index) in onceDetails"
                      :key="index"
                      style="
                        border-radius: 5px;
                        border-color: rgba(0, 0, 0, 20%);
                        border-style: solid;
                        border-width: 1px;
                        margin-bottom: 10px;
                      "
                    >
                      <el-col :span="4" style="padding-top: 18px">
                        <el-form-item label="服务项目">
                          {{ item.taskTypeName }}
                        </el-form-item>
                      </el-col>
                      <el-col
                        v-if="item.payAddress === 1"
                        :span="9"
                        style="
                          padding-top: 18px;
                          padding-left: 35px;
                          display: flex;
                          flex-direction: column;
                          margin-bottom: 18px;
                        "
                      >
                        <el-radio-group
                          v-if="editStatus"
                          v-model="item.addressStyle"
                          @change="changeProcesses(item)"
                        >
                          <el-radio :label="1" style="margin-bottom: 5px">
                            <template #default>
                              <div
                                style="
                                  display: flex;
                                  flex-direction: row;
                                  width: 300px;
                                  justify-content: space-between;
                                "
                              >
                                <div
                                  style="
                                    display: inline-block;
                                    height: 24px;
                                    line-height: 24px;
                                    margin-right: 10px;
                                  "
                                >
                                  自有地址
                                </div>
                                <div>
                                  <el-select
                                    :disabled="item.addressStyle === 2"
                                    v-model="item.provinceCode"
                                    placeholder="省份"
                                    style="width: 36%"
                                    @change="handleSelectProvince(item, index)"
                                  >
                                    <el-option
                                      v-for="item in provincesArr[index]"
                                      :key="item.code"
                                      :label="item.name"
                                      :value="item.code"
                                    />
                                  </el-select>

                                  <el-select
                                    :disabled="item.addressStyle === 2"
                                    v-model="item.cityCode"
                                    placeholder="城市"
                                    style="width: 37%"
                                    @change="handleSelectCity(item, index)"
                                  >
                                    <el-option
                                      v-for="item in citiesArr[index]"
                                      :key="item.code"
                                      :label="item.name"
                                      :value="item.code"
                                    />
                                  </el-select>
                                  <el-select
                                    :disabled="item.addressStyle === 2"
                                    v-model="item.districtCode"
                                    placeholder="行政区"
                                    style="width: 37%"
                                    @change="handleSelectDistrict(item, index)"
                                  >
                                    <el-option
                                      v-for="item in districtsArr[index]"
                                      :key="item.code"
                                      :label="item.name"
                                      :value="item.code"
                                    />
                                  </el-select>
                                </div>
                              </div>
                            </template>
                          </el-radio>
                          <el-radio :label="2" style="margin-bottom: 5px">
                            <template #default>
                              <div
                                style="
                                  display: flex;
                                  flex-direction: row;
                                  width: 325px;
                                  justify-content: space-between;
                                "
                              >
                                <div
                                  style="
                                    display: inline-block;
                                    height: 24px;
                                    line-height: 24px;
                                    margin-right: 10px;
                                  "
                                >
                                  虚拟地址
                                </div>
                                <el-select
                                  :disabled="item.addressStyle !== 2"
                                  v-model="item.fictionAddressId"
                                  style="margin-right: 5px"
                                >
                                  <el-option
                                    v-for="item in virtual_address"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.id"
                                  ></el-option>
                                </el-select>
                                <div
                                  style="
                                    display: inline-block;
                                    height: 24px;
                                    line-height: 24px;
                                  "
                                >
                                  金额：
                                </div>
                                <el-input-number
                                  :disabled="item.addressStyle !== 2"
                                  v-if="editStatus"
                                  v-model="item.addressAmount"
                                  :precision="2"
                                  :step="0.01"
                                  step-strictly
                                  :controls="false"
                                  @change="
                                    (arg) =>
                                      inputChangeHandler(
                                        'once',
                                        'addressAmount',
                                        item,
                                        arg
                                      )
                                  "
                                />
                              </div>
                            </template>
                          </el-radio>
                        </el-radio-group>
                        <div
                          v-else
                          style="
                            display: flex;
                            flex-direction: row;
                            width: 300px;
                            justify-content: space-between;
                            font-size: 12px;
                          "
                        >
                          <div>
                            {{
                              item.addressStyle === 1
                                ? "自有地址"
                                : item.addressStyle === 2
                                ? "虚拟地址"
                                : ""
                            }}
                          </div>
                          <div v-if="item.addressStyle === 1">
                            注册地区：{{ item.province }} - {{ item.city }} -
                            {{ item.district }}
                          </div>
                          <div v-if="item.addressStyle === 2">
                            {{ (item.fictionAddress) }}
                          </div>
                          <div v-if="item.addressStyle === 2">
                            金额：{{ rowNum(item.addressAmount) }}
                          </div>
                        </div>
                      </el-col>
                      <el-col
                        v-if="item.payAddress === 0"
                        :span="9"
                        style="
                          padding-top: 18px;
                          display: flex;
                          flex-direction: column;
                          margin-bottom: 18px;
                        "
                      >
                        <el-form-item
                          v-if="item.taskTypeId === '6'"
                          label="变更类型"
                        >
                          <el-select
                            v-if="editStatus"
                            v-model="item.alterType"
                            style="width: 280px"
                          >
                            <el-option
                              v-for="alter in alterTypes"
                              :label="alter.label"
                              :key="alter.value"
                              :value="alter.value"
                            >
                            </el-option>
                          </el-select>
                          <div v-else>{{ item.alterType }}</div>
                        </el-form-item>
                        <div
                          v-if="item.alterType === '跨区变更'"
                          style="margin-left: 60px"
                        >
                          <el-radio-group
                            v-if="editStatus"
                            v-model="item.addressStyle"
                            @change="changeProcesses(item)"
                          >
                            <el-radio :label="1" style="margin-bottom: 5px">
                              <template #default>
                                <div
                                  style="
                                    display: flex;
                                    flex-direction: row;
                                    width: 300px;
                                    justify-content: space-between;
                                  "
                                >
                                  <div
                                    style="
                                      display: inline-block;
                                      height: 24px;
                                      line-height: 24px;
                                      margin-right: 10px;
                                    "
                                  >
                                    自有地址
                                  </div>
                                  <div>
                                    <el-select
                                      :disabled="item.addressStyle === 2"
                                      v-model="item.provinceCode"
                                      placeholder="省份"
                                      style="width: 33.33%"
                                      @change="
                                        handleSelectProvince(item, index)
                                      "
                                    >
                                      <el-option
                                        v-for="item in provincesArr[index]"
                                        :key="item.code"
                                        :label="item.name"
                                        :value="item.code"
                                      />
                                    </el-select>
                                    <el-select
                                      :disabled="item.addressStyle === 2"
                                      v-model="item.cityCode"
                                      placeholder="城市"
                                      style="width: 33.33%"
                                      @change="handleSelectCity(item, index)"
                                    >
                                      <el-option
                                        v-for="item in citiesArr[index]"
                                        :key="item.code"
                                        :label="item.name"
                                        :value="item.code"
                                      />
                                    </el-select>
                                    <el-select
                                      :disabled="item.addressStyle === 2"
                                      v-model="item.districtCode"
                                      placeholder="行政区"
                                      style="width: 33.33%"
                                      @change="
                                        handleSelectDistrict(item, index)
                                      "
                                    >
                                      <el-option
                                        v-for="item in districtsArr[index]"
                                        :key="item.code"
                                        :label="item.name"
                                        :value="item.code"
                                      />
                                    </el-select>
                                  </div>
                                </div>
                              </template>
                            </el-radio>
                            <el-radio :label="2" style="margin-bottom: 5px">
                              <template #default>
                                <div
                                  style="
                                    display: flex;
                                    flex-direction: row;
                                    width: 300px;
                                    justify-content: space-between;
                                  "
                                >
                                  <div
                                    style="
                                      display: inline-block;
                                      height: 24px;
                                      line-height: 24px;
                                      margin-right: 10px;
                                    "
                                  >
                                    虚拟地址
                                  </div>
                                  <el-select
                                    :disabled="item.addressStyle !== 2"
                                    v-model="item.fictionAddressId"
                                    style="margin-right: 5px"
                                  >
                                    <el-option
                                      v-for="item in virtual_address"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.id"
                                    ></el-option>
                                  </el-select>
                                  <div
                                    style="
                                      display: inline-block;
                                      height: 24px;
                                      line-height: 24px;
                                    "
                                  >
                                    金额：
                                  </div>
                                  <el-input-number
                                    :disabled="item.addressStyle !== 2"
                                    v-if="editStatus"
                                    v-model="item.addressAmount"
                                    :precision="2"
                                    :step="0.01"
                                    step-strictly
                                    :controls="false"
                                    @change="
                                      (arg) =>
                                        inputChangeHandler(
                                          'once',
                                          'addressAmount',
                                          item,
                                          arg
                                        )
                                    "
                                  />
                                </div>
                              </template>
                            </el-radio>
                          </el-radio-group>
                          <div
                            v-else
                            style="
                              display: flex;
                              flex-direction: row;
                              width: 300px;
                              justify-content: space-between;
                              font-size: 12px;
                            "
                          >
                            <div>
                              {{
                                item.addressStyle === 1
                                  ? "自有地址"
                                  : item.addressStyle === 2
                                  ? "虚拟地址"
                                  : ""
                              }}
                            </div>
                            <div v-if="item.addressStyle === 1">
                              注册地区：{{ item.province }} - {{ item.city }} -
                              {{ item.district }}
                            </div>
                            <div v-if="item.addressStyle === 2">
                              {{ item.fictionAddress }}
                            </div>
                            <div v-if="item.addressStyle === 2">
                              金额：{{ rowNum(item.addressAmount) }}
                            </div>
                          </div>
                        </div>
                        <el-form-item v-else label="办理地区">
                          <div
                            v-if="editStatus"
                            style="
                              display: flex;
                              flex-direction: row;
                              width: 280px;
                              justify-content: space-between;
                            "
                          >
                            <el-select
                              v-model="item.provinceCode"
                              placeholder="省份"
                              style="width: 33.33%"
                              @click.stop="null"
                              @change="handleSelectProvince(item, index)"
                            >
                              <el-option
                                v-for="item in provincesArr[index]"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code"
                              />
                            </el-select>
                            <el-select
                              v-model="item.cityCode"
                              placeholder="城市"
                              style="width: 33.33%"
                              @change="handleSelectCity(item, index)"
                              @click.stop="null"
                            >
                              <el-option
                                v-for="item in citiesArr[index]"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code"
                              />
                            </el-select>
                            <el-select
                              v-model="item.districtCode"
                              placeholder="行政区"
                              style="width: 33.33%"
                              @change="handleSelectDistrict(item, index)"
                              @click.stop="null"
                            >
                              <el-option
                                v-for="item in districtsArr[index]"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code"
                              />
                            </el-select>
                          </div>

                          <div
                            v-else
                            style="
                              display: flex;
                              flex-direction: row;
                              width: 300px;
                              justify-content: space-between;
                            "
                          >
                            {{ item.province }} - {{ item.city }} -
                            {{ item.district }}
                          </div>
                        </el-form-item>
                      </el-col>
                      <el-col
                        :span="7"
                        style="padding-top: 18px; margin-bottom: 18px"
                      >
                        <el-checkbox-group
                          :disabled="!editStatus"
                          v-model="item.processes"
                          @change="(arg) => changeProcesses(item, arg)"
                          style="display: flex; flex-direction: column"
                        >
                          <el-checkbox
                            v-for="(process, index) in item.defaultProcesses"
                            :key="index"
                            :label="process"
                          >
                            <template #default>
                              <div
                                style="
                                  display: flex;
                                  flex-direction: row;
                                  width: 300px;
                                  justify-content: space-between;
                                "
                              >
                                <div
                                  style="
                                    display: inline-block;
                                    height: 24px;
                                    line-height: 24px;
                                    margin-right: 10px;
                                    width: 80px;
                                  "
                                >
                                  {{ process.taskTypeDetailName }}
                                </div>
                                <div
                                  style="
                                    display: inline-block;
                                    height: 24px;
                                    line-height: 24px;
                                  "
                                >
                                  金额：
                                </div>
                                <el-input-number
                                  :disabled="
                                    checkedProcess(
                                      process.taskTypeDetailId,
                                      item
                                    )
                                  "
                                  size="small"
                                  v-if="editStatus"
                                  v-model="process.amount"
                                  :precision="2"
                                  :step="0.01"
                                  step-strictly
                                  :controls="false"
                                  style="width: 100px"
                                  @click.stop="null"
                                  @change="
                                    (arg) =>
                                      inputChangeHandler(
                                        'process',
                                        'amount',
                                        process,
                                        arg,
                                        item
                                      )
                                  "
                                />
                                <div
                                  v-else
                                  style="
                                    display: inline-block;
                                    height: 24px;
                                    line-height: 24px;
                                    width: 40px;
                                    text-align: right;
                                  "
                                >
                                  {{ rowNum(process.amount) }}
                                </div>
                              </div>
                            </template>
                            <!-- {{ process.name }} -->
                          </el-checkbox>
                        </el-checkbox-group>
                      </el-col>
                      <el-col
                        :span="3"
                        style="
                          padding-top: 18px;
                          display: flex;
                          flex-direction: column;
                          margin-bottom: 18px;
                        "
                      >
                        <div
                          style="
                            display: flex;
                            flex-direction: row;
                            font-size: 12px;
                          "
                        >
                          <div
                            style="
                              display: inline-block;
                              height: 24px;
                              line-height: 24px;
                              margin-left: 10px;
                            "
                          >
                            总金额：
                          </div>
                          <div
                            style="
                              display: inline-block;
                              height: 24px;
                              line-height: 24px;
                            "
                          >
                            {{ rowNum(item.amount) }}
                          </div>
                        </div>
                      </el-col>
                      <el-col :span="4" style="padding-top: 18px">
                  
                      </el-col>
                      <el-col
                      v-if="item.taskTypeId == 9 || item.taskTypeId == 8"
                        :span="9"
                        style="
                          padding-top: 18px;
                          display: flex;
                          flex-direction: column;
                          margin-bottom: 18px;
                        "
                      >
                      <el-form-item label="备注" prop="remark">
                       <el-input v-model = "item.remark" v-if="editStatus"/>
                       <div v-else>{{ item.remark }}</div>
                      </el-form-item>
                    </el-col>
                    </el-row>
                  </el-col>
                  <el-divider />
                </el-tab-pane>
              </el-tabs>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合计：" prop="remark">
                <span>{{ rowNum(form.amount) }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="优惠金额：">
                <span>{{ rowNum(form.discountAmount) }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="实收：">
                <div>{{ rowNum(form.trueAmount) }}</div>
              </el-form-item>
            </el-col>
            <br />
            <el-col :span="24">
              <div class="details-head" style="font-size: 12px">
                <div class="title">
                  <i class="fa fa-th-list" aria-hidden="true" /> 合同附件
                </div>
                <div class="details-btns-container" style="display: flex">
                  <el-upload
                    v-if="editStatus && type != 'alterOrder'"
                    action="#"
                    :http-request="upload"
                    :with-credentials="true"
                    :show-file-list="false"
                    multiple
                  >
                    <el-button style="margin-top: 10px; margin-bottom:10px;" size="small" type="primary" icon="Upload"
                      >点击上传</el-button>
                  </el-upload>
                </div>
              </div>
              <div class="details-body" style="height: 200px">
                <el-table
                  ref="filesTable"
                  :data="form.files"
                  size="small"
                  height="100%"
                  border
                  header-row-class-name="list-header-row"
                >
                  <el-table-column
                    type="index"
                    label="序号"
                    width="47"
                    align="center"
                  />
                  <el-table-column
                    label="文件名"
                    prop="originalFileName"
                    align="center"
                  >
                    <template #default="scope">
                      <el-link
                        :href="`${baseUrl}${scope.row.fileUrl}`"
                        :underline="false"
                        target="_blank"
                        type="primary"
                      >
                        {{ scope.row.originalFileName }}
                      </el-link>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="editStatus && type !== 'alterOrder'"
                    label="操作"
                    width="70"
                    align="center"
                  >
                    <template #default="scope">
                      <el-button
                        link
                        size="small"
                        type="danger"
                        @click="handleDelFile(scope.$index)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <br />
            </el-col>

            <el-col
              v-if="editStatus"
              :span="24"
              style="
                text-align: center;
                display: flex;
                flex-direction: row;
                justify-content: center;
              "
            >
              <el-button
                size="small"
                type="primary"
                icon="Finished"
                style="width: 160px"
                @click="submitForm"
                >保存</el-button
              >
            </el-col>
          </el-row>

          <br />
        </el-form>
      </div>
    </el-drawer>
    <el-dialog
      title="驳回详情"
      v-model="rejectOpen"
      width="500px"
      append-to-body
      draggable
      :close-on-click-modal = "false"
    >
      <el-form ref="dictRef" :model="form" label-width="100">
        <el-form-item label="驳回原因" :prop="verifyRemark">
          <el-input
            v-model.trim="form.verifyRemark"
            type="textarea"
            :rows="3"
            placeholder="请输入驳回原因"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            type="primary"
            icon="Finished"
            size="small"
            @click="verifyUpload(4)"
            >确 定</el-button
          >
          <el-button icon="close" size="small" @click="rejectCancel"
            >取 消</el-button
          >
        </div>
      </template>
    </el-dialog>
    <el-dialog
      title="是否续签"
      v-model="verifyOpen"
      width="600px"
      append-to-body
      draggable
    >
      <el-form ref="dictRef" :model="verifyForm" label-width="380" size="small">
        <el-form-item
          v-for="item in redirectDetails"
          :key="item.id"
          :label="`${item.taskTypeName}上个任务结束月：${item.endMonth}是否重新开始`"
        >
          <el-checkbox v-model="item.redirect" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            type="primary"
            icon="Finished"
            size="small"
            @click="redirectVerify()"
            >确 定</el-button
          >
          <el-button icon="close" size="small" @click="verifyFormClose"
            >取 消</el-button
          >
        </div>
      </template>
    </el-dialog>
    <AddCompanyDialog ref="addCompanyDialogRef" />
    <dialog-history-choice
      ref="historyChoiceRef"
      @choice="historyChoiceHandle"
    />
  </div>
</template>
<script setup>
import { uploadFile } from "@/api/tool/file";
import { listLableNoPage } from "@/api/business/lable";
import AddCompanyDialog from "../AddCompanyDialog";
import match from "@/utils/match";
import {
  getOrder,
  initTaskTypes,
  addOrder,
  updateOrder,
  verifyOrder,
  alterOrder,
  dissolutionOrder,
  verifyCheckOrder,
} from "@/api/business/crm/contract";
import { listSource } from "@/api/settings/source";
import { listCompany } from "@/api/business/crm/company";
import { listUser } from "@/api/system/user";
import CustomerFormCom from "@/components/CustomerFormCom";
import DialogHistoryChoice from "@/views/dialog/DialogHistoryChoice.vue";
import { formatDate, rowNum } from "@/utils/index";
import { ref } from "vue";
import useUserStore from "@/store/modules/user";
// import { it } from "element-plus/es/locale";
const { proxy } = getCurrentInstance();
const verifyOpen = ref(false);
const verifyForm = ref({});
const redirectDetails = ref([]);
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const historyChoiceRef = ref(null);
const alterTypes = ref([
  {
    value: "普通变更",
    label: "普通变更",
  },
  {
    value: "股权变更",
    label: "股权变更",
  },
  {
    value: "减资",
    label: "减资",
  },
  {
    value: "跨区变更",
    label: "跨区变更",
  },
]);

/** 父组件传参 */
const props = defineProps({
  getList: {
    type: Function,
    default: () => {},
  },
});
const { getList } = toRefs(props);
/** 字典数组区 */
const { virtual_address } = proxy.useDict("virtual_address");
const { belong_region } = proxy.useDict("belong_region");

/** 表单抽屉 页变量 */
const title = ref("");
const loading = ref(false);
const multiple = ref(true);
const visible = ref(false);
const editStatus = ref(false);
const loopTasks = ref([]);
const onceTasks = ref([]);
const sourceCategories = ref([]);
const loops = ref([]);
const onces = ref([]);
const type = ref("");
const addCompanyDialogRef = ref(null);

const rejectOpen = ref(false);

// 循环任务明细
const loopDetails = ref([]);
// 单次任务明细
const onceDetails = ref([]);
const detailEmpty = {
  id: null,
  taskTypeName: "",
  taskTypeId: null,
  serviceNum: undefined,
  freeNum: undefined,
  price: undefined,
  amount: undefined,
  addressStyle: undefined,
  address: undefined,
  fictionAddressId: undefined,
  tenantId: undefined,
  province: "",
  city: "",
  district: "",
  addressStyle: 1,
  provinceId: undefined,
  processes: [],
  defaultProcesses: [],
};

//地址数组
const provincesArr = ref([]);
const citiesArr = ref([]);
const districtsArr = ref([]);

const provinces = ref(proxy.region.getProvinces());
provinces.value.unshift({ code: "", name: "全部" });
const cities = ref([]);
const districts = ref([]);
const options = ref([]);
const contractEmpty = {
  serviceType: 1,
  contractType: 0,
  formDate: formatDate(new Date(), "yyyy-MM-dd"),
  signerId: useUserStore().user.userId,
  signerName: useUserStore().user.nickName,
  files: [],
};
const isFullscreen = ref(false);
const webHost = import.meta.env.VITE_APP_BASE_API;
const data = reactive({
  form: {},
  rules: {
    contractNo: [
      { required: true, message: "合同编号不能为空", trigger: "blur" },
    ],
    companyId: [{ required: true, message: "请选择有效客户", trigger: "blur" }],
    formDate: [
      { required: true, message: "签约日期不能为空", trigger: "blur" },
    ],
    amount: [{ required: true, message: "签约金额不能为空", trigger: "blur" }],
    // signerName: [
    //   { required: true, message: "签单人不能为空", trigger: "change" },
    // ],
    contractType: [
      { required: true, message: "合同类型不能为空", trigger: "change" },
    ],
    serviceType: [
      { required: true, message: "任务类型不能为空", trigger: "change" },
    ],
    // sourceCategoryName: [
    //   { validator: sourceValidator, trigger: "change" },
    //   { required: true, message: "客户来源不能为空", trigger: "change" },
    // ],
  },
});
const { form, rules } = toRefs(data);
/***********************  方法区  ****************************/
/** 打开抽屉 */
function open(id) {
  reset();
  
  visible.value = true;
  if (id) {
    Promise.all([initTaskTypes(), listSource(), getOrder(id)]).then((res) => {
      loopTasks.value = res[0].data.loopTasks;
      onceTasks.value = res[0].data.onceTasks;
      sourceCategories.value = res[1].rows;
      form.value = res[2].data;
      type.value =
        type.value == "" && form.value.status === 8 ? "alterOrder" : type.value;
      parseDetail(form.value.details, form.value);
      // console.log(onceDetails.value)
      editStatus.value = false;
      title.value = "修改订单信息";
      initRegion();
    });
    // getOrder(id).then(response => {
    // })
  } else {
    Promise.all([initTaskTypes(), listSource()]).then((res) => {
      loopTasks.value = res[0].data.loopTasks;
      onceTasks.value = res[0].data.onceTasks;
      sourceCategories.value = res[1].rows;
    });
    editStatus.value = true;
    title.value = "添加订单信息";
  }
  getOption()
}
function getOption(){
  listLableNoPage().then(res =>{
     options.value = res.data
  })
}
const selectedOptionLabel = computed(() => {
      const selectedOption = options.value.find(option => option.id === form.value.customerLabelId);
      return selectedOption ? selectedOption.lable : '';
    });

function openSimple(id, optionType) {
  reset();
  visible.value = true;
  type.value = optionType || "";

  if (id) {
    Promise.all([initTaskTypes(), listSource(), getOrder(id)]).then((res) => {
      loopTasks.value = res[0].data.loopTasks;
      onceTasks.value = res[0].data.onceTasks;
      sourceCategories.value = res[1].rows;
      form.value = res[2].data;

      parseDetail(form.value.details, form.value);

      title.value = "合同变更信息";
      if (type.value != "") {
        editStatus.value = true;
      } else {
        editStatus.value = false;
      }
    });
  } else {
    Promise.all([initTaskTypes(), listSource()]).then((res) => {
      loopTasks.value = res[0].data.loopTasks;
      onceTasks.value = res[0].data.onceTasks;
      sourceCategories.value = res[1].rows;
    });
    editStatus.value = true;
    title.value = "添加订单信息";
  }
}

/** 取消按钮 */
function cancel() {
  visible.value = false;
  reset();
}

/** 表单重置 */
function reset() {
  form.value = JSON.parse(JSON.stringify(contractEmpty));
  loops.value = [];
  onces.value = [];
  loopDetails.value = [];
  onceDetails.value = [];
  type.value = "";
  // console.log(form)
  proxy.resetForm("orderRef");
}

/** 全屏缩放 */
function handleScreen() {
  const dom = document.querySelector(
    ".list-container > .el-drawer__wrapper > .el-overlay"
  );
  isFullscreen.value = !isFullscreen.value;
  dom.style.position = isFullscreen.value ? "fixed" : "absolute";
}

function sourceValidator(rule, value, callback) {
  if (form.value.sourceCategoryName === "") {
    callback(new Error("来源类型不能为空"));
    return;
  }
  if (
    form.value.referrerDataSource !== "" &&
    form.value.referrerDataSource != null &&
    form.value.sourceName === ""
  ) {
    callback(new Error("来源不能为空"));
    return;
  }
  return callback();
}

/** 提交按钮 */
function submitForm() {
  const query = { userId: form.value.signerId };
  const users = [];
  listUser(query).then((res) => {
    users.value = res.rows;
    console.log(form.value.signerId);
    // if (users.value.length == 1) {
    //   if (
    //     form.value.signerId == users.value[0].userId &&
    //     form.value.signerName == users.value[0].nickName
    //   ) {
    //   } else {
    //     proxy.$modal.msgError("请选择有效签单人");
    //     return;
    //   }
    // } else {
    //   proxy.$modal.msgError("请选择有效签单人");
    //   return;
    // }
    const companyQuery = { id: form.value.companyId };
    const companys = [];
    listCompany(companyQuery).then((res) => {
      companys.value = res.rows;
      if (companys.value.length == 1) {
        if (
          form.value.companyId == companys.value[0].id &&
          form.value.companyName == companys.value[0].name
        ) {
        } else {
          proxy.$modal.msgError("请选择有效客户");
          return;
        }
      } else {
        proxy.$modal.msgError("请选择有效客户");
        return;
      }

      proxy.$refs["orderRef"].validate((valid) => {
        if (valid && detailValid() && amountValid()) {
          const formValue = form.value;
          formValue.details =
            form.value.serviceType === 1
              ? loopDetails.value
              : onceDetails.value;
          if (formValue.id != null) {
            if (formValue.companyId !== null) {
              if (type.value == "") {
                updateOrder(formValue).then((response) => {
                  proxy.$modal.msgSuccess("修改成功");
                  visible.value = false;
                  getList.value();
                });
              } else if (type.value == "alterOrder") {
                alterOrder(formValue).then((response) => {
                  proxy.$modal.msgSuccess("修改成功");
                  visible.value = false;
                  getList.value();
                });
              } else if (type.value == "dissolutionOrder") {
                dissolutionOrder(formValue).then((response) => {
                  proxy.$modal.msgSuccess("修改成功");
                  visible.value = false;
                  getList.value();
                });
              } else {
                proxy.$modal.msgError("请选择有效客户");
              }
            }
          } else {
            addOrder(formValue).then((response) => {
              proxy.$modal.msgSuccess("新增成功");
              visible.value = false;
              getList.value();
            });
          }
        }
      });
    });
  });
}

function detailValid() {
  if (form.value.serviceType === 1) {
    // 循环服务
    if (loopDetails.value.length === 0) {
      proxy.$modal.msgError("请选择至少一条任务");
      return false;
    }
    // loopDetails.forEach((item, index) => {
    for (let i = 0; i < loopDetails.value.length; i++) {
      let item = loopDetails.value[i];
      if (
        (item.freeNum ? Number(item.freeNum) : 0) +
          (item.serviceNum ? Number(item.serviceNum) : 0) <=
        0
      ) {
        proxy.$modal.msgError(`${item.taskTypeName}服务月数不能为0`);
        return false;
      }
      if (item.price == null || item.price === "") {
        proxy.$modal.msgError(`${item.taskTypeName}请填写服务单价`);
        return false;
      }
    }
  } else if (form.value.serviceType === 2) {
    // 代账服务
    if (onceDetails.value.length === 0) {
      proxy.$modal.msgError("请选择至少一条任务");
      return false;
    }
    for (let i = 0; i < onceDetails.value.length; i++) {
      let item = onceDetails.value[i];
      if (item.payAddress === 1) {
        if (item.addressStyle == null) {
          proxy.$modal.msgError("请选择注册地址类型");
          return false;
        }
        if (
          item.addressStyle === 1 &&
          (item.province == null || item.city == null || item.district == null)
        ) {
          proxy.$modal.msgError("请选择注册区域");
          return false;
        }
        console.log(item);
        if (item.addressStyle === 2 && item.fictionAddressId == null) {
          proxy.$modal.msgError("请选择虚拟地址");
          return false;
        }
        if (item.addressStyle === 2 && item.addressAmount == undefined) {
          proxy.$modal.msgError("请填写虚拟地址金额");
          return false;
        }
      }
      if (
        item.payAddress === 0 &&
        (item.province == null || item.city == null || item.district == null)
      ) {
        proxy.$modal.msgError("请选择办理地区");
        return false;
      }
      for (let j = 0; j < item.processes.length; j++) {
        let process = item.processes[j];
        if (process.amount == undefined) {
          proxy.$modal.msgError(`${process.taskTypeDetailName}请填写金额`);
          return false;
        }
      }
    }
  }
  return true;
}

function amountValid() {
  if (form.value.trueAmount < 0) {
    proxy.$modal.msgError("实收金额不可小于0");
    return false;
  }
  return true;
}

/** 查询表单信息  */
function getForm() {
  proxy.$refs.orderRef.resetFields();
  loading.value = true;
  getOrder(form.value.id).then((response) => {
    loading.value = false;
    form.value = response.data;
    type.value =
      type.value == "" && form.value.status === 8 ? "alterOrder" : type.value;
  });
}
function handleServiceTypeClick(tab) {
  computedService();
}

function changeDetails(type, arg) {
  switch (type) {
    case "loop":
      arg.forEach((e) => {
        const taskType = loopTasks.value.find((v) => v.id == e);
        if (loopDetails.value.findIndex((v) => v.taskTypeId == e) < 0) {
          const newDetail = JSON.parse(JSON.stringify(detailEmpty));
          newDetail.taskTypeId = e;
          newDetail.taskTypeName = taskType.name;
          loopDetails.value.push(newDetail);
        }
      });
      loopDetails.value = loopDetails.value.filter(
        (v) => arg.findIndex((e) => e == v.taskTypeId) > -1
      );
      break;
    case "once":
      arg.forEach((e) => {
        const taskType = onceTasks.value.find((v) => v.id == e);
        if (onceDetails.value.findIndex((v) => v.taskTypeId == e) < 0) {
          const newDetail = JSON.parse(JSON.stringify(detailEmpty));
          newDetail.taskTypeId = e;
          newDetail.taskTypeName = taskType.name;
          newDetail.payAddress = taskType.payAddress;
          (newDetail.alterType = e === "6" ? "普通变更" : ""),
            (newDetail.defaultProcesses = taskType.processes.map((v) => ({
              taskTypeId: e,
              taskTypeDetailId: v.id,
              taskTypeDetailName: v.name,
              fictionAddressId: null,
              fictionAddress: "",
              addressStyle: 0,
              checked: false,
              amount: undefined,
            })));
          newDetail.processes = [];
          onceDetails.value.push(newDetail);
        }
      });
      onceDetails.value = onceDetails.value.filter(
        (v) => arg.findIndex((e) => e == v.taskTypeId) > -1
      );

      let provincesLength = provincesArr.value.length;

      if (onceDetails.value.length > provincesLength) {
        for (let i = 0; i < onceDetails.value.length - provincesLength; i++) {
          provincesArr.value.push(provinces.value);
          citiesArr.value.push(cities.value);
          districtsArr.value.push(districts.value);
        }
      } else if (onceDetails.value.length < provincesLength) {
        for (let i = 0; i < provincesLength - onceDetails.value.length; i++) {
          provincesArr.value.length--;
          citiesArr.value.length--;
          districtsArr.value.length--;
        }
      }
      break;
    default:
      break;
  }
}

function inputChangeHandler(type, field, item, value, parent) {
  console.log(111,type, field, item, value, parent);
  let amount = 0;
  switch (type) {
    case "loop":
      switch (field) {
        case "price":
          amount =
            (item.serviceNum ? Number(item.serviceNum) : 0) *
            (value ? Number(value) : 0) -(item.discountAmount?Number(item.discountAmount):0);
          item.amount = amount;
          break;
        case "serviceNum":
          amount =
            (item.price ? Number(item.price) : 0) * (value ? Number(value) : 0)  -(item.discountAmount?Number(item.discountAmount):0);
          item.amount = amount;

          break;
        case "freeNum":
          amount =
            (item.price ? Number(item.price) : 0) *
            (item.serviceNum ? Number(item.serviceNum) : 0)  -(item.discountAmount?Number(item.discountAmount):0);
          item.amount = amount;
          break;
        case "discountAmount":
          amount =
            (item.price ? Number(item.price) : 0) *
            (item.serviceNum ? Number(item.serviceNum) : 0)  -(value ? Number(value) : 0);
            item.amount = amount;
          }
      break;
    case "once":
      computedItem(item);
      break;
    case "process":
      computedItem(parent);
      break;
    default:
      break;
  }
  computedService();
}
function computedItem(parent) {
  let amount = 0;
  amount +=
    parent.payAddress === 1 && parent.addressStyle === 2 && parent.addressAmount
      ? Number(parent.addressAmount)
      : 0;
  amount +=
    parent.taskTypeId === "6" &&
    parent.alterType === "跨区变更" &&
    parent.addressStyle === 2 &&
    parent.addressAmount
      ? Number(parent.addressAmount)
      : 0;
  parent.processes.forEach((l) => {
    amount += l.amount ? Number(l.amount) : 0;
  });
  parent.amount = amount;
}

function computedService() {
  //子表中的实际金额
  let amount = 0;
  let discountAmount = 0;
  let trueAmount = 0;
  switch (form.value.serviceType) {
    case 1:
      loopDetails.value.forEach((l) => {
        amount += l.amount;
        discountAmount += l.discountAmount;
        trueAmount += l.trueAmount;
      });
      amount = amount >= 0 ? amount : 0;
      discountAmount = discountAmount >= 0 ? discountAmount : 0;
      break;
    case 2:
      onceDetails.value.forEach((l) => {
        amount +=
          l.payAddress === 1 && l.addressStyle === 2 && l.addressAmount
            ? Number(l.addressAmount)
            : 0;
        l.processes.forEach((v) => {
          amount += v.amount ? Number(v.amount) : 0;
        });
      });
      break;
  }
  form.value.discountAmount = discountAmount;
  form.value.trueAmount =amount
  form.value.amount =  match.add(amount,discountAmount);
}

/** 输入框输出建议 */
function querySearchAsync(queryString, cb) {
  const query = { keyword: queryString };
  listUser(query).then((res) => {
    cb(res.rows);
  });
}

function querySearchCompanyAsync(queryString, cb) {
  const query =
    queryString.length > 0
      ? {
          keyword: queryString,
          pageSize: 50,
          pageNum: 1,
          orderByColumn: "create_time",
        }
      : { pageSize: 50, pageNum: 1, orderByColumn: "create_time" };
  listCompany(query).then((res) => {
    cb(res.rows);
  });
}
function handleSelectEmployee(item) {
  form.value.signerName = item.nickName;
  form.value.signerId = item.userId;
}

function handleSelectCompany(item) {
  form.value.companyName = item.name;
  form.value.companyId = item.id;
  form.value.customerLabelId = item.customerLabelId
}
function handleClearCompany(){
  form.value.customerLabelId = "";
}
function handleSelectProvince(item, index) {
  const _provinceCode = item.provinceCode;
  const _province = provincesArr.value[index].find((i) => {
    return i.code === _provinceCode;
  });

  item.province = _province.name;
  citiesArr.value[index] = proxy.region.getCities(_provinceCode);

  if (citiesArr.value[index].length === 0) {
    // 清空城市数据
    item.cityCode = "";
    item.city = "";
    cities.value = [{ code: "", name: "全部" }];
    // 清空行政区数据
    item.districtCode = "";
    item.district = "";

    districts.value = [{ code: "", name: "全部" }];
  } else {
    citiesArr.value[index].unshift({ code: "", name: "全部" });
    item.cityCode = citiesArr.value[index][0].code;
    item.city = citiesArr.value[index][0].name;
    handleSelectCity(item, index);
  }
}

function handleSelectCity(item, index) {
  const _cityCode = item.cityCode;
  const _city = citiesArr.value[index].find((i) => {
    return i.code === _cityCode;
  });
  item.city = _city.name;
  districtsArr.value[index] = proxy.region.getDistricts(_cityCode);
  if (districtsArr.value[index].length === 0) {
    // 清空行政区数据
    item.districtCode = "";
    item.district = "";
    districtsArr.value[index] = [{ code: "", name: "全部" }];
  } else {
    districtsArr.value[index].unshift({ code: "", name: "全部" });
    item.districtCode = districtsArr.value[index][0].code;
    item.district = districtsArr.value[index][0].name;
  }
}

function handleSelectDistrict(item, index) {
  const _districtCode = item.districtCode;
  const _district = districtsArr.value[index].find((i) => {
    return i.code === _districtCode;
  });
  item.district = _district.name;
}

function getProcess(item) {
  const typeItem = onceTasks.value.find((i) => i.id === item.taskTypeId);
  return typeItem.processes;
}

function checkedProcess(processId, item) {
  const processes = item.processes;
  return processes.findIndex((v) => v.taskTypeDetailId == processId) < 0;
}

function changeProcesses(item) {
  computedItem(item);
  computedService();
}

function parseDetail(details, form) {
  loops.value = [];
  onces.value = [];
  loopDetails.value = [];
  onceDetails.value = [];
  switch (form.serviceType) {
    case 1:
      // 循环任务
      details.forEach((i) => {
        loops.value.push(i.taskTypeId);
        loopDetails.value.push(i);
      });
      break;
    case 2:
      // 代办任务
      details.forEach((i) => {
        onces.value.push(i.taskTypeId);
        const taskType = onceTasks.value.find((j) => j.id === i.taskTypeId);
        onceDetails.value.push({
          ...i,
          defaultProcesses: parseProcess(i, taskType.processes),
        });
        onceDetails.value.forEach((j) => {
          j.processes = j.defaultProcesses.filter((v) => v.checked);
        });
      });
      break;
    default:
      break;
  }
}

function parseProcess(item, processes) {
  return processes.map((l) => {
    // console.log(item.processes.find((i) => i.taskTypeDetailId === l.id));
    if (item.processes.findIndex((i) => i.taskTypeDetailId === l.id) < 0) {
      return {
        taskTypeId: item.taskTypeId,
        taskTypeDetailId: l.id,
        taskTypeDetailName: l.name,
        checked: false,
        amount: undefined,
      };
    } else {
      return {
        ...item.processes.find((i) => i.taskTypeDetailId === l.id),
        checked: true,
      };
    }
  });
}

function verifyHandler() {
  proxy.$modal
    .confirm("是否确认审核?")
    .then((_) => {
      verifyCheckOrder(form.value).then((res) => {
        if (res.data == null) {
          verifyUpload(1);
        } else {
          verifyOpen.value = true;
          redirectDetails.value = res.data;
        }
      });
    })
    .catch((_) => {
      proxy.$modal.msg("取消审核");
    });
}

function verifyFormClose() {
  redirectDetails.value = [];
  verifyForm.value = {};
  verifyOpen.value = false;
}

function redirectVerify() {
  redirectDetails.value.forEach((l) => {
    const index = form.value.details.findIndex((v) => v.id === l.id);
    form.value.details[index].redirect = l.redirect;
  });
  verifyUpload(1);
  verifyFormClose();
}

function rejectHandler() {
  rejectOpen.value = true;
}

function rejectCancel() {
  rejectOpen.value = false;
}

function rejectSubmitHandler() {
  if (form.value.verifyRemark === "" || form.value.verifyRemark == null) {
    proxy.$modal.msgError("请填写驳回原因");
    return;
  }
}

function verifyUpload(status) {
  const formValue = proxy.deepClone(form.value);
  formValue.verifyStatus = status;
  formValue.status = status;
  verifyOrder(formValue).then((res) => {
    getForm();
    getList.value();
    rejectCancel();
    proxy.$modal.msgSuccess("保存成功");
  });
}

/** 文件上传 */
function upload(param) {
  const formData = new FormData();
  formData.append("file", param.file);
  uploadFile(formData).then((res) => {
    if (res.code === 200) {
      const file = {};
      file.fileName = res.newFileName;
      file.url = res.url;
      file.originalFileName = res.originalFilename;
      file.fileUrl = res.fileName;
      form.value.files.push(file);
    }
  });
}

function handleDelFile(index) {
  form.value.files.splice(index, 1);
}

function initRegion() {
  console.log("initRegion开始", form.value);

  for (let i = 0; i < form.value.details.length; i++) {
    cities.value = proxy.region.getCities(form.value.details[i].provinceCode);
    cities.value.unshift({ code: "", name: "全部" });
    districts.value = proxy.region.getDistricts(form.value.details[i].cityCode);
    districts.value.unshift({ code: "", name: "全部" });
    console.log("市", cities.value);

    provincesArr.value.push(provinces.value);
    citiesArr.value.push(cities.value);
    districtsArr.value.push(districts.value);
  }
}

function showAddCompanyDialog() {
  addCompanyDialogRef.value.open();
}

function contractTypeChangeHandler() {
  if (form.value.contractType === 1) {
    form.value.serviceType = 1;
  }
}

function showHistoryList() {
  historyChoiceRef.value.open(
    form.value.fromId === "0" ? form.value.id : form.value.fromId
  );
}

function historyChoiceHandle(row) {
  open(row.id);
}

/** 暴露给父组件的方法 */
defineExpose({
  open,
  openSimple,
});
</script>
<style scoped>
.my-autocomplete .el-input-group__append {
  padding: 0 10px !important;
}
</style>