<template>
  <div>
    <el-dialog
      v-if="showDialog"
      v-model="showDialog"
      title="编辑机构资料"
      width="1000px"
      :before-close="handleClose"
      @close="showClose"
    >
      <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
            @change="changCase"
          />
        </el-form-item>
        <el-form-item label="机构名称" prop="name">
          <el-input v-model="form.name" :disabled="name" style="width: 100%" />
        </el-form-item>
        <el-form-item label="所属省份" prop="belongProvinceId">
          <el-select
            v-model="form.belongProvinceId"
            placeholder="请选择"
            style="width: 100%"
            :disabled="belongProvinceId"
          >
            <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="creditCode">
          <el-input v-model="form.creditCode" :disabled="creditCode" style="width: 100%" />
        </el-form-item>
        <el-form-item label="联系人" prop="siteContact">
          <el-input v-model="form.siteContact" style="width: 100%" />
        </el-form-item>
        <el-form-item label="联系方式" prop="siteTel">
          <el-input v-model="form.siteTel" style="width: 100%" />
        </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="form.adress" style="width: 100%" />
        </el-form-item>
        <el-form-item label="法人姓名" prop="legal">
          <el-input v-model="form.legal" 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="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" class="card2" :crop-width="440" :crop-height="260"
                :limit="1"
              />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="上传营业执照" prop="businessLicense" class="FileUpload">
          <FileUpload
            v-if="!businessLicenseValue"
            v-model="form.businessLicense" :file-type="['pdf','png','jpg','jpeg','gif']" :limit="1" class="father" :file-size="100"
          />
          <a v-else :href="fillImgUrl(businessLicenseValue)" :underline="false" target="_blank">
            <el-button class="left" type="primary" link>营业执照</el-button>
          </a>
        </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 } from 'vue'
import { deptTreeSelect } from '@/api/system/user'
import { regionsList, compileInfo } from '@/api/system/userInfo.js'
import { fillImgUrl } from '@/utils/ruoyi'

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 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: '请上传营业执照' }
  ],
  legal: [{ 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) {
  showDialog.value = true
  form.value = JSON.parse(JSON.stringify(row)) || {}
  if (!Array.isArray(form.value.pictures)) {
    form.value.pictures = form.value?.pictures?.split(',') || []
  }
  console.log(form.value.pictures)
  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.businessLicense) {
      form.value.businessLicense = JSON.parse(form.value.certBusinessLicense)
    }
  } catch (e) {
    form.value.businessLicense = []
  }
  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()
}

function imageFN(row) {
  imageUrl.value = row
  showImage.value = true
}

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

// 提交
function submit() {
  proxy.$refs['formData'].validate(async(valid) => {
    if (valid) {
      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,
        memCode: form.value.memCode,
        // legalPhoto: form.value.legalPhoto,
        certBusinessLicense: JSON.stringify(form.value.businessLicense),
        certPictures: 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,
        certCityId: form.value.cityId,
        certProvinceId: form.value.provinceId,
        certAddress: form.value.adress,
        belongProvinceId: form.value.belongProvinceId,
        deptType: form.value.deptType,
        leaseValidity: form.value.leaseValidity,
        certLegalIdcPhoto: [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,
        certSiteTel: form.value.siteTel,
        isPoints: form.value.isPoints
      })
      if (res.code === 200) {
        showClose()
        proxy.$modal.msgSuccess('操作成功！')
      } else {
        proxy.$modal.msgError('操作失败！')
      }
    } else {
      proxy.$modal.msgError('请完善信息')
    }
  })
}

function showClose() {
  showDialog.value = false
  emit('backFN')
}

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>