<template>
  <div>
    <div class="box">
      <el-breadcrumb class="mt20" :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">
          <el-icon>
            <HomeFilled />
          </el-icon>
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item v-if="from=='nationalTeam'" :to="{ name: 'nationalTeam',query: {activeName:'t1'} }">国家队队员</el-breadcrumb-item>
        <el-breadcrumb-item v-else-if="from=='7'" to="/competition/coach/7">宣传员</el-breadcrumb-item>
        <el-breadcrumb-item v-else-if="from=='2'" to="/competition/coach/2">裁判员</el-breadcrumb-item>
        <el-breadcrumb-item v-else-if="from=='1'" to="/competition/coach/1">教练员</el-breadcrumb-item>
        <el-breadcrumb-item v-else-if="from=='6'" to="/competition/coach/6">解说员</el-breadcrumb-item>
        <el-breadcrumb-item v-else-if="from=='9'" to="/competition/coach/9">运动员</el-breadcrumb-item>
        <el-breadcrumb-item v-else-if="from=='list'">人员列表</el-breadcrumb-item>
        <el-breadcrumb-item v-else :to="{ name: 'about',params:{activeName:'first'} }">关于协会</el-breadcrumb-item>
        <el-breadcrumb-item>人员信息</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card class="mt20">
        <el-row class="mt20">
          <el-col v-if="person.picUrl" :span="8">
            <div class="imgbox" style="text-align: right;padding-right: 50px">
              <img :src="fillImgUrl_webSite(person.picUrl)" style="display: inline-block;width: auto;max-width: 100%">
            </div>
          </el-col>
          <el-col :span="16">
            <div style="display: flex;">
              <div class="l-border mr50">
                <h3>{{ person.realName }}</h3>
                <h5>{{ person.ecRelationship }}</h5>
              </div>
              <div class="l-border">
                <h5>{{ person.sex == '1' ? '男' : '女' }}</h5>
                <h5>{{ person.birth?.substring(0, 10) }} </h5>
              </div>
            </div>
            <div class="l-border">
              <div class="con" v-html="person.remark" />
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="h5-panel forWei">
      <div class="wPanel">
        <div class="mt20">
          <img class="mauto" :src="fillImgUrl_webSite(person.picUrl)">
        </div>

        <el-row class="mt20 pd20">
          <el-col :span="12">
            <div class="l-border">
              <h3>{{ person.realName }}</h3>
              <h5>{{ person.ecRelationship }}</h5>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="l-border">
              <h5>{{ person.sex == '1' ? '男' : '女' }}</h5>
              <h5>{{ person.birth?.substring(0, 10) }} </h5>
            </div>
          </el-col>
          <el-col :span="24">
            <div>
              <div class="richtext" v-html="person.remark" />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

  </div>
</template>
<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getPersonInfo } from '@/apiPc/webSite'

let personId
const route = useRoute()
const person = ref({})
const from = ref('')
onMounted(() => {
  personId = route.params.id
  if (route.query.from) {
    from.value = route.query.from
  }
  getData()
})
const getData = () => {
  getPersonInfo(personId).then(res => {
    person.value = res.data
    person.value.ecRelationship = decodeURIComponent(route.query.name) || ''
  })
}

</script>
<style lang="scss" scoped>
.con{white-space: normal!important;text-wrap: wrap!important;
  p{white-space: normal!important;text-wrap: wrap!important;
    span{white-space: normal!important;text-wrap: wrap!important;}
  }
  span{white-space: normal!important;text-wrap: wrap!important;}
}
.l-border {
  padding: 1px 0 0 35px;
  border-left: 1px solid #9D630F;
}

h3 {
  color: #9D630F;
  margin: 0 0 20px;
  font-size: 30px;
}

h5 {
  margin: 0 0 20px;
  color: #000000;
  font-size: 20px;
}

p {
  margin: 0 0 20px;
  color: #0D0D0D;
  line-height: 1.8;
  font-size: 16px;
}
.forWei {
  display: none;
}
@media (max-width: 500px) {
  .forWei {
    display: block;
  }
  .box{display: none}
}
</style>