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

const ruleForm = ref({})
const userInfo = ref({})
const avatar = ref('')

const gldwData = ref(['山东小学三年级语文组', '山东小学三年级一班班主任'])

const gzjlData = ref([])
const rymcData = ref([])
const jsRzxxData = ref([])
const jdRzxxData = 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 = JSON.parse(JSON.stringify(children))
  detailKeyData.value.map((item) => {
    item.key = item.keyName ? item.keyName : item.key
  })
}

initDetailInfo()
async function initDetailInfo() {
  const res = await user_detail({ user_id: props.userId })
  if (res.code == 1) {
    const allData = res.data
    avatar.value = allData.user_avatar?.big
    ruleForm.value = {
      ue_jgmc: allData.user_ext.ue_jgmc, // 籍贯
      ue_user_cardno: allData.user_ext.ue_user_cardno, // 身份证号码
      ue_cym: allData.user_ext.ue_cym, // 曾用名
      ue_user_birthday: allData.user_ext.ue_user_birthday, // 出生日期
      ue_mzmc: allData.user_ext.ue_mzmc, // 民族
      ue_user_gender: allData.user_ext.ue_user_gender == 1 ? '男' : (allData.user_ext.ue_user_gender == 2 ? '女' : '保密'), // 性别
      ue_zzmmmc: allData.user_ext.ue_zzmmmc, // 政治面貌
      ue_whcdmc: allData.user_ext.ue_whcdmc, // 文化程度
      ue_szzbmc: allData.user_ext.ue_szzbmc, // 所在支部
      ue_rdsj: allData.user_ext.ue_rdsj, // 入党时间
      ue_bzlxmc: allData.user_ext.ue_bzlxmc, // 编制类型
      ue_szdxzmc: allData.user_ext.ue_szdxzmc, // 所在党小组
      ue_yynlmc: allData.user_ext.ue_yynlmc, // 语言能力
      // ue_yynlmc: allData.user_ext.ue_yynlmc, // 事业单位
      ue_jzglbmc: allData.user_ext.ue_jzglbmc, // 教职工类别
      ue_xlbj: allData.user_ext.ue_xlbj || '无', // 训练背景
      ue_tc: allData.user_ext.ue_tc || '无', // 特长
      ue_user_phone: allData.user_ext.ue_user_phone, // 联系方式
      ue_user_email: allData.user_ext.ue_user_email, // 电子邮件
    }

    userInfo.value = {
      user_realname: allData.user_realname,
      ue_zgbh: allData.user_ext.ue_zgbh,
      user_name: allData.user_name,
      user_id: allData.user_id,
      user_no: allData.user_no.no,
      grade_name: allData.user_ext.grade_name,
      subject_name: allData.user_ext.subject_name,
    }

    gldwData.value = []
    allData.cm_info.map((item) => {
      item.gradename = item.grade_name
      if (item.is_manage == 1) {
        const str = `${item.sm_name + item.cm_name}班主任`
        gldwData.value.push(str)
      }
    })
    if (gldwData.value.length == 0)
      gldwData.value.push('无')

    if (props.showType == 'jsxx') {
      jsRzxxData.value = [...allData.cm_info]
      if (jsRzxxData.value[0]) {
        const arr = formData.value.filter(item => item.key == 'rzxx' && item.showType == props.showType)[0].children
        const obj = {}
        arr.map((item) => {
          obj[item.key] = jsRzxxData.value[0][item.fieldName]
        })
        ruleForm.value = Object.assign(ruleForm.value, obj)
      }
    }
  }

  const res1 = await work_list({ uw_user_id: props.userId, sort: 'asc' })
  if (res1.code == 1) {
    gzjlData.value = res1.data.page_data
    if (gzjlData.value[0]) {
      const arr = formData.value.filter(item => item.key == 'gzjl')[0].children
      const obj = {}
      arr.map((item) => {
        obj[item.key] = gzjlData.value[0][item.key]
      })
      ruleForm.value = Object.assign(ruleForm.value, obj)
    }
  }

  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 ? '是' : '否'
  }

  if (props.showType == 'jdxx') {
    const res3 = await org_member_list({ uom_user_id: props.userId })
    if (res3.code == 1) {
      jdRzxxData.value = res3.data.page_data
      if (jdRzxxData.value[0]) {
        const arr = formData.value.filter(item => item.key == 'rzxx' && item.showType == props.showType)[0].children
        const obj = {}
        arr.map((item) => {
          obj[item.key] = jdRzxxData.value[0][item.keyName] || jdRzxxData.value[0][item.key]
        })
        obj.uom_default_option_k = jdRzxxData.value[0].uom_default_option_k
        ruleForm.value = Object.assign(ruleForm.value, obj)
      }
    }
  }
}
</script>

<template>
  <div class="detailInfo">
    <div class="mb-40px">
      <div class="bgDiv">
        <img class="w-full" src="/images/topBg.png" alt="">
        <div class="userDiv">
          <!-- <div class="img" /> -->
          <img class="img" :src="avatar" alt="">
        </div>
        <div class="name font-18 mt-50px">
          {{ userInfo.user_realname }}
        </div>
      </div>
      <div class="flex justify-center space-x-20 px-10 mt-20px" style="color: #8F95B2;">
        <span>职工编号：{{ userInfo.ue_zgbh }}</span>
        <span>账号：{{ userInfo.user_name }}</span>
        <span>ID：{{ userInfo.user_id }}</span>
        <!-- <span>工号：{{ userInfo.user_no }}</span>
        <span>年级/学科：{{ userInfo.grade_name }}/{{ userInfo.subject_name }}</span> -->
      </div>
    </div>
    <el-form ref="ruleFormRef" class="grid grid-cols-2 gap-x-6" label-position="top" :model="ruleForm">
      <template v-for="(value, i) in formData" :key="i">
        <div v-if="!value.showType || value.showType == showType" 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>{{ value.name }}</span>
                <span v-if="value.key == 'gzjl' || value.key == 'hjry' || value.key == 'rzxx'" 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 && (!item.showType || item.showType == showType)" :class="item.class" :label="item.name" :prop="item.key">
                  <template #label>
                    {{ item.name }}<el-tag v-if="(item.key == 'uo_id_1' || item.key == 'uo_name_1') && ruleForm.uom_default_option_k == 1" size="small" type="info" class="ml-3">
                      默认
                    </el-tag>
                  </template>
                  <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>
              <template v-if="value.key == 'gldw'">
                <div v-for="(item, index) in gldwData" :key="index" class="rymcName">
                  {{ item }}
                </div>
              </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>
      </template>
    </el-form>

    <el-dialog v-model="dialogVisible" :title="dialogTitle" class="_" width="496px">
      <el-form ref="ruleFormRef" label-position="top">
        <div v-if="dialogKey == 'gzjl'">
          <div v-for="(value, i) in gzjlData" :key="i" class="grid grid-cols-2 gap-x-10" :class="i != 0 ? 'gzjlGap' : ''">
            <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 == 'rzxx' && showType == 'jsxx'">
          <div v-for="(value, i) in jsRzxxData" :key="i" class="grid grid-cols-2 gap-x-10" :class="i != 0 ? 'gzjlGap' : ''">
            <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.fieldName]" readonly />
            </el-form-item>
          </div>
        </div>
        <div v-if="dialogKey == 'rzxx' && showType == 'jdxx'">
          <div v-for="(value, i) in jdRzxxData" :key="i" class="grid grid-cols-2 gap-x-10" :class="i != 0 ? 'gzjlGap' : ''">
            <el-form-item v-for="(item, index) in detailKeyData" :key="index" :class="item.class" :label="item.name" :prop="item.key">
              <template #label>
                {{ item.name }}<el-tag v-if="(item.key == 'uo_id_1' || item.key == 'uo_name_1') && value.uom_default_option_k == 1" size="small" type="info" class="ml-3">
                  默认
                </el-tag>
              </template>
              <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;
  }
  .gzjlGap {
    border-top: 1px solid #e0eaf8;
    padding-top: 15px;
  }
}
</style>
