<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="userForm" label-width="110px" :rules="rules">
        <el-form-item label="所属协会" prop="deptId" class="cas">
          <el-cascader
            v-model="userForm.deptId"
            :options="list"
            :props="props2"
            placeholder=""
            clearable
            style="width: 100%"
            disabled
          />
        </el-form-item>
        <el-form-item v-if="userForm.menCode" label="会员编号" prop="menCode">
          <el-input v-model.trim="userForm.menCode" disabled style="width: 100%" />
        </el-form-item>
        <el-form-item label="机构名称" prop="name">
          <el-input v-model.trim="userForm.name" :disabled="true" style="width: 100%" />
        </el-form-item>
        <!--        <el-form-item label="所属省份" prop="">-->
        <!--          <el-select-->
        <!--            v-model="userForm.belongProvinceId"-->
        <!--            placeholder="请选择"-->
        <!--            style="width: 100%"-->
        <!--            :disabled="true"-->
        <!--          >-->
        <!--            <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="userForm.coordinates"
            :disabled="true"
            placeholder="请选择"
            :options="options"
            :props="defaultProps"
            filterable
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="认证详细地址" prop="adress">
          <el-input v-model.trim="userForm.adress" :disabled="true" style="width: 100%" />
        </el-form-item>
        <el-form-item label="联系人" prop="siteContact">
          <el-input disabled :value="userForm.siteContact" style="width: 100%" />
        </el-form-item>
        <el-form-item label="联系方式" prop="siteTel">
          <el-input disabled :value="userForm.siteTel" style="width: 100%" />
        </el-form-item>
        <el-form-item v-if="userForm.deptType==6" label="是否为考点" prop="applyPoints">
          <el-radio-group v-model="userForm.applyPoints" disabled>
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上传营业执照" prop="businessLicense">
          <a v-if="businessLicense" :href="fillImgUrl(userForm.businessLicense)" :underline="false" target="_blank">
            <el-button type="primary" link>营业执照</el-button>
          </a>
          <a v-else :href="fillImgUrl(userForm.businessLicense?.[0]?.url)" :underline="false" target="_blank">
            <el-button type="primary" link>{{ userForm.businessLicense?.[0]?.name }}</el-button>
          </a>
        
        </el-form-item>
        <el-form-item label="营业执照名称" prop="legal">
          <el-input disabled :value="userForm.companyName" style="width: 100%" />
        </el-form-item>
        <el-form-item label="社会信用代码" prop="creditCode">
          <el-input v-model.trim="userForm.creditCode" disabled style="width: 80%" />
          <el-button
            v-hasPermi="['groupMember:institution:clear']" style="margin-left: 20px"
            @click="clearCode(userForm)"
          >清空
          </el-button>
        </el-form-item>
        
        <el-form-item v-if="userForm.validityDate" label="有效期" prop="date1">
          <el-input :value="userForm.validityDate" disabled />
        </el-form-item>
        <el-form-item label="法人身份证" prop="legalPhoto">
          <el-image
            v-for="item in userForm.legalIdcPhoto"
            :key="item" class="right shou" style="width: 360px; height: 225px" :src="fillImgUrl(item)"
            :fit="fit"
            @click="imageFN(item)"
          />
        </el-form-item>
        <el-form-item label="法人姓名" prop="legal">
          <el-input disabled :value="userForm.legal" style="width: 100%" />
        </el-form-item>
        <el-form-item label="法人证件号" prop="legalIdcCode">
          <el-input disabled :value="userForm.legalIdcCode" style="width: 100%" />
        </el-form-item>
        
        <el-form-item label="上传机构照片" prop="pictures">
          <el-image
            v-for="item in userForm.pictures" :key="item" class="image shou" style="width: 230px; height: 130px"
            :src="fillImgUrl(item)"
            @click="imageFN(item)"
          />
        </el-form-item>
        <!--        <el-form-item label="是否申请" prop="examPointFlag">-->
        <!--          <el-radio-group v-model="userForm.examPointFlag" disabled class="left">-->
        <!--            <el-radio label="1">是</el-radio>-->
        <!--            <el-radio label="0">否</el-radio>-->
        <!--          </el-radio-group>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item v-if="userForm.materials" label="入会材料" class="FileUpload" prop="materials1">-->
        <!--          <el-link class="size" :href="`${ download +userForm.materials?.[0].url}`" :underline="false" target="_blank"> <span class="down">{{ userForm.materials?.[0].name }}</span>  </el-link>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item v-if="userForm.applicationForMembership" label="入会申请书" class="FileUpload" prop="">-->
        <!--          <el-link class="size" :href="`${ download +userForm.applicationForMembership?.[0].url}`" :underline="false" target="_blank"> <span class="down">{{ userForm.applicationForMembership?.[0].name }}</span>  </el-link>-->
        <!--        </el-form-item>-->
        <!--        &lt;!&ndash;        <el-form-item label="是否为自有场所" prop="ownFlag">&ndash;&gt;-->
        <!--        &lt;!&ndash;          <el-radio-group v-model="userForm.ownFlag" disabled class="left">&ndash;&gt;-->
        <!--        &lt;!&ndash;            <el-radio label="1">是</el-radio>&ndash;&gt;-->
        <!--        &lt;!&ndash;            <el-radio label="0">否</el-radio>&ndash;&gt;-->
        <!--        &lt;!&ndash;          </el-radio-group>&ndash;&gt;-->
        <!--        &lt;!&ndash;        </el-form-item>&ndash;&gt;-->
        <!--        <el-form-item v-if="userForm.leaseContract&&userForm.ownFlag==1" label="合同" class="FileUpload" prop="">-->
        <!--          <el-link class="size" :href="`${ download +userForm.leaseContract?.[0].url}`" :underline="false" target="_blank"> <span class="down">{{ userForm.leaseContract?.[0].name }}</span>  </el-link>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item v-if="userForm.leaseContract&&userForm.ownFlag==0" label="租赁合同" class="FileUpload" prop="">-->
        <!--          <el-link class="size" :href="`${ download +userForm.leaseContract?.[0].url}`" :underline="false" target="_blank"> <span class="down">{{ userForm.leaseContract?.[0].name }}</span>  </el-link>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item v-if="userForm.ownFlag==0" label="租赁合同有效期" class="FileUpload" prop="applicationForMembership1" :disabled="!result">-->
        <!--          <div class="left">{{ userForm.leaseTime?.replaceAll(',','&#45;&#45;') }}</div>-->
        <!--        </el-form-item>-->
        <div v-if="editBtn" style="text-align: center">
          <el-button type="primary" @click="compile">编辑</el-button>
        </div>
      </el-form>
      <compileInstitution ref="compileInstitutionRef" @back-f-n="showClose" />
    </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, clearYYZZ } from '@/api/system/userInfo.js'
import compileInstitution from '@/views/groupMember/components/compileInstitution.vue'
import { fillImgUrl } from '@/utils/ruoyi'

const { proxy } = getCurrentInstance()
const userForm = ref()
const showDialog = ref(false)
const showImage = ref(false)
const imageUrl = ref()
const businessLicense = ref(false)

const props2 = {
  checkStrictly: true,
  children: 'children',
  value: 'id',
  emitPath: false
}
defineProps({
  editBtn: {
    type: Boolean,
    default: false
  }
})

const defaultProps = {
  children: 'children',
  label: 'text',
  checkStrictly: true
}
const options = ref([])
const list = ref([])
const type = ref()
const rowVal = ref()

function open(row, val) {
  showDialog.value = true
  rowVal.value = row
  type.value = val
  userForm.value = row || {}
  if (!Array.isArray(userForm.value.pictures)) {
    userForm.value.pictures = userForm.value?.pictures?.split(',') || []
  }
  if (!Array.isArray(userForm.value.legalIdcPhoto)) {
    userForm.value.legalIdcPhoto = userForm.value?.legalIdcPhoto?.split(',') || []
  }
  if (!Array.isArray(userForm.value.leaseContract) && userForm.value.leaseContract?.length > 0) {
    userForm.value.leaseContract = JSON.parse(userForm.value.leaseContract)
  }
  if (!Array.isArray(userForm.value.materials) && userForm.value.materials?.length > 0) {
    userForm.value.materials = JSON.parse(userForm.value.materials)
  }
  if (!Array.isArray(userForm.value.applicationForMembership) && userForm.value.applicationForMembership?.length > 0) {
    userForm.value.applicationForMembership = JSON.parse(userForm.value.applicationForMembership)
  }
  
  if (!Array.isArray(userForm.value.businessLicense)) {
    try {
      userForm.value.businessLicense = JSON.parse(userForm.value.businessLicense)
    } catch (e) {
      businessLicense.value = true
    }
  }
  
  // try {
  //   // if (userForm.value.businessLicense) {
  //   //   businessLicense.value.url = JSON.parse(userForm.value.businessLicense)?.[0]?.url
  //   //   businessLicense.value.url = fillImgUrl(businessLicense.value.url = JSON.parse(userForm.value.businessLicense)?.[0]?.url)
  //   //   businessLicense.value.name = JSON.parse(userForm.value.businessLicense)?.[0]?.name
  //   // }
  //   userForm.value.businessLicense = JSON.parse(userForm.value.businessLicense)
  // } catch (e) {
  //   businessLicense.value = true
  // }
  userForm.value.coordinates = []
  userForm.value.provinceId ? userForm.value.coordinates.push(userForm.value.provinceId) : ''
  userForm.value.cityId ? userForm.value.coordinates.push(userForm.value.cityId) : ''
  userForm.value.regionId ? userForm.value.coordinates.push(userForm.value.regionId) : ''
  userForm.value.deptId = userForm.value.deptId + ''
  userForm.value.leaseTime = userForm.value.leaseTime || ''
  // userForm.value.leaseTime ? userForm.value.leaseTime : userForm.value.leaseTime = ''
  userForm.value.applyPoints = userForm.value.applyPoints.toString()
  console.log(userForm.value)
  addressFn()
  getDeptTree()
}

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') {
    userForm.value.deptId = userForm.value.deptId * 1
  } else {
    userForm.value.deptId = userForm.value.deptId.toString()
  }
}

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

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

async function clearCode(row) {
  console.log(row)
  const res = await clearYYZZ(row.memId)
  if (res.code == '200' && res.msg == '操作成功') {
    proxy.$modal.msgSuccess('操作成功')
  } else {
    proxy.$modal.msgError('失败')
  }
  showClose()
}

// 编辑
function compile() {
  console.log(rowVal.value)
  proxy.$refs['compileInstitutionRef'].open(rowVal.value)
}

const emit = defineEmits(['backFn'])

function showClose() {
  showDialog.value = false
  businessLicense.value = false
  userForm.value = {}
  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;
}

.shou {
  cursor: pointer
}
</style>