supply-front/src/views/commercialEngineering/components/base.vue

<!-- eslint-disable vue/valid-v-on -->
<template>
  <div>
    <h3 class="title">
      <div>{{ title }}</div>
      <div class="title-right">格力商用空调登录表提示：带*的为必填项</div>
    </h3>
    <el-divider />
    <div class="diy-table-1">
      <el-row :gutter="0">
        <el-col v-if="['cross'].includes(pageType)" :xs="24" :sm="24" :lg="24" class="item">
          <div class="label">项目性质*：</div>
          <div class="value">
            <el-radio-group v-model="formData.orderType" style="width: 100%" @change="initTradeData">
              <el-radio
                v-for="item in [
                  { label: '工装', value: 'WORK' },
                  { label: '家装', value: 'HOME' }
                ]"
                :key="item.value"
                :label="item.value"
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col :xs="24" :sm="['add'].includes(module) ? 12 : 24" :lg="['add'].includes(module) ? 12 : 24" class="item">
          <div class="label">销售公司名称：</div>
          <div class="value">
            <el-input v-model="formData.salesCompanyName" disabled placeholder="请填写" clearable />
            <CopyButton v-if="module !== 'add'" :copyText="formData.salesCompanyName" />
          </div>
        </el-col>
        <template v-if="!['add'].includes(module)">
          <el-col :xs="24" :sm="12" :lg="8" class="item">
            <div class="label">工程登录类型：</div>
            <div class="value">
              <el-input :value="formData.orderType === 'WORK' ? '工装' : '家装'" placeholder="请填写" clearable />
              <CopyButton v-if="module !== 'add'" :copyText="formData.orderType" />
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="8" class="item">
            <div class="label">项目编号：</div>
            <div class="value">
              <el-input v-model="formData.projectNo" placeholder="请填写" clearable />
              <CopyButton v-if="module !== 'add'" :copyText="formData.projectNo" />
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="8" class="item">
            <div class="label">登录时间：</div>
            <div class="value">
              <el-input v-model="formData.createTime" placeholder="请填写" clearable />
              <CopyButton v-if="module !== 'add'" :copyText="formData.createTime" />
            </div>
          </el-col>
        </template>
        <el-col :xs="24" :sm="12" :lg="12" class="item">
          <div class="label">{{ ['cross'].includes(pageType) ? '业务所在区域' : '项目所在区域' }}*：</div>
          <div class="value">
            <el-select
              v-model="formData.projectArea"
              placeholder="请选择"
              clearable
              filterable
              @change="handleProjectArea"
            >
              <el-option
                v-for="item in commonData.dict['TRADE_PROJECT_AREA']"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <CopyButton
              v-if="module !== 'add'"
              :copyText="getCopyText(commonData.dict['TRADE_PROJECT_AREA'], formData.projectArea)"
            />
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" class="item">
          <div class="label">跟进业务*：</div>
          <div class="value">
            <el-select v-model="formData.serviceId" placeholder="请选择" clearable filterable @change="handleService">
              <el-option
                v-for="item in commonData.salesmanList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <CopyButton v-if="module !== 'add'" :copyText="getCopyText(commonData.salesmanList, formData.serviceId)" />
          </div>
        </el-col>
        <el-col
          v-if="pageType === 'frock' || (pageType === 'cross' && formData.orderType === 'WORK')"
          :xs="24"
          :sm="!['add', 'edit'].includes(module) ? 24 : 12"
          :lg="!['add', 'edit'].includes(module) ? 24 : 12"
          class="item"
        >
          <div class="label">甲方名称*：</div>
          <div class="value">
            <div style="flex: 1; cursor: pointer" @click="dialogVisible = true" v-if="formData.partyA">
              {{ formData.partyA }}
            </div>
            <div style="flex: 1; cursor: pointer; opacity: 0.6" @click="dialogVisible = true" v-else>请选择</div>
            <!-- <el-select v-model="formData.partyAId" placeholder="请选择" clearable filterable @change="handlePartyA">
              <el-option
                v-for="item in commonData.PartyAList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select> -->
            <CopyButton v-if="module !== 'add'" :copyText="formData.partyA" />
            <!-- dialogVisible -->
          </div>
        </el-col>
        <el-col
          v-if="['add', 'edit'].includes(module) && (pageType === 'home' || formData.orderType === 'HOME')"
          :xs="24"
          :sm="12"
          :lg="12"
          class="item"
        >
          <div class="label" />
          <div class="value" />
        </el-col>
        <el-col :xs="24" :sm="12" :lg="module === 'edit' ? 12 : 8" class="item">
          <div class="label">经销商*：</div>
          <div class="value">
            <el-input v-if="isCustomer" v-model="formData.customerName" disabled placeholder="请填写" clearable />
            <el-input
              v-if="!isCustomer && !isTradeExaminer"
              v-model="formData.customerName"
              disabled
              placeholder="请填写"
              clearable
            />
            <el-select
              v-if="isTradeExaminer"
              v-model="formData.customerId"
              placeholder="请选择"
              clearable
              filterable
              remote
              reserve-keyword
              :remote-method="remoteMethod"
              :loading="loading"
              @change="handleCustomer"
            >
              <el-option
                v-for="item in commonData.customerList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <CopyButton
              v-if="module !== 'add' && isTradeExaminer"
              :copyText="getCopyText(commonData.customerList, formData.customerId)"
            />
            <CopyButton v-if="module !== 'add' && !isTradeExaminer" :copyText="formData.customerName" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8" class="item">
          <div class="label">经销商联系人*：</div>
          <div class="value">
            <el-input v-model="formData.customerLinkName" placeholder="请填写" clearable />
            <CopyButton v-if="module !== 'add'" :copyText="formData.customerLinkName" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8" class="item">
          <div class="label">经销商联系电话*：</div>
          <div class="value">
            <el-input v-model="formData.customerLinkMobile" maxlength="11" placeholder="请填写" clearable />
            <CopyButton v-if="module !== 'add'" :copyText="formData.customerLinkMobile" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8" class="item">
          <div class="label">经销商办公地址*：</div>
          <div class="value">
            <el-input v-model="formData.customerAddress" placeholder="请填写" clearable />
            <CopyButton v-if="module !== 'add'" :copyText="formData.customerAddress" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8" class="item">
          <div class="label">跟进经销商*：</div>
          <div class="value">
            <el-input v-model="formData.followCustomer" placeholder="请填写" clearable />
            <CopyButton v-if="module !== 'add'" :copyText="formData.followCustomer" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8" class="item">
          <div class="label">跟进经销商电话*：</div>
          <div class="value">
            <el-input v-model="formData.followCustomerMobile" placeholder="请填写" clearable />
            <CopyButton v-if="module !== 'add'" :copyText="formData.followCustomerMobile" />
          </div>
        </el-col>
        <el-col
          v-if="['frock', 'cross'].includes(pageType) && formData.orderType !== 'HOME'"
          :xs="24"
          :sm="24"
          :lg="8"
          class="item"
        >
          <div class="label">工程项目名称*：</div>
          <div class="value">
            <el-input v-model="formData.projectName" placeholder="请填写" clearable />
            <CopyButton v-if="module !== 'add'" :copyText="formData.projectName" />
          </div>
        </el-col>
        <el-col
          :xs="24"
          :sm="12"
          :lg="['home'].includes(pageType) || module === 'edit' || formData.orderType === 'HOME' ? 12 : 8"
          class="item"
        >
          <div class="label">工程联系人*：</div>
          <div class="value">
            <el-input v-model="formData.enginLinkName" placeholder="请填写" clearable />
            <CopyButton v-if="module !== 'add'" :copyText="formData.enginLinkName" />
          </div>
        </el-col>
        <el-col
          :xs="24"
          :sm="12"
          :lg="['home'].includes(pageType) || module === 'edit' || formData.orderType === 'HOME' ? 12 : 8"
          class="item"
        >
          <div class="label">电话*：</div>
          <div class="value">
            <el-input v-model="formData.enginLinkMobile" placeholder="请填写" clearable />
            <CopyButton v-if="module !== 'add'" :copyText="formData.enginLinkMobile" />
          </div>
        </el-col>
        <el-col
          v-if="['home'].includes(pageType) || formData.orderType === 'HOME'"
          :xs="24"
          :sm="24"
          :lg="24"
          class="item"
        >
          <div class="label" style="height: auto">工程项目名称*：</div>
          <div class="value my-center" style="height: 100%">
            <el-radio-group v-model="formData.homeProjectNameRadio">
              <el-radio label="AREA">
                <el-input v-model="formData.homeProjectNameArea" class="my-width" placeholder="请填写" clearable />小区
                <el-input v-model="formData.homeProjectNameSeat" class="my-width" placeholder="请填写" clearable />座
                <el-input v-model="formData.homeProjectNameNumber" class="my-width" placeholder="请填写" clearable />号
                <CopyButton
                  v-if="module !== 'add'"
                  :copyText="
                    formData.homeProjectNameArea +
                    '小区' +
                    formData.homeProjectNameSeat +
                    '座' +
                    formData.homeProjectNameNumber +
                    '号'
                  "
                />
              </el-radio>
              <el-radio label="SELF">
                <el-input
                  v-model="formData.homeProjectNameArea2"
                  class="my-width"
                  placeholder="请填写"
                  clearable
                />（业主名称）自建房
                <CopyButton v-if="module !== 'add'" :copyText="formData.homeProjectNameArea2 + '（业主名称）自建房'" />
              </el-radio>
              <el-radio label="VILLA">
                <el-input v-model="formData.homeProjectNameArea3" class="my-width" placeholder="请填写" clearable />小区
                <el-input
                  v-model="formData.homeProjectNameNumber3"
                  class="my-width"
                  placeholder="请填写"
                  clearable
                />号别墅
                <CopyButton
                  v-if="module !== 'add'"
                  :copyText="formData.homeProjectNameArea3 + '小区' + formData.homeProjectNameNumber3 + '号'"
                />
              </el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col
          v-if="
            (['home'].includes(pageType) || formData.orderType === 'HOME') &&
            !['add', 'edit'].includes(module) &&
            formData.isOld == true
          "
          :xs="24"
          :sm="24"
          :lg="24"
          class="item"
        >
          <div class="label" style="height: auto">旧单工程项目名称*：</div>
          <div class="value" style="height: 100%">
            <el-input v-model="formData.projectName" placeholder="请填写" clearable />
            <CopyButton v-if="module !== 'add'" :copyText="formData.projectName" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" class="item">
          <div class="label">工程（建筑）地址*：</div>
          <div class="value">
            <el-select v-model="formData.provinceId" placeholder="请选择省" class="my-width" @change="changeProvince">
              <el-option v-for="item in provinceList" :key="item.lbsId" :label="item.name" :value="item.lbsId" />
            </el-select>

            <el-select v-model="formData.cityId" placeholder="请选择市" class="my-width" @change="changeCity">
              <el-option v-for="item in cityList" :key="item.lbsId" :label="item.name" :value="item.lbsId" />
            </el-select>

            <el-select v-model="formData.areaId" placeholder="请选择区" class="my-width" @change="changeArea">
              <el-option v-for="item in areaList" :key="item.lbsId" :label="item.name" :value="item.lbsId" />
            </el-select>

            <el-select v-model="formData.streetId" placeholder="请选择街道" class="my-width" @change="changeStreet">
              <el-option v-for="item in streetList" :key="item.lbsId" :label="item.name" :value="item.lbsId" />
            </el-select>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" class="item">
          <div class="label">详细地址*：</div>
          <div class="value">
            <!-- <el-input v-model="formData.positionAddress" placeholder="定位地址"   clearable disabled /> -->
            <!-- <geographicalPosi
              style="margin: 0 20px 0 0"
              v-if="module !== 'detail' && !['cross'].includes(pageType)"
              :form-data="formData"
              @selectPosi="handleSelectPosi"
            /> -->
            <el-input v-model="formData.address" placeholder="请填写详细地址" clearable />
            <CopyButton v-if="module !== 'add'" :copyText="formData.address" />

            <i
              v-if="formData.positionAddress && !['cross'].includes(pageType)"
              class="el-icon-s-promotion"
              style="color: #409eff; font-size: 16px"
            />
          </div>
        </el-col>
        <!-- <template>
          <el-col v-if="module !== 'add'" :xs="24" :sm="24" :lg="24" class="item" style="height: 400px">
            <div class="label" style="height: auto">地图位置</div>
            <div class="value" style="height: auto; padding: 0">
              <zj-amap-polygon
                eid="bMap"
                :zoom="zoom"
                :center="center"
                :isWheel="true"
                :markers="markers"
                :electronic-fence="electronicFence"
                @getPolygons="getPolygons"
              >
                <template #marker="{ marker }">
                  <i class="el-icon-location-outline IP_font" />
                  <div class="IP">
                    <div>项目编号:{{ marker.no }}</div>
                    <div>工程项目名称:{{ marker.name }}</div>
                    <div>地址:{{ marker.address }}</div>
                  </div>
                </template>
              </zj-amap-polygon>
            </div>
          </el-col>
        </template> -->
        <el-col :xs="24" :sm="24" :lg="24" class="item">
          <div class="label">项目类别*：</div>
          <div class="value">
            <el-radio-group v-model="formData.projectCategory">
              <el-radio v-for="item in commonData.dict['TRADE_LOGIN_CATEGORY']" :key="item.value" :label="item.value">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" class="item">
          <div class="label">图纸上传：</div>
          <div class="value" style="justify-content: flex-end; position: relative; overflow: hidden">
            <FileUpload
              v-if="module !== 'detail' && module !== 'examine'"
              :file-list="formData.fileList"
              :limit="2"
              class="file"
            />
            <el-link
              v-if="(module == 'detail' || module == 'examine') && formData.fileList && formData.fileList.length"
              style="position: absolute; left: 5px"
              type="primary"
              :underline="false"
              @click="openPdf(formData.fileList[0])"
              >{{ formData.fileList[0].fileName }}</el-link
            >
            <!-- <el-input v-model="formData.drawUpload"    clearable /> -->
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" class="item">
          <div class="label">类型</div>
          <div class="value">
            <el-radio-group v-model="formData.type">
              <el-radio v-for="item in commonData.dict['TRADE_LOGIN_TYPE']" :key="item.value" :label="item.value">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" class="item">
          <div class="label">建筑面积㎡*：</div>
          <div class="value">
            <el-input v-model="formData.extent" placeholder="请填写" clearable />
            <CopyButton v-if="module !== 'add'" :copyText="formData.extent" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" class="item">
          <div class="label">空调使用面积㎡*：</div>
          <div class="value">
            <el-input v-model="formData.useExtent" placeholder="请填写" clearable />
            <CopyButton v-if="module !== 'add'" :copyText="formData.useExtent" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" class="item">
          <div class="label">项目所在行业分类*：</div>
          <div class="value">
            <el-select
              v-model="formData.tradeParentId"
              placeholder="请选择"
              clearable
              filterable
              :disabled="pageType === 'home' || formData.orderType === 'HOME'"
              @change="handleTradeParent"
            >
              <el-option v-for="item in tradeParentList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <CopyButton v-if="module !== 'add'" :copyText="formData.tradeParentName" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" class="item">
          <div class="label">行业细分*：</div>
          <div class="value">
            <el-select
              v-model="formData.tradeId"
              :disabled="pageType === 'home' || formData.orderType === 'HOME'"
              placeholder="请选择"
              clearable
              filterable
              @change="handleTrade"
            >
              <el-option v-for="item in tradeList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <CopyButton v-if="module !== 'add'" :copyText="formData.tradeName" />
          </div>
        </el-col>
        <el-col v-if="['frock', 'home'].includes(pageType)" :xs="24" :sm="24" :lg="24" class="item">
          <div class="label">项目性质*：</div>
          <div class="value">
            {{ pageType === 'frock' ? '工程' : '家装' }}
            <CopyButton v-if="module !== 'add'" :copyText="pageType === 'frock' ? '工程' : '家装'" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" class="item">
          <div class="label">机组类型*：</div>
          <div class="value">
            <el-select v-model="formData.machineType" placeholder="请选择" clearable filterable>
              <el-option
                v-for="item in commonData.dict['LOGIN_MACHINE_TYPE']"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <CopyButton
              v-if="module !== 'add'"
              :copyText="getCopyText(commonData.dict['LOGIN_MACHINE_TYPE'], formData.machineType)"
            />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" class="item">
          <div class="label">成功机率*：</div>
          <div class="value">
            <el-radio-group v-model="formData.successRate">
              <el-radio v-for="item in commonData.dict['SUCCESS_RATE']" :key="item.value" :label="item.value">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" class="item">
          <div class="label">预计签定合同日期*：</div>
          <div class="value">
            <el-date-picker
              v-model="formData.preSignDate"
              class="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="00:00:00"
              style="width: 100%"
              placeholder="选择日期"
            />
            <CopyButton v-if="module !== 'add'" :copyText="formData.preSignDate" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" class="item">
          <div class="label">预计设备金额*：</div>
          <div class="value">
            <el-input type="number" v-model.number="formData.preDeviceAmount" placeholder="请填写" clearable />万
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" class="item">
          <div class="label">工程跟进状态*：</div>
          <div class="value">
            <el-radio-group v-model="formData.status">
              <el-radio v-for="item in commonData.dict['FOLLOW_STATUS']" :key="item.value" :label="item.value">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col v-if="['detail', 'examine'].includes(module)" :xs="24" :sm="24" :lg="24" class="item">
          <div class="label">订单状态：</div>
          <div class="value">
            <el-input :value="orderTypeEume[formData.orderStatus]" placeholder="请填写" clearable />
            <CopyButton v-if="module !== 'add'" :copyText="orderTypeEume[formData.orderStatus]" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" class="item">
          <div class="label" style="height: auto">备注：</div>
          <div class="value" style="height: 100%">
            <el-input
              v-model="formData.remark"
              style="margin: 5px 0"
              type="textarea"
              :rows="4"
              placeholder="请输入备注"
            />
            <CopyButton v-if="module !== 'add'" :copyText="formData.remark" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" class="item">
          <div class="label" style="height: auto">
            工程概况及此工程相关的社会关系以及其他相关信息{{ ['cross'].includes(pageType) ? '*' : '' }}：
          </div>
          <div class="value" style="height: 100%">
            <el-input
              v-model="formData.otherInfo"
              style="margin: 5px 0"
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
            />
            <CopyButton v-if="module !== 'add'" :copyText="formData.otherInfo" />
          </div>
        </el-col>
      </el-row>

      <el-dialog
        title="选择甲方"
        :visible.sync="dialogVisible"
        width="1000px"
        :before-close="handleClose"
        v-if="dialogVisible"
        :append-to-body="true"
      >
        <div style="height: 600px">
          <template-page ref="pageRef__" :get-list="getList" :operation="operation()"> </template-page>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { findElem } from '@/utils/util'
import { getAutonaviRegion } from '@/api/common'
import { getTradeConfigList } from '@/api/basic_data/sectorAllocation'
import GeographicalPosi from './geographicalPosi.vue'
import FileUpload from '@/components/Common/file-upload.vue'
import { mapGetters } from 'vuex'
import { getPositionProject, getHistory } from '@/api/frock'
import { getDealerListV3 } from '@/api/basic_data/dealer'
import TemplatePage from '@/components/template/template-page-1.vue'
import { getFirstPartyCustomerManagementList } from '@/api/basic_data/partya'
export default {
  components: {
    FileUpload,
    GeographicalPosi,
    TemplatePage
  },
  props: {
    // 标题
    title: {
      type: String,
      default: '登录信息'
    },
    // 数据源
    formData: {
      type: Object,
      default: () => ({})
    },
    // 页面类型
    pageType: {
      type: String,
      default: 'frock'
    },
    // 功能类型
    module: {
      type: String,
      default: 'add'
    },
    commonData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      fileList: [],
      // 地图缩放比例
      zoom: 16,
      // 地图默认中心
      center: [113.36242, 23.1368425],
      markers: [],
      // 是否启用电子围栏
      electronicFence: false,
      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: [],
      tradeParentList: [],
      tradeList: [],
      orderTypeEume: {
        SAVE: '保存',
        WAIT: '待审核',
        OK: '登录成功',
        FAIL: '登录不成功',
        RETURN: '返回'
      },
      region: {
        G: ['广州市', '清远市', '韶关市'],
        F: ['佛山市', '肇庆市', '云浮市']
      },
      // 特殊处理市区
      specialCity: {
        '1608754035946549250': '东莞市',
        '1608754032574328834': '中山市',
        '1608756901402767362': '儋州市',
        '1608756898412228610': '三沙市',
        '1608757977963163649': '嘉峪关市'
      },
      loading: false,
      dialogVisible: false
    }
  },
  computed: {
    ...mapGetters(['isTradeExaminer', 'isCustomer', 'customerNumber', 'customerId', 'customerName']),
    getCopyText() {
      return (arr = [], id = '') => {
        if (id && arr.length) {
          return String(arr.find(k => k.value === id)?.label || id)
        }
        return String(id)
      }
    }
  },
  watch: {
    async 'formData.id'(newValue, oldValue) {
      if (newValue) {
        if (this.isTradeExaminer) {
          // this.getPositionProject()
        } else {
          this.markers = [
            {
              name: this.formData.projectName,
              center: [this.formData.lnt, this.formData.lat],
              address: this.formData.address,
              no: this.formData.projectNo
            }
          ]
        }
        this.center = [this.formData.lnt, this.formData.lat]
        if (this.module === 'examine' && !this.formData.loginStatus) {
          this.formData.loginStatus = 'OK'
        }
        if (this.module === 'examine' && this.formData.files.length) {
          const item = this.formData.files
          this.formData.files = item.map(k => {
            return {
              ...k,
              name: k.fileName,
              url: k.fileUrl,
              hover: true
            }
          })
        }
        if (this.formData.homeProjectNameRadio === 'SELF') {
          this.formData.homeProjectNameArea2 = this.formData.homeProjectNameArea
        }
        if (this.formData.homeProjectNameRadio === 'VILLA') {
          this.formData.homeProjectNameNumber3 = this.formData.homeProjectNameNumber
          this.formData.homeProjectNameArea3 = this.formData.homeProjectNameArea
        }
        if (this.formData.homeProjectNameRadio === 'SELF' || this.formData.homeProjectNameRadio === 'VILLA') {
          this.formData.homeProjectNameArea = ''
          this.formData.homeProjectNameSeat = ''
          this.formData.homeProjectNameNumber = ''
        }
        await this.getCallbackPosition(null, this.formData.provinceId, 'province', 'lbsId')
        await this.getCallbackPosition(this.formData.provinceId, this.formData.cityId, 'city', 'lbsId')
        await this.getCallbackPosition(this.formData.cityId, this.formData.areaId, 'area', 'lbsId')
        const temp = this.areaList.find(k => this.formData.cityId == k.value)
        if (!temp && !temp?.parentLbsId && !Object.keys(this.specialCity).includes(temp?.parentLbsId)) {
          await this.getCallbackPosition(this.formData.areaId, this.formData.streetId, 'street', 'lbsId')
        }
        if (this.module !== 'add' && this.isTradeExaminer && this.formData.customerId && this.formData.customerName) {
          this.getDealerListV3(this.formData.customerName)
        }
      }
    }
  },
  mounted() {
    if (this.module === 'add') {
      this.getAutonaviRegion()
      if (this.isCustomer) {
        this.formData.customerId = this.customerId
        this.formData.customerNumber = this.customerNumber
        this.formData.customerName = this.customerName
      }
      if (!this.isCustomer && !this.isTradeExaminer) {
        this.formData.customerId = '269184'
        this.formData.customerNumber = '100503'
        this.formData.customerName = '韶关弘格贸易有限公司'
      }
      if (!this.isTradeExaminer) {
        this.getHistory(this.formData.customerId)
      }
    }
    if (this.pageType === 'home' || this.formData.orderType === 'HOME') {
      this.initTradeData('HOME')
    } else {
      this.getTradeConfigList()
    }
  },
  methods: {
    getList: getFirstPartyCustomerManagementList,
    handleClose() {
      this.dialogVisible = false
    },
    operation() {
      return (h, { row, index, column }) => {
        return (
          <div class="operation-btns">
            <el-button
              size="mini"
              type="text"
              onClick={() => {
                this.formData.partyA = row.name
                this.formData.partyAId = row.id
                this.dialogVisible = false
              }}
            >
              确定选中
            </el-button>
          </div>
        )
      }
    },
    initTradeData(e) {
      if (e === 'HOME') {
        this.getTradeConfigList()
        this.formData.tradeParentId = '1689529426267607042'
        this.formData.tradeId = '1689529478943870978'
      } else {
        this.formData.tradeParentId = ''
        this.formData.tradeId = ''
      }
    },
    // 获取省市区街道
    getAutonaviRegion(level = 0, id = null) {
      getAutonaviRegion({ parentLbsId: id }).then(res => {
        if (level === 0) {
          if (['frock', 'home'].includes(this.pageType)) {
            this.provinceList = res.data.filter(k => {
              return k.name === '广东省'
            })
            this.getPosition(this.provinceList, 'provinceId', 'province')
          } else {
            this.provinceList = res.data
          }
        } else if (level === 1) {
          if (this.formData.province === '广东省' && ['frock', 'home'].includes(this.pageType)) {
            this.cityList = res.data.filter(k => {
              if (this.formData.projectArea) {
                return this.region[this.formData.projectArea].includes(k.name)
              }
              return k
            })
          } else {
            this.cityList = res.data
          }
        } else if (level === 2) {
          this.areaList = res.data
        } else if (level === 3) {
          this.streetList = res.data
        }
      })
    },
    handleProjectArea(e) {
      if (
        ['frock', 'home'].includes(this.pageType) &&
        this.formData.provinceId &&
        this.formData.province === '广东省'
      ) {
        this.getAutonaviRegion(1, this.formData.provinceId)
      }
    },
    getPosition(data, id, name) {
      if (this.module === 'add') {
        const item = data.find(k => k.name === this.$IpAdd[name])
        this.formData[id] = item.lbsId
        this.formData[name] = item.name
        // if (name === 'province') {
        this.getAutonaviRegion(1, item.lbsId)
        // }
        //  else {
        //   this.getAutonaviRegion(2, item.lbsId)
        // }
      }
    },
    getPositionProject() {
      getPositionProject({ id: this.formData.id }).then(res => {
        this.commonData.vicinityMarkers = res.data
        this.markers = this.commonData.vicinityMarkers.map(k => {
          return {
            id: '',
            name: k.projectName,
            center: [k.lnt, k.lat],
            address: k.address,
            no: k.projectNo
          }
        })
        this.markers.push({
          name: this.formData.projectName,
          center: [this.formData.lnt, this.formData.lat],
          address: this.formData.address,
          no: this.formData.projectNo
        })
      })
    },
    handleArea(value, type) {
      this.formData[type] = this[type + 'List'].find(k => k.lbsId === value).name
    },
    // 切换省
    changeProvince(value) {
      this.formData.cityId = ''
      this.formData.areaId = ''
      this.formData.streetId = ''
      this.cityList = []
      this.areaList = []
      this.streetList = []
      this.getAutonaviRegion(1, value)
      this.handleArea(value, 'province')
    },

    // 切换市
    changeCity(value) {
      this.formData.areaId = ''
      this.formData.streetId = ''
      this.areaList = []
      this.streetList = []
      this.getAutonaviRegion(2, value)
      this.handleArea(value, 'city')
    },

    // 切换区
    changeArea(value) {
      this.areaValue = value
      this.formData.streetId = ''
      this.streetList = []
      // 特殊处理市
      const temps = this.areaList.filter(k => {
        return k.lbsId === value
      })
      if (
        value &&
        this.areaList.length &&
        temps.length &&
        temps[0]?.parentLbsId &&
        Object.keys(this.specialCity).includes(temps[0]?.parentLbsId)
      ) {
        this.streetList = temps
        this.formData.streetId = value
        this.handleArea(value, 'street')
        return
      }
      this.getAutonaviRegion(3, value)
      this.handleArea(value, 'area')
    },

    // 切换街道
    changeStreet(value) {
      this.getAutonaviRegion(3, this.areaValue)
      this.handleArea(value, 'street')
    },

    // 初始化省市区街道
    initRegion(level, item, id = 0) {
      const { province, city, area, street } = item
      let nextId = null
      getAutonaviRegion({ pid: id }).then(res => {
        if (level === 0) {
          this.provinceList = res.data
          nextId = this.formData.provinceId = this.provinceList[findElem(this.provinceList, 'name', province)].id
        } else if (level === 1) {
          this.cityList = res.data
          nextId = this.formData.cityId = this.cityList[findElem(this.cityList, 'name', city)].id
        } else if (level === 2) {
          this.areaList = res.data
          nextId = this.formData.areaId = this.areaList[findElem(this.areaList, 'name', area)].id
        } else if (level === 3) {
          this.streetList = res.data
          nextId = this.formData.streetId = this.streetList[findElem(this.streetList, 'name', street)].id
        }
        if (level < 3) {
          level = level + 1
          this.initRegion(level, item, nextId)
        }
      })
    },
    handleTradeParent(e) {
      if (e) {
        const item = this.tradeParentList.find(k => k.id === e)
        this.formData.tradeParentName = item.name
        this.tradeList = item.childList
        return
      }
      this.formData.tradeId = ''
    },
    handleTrade(e) {
      if (e) {
        const item = this.tradeList.find(k => k.id === e)
        this.formData.tradeName = item.name
      } else {
        this.formData.tradeId = ''
        this.formData.tradeName = ''
      }
    },
    getTradeConfigList(parentId = '') {
      getTradeConfigList({
        pageNum: 1,
        pageSize: -1,
        parentId: parentId
      }).then(res => {
        if (parentId) {
          this.tradeList = res.data
          return
        }
        this.tradeParentList = res.data
        const item = this.tradeParentList.find(k => k.id === this.formData.tradeParentId)
        if (item && item.childList) {
          this.tradeList = item.childList
        }
      })
    },
    handleService(e) {
      if (e) {
        const item = this.commonData.salesmanList.find(k => k.value === e)
        this.formData.serviceNumber = item.userName
        this.formData.serviceName = item.label
      } else {
        this.formData.serviceName = ''
        this.formData.serviceNumber = ''
      }
    },
    handlePartyA(e) {
      if (e) {
        const item = this.commonData.PartyAList.find(k => k.value === e)
        this.formData.partyA = item.label
      } else {
        this.formData.partyA = ''
      }
    },
    handleCustomer(e) {
      if (e) {
        const item = this.commonData.customerList.find(k => k.value === e)
        this.formData.customerName = item.label
        this.formData.customerNumber = item.number
        this.getHistory(this.formData.customerId)
      } else {
        this.formData.customerName = ''
        this.formData.customerNumber = ''
        this.formData.customerLinkName = ''
        this.formData.customerLinkMobile = ''
        this.formData.customerAddress = ''
      }
    },
    onSbumit() {},
    getPolygons(data) {
      console.log(data)
    },
    async handleSelectPosi(data) {
      this.formData.lnt = data.center[0]
      this.formData.lat = data.center[1]
      this.formData.positionAddress = data.name
      // this.formData.address = data.name
      var { province, city, district, township } = data.data.addressComponent
      console.log(province, city, district, township)
      const area = district
      const street = township
      await this.getCallbackPosition(null, province, 'province')
      await this.getCallbackPosition(this.formData.provinceId, city, 'city')
      await this.getCallbackPosition(this.formData.cityId, area, 'area')
      const temp = this.areaList.find(k => this.formData.cityId == k.value)
      if (!temp && !temp?.parentLbsId && !Object.keys(this.specialCity).includes(temp?.parentLbsId)) {
        await this.getCallbackPosition(this.formData.areaId, street, 'street')
      }
    },

    /**
     * @param {*} id // 父级id
     * @param {*} value // 值
     * @param {*} name // 字段名称
     * @param {*} way // 筛选属性,默认name
     */
    async getCallbackPosition(id = 0, value = '', name, way = 'name') {
      const { data } = await getAutonaviRegion({ parentLbsId: id })
      this[name + 'List'] = data
      const temp = data.find(k => k[way] == value)
      // 特殊处理市
      if (name === 'area' && Object.keys(this.specialCity).includes(temp.parentLbsId)) {
        this.streetList = [temp]
        this.formData.streetId = temp.lbsId
        this.handleArea(temp.lbsId, 'street')
        return
      }
      this.formData[name] = temp && temp.name
      this.formData[name + 'Id'] = temp && temp.lbsId
    },
    openPdf(item) {
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = this.$imageUrl + item.url
      link.download = item.name
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
    getHistory(id) {
      getHistory({ customerId: id }).then(res => {
        this.formData.customerLinkName = res.data.linkName || ''
        this.formData.customerLinkMobile = res.data.linkMobile || ''
        this.formData.customerAddress = res.data.address || ''
      })
    },
    remoteMethod(e) {
      this.loading = false
      this.getDealerListV3(e)
    },
    getDealerListV3(e) {
      getDealerListV3({
        pageNum: 1,
        pageSize: 100,
        params: [
          {
            param: 'a.name',
            compare: 'like',
            value: e
          }
        ]
      })
        .then(res => {
          this.commonData.customerList = res.data.records.map(k => {
            return {
              number: k.number,
              label: k.name,
              value: k.id
            }
          })
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.diy-table-1 {
  border: 1px solid #cccc;
  border-right: none;
  border-bottom: none;
}
.diy-table-1 .item {
  border-bottom: 1px solid #ccc;
}
.diy-table-1 .item .label {
  width: 180px;
  padding: 10px;
  border-right: 1px solid #ccc;
}
.diy-table-1 .item .value {
  border-right: 1px solid #ccc;
  justify-content: space-between;
}
::v-deep .el-select {
  width: 100% !important;
}
::v-deep .date .el-input__icon,
::v-deep .date .el-input__prefix {
  right: 50px !important;
  left: auto;
}
::v-deep .el-textarea__inner {
  padding: 0;
  border: none;
}
::v-deep .file:first-child > div {
  display: flex !important;
  align-items: center;
  flex-direction: row-reverse;
}
::v-deep .file .is-success {
  margin-top: 0;
}
.my-width {
  width: 150px;
}
.title {
  display: flex;
  justify-content: space-between;
  .title-right {
    font-size: 16px;
    font-weight: 300;
  }
}
::v-deep .my-center {
  input {
    text-align: center !important;
  }
}
::v-deep .el-upload-list__item-name {
  width: 200px !important;
}
.IP_font {
  font-size: 28px;
  color: #409eff;
  position: absolute;
  left: -13px;
  top: -25px;
}
.IP {
  width: 15vw;
  background-color: #fff;
  padding: 6px 0 6px 6px;
}
::v-deep .el-radio__inner {
  border: 2px solid #ccc;
  border-radius: 100%;
  width: 14px;
  height: 14px;
  background-color: #fff;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
</style>