<template>
  <div class="app-container">
    <div>
      <el-row justify="space-between" :gutter="20">
        <el-col :span="6" :xs="24">
          <el-card>
            <div class="user">
              <div class="center">
                <!-- <el-image style="width: 170px; height: 234px" :src="fillImgUrl(form.photo)" @click="imgFN" /> -->
                <!-- <img :src="fillImgUrl(form.photo)" style="width: 170px; height: 234px" alt="" @click="initList"> -->
                <div style="display: flex; justify-content: center;">
                  <el-image v-if="form.photo" style="width: 170px; height: 234px;" :src="fillImgUrl(form.photo)" @click="imgFN">
                    <template #error>
                      <div class="image-slot">
                        <img style="width: 170px;" src="@/assets/admin/tx.jpg">
                      </div>
                    </template>
                    <template #placeholder>
                      <div class="image-slot"> <img style="width: 170px;" src="@/assets/admin/tx.jpg"></div>
                    </template>
                  </el-image>
                  <img v-else style="width: 170px; height: 234px;" src="@/assets/admin/tx.jpg" alt="">
                </div>
                <div class="user-center">
                  <div style="padding: 10px;">  <el-button :icon="Edit" size="small" link type="primary" @click="initList">更换照片</el-button> </div>
                  <div v-if="form.name" class="user-name">  {{ form.name }}</div>
                  <div v-if="form.idcCode " class="user-info">证件号：<span class="user-size"> {{ form.idcCode }}</span></div>
                  <div v-if="form.perCode" class="user-info">会员编号：<span class="user-size">{{ form.perCode }}</span> </div>
                  <div v-if="form.validityDate" class="user-info">有效期： <span class="user-size">{{ form.idcType==3?'--': parseTime(form.validityDate, '{y}-{m}-{d}') }}</span></div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="18" :xs="24">
          <el-tabs
            v-model="activeName"
            class="demo-tabs"
          >
            <el-tab-pane label="基本信息" name="1" />
            <el-tab-pane label="技术认证" name="2" />
            <el-tab-pane label="从业资格认证" name="3" />
            <el-tab-pane label="缴费记录" name="4" />
            <el-tab-pane label="信息变更" name="5" />
          </el-tabs>
          <el-card>
            <div v-if="activeName == '1'">
              <Info :user-id="postId" />
            </div>
            <div v-if="activeName=='2'">
              <Technology :user-id="postId" :form="form" />
            </div>
            <div v-if="activeName=='3'">
              <Certification :user-id="postId" />
            </div>
            <div v-if="activeName=='4'">
              <PaymentRecords :user-id="postId" />
            </div>
            <div v-if="activeName=='5'">
              <MemberInfo :user-id="postId" />
            </div>

          </el-card>

        </el-col>
      </el-row>
    </div>

    <el-dialog
      v-if="showPhoto"
      v-model="showPhoto"
      title="证件照更换"
      width="1000px"
      :before-close="handleClose"
      style="border-radius: 20px; padding: 20px;"
    >
      <div style="width: 100%; text-align: center;">
        <ImageUpload2 v-model="forms.photo" class="imageUpload" crop-height="280" crop-width="200" :limit="1" />
      </div>
      <div v-if="photoList.length>0">
        <div>历史证件照</div>
        <br>
        <el-row class="imgRow">
          <!-- <el-col :span="4" class="imgCol">
            <el-image
              style="display: block;" class="elImage" :src="fillImgUrl(firstPhoto.newPhoto)"
              :fit="fit"
              @click="PhotoHistory(firstPhoto.newPhoto)"
            >
              <template #error>
                <div class="image-slot">
                  <span>加载失败</span> 
                </div>
              </template>
            </el-image>  
            <div style="text-align: center;">{{ parseTime(firstPhoto.updateTime, '{y}-{m}-{d}') }}</div>    
          </el-col> -->
          
          <el-col v-for="item in photoList" :key="item " :span="4" class="imgCol">
            <el-image
              style="display: block;" class="elImage" :src="fillImgUrl(item.oldPhoto) "
              :fit="fit"
              @click="PhotoHistory(item.oldPhoto)"
            >
              <template #error>
                <div class="image-slot">
                  <span>加载失败</span> 
                </div>
              </template>
            </el-image>      
            <div class="bottom">{{ parseTime(item.updateTime, '{y}-{m}-{d}') }} </div>

          </el-col>
        </el-row>
      </div>
     
      <br>
      <br>
      <div style="text-align: center;">
        <el-button type="primary" @click="editPhoto"> 保存</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getInfo, updateInfo, getAssoPers } from '@/api/person/info.js'
import { useRoute } from 'vue-router'
import Certification from './certification'
import Technology from './technology'
import Info from './info'
import PaymentRecords from './paymentRecords'
import MemberInfo from './memberInfo.vue'
import { getCurrentInstance } from '@vue/runtime-core'
const { proxy } = getCurrentInstance()
const showPhoto = ref(false)
const activeName = ref('1')
const route = useRoute()
const form = ref({})
const forms = ref({})
const photoList = ref()
const firstPhoto = ref()
const postId = ref()// 运动员id

onMounted(() => {
  getAssoPers(route.query.perId).then(res => {
    postId.value = res.data[10]
    res.data[10] ? postId.value = res.data[10] : postId.value = route.query.perId
    initData()
  })
})

// 编辑回显数据
async function initData() {
  const res = await getInfo(postId.value)
  form.value = res.data
}

// 编辑回显数据
async function initList() {
  const res = await getInfo(postId.value)
  if (res.code == 200) {
    forms.value = res.data
    forms.value.cityId1 = forms.value.cityId
    photoList.value = res.data?.photoLogs?.splice(0, 6)
    firstPhoto.value = res.data.photoLogs?.[0]
    showPhoto.value = true
  }
}

// 保存
async function editPhoto() {
  const res = await updateInfo(forms.value)
  if (res.code == 200) {
    proxy.$modal.msgSuccess('操作成功')
    initData()
    showPhoto.value = false
  }
}

// 证件照历史
function PhotoHistory(row) {
  forms.value.photo = row
}

</script>

<style scoped lang="scss">
.containers{
  width: 100%;
}
.row{
  padding:0 20px;
}
.right{
  margin-right: 20px;
}
.user{
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.user-center{
  text-align: center;
  margin-top: 5px;
}
.user-name{
  font-size: 24px;
  color:#29343C  ;
  font-weight: 500;
  margin-bottom: 20px;
}

.user-info{
  border-top: 1px solid #eee;
  font-size: 13px;
  color:#7B7F83;
  /*height: 55px;*/
  line-height: 55px;
  text-align: center;
}

.user-size{
  color:#000 ;
}
.tdFlex {
  display: flex;
}

.w50 {
  width: 50%;
}

.ml20 {
  margin-left: 20px;
}
.center{
  text-align: center;
}
.right{
  margin-right: 20px;
}

:deep(.fileItem  .hover-actions ){
  span{
    margin: 40px 0;
  }
}

:deep(.imgCol){
  padding: 20px;
  min-height: 200px;
  position: relative;
  cursor:pointer;
  img{
    border-radius: 5px;
  }
}
.imgRow{
  border-radius: 10px;
  background-color: #eee;
 
  .elImage{
    width: 100%;
    min-height: 80%;
    .image-slot{
      height: 100%;
      display: flex;
      justify-content: center;
      background-color: #cecbcb;
      span{
        display: flex;
        align-content:center;
        line-height: 150px;
        color: #262525;
      }
    }
  }
  .bottom{
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-left: 17px;
  }
}

:deep(.imageUpload){
  .el-row{
    justify-content: center;
  }
}
:deep(.fileItem)
{
  width: 100px;
  height: 140px;
}

:deep(.el-upload-list--picture-card){
  width: 100px;
  height: 140px;
}
</style>