<template>
  <div class="edit-popup">
    <el-form
      ref="formRef"
      :model="formData"
      label-width="90px"
      :rules="formRules"
    >
      <!-- <div style="font-size: 1.2rem; margin: 10px 0">公司基本信息创建</div> -->
      <el-col :span="24" class="el-card pt-6">
        <div class="tit">公司基本信息创建</div>
        <el-row>
          <el-form-item label="公司名称" prop="company_name">
            <el-input
              v-model="formData.company_name"
              placeholder="请输入公司名称"
              clearable
              :disabled="isDisabled"
              :style="{ width: '300px' }"
            ></el-input>
          </el-form-item>
          <el-form-item label="社会代码" prop="organization_code">
            <el-input
              :disabled="isDisabled"
              v-model="formData.organization_code"
              placeholder="请输入社会代码"
              clearable
              :style="{ width: '300px' }"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="公司类型"
            :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]"
            prop="company_type"
          >
            <el-select
              :disabled="isDisabled"
              v-model="formData.company_type"
              placeholder="请选择公司类型"
              clearable
              @change="company_type_change"
            >
              <el-option
                v-for="(item, index) in datas.dictTypeLists"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="省"
            :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]"
            prop="province"
          >
            <el-select
              :disabled="isDisabled"
              v-model="formData.province"
              placeholder="请选择省"
              clearable
              @change="province_change"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in datas.provinceOptions"
                :key="index"
                :label="item.province_name"
                :value="item.province_code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="市"
            :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]"
            prop="city"
          >
            <el-select
              :disabled="isDisabled"
              v-model="formData.city"
              placeholder="请选择市"
              clearable
              @change="city_change"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in datas.cityOptions"
                :key="index"
                :label="item.city_name"
                :value="item.city_code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="isArea"
            label="区"
            :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]"
            prop="area"
          >
            <el-select
              :disabled="isDisabled"
              v-model="formData.area"
              placeholder="请选择区"
              clearable
              @change="area_change"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in datas.areaOptions"
                :key="index"
                :label="item.area_name"
                :value="item.area_code"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="isStreet"
            label="镇"
            :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]"
            prop="street"
          >
            <el-select
              :disabled="isDisabled"
              v-model="formData.street"
              placeholder="请选择镇"
              clearable
              @change="street_change"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in datas.streetOptions"
                :key="index"
                :label="item.street_name"
                :value="item.street_code"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="isVillage"
            label="村"
            :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]"
            prop="village"
          >
            <el-select
              :disabled="isDisabled"
              v-model="formData.village"
              placeholder="请选择村"
              clearable
              @change="village_change"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in datas.villageOptions"
                :key="index"
                :label="item.village_name"
                :value="item.village_code"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="isBrigade"
            label="队"
            :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]"
            prop="brigade"
          >
            <el-select
              :disabled="isDisabled"
              v-model="formData.brigade"
              placeholder="请选择队"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in datas.brigadeOptions"
                :key="index"
                :label="item.brigade_name"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input
              :disabled="isDisabled"
              v-model="formData.address"
              placeholder="请输入地址"
              clearable
              :style="{ width: '300px' }"
            ></el-input>
          </el-form-item>
          <el-col :span="23">
            <el-form-item label="负责区域" prop="region">
              <el-checkbox-group
                v-model="formData.responsible_area"
                @change="handleCheckedCitiesChange"
                :disabled="isDisabled"
              >
                <el-checkbox
                  :disabled="
                    formData[regionType] == city[regionType + '_code'] ||
                    formData[regionType] == city.id ||
                    city.disabled
                  "
                  v-for="city in datas[regionType + 'Options']"
                  :key="city[regionType + '_name']"
                  :label="
                    regionType == 'brigade'
                      ? city.id + ''
                      : city[regionType + '_code'] + ''
                  "
                  >{{ city[regionType + "_name"] }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="24" class="el-card pt-6">
        <div class="tit">主要联系人</div>
        <!-- <div
          style="
            padding-left: 20px;
            padding-bottom: 10px;
            color: #e6a23c;
            font-size: 12px;
          "
        >
          提醒︰联系人照片需要进行人脸认证，请务必上传清晰的标准照
        </div> -->
        <el-container>
          <el-aside width="190px" style="display: flex">
            <span style="color: #f56c6c; padding-left: 20px">*</span>
            <div class="headimg" style="margin-left: 5px">
              <el-upload
                :disabled="isDisabled"
                :accept="acceptFileTypes"
                v-model="formData.avatar"
                class="avatar-uploader-head"
                :data="{ cid: 1 }"
                :headers="{ Token: userStore.token }"
                :action="base_url + '/upload/image'"
                :show-file-list="false"
                :on-success="handleAvatarSuccessAvatar"
              >
                <img
                  v-if="formData.avatar"
                  :src="formData.avatar"
                  class="avatar"
                />
                <div v-else class="avatar-uploader-icon">
                  <el-icon>
                    <Plus />
                  </el-icon>
                </div>
              </el-upload>
            </div>
          </el-aside>
          <el-main>
            <el-row>
              <div style="display: flex; justify-content: left">
                <div class="right" style="max-width: 1100px">
                  <el-row>
                    <el-form-item label="姓名" prop="master_name">
                      <el-input
                        :disabled="isDisabled"
                        v-model="formData.master_name"
                        placeholder="请输入姓名"
                        clearable
                        :style="{ width: '450px' }"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="职务" prop="master_position">
                      <el-input
                        :disabled="isDisabled"
                        v-model="formData.master_position"
                        placeholder="请输入职务"
                        clearable
                        :style="{ width: '450px' }"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="手机" prop="master_phone">
                      <el-input
                        :disabled="isDisabled"
                        v-model="formData.master_phone"
                        placeholder="请输入手机"
                        clearable
                        :style="{ width: '450px' }"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                      <el-input
                        disabled
                        v-model="formData.master_email"
                        placeholder="邮箱将由系统自动生成"
                        clearable
                        :style="{ width: '450px' }"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                      <el-select
                        :disabled="isDisabled"
                        v-model="formData.sex"
                        placeholder="请选择性别"
                        :style="{ width: '450px' }"
                      >
                        <el-option label="男" value="1" />
                        <el-option label="女" value="2" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="身份证">
                      <el-input
                        :disabled="isDisabled"
                        v-model="formData.id_card"
                        placeholder="请输入身份证"
                        clearable
                        :style="{ width: '450px' }"
                      ></el-input>
                    </el-form-item>
                    <!-- 
                        <el-form-item label="片区经理" prop="area_manager_name">
                            <el-input
                                :disabled="isDisabled"
                                v-model="formData.area_manager_name"
                                placeholder="选择片区经理"
                                clearable
                                :style="{ width: '300px' }"
                                @click="isAreaManager = true"
                            ></el-input>
                        </el-form-item>
                      -->
                  </el-row>
                </div>
              </div>
            </el-row>
          </el-main>
        </el-container>
      </el-col>
      <el-col :span="24" class="el-card pt-6">
        <div class="tit">其他联系人</div>

        <el-row>
          <template
            v-for="(item, index) in formData.other_contacts"
            :key="index"
          >
            <el-col :span="12">
              <el-form-item label="姓名" prop="field120">
                <el-input
                  :disabled="isDisabled"
                  v-model="item.name"
                  placeholder="请输入姓名"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="职务" prop="field121">
                <el-input
                  :disabled="isDisabled"
                  v-model="item.position"
                  placeholder="请输入职务"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机" prop="field122">
                <el-input
                  :disabled="isDisabled"
                  v-model="item.phone"
                  placeholder="请输入手机"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱">
                <el-input
                  :disabled="isDisabled"
                  v-model="item.email"
                  placeholder="请输入邮箱"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </template>

          <el-col :span="24">
            <el-form-item label prop="field126">
              <el-button
                type="primary"
                :disabled="isDisabled"
                size="medium"
                @click="other"
                >添加联系人</el-button
              >
              <el-button
                v-if="formData.other_contacts.length"
                type="primary"
                :disabled="isDisabled"
                size="medium"
                @click="otherdelete"
                >删除</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
      <!-- <div style="font-size: 1.2rem; margin: 10px 0">资质信息</div> -->
      <el-col :span="24" class="el-card pt-6">
        <div class="tit">资质信息</div>

        <el-row>
          <el-col :span="12">
            <el-form-item label="公司资质" required>
              <el-upload
                :disabled="isDisabled"
                :accept="acceptFileTypes"
                v-model="formData.qualification.business_license"
                class="avatar-uploader pl-3"
                :data="{ cid: 1 }"
                :headers="{ Token: userStore.token }"
                :action="base_url + '/upload/image'"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
              >
                <img
                  v-if="formData.qualification.business_license"
                  :src="formData.qualification.business_license"
                  class="avatar"
                />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item class="others" label="其他资质">
              <div
                v-for="(v, i) in formData.qualification.other_qualifications"
                :key="i"
                class="otherimg"
              >
                <img :src="v" @click="clickdelete(i)" />
              </div>
              <el-upload
                v-if="imgflag"
                :accept="acceptFileTypes"
                :disabled="isDisabled"
                class="avatar-uploader pl-3"
                :data="{ cid: 1 }"
                :headers="{ Token: userStore.token }"
                :action="base_url + '/upload/image'"
                :show-file-list="false"
                :on-success="handleAvatarSuccess_two"
                style="margin-bottom: 12px"
              >
                <el-icon class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="120px" label="开户许可证" required>
              <el-upload
                :disabled="isDisabled"
                :accept="acceptFileTypes"
                v-model="formData.qualification.business_licenseB"
                class="avatar-uploader pl-3"
                :data="{ cid: 1 }"
                :headers="{ Token: userStore.token }"
                :action="base_url + '/upload/image'"
                :show-file-list="false"
                :on-success="handleAvatarSuccessB"
              >
                <img
                  v-if="formData.qualification.business_licenseB"
                  :src="formData.qualification.business_licenseB"
                  class="avatar"
                />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
      <!-- <div style="font-size: 1.2rem; margin: 10px 0">电子合同</div> -->
      <!-- <el-col v-if="isshow" :span="24" class="el-card pt-6"> -->
      <el-col v-if="false" :span="24" class="el-card pt-6">
        <div class="tit">电子合同</div>

        <el-row>
          <el-col :span="12">
            <el-form-item label="签约方" prop="field130">
              <el-input
                v-model="formData.party_a_name"
                placeholder="请选择签约方"
                clearable
                :style="{ width: '100%' }"
                :disabled="!partyDisabled || isDisabled"
                @click="openCompany"
              ></el-input>
              <!-- <el-select
                :disabled="partyDisabled"
                v-model="formData.party_a_name"
                placeholder="请选择签约方"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in datas['dictTypeLists']"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label-width="100px"
              label="被签约公司"
              prop="field131"
            >
              <el-input
                :disabled="true"
                v-model="formData.company_name"
                placeholder="请输入被签约公司"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label-width="100px"
              label="合同类型"
              prop="contract_type"
            >
              <el-select
                :disabled="isDisabled"
                v-model="formData.contract.contract_type"
                placeholder="请选择合同类型"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in datas.contract_type"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label-width="100px" label="合同编号" prop="field133">
              <el-input
                placeholder="系统自动生成"
                v-model="formData.contract.contract_no"
                clearable
                :style="{ width: '100%' }"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
      <!-- <el-col v-if="isshow" :span="24" class="el-card pt-6">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="合同上传" required>
                            <el-upload
                                :disabled="isDisabled"
                                v-model:file-list="fileList"
                                :headers="{ Token: userStore.token }"
                                class="upload-demo"
                                :action="base_url+ '/upload/image'"
                                multiple
                                :limit="1"
                                :on-success="handleAvatarSuccess_three"
                            >
                                <el-button :disabled="isDisabled" type="primary">上传</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-col> -->

      <el-col
        v-if="(isDisabled == false && isEdit == false) || isEdit"
        :span="24"
        class="el-card pt-6"
      >
        <el-form-item label prop="field139">
          <el-button v-if="isEdit" type="primary" size="medium" @click="create"
            >完成</el-button
          >
          <el-button
            v-if="isDisabled == false && isEdit == false"
            type="primary"
            :disabled="isDisabled"
            size="medium"
            @click="create"
            >创建</el-button
          >
        </el-form-item>
      </el-col>
    </el-form>
    <el-dialog v-model="isCompany" title="选择签约方" width="60%">
      <DialogIndex @customEvent="customEvent" :type="indexType" />
    </el-dialog>
    <el-dialog v-model="isMan" title="选择管理人员" width="60%">
      <DialogIndexMan @customEvent="customEventMan" />
    </el-dialog>
    <el-dialog v-model="isAreaManager" title="选择片区经理" width="60%">
      <DialogIndexMan @customEvent="EventAreaManager" :type="8" />
    </el-dialog>
  </div>
</template>
1
<script lang="ts" setup name="companyEdit">
import {
  type FormInstance,
  type UploadProps,
  ElMessage,
  type UploadUserFile,
} from "element-plus";
import Popup from "@/components/popup/index.vue";
import {
  apiCompanyAdd,
  apiCompanyEdit,
  apiCompanyDetail,
  apiCompanyLists,
  companyResponsibleArea,
} from "@/api/company";
import {
  apiCityList,
  apiAreaList,
  apiStreetList,
  apiProvinceList,
  apiVillageList,
  apiBrigadeList,
} from "@/api/common";
import { dictDataLists } from "@/api/setting/dict";
import { timeFormat } from "@/utils/util";
import DialogIndex from "./dialog_index.vue";
import DialogIndexMan from "./dialog_index_man.vue";
import type { PropType } from "vue";
import useMultipleTabs from "@/hooks/useMultipleTabs";
import useUserStore from "@/stores/modules/user";
import { inject } from "vue";
const base_url: any = inject("base_url");
const userStore = useUserStore();
const { removeTab } = useMultipleTabs();
const router = useRouter();
const route = useRoute();
let isshow = ref(true);
let imgflag = ref(true);
let isDisabled = ref(false);
if (route.query.flag) {
  isshow = false;
}
if (route.query.isshow) {
  imgflag = false;
  isDisabled = true;
}

const acceptFileTypes = ref(".png, .jpg, .jpeg, image/png, image/jpeg");
console.log(isDisabled);
// 公司类型
const indexType = ref(0);

let isEdit = ref(false);
defineProps({
  dictData: {
    type: Object as PropType<Record<string, any[]>>,
    default: () => ({}),
  },
});
const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const mode = ref();

if (route.query.read) {
  isDisabled = route.query.read;
}
if (route.query.edit) {
  isEdit = route.query.edit;
}
// 表单数据
const formData = reactive({
  admin_id: "",
  admin_name: "",
  area_manager: "",
  area_manager_name: "",
  id: "",
  // level_two: '',
  // level_one: '',
  company_name: "",
  organization_code: "",
  province: "",
  city: "",
  area: "",
  street: "",
  village: "",
  brigade: "",
  address: "",
  responsible_area: [],
  company_type: "",
  avatar: "",
  sex: "1",
  id_card: "",
  master_name: "",
  master_position: "",
  master_phone: "",
  master_email: "",
  other_contacts: [],
  qualification: {
    business_license: "",
    business_licenseB: "",
    other_qualifications: [],
    bank_accountB: [],
    bank_account: [],
  },
  contract: {
    contract_type: "",
    party_a: 0,
    file: "",
    contract_no: "系统自动生成",
    type: 1,
  },
  //签约方
  party_a_name: "",
  file_image: "",
  // status: ''
});

if (userStore.userInfo.root == 0) {
  formData.contract.party_a = userStore.userInfo.company?.id;
  formData.party_a_name = userStore.userInfo.company?.company_name;
}
const datas = reactive({
  provinceOptions: [],
  cityOptions: [],
  areaOptions: [],
  streetOptions: [],
  villageOptions: [],
  brigadeOptions: [],
  dictTypeLists: [],
  contract_type: [],
  company_list: [],
});
const fileList = ref<UploadUserFile[]>([]);
// 表单验证
const formRules = reactive<any>({
  company_name: [
    {
      required: true,
      message: "请输入公司名称",
      trigger: ["blur"],
    },
  ],
  organization_code: [
    {
      required: true,
      message: "请输入组织机构代码",
      trigger: ["blur"],
    },
  ],
  master_name: [
    {
      required: true,
      message: "请输入主联系人姓名",
      trigger: ["blur"],
    },
  ],
  master_position: [
    {
      required: true,
      message: "请输入主联系人职务",
      trigger: ["blur"],
    },
  ],
  master_phone: [
    {
      required: true,
      message: "请输入主联系人手机",
      trigger: ["blur"],
    },
  ],
  avatar: [
    {
      required: true,
      message: "请上传照片",
      trigger: ["blur"],
    },
  ],
  account: [
    {
      required: true,
      message: "请输入账号",
      trigger: ["blur"],
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: ["blur"],
    },
  ],
});
const isCompany = ref(false);
const isMan = ref(false);
const isAreaManager = ref(false);
const isArea = ref(false);
const isStreet = ref(false);
const isVillage = ref(false);
const isBrigade = ref(false);
const partyDisabled = ref(true);

function customEvent(data: any) {
  isCompany.value = false;
  formData.contract.party_a = data.id;
  formData.party_a_name = data.company_name;
}
function customEventMan(data: any) {
  isMan.value = false;
  formData.admin_name = data.name;
  formData.admin_id = data.id;
}
//区域管理人员
function EventAreaManager(data: any) {
  isAreaManager.value = false;
  formData.area_manager_name = data.name;
  formData.area_manager = data.id;
}
function openCompany() {
  isCompany.value = true;
}

// 当前选择的负责区域列表
// const formData.responsible_area = ref([]);
// 当前应当显示的区域
const regionType = ref("");
const wathcFlag = ref(0); //标记第一次页面刷新的数据更新
watch(
  () => formData[regionType.value],
  (newValue, oldValue) => {
    if (wathcFlag.value == 0) return wathcFlag.value++;
    formData.responsible_area = [];
    formData.responsible_area.push(newValue + "");
  }
);
// 多选区域
const handleCheckedCitiesChange = (value: string[]) => {
  // console.log("选的值", value);
};

// 获取详情
const setFormData = async (data: Record<any, any>) => {
  // console.log(formData);

  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key];
    }
  }
};

const getDetail = async (row: Record<string, any>) => {
  const data = await apiCompanyDetail({
    id: row.id,
  });
  setFormData(data);
};

//上传图片1
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  if (response.code == 0) {
    ElMessage.error(response.msg);
    return;
  }
  formData.qualification.business_license = response.data.uri;
};
const handleAvatarSuccessB: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  if (response.code == 0) {
    ElMessage.error(response.msg);
    return;
  }
  formData.qualification.business_licenseB = response.data.uri;
};
//上传图片2
const handleAvatarSuccess_two: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  if (response.code == 0) {
    ElMessage.error(response.msg);
    return;
  }
  formData.qualification.other_qualifications.push(response.data.uri);
};
const handleAvatarSuccess_twoB: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  if (response.code == 0) {
    ElMessage.error(response.msg);
    return;
  }
  formData.qualification.bank_accountB = response.data.uri;
};
//上传文件3
const handleAvatarSuccess_three: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  if (response.code == 0) {
    ElMessage.error(response.msg);
    return;
  }
  formData.file_image = response.data.uri;
  formData.contract.file = response.data.uri;
  fileList.value[0].url = response.data.uri;
  fileList.value[0].name = "合同文件";
};

//增加其他联系人
function other() {
  formData.other_contacts.push({
    name: "",
    position: "",
    phone: "",
    email: "",
  });
}
//删除其他联系人
function otherdelete() {
  formData.other_contacts.pop({
    name: "",
    position: "",
    phone: "",
    email: "",
  });
}
function company_type_change(type: any) {
  //区
  const arr = [30, 14, 15];
  if (arr.indexOf(type) > -1) {
    isArea.value = true;
    isStreet.value = false;
    isVillage.value = false;
    isBrigade.value = false;
    formData.street = "";
    formData.village = "";
    formData.brigade = "";
    regionType.value = "area";
    return true;
  }
  //镇
  if (type == 16) {
    isArea.value = true;
    isStreet.value = true;
    isVillage.value = false;
    isBrigade.value = false;
    formData.village = "";
    formData.brigade = "";
    partyDisabled.value = true;
    indexType.value = 30;
    regionType.value = "street";
    return true;
  }
  if (type != 16) {
    partyDisabled.value = false;
  }
  //镇
  if (type == 41) {
    isArea.value = true;
    isStreet.value = true;
    isVillage.value = false;
    isBrigade.value = false;
    formData.village = "";
    formData.brigade = "";
    // partyDisabled.value = true;
    // indexType.value = 30;
    regionType.value = "street";
    return true;
  }
  //村
  if (type == 17) {
    isArea.value = true;
    isStreet.value = true;
    isVillage.value = true;
    isBrigade.value = false;
    formData.brigade = "";
    regionType.value = "village";
    return true;
  }

  //队
  if (type == 18) {
    isArea.value = true;
    isStreet.value = true;
    isVillage.value = true;
    isBrigade.value = true;
    regionType.value = "brigade";
    return true;
  }
}
//获取省份
function province_change(value: string) {
  getCityList();
}
function city_change(value: string) {
  getAreaList();
}
function area_change(value: string) {
  getStreetList();
}
function street_change(value: string) {
  getVillageList();
}
function village_change(value: string) {
  getBrigadeList();
}
// function brigade_change(value: string) {
//     formData.brigade = value
// }
const getProvinceList = async () => {
  const data = await apiProvinceList({});
  datas["provinceOptions"] = data;
};
const getCityList = async () => {
  const data = await apiCityList({ city: formData.province });
  datas["cityOptions"] = data;
};
const getAreaList = async () => {
  const data = await apiAreaList({ area: formData.city });
  datas["areaOptions"] = data;
};
const getStreetList = async () => {
  const data = await apiStreetList({ street: formData.area });
  if (formData.company_type == 16) {
    const f = await companyResponsibleArea({
      key: "area",
      value: formData.area,
    });
    console.log(f);

    data.forEach((item: any) => {
      if (Object.values(f).find((t: any) => item.street_code == t + ""))
        item.disabled = true;
      else item.disabled = false;
    });
  }
  datas["streetOptions"] = data;
};
const getVillageList = async () => {
  const data = await apiVillageList({ village: formData.street });
  if (formData.company_type == 17) {
    const f = await companyResponsibleArea({
      key: "street",
      value: formData.street,
    });
    data.forEach((item: any) => {
      if (Object.values(f).find((t: any) => item.village_code == t + ""))
        item.disabled = true;
      else item.disabled = false;
    });
  }
  datas["villageOptions"] = data;
};
const getBrigadeList = async () => {
  const data = await apiBrigadeList();
  if (formData.company_type == 18) {
    const f = await companyResponsibleArea({
      key: "village",
      value: formData.village,
    });
    data.forEach((item: any) => {
      if (Object.values(f).find((t: any) => item.id == t + ""))
        item.disabled = true;
      else item.disabled = false;
    });
  }

  // // 获取已选择的小队

  datas["brigadeOptions"] = data;
};
getProvinceList();
const getcontract_type = async () => {
  const data = await dictDataLists({ type_id: 7 });
  datas["contract_type"] = data["lists"];
};
const getdictTypeLists = async () => {
  const data = await dictDataLists({ type_id: 6 });
  datas["dictTypeLists"] = data["lists"];
};

const getDetails = async () => {
  const data = await apiCompanyDetail({
    id: route.query.id,
  });
  if (data.company_type == 16) {
    indexType.value = 30;
    partyDisabled.value = true;
  }
  Object.keys(formData).forEach((key) => {
    const stringArr = [
      "province",
      "city",
      "area",
      "street",
      "village",
      "brigade",
    ];
    if (data[key] != null && data[key] != undefined) {
      formData[key] = data[key];
      // if (
      //   key == "qualification" &&
      //   formData.qualification.other_qualifications
      // ) {
      //   try {
      //     if (
      //       Array.isArray(
      //         JSON.parse(formData.qualification.other_qualifications)
      //       )
      //     ) {
      //       formData.qualification.other_qualifications = JSON.parse(
      //         formData.qualification.other_qualifications
      //       );
      //     } else {
      //       const str = formData.qualification.other_qualifications;
      //       formData.qualification.other_qualifications = [];
      //       formData.qualification.other_qualifications.push(str);
      //     }
      //   } catch (error) {
      //     const str = formData.qualification.other_qualifications;
      //     formData.qualification.other_qualifications = [];
      //     formData.qualification.other_qualifications.push(str);
      //   }
      // }
    }
    if (stringArr.includes(key)) formData[key] = formData[key].toString();
  });
  await getCityList();
  await getAreaList();
  await getStreetList();
  await getVillageList();
  await getBrigadeList();
  formData["party_a_name"] = data.contract?.party_a_info.company_name;
  // formData['file_image'] = data.contract?.file
  // if (data.contract?.file) {
  //     fileList.value[0].url = data.contract?.file
  //     fileList.value[0].name = '合同文件'
  // }
  company_type_change(formData.company_type);
};
const clickdelete = (index) => {
  if (!route.query.read) {
    formData.qualification.other_qualifications.splice(index, 1);
  }
};

getdictTypeLists();
getcontract_type();

const handleAvatarSuccessAvatar: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  if (response.code == 0) {
    ElMessage.error(response.msg);
    return;
  }
  formData.avatar = response.data.uri;
};
const create = async () => {
  if (!formData.avatar) return ElMessage.error("主要联系人头像不可为空");
  await formRef.value?.validate();
  const data = JSON.parse(JSON.stringify({ ...formData }));
  data.qualification.other_qualifications = JSON.stringify(
    data.qualification.other_qualifications
  );
  if (route.query.id) {
    await apiCompanyEdit(data);
  } else {
    await apiCompanyAdd(data);
  }
  removeTab();
  router.back();
};
route.query.id && getDetails();
defineExpose({
  open,
  setFormData,
  getDetail,
});
</script>
<style lang="scss">
.tit {
  font-size: 1.2rem;
  translate: 1vw -1vw;
}

.avatar-uploader .el-upload {
  width: 200px;
  height: 130px;
  background-color: #fff;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.headimg {
  margin-left: 18px;
  margin-bottom: 18px;
  width: 120px;
  height: 140px;
  overflow: hidden;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-uploader-head .el-upload {
  width: 120px;
  height: 140px;
  background-color: #fff;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.otherimg {
  img {
    width: 10vw;
    height: 6.3vw;
    border-radius: 5px;
    margin-left: 12px;
    margin-bottom: 12px;
  }
}

.el-card {
  margin-bottom: 10px;
}

.tit {
  margin-top: 15px;
}

.others {
  width: 100% !important;
}

.el-main {
  padding: 0px !important;
}
</style>
