<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { family_list, honor_list, user_detail } from '../api'
const props = defineProps({
  userId: {
    type: String,
    default: '',
  },
  data: {
    type: Array,
    default: [],
  },
  showType: '',
})
const xsformData = ref(props.data)

const rymcData = ref()

const jtzycyData = ref([])
const avatar = ref('')
const dialogVisible = ref(false)
const dialogTitle = ref('')
const dialogKey = ref('')
const detailKeyData = ref([])
const lookMore = ({ key, name, children }) => {
  dialogTitle.value = name
  dialogKey.value = key
  dialogVisible.value = true
  detailKeyData.value = children
}
const detailInfo = ref({})
const ruleForm = ref({})
const userInfo = ref({})
detailData()
async function detailData() {
  const res = await user_detail({ user_id: props.userId })
  if (res.code == 1) {
    detailInfo.value = res.data
    avatar.value = detailInfo.value.user_avatar?.big
    ruleForm.value = {
      ue_jgmc: detailInfo.value.user_ext.ue_jgmc, // 籍贯
      ue_user_cardno: detailInfo.value.user_ext.ue_user_cardno, // 身份证号码
      ue_cym: detailInfo.value.user_ext.ue_cym, // 曾用名
      ue_user_birthday: detailInfo.value.user_ext.ue_user_birthday, // 出生日期
      ue_mzmc: detailInfo.value.user_ext.ue_mzmc, // 民族
      ue_user_gender: detailInfo.value.user_ext.ue_user_gender == 1 ? '男' : (detailInfo.value.user_ext.ue_user_gender == 2 ? '女' : '保密'), // 性别
      ue_zzmmmc: detailInfo.value.user_ext.ue_zzmmmc, // 政治面貌
      ue_whcdmc: detailInfo.value.user_ext.ue_whcdmc, // 文化程度
      ue_szzbmc: detailInfo.value.user_ext.ue_szzbmc, // 所在支部
      ue_rdsj: detailInfo.value.user_ext.ue_rdsj, // 入党时间
      ue_bzlxmc: detailInfo.value.user_ext.ue_bzlxmc, // 编制类型
      ue_szdxzmc: detailInfo.value.user_ext.ue_szdxzmc, // 所在党小组
      ue_yynlmc: detailInfo.value.user_ext.ue_yynlmc, // 语言能力
      // ue_jtzz: detailInfo.value.user_ext.ue_jtzz, // 家庭住址
      // ue_xxdz: detailInfo.value.user_ext.ue_xxdz, // 详细地址
      // ue_yynlmc: detailInfo.value.user_ext.ue_yynlmc, // 事业单位
      ue_xlbj: detailInfo.value.user_ext.ue_xlbj != '' ? detailInfo.value.user_ext.ue_xlbj : '无', // 训练背景
      ue_tc: detailInfo.value.user_ext.ue_tc ? detailInfo.value.user_ext.ue_tc : '无', // 特长
      ue_user_phone: detailInfo.value.user_ext.ue_user_phone, // 联系方式
      ue_user_email: detailInfo.value.user_ext.ue_user_email, // 电子邮件
    }

    userInfo.value = {
      user_realname: detailInfo.value.user_realname,
      ue_xh: detailInfo.value.user_ext.ue_xh,
      user_name: detailInfo.value.user_name,
      user_id: detailInfo.value.user_id,
      sm_name: detailInfo.value.sm_info.sm_name,
      grade_name: detailInfo.value.user_ext.grade_name,

    }
  }

  const res1 = await family_list({ uf_user_id: props.userId })
  if (res1.code == 1) {
    jtzycyData.value = res1.data.page_data
    if (jtzycyData.value[0]) {
      const arr = xsformData.value.filter(item => item.key == 'jtzycy')[0].children
      const obj = {}
      console.log(jtzycyData.value, xsformData.value, arr, 777)
      arr.map((item) => {
        obj[item.key] = jtzycyData.value[0][item.key]
      })
      ruleForm.value = Object.assign(ruleForm.value, obj)
      console.log(ruleForm.value, 11111)
    }
  }

  const res2 = await honor_list({ uh_user_id: props.userId })
  if (res2.code == 1) {
    rymcData.value = res2.data.page_data
    ruleForm.value.sfhj = rymcData.value.length != 0 ? '是' : '否'
  }
}
</script>

<template>
  <div class="detailInfo">
    <div class="mb-40px">
      <div class="bgDiv">
        <img class="w-full" src="/images/topBg.png" alt="">
        <div class="userDiv">
          <img class="img" :src="avatar" alt="">
        </div>
        <div class="name font-18 mt-50px">
          {{ userInfo.user_realname }}
        </div>
      </div>
      <div class="flex justify-between px-10 mt-20px" style="color: #8F95B2;">
        <span>学生学号：{{ userInfo.ue_xh }}</span>
        <span>账号：{{ userInfo.user_name }}</span>
        <span>ID：{{ userInfo.user_id }}</span>
        <span>学校：{{ userInfo.sm_name }}</span>
        <span>年级：{{ userInfo.grade_name }}</span>
      </div>
    </div>
    <el-form ref="ruleFormRef" class="grid grid-cols-2 gap-x-6" label-position="top" :model="ruleForm">
      <div v-for="(value, i) in xsformData" :key="i" class="mb-5" :class="value.detailClass">
        <el-card class="box-card" shadow="none">
          <template #header>
            <div class="card-header flex justify-between items-center">
              <span class="font-semibold">{{ value.name }}</span>

              <span v-if="value.key == 'jtzycy' || value.key == 'hjry'" class="cursor-pointer more" @click="lookMore(value)">查看更多<el-icon>
                <ArrowRight />
              </el-icon>
              </span>
            </div>
          </template>
          <div class="grid grid-cols-2 gap-x-10">
            <template v-for="(item, index) in value.children" :key="index">
              <el-form-item v-if="!item.hidden" :class="item.class" :label="item.name" :prop="item.key">
                <div v-if="item.type == 'textarea'" class="textarea">
                  {{ ruleForm[item.key] }}
                </div>
                <el-input v-if="item.type != 'textarea'" v-model="ruleForm[item.key]" readonly />
              </el-form-item>
            </template>
          </div>
          <div v-if="value.key == 'hjry'">
            <template v-for="(val, vi) in rymcData" :key="vi">
              <div v-if="vi < 3" class="flex items-center space-x-4">
                <span class="rymcName">{{ val.uh_rymc }}</span>
              </div>
            </template>
          </div>
        </el-card>
      </div>
      <!-- <div class="mb-5">
        <el-card class="box-card">
          <template #header>
            <div class="card-header flex justify-between items-center">
              <span class="font-semibold">管理单位</span>
            </div>
          </template>
          <div class="grid grid-cols-2 gap-x-4">
            <div v-for="(item, index) in gldwData" :key="index" class="rymcName">
              {{ item }}
            </div>
          </div>
        </el-card>
      </div> -->
    </el-form>

    <el-dialog v-model="dialogVisible" :title="dialogTitle" class="_" width="496px">
      <el-form ref="ruleFormRef" label-position="top">
        <div v-if="dialogKey == 'jtzycy'">
          <div v-for="(value, i) in jtzycyData" :key="i" class="grid grid-cols-2 gap-x-10" :class="i != 0 ? 'jtzycyGap' : ''">
            <el-form-item v-for="(item, index) in detailKeyData" :key="index" :class="item.class" :label="item.name" :prop="item.key">
              <el-input v-model="value[item.key]" readonly />
            </el-form-item>
          </div>
        </div>

        <div v-if="dialogKey == 'hjry'">
          <div class="grid grid-cols-2 gap-x-10">
            <template v-for="(item, index) in detailKeyData" :key="index">
              <el-form-item v-if="!item.hidden" :class="item.class" :label="item.name" :prop="item.key">
                <el-input v-model="ruleForm[item.key]" readonly />
              </el-form-item>
            </template>
          </div>
          <div>
            <div v-for="(val, vi) in rymcData" :key="vi" class="flex items-center space-x-4">
              <span class="rymcName">{{ val.uh_rymc }}</span>
            </div>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.detailInfo {
  .bgDiv {
    position: relative;
    .userDiv {
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 2px solid #fff;
      border-radius: 50%;
      padding: 3px;
      .img {
        width: 82px;
        height: 82px;
        border-radius: 50%;
        background: #ccc;
      }
    }
    .name {
      text-align: center;
      color: #081735;
      font-size: 18px;
    }
  }
  :deep(.el-card) {
    border: none;
    border-radius: 16px;
    box-shadow: 0px 8px 16px 0px rgba(143, 149, 178, 0.15);
    .el-card__header {
      color: #081735;
      font-size: 18px;
      height: 50px;
      line-height: 50px;
      padding: 0 20px;
      .more {
        background: #eff3fb;
        border-radius: 8px;
        color: #4d4d4d;
        font-size: 12px;
        padding: 0 8px;
        line-height: 23px;
      }
    }
  }
  :deep(.el-form) {
    .el-form-item__label {
      font-size: 12px;
      color: #3f8cff;
      margin-bottom: 5px;
    }
    .el-form-item__content {
      .textarea,
      .el-input__wrapper {
        box-shadow: 0 0 0 1px #ebf3ff inset;
        border-radius: 8px;
      }
      .el-input__inner {
        color: #000;
        font-weight: 600;
      }
      .textarea {
        padding: 1px 15px;
        width: 100%;
        min-height: 65px;
        color: #000;
        font-weight: 600;
      }
    }
  }
  .rymcName {
    color: #000;
    font-weight: 600;
    line-height: 30px;
  }
  .jtzycyGap {
    border-top: 1px solid #e0eaf8;
    padding-top: 15px;
  }
}
</style>
