<template>
  <div class="center">
    <!-- 基本信息 -->
    <el-form :model="form" class="from" label-width="120px" style="width:1000px ;margin: 0 auto;">
      <el-form-item label="姓名" prop="name">
        <div class="left">{{ form.name }}</div>
      </el-form-item>
      <el-form-item label="证件类型" prop="idcType">
        <div class="left">{{ cardType?.[form?.idcType]?.label }}</div>
      </el-form-item>
      <el-form-item label="证件号" prop="idcCode">
        <div class="left">{{ form.idcCode }}</div>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <div class="left">{{ form.sex==0?'男':'女' }}</div>
      </el-form-item>
      <el-form-item label="会员编号" prop="perCode">
        <span class="left">{{ form.perCode }}</span>
        <!-- <el-button v-if="form.perCode&&deptType==(1||2)" class="btn" type="text" @click="downloadFN">下载会员证书</el-button> -->
      </el-form-item>
      <el-form-item label="所属一级协会" prop="topAssName">
        <div class="left">{{ form.topAssName }}</div>
      </el-form-item>
      <el-form-item label="所属地区协会" prop="areaAssName">
        <div class="left">{{ form.areaAssName }}</div>
      </el-form-item>
      <el-form-item label="注册团体会员" prop="memName">
        <div class="left">{{ form.memName }}</div>

      </el-form-item>
      <el-form-item label="缴费日期" prop="">
        <div class="left">{{ form.payDate }}</div>

      </el-form-item>
      <el-form-item label="出生日期" prop="birth">
        <div class="left">{{ parseTime(form.birth,'{y}-{m}-{d}') }}</div>
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <div class="left">{{ form.phone }}</div>
      </el-form-item>
      <el-form-item label="地址" prop="">
        <div class="left">{{ form.site }}</div>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <div class="left">{{ form.address }}</div>
      </el-form-item>
      <!-- <el-form-item label="紧急联系人" prop="contactName">
        <div class="left">{{ form.contactName }}</div>
      </el-form-item>
      <el-form-item label="与本人关系" prop="contactRelation">

        <div class="left">{{ form. contactRelation }}</div>
      </el-form-item>
      <el-form-item label="紧急联系方式" prop="contactPhone">
        <div class="left">{{ form.contactPhone }}</div>
      </el-form-item>
      <el-form-item label="自我评价" prop="selfEva" style="width: 630px;">
        <div class="left">{{ form.selfEva }}</div>
      </el-form-item> -->
      <div style="text-align: center;">
        <!-- <el-button type="primary" @click="showDialog=true">编辑</el-button> -->
      </div>
    </el-form>

    <!-- 编辑 -->
    <el-dialog
      v-if="showDialog" v-model="showDialog" title="会员信息" :close-on-click-modal="true"
      width="1000px"
      draggable
      @close="close"
    >
      <el-form ref="infoRef" :model="form" label-width="120px" :rules="rules" style="width:630px ;margin: 0 auto;">
        <!-- <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="证件类型" prop="idcType">
          <el-select v-model="form.idcType" style="width: 100%;">
            <el-option label="身份证" value="0" />
            <el-option label="护照" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="证件号" prop="idcCode">
          <el-input v-model="form.idcCode" placeholder="请输入证件号" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" style="width: 100%;">
            <el-option label="男" value="0">男</el-option>
            <el-option label="女" value="1">女</el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.perCode" label="会员编号" prop="perCode">
          <span>{{ form.perCode }}</span>
          <el-button class="btn" type="primary" @click="downloadFN">下载会员证书</el-button>
        </el-form-item>
        <el-form-item label="所属一级协会" prop="topAssName">
          <el-input v-model="form.topAssName" placeholder="" readonly />
        </el-form-item>
        <el-form-item label="所属地区协会" prop="areaAssName">
          <el-input v-model="form.areaAssName" placeholder="" readonly />
        </el-form-item>
        <el-form-item label="注册团体会员" prop="groupMemberName">
          <el-input v-model="form.groupMemberName" placeholder="" readonly />
        </el-form-item>
        <el-form-item label="缴费日期" prop="">
          <el-input v-model="form.payDate" placeholder="" readonly />
        </el-form-item>
        <el-form-item label="出生日期" prop="birth">
          <el-date-picker
            v-model="form.birth"
            type="date"
            value-format="YYYY-MM-DD HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="width: 100%"
          />
        </el-form-item> -->
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="form.phone" type="number" placeholder="请输入" />
        </el-form-item>
        <!-- city_id -->
        <el-form-item label="地址" prop="cityId">
          <el-cascader
            ref="cascaderA"
            v-model="form.cityId"
            placeholder="请选择"
            :options="options"
            :props="defaultProps"
            filterable
            style="width: 540px"
            @change="changeAddress"
          />
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="form.address" type="text" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="紧急联系人" prop="contactName">
          <el-input v-model="form.contactName" type="text" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="与本人关系" prop="contactRelation">
          <el-select v-model="form.contactRelation" style="width: 100%;">
            <el-option value="父母">父母</el-option>
            <el-option value="配偶">配偶</el-option>
            <el-option value="兄妹">兄妹</el-option>
            <el-option value="其他">其他</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="紧急联系方式" prop="contactPhone">
          <el-input v-model="form.contactPhone" type="text" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="自我评价" prop="selfEva" style="width: 630px;">
          <el-input v-model="form.selfEva" type="textarea" :rows="3" placeholder="请输入" />
        </el-form-item>
        <div style="text-align: center;">
          <el-button type="primary" @click="submitForm">保存</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup >
import { reactive, toRefs, getCurrentInstance, ref } from 'vue'
import { regionsList } from '@/api/system/userInfo.js'
// import { getMyOwnMemberInfo } from '@/api/system/userInfo'
import { editPersonInfo } from '@/api/member/detail.js'
import { getInfo, getAssoPers } from '@/api/person/info.js'
import { useRoute } from 'vue-router'
import { parseTime } from '@/utils/ruoyi.js'
import _ from 'lodash'
// import useUserStore from '@/store/modules/user'

const pattern = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/
const showDialog = ref(false)
const route = useRoute()
const { proxy } = getCurrentInstance()
const options = ref([])
const optionsList = ref([])
const perId = ref(route.query.perId)
const defaultProps = {
  children: 'children',
  label: 'text',
  emitPath: false
}
const props = defineProps({
  userId: {}
})
console.log(props.userId)
const cardType = ref([
  { label: '身份证', value: '0' },
  { label: '港澳台通行证 ', value: '1' },
  { label: '中国护照', value: '2' },
  { label: '外国护照', value: '3' },
  { label: '其它', value: '4' }
])

const data = reactive({
  rules: {
    name: { required: true, message: '请输入姓名', trigger: 'blur' },
    idcType: [
      { required: true, message: '请选择证件类型', trigger: 'blur' }
    ],
    sex: { required: true, message: '请选择性别', trigger: 'blur' },
    birth: { required: true, message: '请选择出生日期', trigger: 'blur' },
    idcCode: [
      { required: true, message: '请输入证件号', trigger: 'blur' },
      { validator: validateCode, trigger: 'blur' }
    ],
    phone: {
      required: true,
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: '请输入正确的手机号码',
      trigger: 'blur'
    },
    regionId: { required: true, message: '请选择地址', trigger: 'blur' },
    address: { required: true, message: '请输入详细地址', trigger: 'blur' },
    contactName: { required: true, message: '请输入紧急联系人', trigger: 'blur' },
    // contactRelation: { required: true, message: '请选择与本人的关系', trigger: 'blur' },
    // contactPhone: [
    //   { required: true, message: '请输入紧急联系人方式', trigger: 'blur' },
    //   {
    //     required: true,
    //     pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
    //     message: '请输入正确的手机号码',
    //     trigger: 'blur'
    //   }
    // ],
    // selfEva: { required: true, message: '自我评价', trigger: 'blur' },
    // areaAssName: { required: true, message: '请选择', trigger: 'blur' },
    // topAssName: { required: true, message: '请选择', trigger: 'blur' },
    // groupMemberName: { required: true, message: '请输入注册团体会员名称', trigger: 'blur' },
    date1: [
      {
        required: true,
        message: '请选择报名日期',
        trigger: 'change'
      }
    ],
    payDate: [
      {
        required: true,
        message: '请缴费日期',
        trigger: 'change'
      }
    ]
  },
  form: {}
})

const { rules, form } = toRefs(data)

// 地区
addressFn()
async function addressFn() {
  const res = await regionsList()
  options.value = res.data
  optionsList.value = res.data.flat(Infinity)
}

getAssoPersFn()
async function getAssoPersFn() {
  const res = await getAssoPers(route.query.perId)
  console.log(res.data[10])
  if (res.data[10]) perId.value = res.data[10] 
  initData()
}

function findRegion(value, regions) {
  let city, area
  const pre = _.find(regions, (p) => {
    if (p.value == value) {
      return true
    } else {
      city = _.find(p.children, (c) => {
        if (c.value == value) {
          return true
        } else {
          area = _.find(c.children, (a) => {
            return a.value == value
          })
          return !!area
        }
      })
      return !!city
    }
  })

  return `${pre?.text ? pre?.text : ''}${city?.text ? ('/' + city?.text) : ''} ${area?.text ? '/' + area?.text : ''}`


  // for (let i = 0; i < regions.length; i++) {
  //   if (regions[i].value === value) {
  //     return regions[i]
  //   } else {
  //     if (regions[i].children && regions[i].children.length > 0) {
  //       const result = findRegion(value, regions[i].children)
  //       if (result) {
  //         return result
  //       }
  //     }
  //   }
  // }

  // return null
}

// 身份证校验
function validateCode(rule, value, callback) {
  if (form.value.idcType == 0) {
    if (pattern.test(value)) {
      return callback()
    }
    callback(new Error('请输入正确格式的身份证号码')) // 如果是未校验的身份证
  } else {
    return callback()
  }
}


async function initData() {
  const res = await getInfo(perId.value)
  // const res1 = await getMyOwnMemberInfo()
  form.value = res.data
  form.value.topAssName = form.value?.ancestorNameList?.[0]
  form.value.areaAssName = form.value?.ancestorNameList?.[1]
  form.value.memName = res.data.memName
  form.value.payDate = parseTime(form.value.payDate, '{y}-{m}-{d}')
  form.value.site = findRegion(form.value.cityId, options.value)
  // console.log(form.value)
  console.log(res)
}


/** 提交按钮 */
function submitForm() {
  proxy.$refs['infoRef'].validate(async valid => {
    if (valid) {
      form.value.perId = route.query.perId
      const res = await editPersonInfo({
        phone: form.value.phone,
        selfEva: form.value.selfEva,
        contactPhone: form.value.contactPhone,
        contactRelation: form.value.contactRelation,
        contactName: form.value.contactName,
        address: form.value.address,
        cityId: form.value.cityId,
        perId: form.value.perId
      })
      if (res.code === 200) {
        proxy.$modal.msgSuccess('保存成功')
        showDialog.value = false
        initData()
      }
    } else {
      proxy.$modal.msgError('请完善信息')
    }
  })
}

// function downloadFN() {
//   proxy.download(
//     `/person/info/export/personCert/${route.query.perId}`, {}, '会员证.pdf'
//   )
// }

</script>

<style scope lang="scss">
.btn{
  margin-left: 10px;
}
.center{
  padding: 20px;
  text-align: center; 	// 中间显示元素
}
.left{
  margin-left: 50px;
  font-size: 16px;
  background-color: #f5f7fa;
  border: 1px solid #dcdee2;
  border-radius: 5px;
  padding-left: 20px;
  min-height: 34px;
  width: 100%;
  text-align: left;
}
.from{
  .el-form-item__label{
  font-size: 16px;
}
}

</style>