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>
                <el-link :underline="false" type="primary" @click="handleInfo(form)" v-else>{{ form.companyName
                  }}</el-link>
              </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="6" 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="6">
              <el-form-item label-width="100px" 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="6">
              <el-form-item label="乙方" prop="party">
                <el-input v-if="editStatus" v-model="form.party" style="width: 100%; margin: 0; padding: 0"
                          placeholder="请输入乙方名称" />
                <span v-else>{{ form.party }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item  style="display: flex;flex-wrap: nowrap;"  label="客户历史使用名" prop="oldName">
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content=""
                    placement="top"
               >
                  <template #content>{{form.oldName}}</template>
              <span :show-overflow-tooltip="true" style="white-space: nowrap; /* 防止换行 */ overflow: hidden; /* 如果内容宽度超过span定义的宽度，则隐藏超出部分 */
  text-overflow: ellipsis; /* 可选，如果想要超出部分显示为省略号 */">{{ form.oldName}}</span>
                </el-tooltip>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item v-if="!editStatus" label="合同状态" prop="status">
                <dict-tag :options="contract_status" :value="form.status" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item v-if="!editStatus && form.dissolution === 1" label="解除时间" prop="dissolution">
                <span >{{ form.dissDate }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label="备注" prop="remark">
                <el-input v-if="editStatus" v-model="form.remark" show-word-limit maxlength="250"
                          style="width: 100%; margin: 0; padding: 0" placeholder="请输入备注" type="textarea" :rows="4" />
                <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 v-model="loops" @change="(arg) => changeDetails('loop', arg)">
                        <el-checkbox v-for="(item, index) in loopTasks" :key="index" :label="item.id"
                                     :disabled="item.isDisabled || !editStatus">{{ 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" :disabled="item.monthDisabled" :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"
                                             :disabled="item.monthDisabled"     :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">
                          <el-form-item label="服务区间"
                                        v-if="item.timeVo != null && item.timeVo != undefined &&  type !== 'alterOrder'">
                            <div>{{timeVoFormat(item.timeVo)}}</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="region in belong_region" :key="region.value" :label="region.label"
                                         :value="region.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" 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" />
    <company-form ref="companyRef" :get-list="getList"></company-form>
    <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 companyForm from "@/views/business/crm/company/formView.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 { contract_status } = proxy.useDict("contract_status");
/** 表单抽屉 页变量 */
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: editStatus.value ? false : 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" },
  //   ],
  // },
});

const rules = computed(() => ({
  contractNo: [
    { required: true, message: "合同编号不能为空", trigger: "blur" },
  ],
  companyId: [
    { required: type.value == "alterOrder" ? false : true, message: "请选择有效客户", trigger: "blur" },
  ],
  formDate: [
    { required: type.value == "alterOrder" ? false : true, message: "签约日期不能为空", trigger: "blur" },
  ],
  amount: [
    { required: true, message: "签约金额不能为空", trigger: "blur" },
  ],
  contractType: [
    { required: true, message: "合同类型不能为空", trigger: "change" },
  ],
  serviceType: [
    { required: true, message: "任务类型不能为空", trigger: "change" },
  ],
  party: [
    { required: true, message: "乙方不能为空", trigger: "blur" },
  ],
}));
const { form, } = toRefs(data);

/***********************  方法区  ****************************/

onActivated(() => {
  getForm();
})

/** 打开抽屉 */
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;
      console.log("loopTasks.value", loopTasks.value);
      loopTasks.value.forEach(item => {
        form.value.details.forEach(item2 => {
          if (item2.taskTypeId == item.id) {
            item.isDisabled = item2.disabled
          }
        })
      })


      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 = "添加订单信息";
  }
}
watch(editStatus, (newValue) => {
  console.log('editStatus changed:', newValue);
});
/** 取消按钮 */
function cancel() {
  visible.value = false;
  reset();
}
function handleInfo(row) {
  proxy.$refs.companyRef.open(row.companyId);
}
/** 表单重置 */
function reset() {
  form.value = JSON.parse(JSON.stringify(contractEmpty));
  loops.value = [];
  onces.value = [];
  loopDetails.value = [];
  onceDetails.value = [];
  type.value = "";
  proxy.resetForm("orderRef");
  // belong_region.value.forEach(item => {
  //   item.id = Number(item.id)
  // })
}
/** 全屏缩放 */
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.forEach(item => {
          //   item.timeVo = null
          // })



          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() {
  if(!form.value.id){
    return;
  }
  proxy.$refs.orderRef.resetFields();
  loading.value = true;
  return 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
      );

      computedService()
      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;
        if (l.alterType === "跨区变更" && l.addressStyle === 2 && l.addressAmount) {
          amount += Number(l.addressAmount)
        }
        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) {
  console.log(item)
  form.value.companyName = item.name;
  form.value.oldName = item.oldName;
  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((_) => {

        // form.value.details.forEach(item => {
        //   item.timeVo = null
        // })
        verifyCheckOrder(form.value).then((res) => {
          console.log(123, 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);
}
const timeVoFormat = (timeVo)=>{
  if(null !== timeVo.startTime) {
    return proxy.moment(timeVo.startTime).format("yyyy-MM") + " ~ " + proxy.moment(timeVo.endTime).format("yyyy-MM")
  }else{
    return ""
  }
}
const handleResize = (row) => {
  console.log("aa")
}
/** 暴露给父组件的方法 */
defineExpose({
  open,
  openSimple,
});
</script>
<style scoped>
.my-autocomplete .el-input-group__append {
  padding: 0 10px !important;
}
</style>