<template>
  <div>
    <el-dialog
      v-if="showDialog"
      v-model="showDialog"
      title="编辑机构资料"
      width="1000px"
    >
      <el-form
        ref="formData" class="rightForm" :model="form" label-width="160px"
        :rules="rules"
      >
        <el-form-item label="选择所属协会" prop="deptId">
          <el-cascader
            v-model="form.deptId"
            :options="list"
            :props="props2"
            clearable
            style="width: 100%"
            filterable
            disabled
          />
        </el-form-item>
        <el-form-item label="机构名称" prop="name">
          <el-input v-model.trim="form.name" :disabled="name" style="width: 100%" />
        </el-form-item>
        <!--        <el-form-item label="所属省份" prop="belongProvinceId">-->
        <!--          &lt;!&ndash;          <el-select&ndash;&gt;-->
        <!--          &lt;!&ndash;            v-model="form.belongProvinceId"&ndash;&gt;-->
        <!--          &lt;!&ndash;            placeholder="请选择"&ndash;&gt;-->
        <!--          &lt;!&ndash;            style="width: 100%"&ndash;&gt;-->
        <!--          &lt;!&ndash;            :disabled="belongProvinceId"&ndash;&gt;-->
        <!--          &lt;!&ndash;          >&ndash;&gt;-->
        <!--          &lt;!&ndash;            <el-option label="全国" :value="0" />&ndash;&gt;-->
        <!--          &lt;!&ndash;            <el-option v-for=" item in options " :key="item.value" :label="item.text" :value="item.value" />&ndash;&gt;-->
        <!--          &lt;!&ndash;          </el-select>&ndash;&gt;-->
        <!--          <el-select-->
        <!--            v-model="form.belongProvinceId"-->
        <!--            placeholder="请选择"-->
        <!--            style="width: 100%"-->
        <!--          >-->
        <!--            <el-option label="全国" :value="0" />-->
        <!--            <el-option v-for=" item in options " :key="item.value" :label="item.text" :value="item.value" />-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item label="认证地址" prop="coordinates">
          <el-cascader
            ref="cascaderA"
            v-model="form.coordinates"
            placeholder="请选择"
            :options="options"
            :props="defaultProps"
            filterable
            style="width: 100%"
            @change="changeAddress"
          />
        </el-form-item>
        <!--        <div>{{ form.coordinates }}</div>-->
        <el-form-item label="认证详细地址" prop="adress">
          <el-input v-model.trim="form.adress" style="width: 100%" />
        </el-form-item>
        <el-form-item label="联系人" prop="siteContact">
          <el-input v-model.trim="form.siteContact" style="width: 100%" />
        </el-form-item>
        <el-form-item label="联系方式" prop="siteTel">
          <el-input v-model.trim="form.siteTel" style="width: 100%" />
        </el-form-item>
        <el-form-item v-if="form.deptType==6" label="是否申请考点" prop="isPoints">
          <el-radio-group v-model="form.isPoints">
            <el-radio label="0">是</el-radio>
            <el-radio label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上传营业执照" prop="businessLicense" class="FileUpload">
          <FileUpload
            v-model="form.businessLicense" v-model:file="file2" :file-type="['pdf','png','jpg','jpeg','gif']" :limit="1" class="father"
            :file-size="100"
          />
        </el-form-item>
        <el-form-item label="营业执照名称" prop="companyName">
          <el-input v-model.trim="form.companyName" style="width: 100%" />
        </el-form-item>
        <el-form-item label="社会信用代码" prop="creditCode">
          <el-input v-model.trim="form.creditCode" style="width: 100%" />
        </el-form-item>
        <el-form-item label="法人身份证" prop="legalIdcPhoto1" class="legalCard">
          <el-row style="width: 100%;">
            <el-col :span="12">
              <ImageUpload2
                v-model="form.legalIdcPhoto1" class="card1" :crop-width="440" :crop-height="260"
                :limit="1"
              />
            </el-col>
            <el-col :span="12">
              <ImageUpload2
                v-model="form.legalIdcPhoto2" v-model:file="file1" class="card2" :crop-width="440" :crop-height="260"
                :limit="1"
              />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="法人姓名" prop="legal">
          <el-input v-model.trim="form.legal" style="width: 100%" />
        </el-form-item>
        <el-form-item label="法人证件号" prop="legalIdcCode">
          <el-input v-model.trim="form.legalIdcCode" style="width: 100%" />
        </el-form-item>
        <el-form-item label="上传机构照片" prop="pictures">
          <ImageUpload2 v-model="form.pictures" crop-width="440" crop-height="260" :limit="3" />
        </el-form-item>
        <div style="text-align: center">
          <el-button type="primary" @click="submit">提交</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!--预览-->
    <el-dialog
      v-model="showImage"
      title="预览"
      width="80%"
      append-to-body
      style="border-radius: 20px; padding: 20px;"
    >
      <img :src="fillImgUrl(imageUrl)" style="display: block; width: 100%; margin: 0 auto">
    </el-dialog>
  </div>
</template>

<script setup >
import { getCurrentInstance, ref, watch, computed } from 'vue'
import { deptTreeSelect } from '@/api/system/user'
import { regionsList, compileInfo, getBusinessLicense, checkBusinessLicense } from '@/api/system/userInfo.js'
import { fillImgUrl } from '@/utils/ruoyi'
import { carUrl } from '/@/api/person/info'

import useUserStore from '@/store/modules/user'
const userId = computed(() => useUserStore().userId)
console.log(userId.value)
const form = ref({})
const showDialog = ref(false)
const showImage = ref(false)
const imageUrl = ref()
const { proxy } = getCurrentInstance()
const props2 = {
  checkStrictly: true,
  children: 'children',
  value: 'id',
  emitPath: false
}

const emit = defineEmits(['backFN'])

const defaultProps = {
  children: 'children',
  label: 'text',
  checkStrictly: true
}
const options = ref([])
const list = ref([])
const file1 = ref(null)
const file2 = ref(null)
const timer = ref()
const creditCode = ref()
// const belongProvinceId = ref()
const name = ref()
const rules = ref({
  deptId: [{ required: true, trigger: 'blur', message: '请选择所属协会' }],
  date1: [{ required: true, trigger: 'blur', message: '请选择有效期' }],
  creditCode: [
    { required: true, trigger: 'blur', message: '请输入社会信用代码' }
  ],
  businessLicense: [
    { required: true, trigger: 'blur', message: '请上传营业执照' }
  ],
  companyName: [{ required: true, trigger: 'blur', message: '请输入营业执照名称' }],
  legal: [{ required: true, trigger: 'blur', message: '请输入法人姓名' }],
  legalIdcCode: [{ required: true, trigger: 'blur', message: '请输入法人证件号' }],
  siteContact: [{ required: true, trigger: 'blur', message: '请输入联系人' }],
  siteTel: [{ required: true, trigger: 'blur', message: '请输入联系方式' }],
  applyPoints: [{ required: true, trigger: 'blur', message: '请选择是否为考点' }],
  isPoints: [{ required: true, trigger: 'blur', message: '请选择是否为考点' }],
  pictures: [{ required: true, trigger: 'blur', message: '请上传机构照片' }],
  name: [{ required: true, trigger: 'blur', message: '请输入机构名称' }],
  materials1: [{ required: true, trigger: 'blur', message: '请上传入会材料' }],
  applicationForMembership1: [{ required: true, trigger: 'blur', message: '请上传入会申请书' }],
  renewYear: [{ required: true, trigger: 'blur', message: '请选择认证年限' }],
  deptType: [{ required: true, trigger: 'blur', message: '请选择认证类型' }],
  orgName: [{ required: true, trigger: 'blur', message: '请输入机构名称' }],
  check: [{ required: true, trigger: 'blur', message: '请勾选入会须知' }],
  adress: [{ required: true, trigger: 'blur', message: '请输入认证详细地址' }],
  coordinates: [{ required: true, trigger: 'blur', message: '认证地址不能为空' }],
  leaseValidity: [{ required: true, trigger: 'blur', message: '请选择租赁有效期' }],
  legalIdcPhoto1: [
    { required: true, trigger: 'blur', message: '请上传身份证正反面' },
    { validator: validateID, trigger: 'blur' }
  ],
  belongProvinceId: [{ required: true, trigger: 'change', message: '请选着所属省份' }],
  ownFlag: [{ required: true, trigger: 'change', message: '请选择是否为自选考场' }],
  // leaseTime: [{ required: true, trigger: 'change', message: '请选着租赁合同有效期' }],
  leaseContract: [{ required: true, trigger: 'blur', message: '请上传租赁合同' }]
})

function open(row) {
  console.log(row)
  showDialog.value = true
  form.value = JSON.parse(JSON.stringify(row)) || {}
  if (!Array.isArray(form.value.pictures)) {
    form.value.pictures = form.value?.pictures?.split(',') || []
  }
  if (Array.isArray(form.value.legalIdcPhoto)) {
    // form.value.legalIdcPhoto = form.value?.legalIdcPhoto?.split(',') || []
    form.value.legalIdcPhoto1 = form.value.legalIdcPhoto?.[0] || ''
    form.value.legalIdcPhoto2 = form.value.legalIdcPhoto?.[1] || ''
  }
  if (!Array.isArray(form.value.leaseContract) && form.value.leaseContract?.length > 0) {
    form.value.leaseContract = JSON.parse(form.value.leaseContract)
  }
  if (!Array.isArray(form.value.materials) && form.value.materials?.length > 0) {
    form.value.materials = JSON.parse(form.value.materials)
  }
  if (!Array.isArray(form.value.applicationForMembership) && form.value.applicationForMembership?.length > 0) {
    form.value.applicationForMembership = JSON.parse(form.value.applicationForMembership)
  }

  try {
    if (form.value.certBusinessLicense) {
      form.value.businessLicense = JSON.parse((form.value.certBusinessLicense))
    } else {
      form.value.businessLicense = JSON.parse((form.value.businessLicense))
    }
  } catch (e) {
    if (form.value.certBusinessLicense) {
      form.value.businessLicense = form.value.certBusinessLicense
    }
  }

  form.value.coordinates = []
  form.value.certProvinceId ? form.value.coordinates.push(form.value.certProvinceId) : null
  form.value.certCityId ? form.value.coordinates.push(form.value.certCityId) : null
  form.value.regionId ? form.value.coordinates.push(form.value.certRegionId) : null
  console.log(form.value.coordinates)
  form.value.certRegionId = form.value.deptId + ''
  // form.value.leaseTime = form.value.leaseTime || ''
  // form.value.leaseTime ? form.value.leaseTime : form.value.leaseTime = ''

  name.value = form.value.name
  // belongProvinceId.value = form.value.name
  creditCode.value = !!form.value.creditCode
  console.log(form.value)
  addressFn()
  getDeptTree()
}

// 认证地址
function changeAddress(value) {
  form.value.provinceId = value?.[0]?.toString()
  form.value.cityId = value?.[1]?.toString()
  form.value.regionId = value?.[2]?.toString()
}

async function getDeptTree() {
  // const res1 = await deptTreeSelect({ showDirect: '-1', fromTree: 1, showAll: 1 })
  const res1 = await deptTreeSelect({ selfDeptId: '-1', showDirect: 1, showAll: 1 })
  list.value = res1.data
  if (typeof list.value?.[0]?.id == 'number') {
    form.value.deptId = form.value.deptId * 1
  } else {
    form.value.deptId = form.value.deptId.toString()
  }
}

function validateID(rule, value, callback) {
  if (!form.value.legalIdcPhoto1) {
    callback(new Error('请上传您的身份证国徽面'))
  }
  if (!form.value.legalIdcPhoto2) {
    callback(new Error('请上传您的身份证头像面'))
  }
  return callback()
}

async function addressFn() {
  const res = await regionsList()
  options.value = res.data
}

// 提交
function submit() {
  proxy.$refs['formData'].validate(async(valid) => {
    if (valid) {
      const res1 = await handelVerify()
      if (!res1.passFlag) await proxy.$modal.confirm(`${res1.msg},是否继续提交？`)
      if (form.value.deptId == -1 || form.value.deptId == 0) {
        return proxy.$modal.msgError('请选择所属协会')
      }
      console.log(form.value.pictures)
      let res = null
      res = await compileInfo({
        deptId: form.value.deptId,
        creditCode: form.value.creditCode,
        certLegal: form.value.legal,
        legal: form.value.legal,
        memCode: form.value.memCode,
        // legalPhoto: form.value.legalPhoto,
        certBusinessLicense: Array.isArray(form.value.businessLicense) ? JSON.stringify(form.value.businessLicense) : form.value.businessLicense,
        businessLicense: Array.isArray(form.value.businessLicense) ? JSON.stringify(form.value.businessLicense) : form.value.businessLicense,
        certPictures: Array.isArray(form.value.pictures) ? form.value.pictures.join(',') : form.value.pictures,
        pictures: Array.isArray(form.value.pictures) ? form.value.pictures.join(',') : form.value.pictures,
        // materials: JSON.stringify(form.value.materials1),
        // applicationForMembership: JSON.stringify(form.value.applicationForMembership1),
        memId: form.value.memId,
        // id: form.value.deptId,
        name: form.value.name,
        certRegionId: form.value.regionId,
        regionId: form.value.regionId,
        certCityId: form.value.cityId,
        cityId: form.value.cityId,
        certProvinceId: form.value.provinceId,
        provinceId: form.value.provinceId,
        certAddress: form.value.adress,
        adress: form.value.adress,
        // belongProvinceId: form.value.belongProvinceId,
        deptType: form.value.deptType,
        leaseValidity: form.value.leaseValidity,
        certLegalIdcPhoto: [form.value.legalIdcPhoto1, form.value.legalIdcPhoto2]?.join(','),
        legalIdcPhoto: [form.value.legalIdcPhoto1, form.value.legalIdcPhoto2]?.join(','),
        leaseContract: JSON.stringify(form.value.leaseContract),
        // leaseTime: form.value.leaseTime ? [...form.value.leaseTime].join() : '',
        // applyPoints: form.value.applyPoints,
        certSiteContact: form.value.siteContact,
        siteContact: form.value.siteContact,
        certSiteTel: form.value.siteTel,
        siteTel: form.value.siteTel,
        isPoints: form.value.isPoints,
        certCompanyName: form.value.companyName,
        companyName: form.value.companyName,
        certLegalIdcCode: form.value.legalIdcCode,
        legalIdcCode: form.value.legalIdcCode
      })
      if (res.code === 200) {
        emit('backFN')
        proxy.$modal.msgSuccess('操作成功！')
      } else {
        proxy.$modal.msgError('操作失败！')
      }
    } else {
      proxy.$modal.msgError('请完善信息')
    }
  })
}

watch(() => file1.value, (v) => {
  if (v) {
    clearTimeout(timer.value)
    timer.value = setTimeout(() => {
      cardExtract()
    }, 500)
  }
})

watch(() => file2.value, (v) => {
  if (v) {
    clearTimeout(timer.value)
    timer.value = setTimeout(() => {
      licenseFn()
    }, 500)
  }
})

// 身份证提取
async function cardExtract() {
  try {
    const formData = new FormData()
    formData.append('pic', file1.value)
    const res = await carUrl(formData, '0')
    form.value.legal = res.data.name
    form.value.legalIdcCode = res.data.code
  } catch (e) {
    console.log(e)
    form.value.legal = null
    form.value.legalIdcCode = null
  } finally {
    clearTimeout(timer.value)
  }
}

// 营业执照提取
async function licenseFn() {
  try {
    const formData = new FormData()
    formData.append('pic', file2.value)
    const res = await getBusinessLicense(formData)
    form.value.creditCode = res.data.creditCode
    form.value.companyName = res.data.companyName
    console.log(res)
  } catch (e) {
    console.log(e)
    form.value.creditCode = null
    form.value.companyName = null
  } finally {
    clearTimeout(timer.value)
  }
}

function handelVerify() {
  return new Promise(async(resolve, reject) => {
    if (!form.value.legalIdcCode || !form.value.legal) {
      proxy.$modal.msgError('请重新上传身份证')
      return reject()
    }
    if (!form.value.companyName || !form.value.creditCode) {
      proxy.$modal.msgError('请重新上传营业执照')
      return reject()
    }
    const res = await checkBusinessLicense({
      creditCode: form.value.creditCode,
      companyName: form.value.companyName,
      legalIdcCode: form.value.legalIdcCode,
      legal: form.value.legal
    })
    if (res.code == 200) {
      resolve(res.data)
    } else {
      reject(res)
    }
  })
}


defineExpose({
  open
})

</script>

<style scoped lang="scss">
.down{
  color:  #1561cb;
  font-size: 16px;
  margin-left: 10px;
}
.image{
  width: 230px;
  height: 130px;
  margin-right: 10px;
}
.right{
  margin-right: 10px;
}

:deep(.legalCard){
  :deep(.el-form-item__label){color: #7B7F83}

  .el-upload__tip{
    display: none;
  }
  .card1{
    .el-upload--picture-card{
      background-image: url(@/assets/images/card2.png);
      background-size: 100%;
    }
  }

  .card2{
    .el-upload--picture-card{
      background-image: url(@/assets/images/card1.png);
      background-size: 100%;
    }
  }
  .el-upload-list--picture-card{
    width: 360px;
    height: 225px;
    .el-upload--picture-card{
      width: 100%;
      height: 100%;
    }
  }
  .el-upload-list__item{
    width: 360px;
    height: 225px;
    // border-radius: 10px;
    // border: 1px dashed #4e4c4c;
  }
}
</style>