<!--幼儿园详情-->
<template>
  <div class="app-container">
    <div class="electricPileDetails">
      <div class="basicInformation">
        <div class="title">基础信息</div>
        <div class="basicInformationContent">
          <el-row type="flex">
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">专家姓名:</div>
                <TooltipOver class="textValue" :text="formState.nickName" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">手机号:</div>
                <TooltipOver class="textValue" :text="formState.phonenumber" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">性别:</div>
                <TooltipOver class="textValue" :text="getDictLabel(dict.type[DictType.sys_sex],formState.sex)" />
              </div>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">邮箱:</div>
                <TooltipOver class="textValue" :text="formState.email" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">政治面貌:</div>
                <TooltipOver class="textValue" :text="getDictLabel(dict.type[DictType.political_status],formState.politicalStatus)" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">身份证号:</div>
                <TooltipOver class="textValue" :text="formState.identificationCard" />
              </div>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">出生日期:</div>
                <TooltipOver class="textValue" :text="formState.birthDate" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">民族:</div>
                <TooltipOver class="textValue" :text="getDictLabel(dict.type[DictType.sys_nation_type],formState.nation)" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">常驻省市:</div>
                <TooltipOver class="textValue" :text="findProvinceCity(this.areaList,this.formState.provinceId,this.formState.cityId) || '--'" />
              </div>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="12">
              <div class="mustIcon">
                <div class="textLabel">照片:</div>
                <div>
                  <el-image
                    class="img-station"
                    :src="formState.avatar"
                    :preview-src-list="srcList"
                    :initial-index="1"
                    fit="cover"
                    @click="vbs(formState.avatar)"
                  >
                    <div slot="error" class="img-station img_error_ttx">
                      <span class="img_text">未上传照片</span>
                    </div>
                  </el-image>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-divider class="mini-divider-table" />
        <div class="title">专家资质</div>
        <div class="basicInformationContent">
          <el-row type="flex">
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">工作单位:</div>
                <TooltipOver class="textValue" :text="formState.workOrganization" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">工作职位:</div>
                <TooltipOver class="textValue" :text="formState.workPosition" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">职称等级:</div>
                <TooltipOver class="textValue" :text="getDictLabel(dict.type[DictType.professional_title_grade],formState.professionalTitleGrade)" />
              </div>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">社会任职:</div>
                <TooltipOver class="textValue" :text="formState.socialService" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">研究领域:</div>
                <TooltipOver class="textValue" :text="formState.researchField" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">研究学科:</div>
                <TooltipOver class="textValue" :text="formState.researchDiscipline" />
              </div>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="8">
              <div class="mustIcon">
                <div class="textLabel">工作经历:</div>
              </div>
            </el-col>
          </el-row>
          <el-row v-for="(item,index) in formState.workExperience" type="flex">
            <el-col :span="12">
              <div class="mustIcon">
                <div class="textLabel" />
                <div class="textLabel ttxt" style="width: 250px;margin-right: 63px">{{ item.startTime }} <span v-if="item.startTime && item.endTime">至</span> {{ item.endTime }}  </div>
                <div class=" ttxt">{{ item.workOrganization }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="24">
              <div class="mustIcon">
                <div class="textLabel">第一学历:</div>
                <template v-if="normaleducation.length > 0">
                  <el-col :span="2">
                    <TooltipOver class="textValues long" :text="getDictLabel(dict.type[DictType.educational_background],normaleducation[0].educationalBackground)" />
                  </el-col>
                  <el-col :span="8">
                    <TooltipOver class="textValues long" :text="normaleducation[0].graduateSchool" />
                  </el-col>
                  <el-col :span="8">
                    <TooltipOver class="textValues long" :text="normaleducation[0].profession" />
                  </el-col>
                </template>
              </div>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="24">
              <div class="mustIcon">
                <div class="textLabel">最高学历:</div>
                <template v-if="highestEducation.length > 0">
                  <el-col :span="2">
                    <TooltipOver class="textValues long" :text="getDictLabel(dict.type[DictType.educational_background],highestEducation[0].educationalBackground)" />
                  </el-col>
                  <el-col :span="8">
                    <TooltipOver class="textValues long" :text="highestEducation[0].graduateSchool" />
                  </el-col>
                  <el-col :span="8">
                    <TooltipOver class="textValues long" :text="highestEducation[0].profession" />
                  </el-col>
                </template>
              </div>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="24">
              <div class="mustIcon">
                <div class="textLabel">专家简介:</div>
                <el-col :span="20">
                  <div>{{ formState.expertProfile }}</div>
                </el-col>
              </div>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="24">
              <div class="mustIcon" style="margin-bottom: 50px">
                <div class="textLabel">专家详细介绍:</div>
                <el-col :span="20">
                  <div v-html="formState.expertDetails" />
                </el-col>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-divider class="mini-divider-table" />
        <div class="title">科研荣誉</div>
        <div class="basicInformationContent">
          <el-row type="flex">
            <el-col :span="24">
              <div class="mustIcon" style="margin-bottom: 50px">
                <div class="textLabel">科研成果:</div>
                <el-col :span="20">
                  <div class="info-wrapper" v-html="formState.scientificResearchAchievement" />
                </el-col>
              </div>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="24">
              <div class="mustIcon" style="margin-bottom: 50px">
                <div class="textLabel">荣誉成果:</div>
                <el-col :span="20">
                  <div class="info-wrapper" v-html="formState.honoraryAchievement" />
                </el-col>
              </div>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="24">
              <div class="mustIcon">
                <div class="textLabel">备注:</div>
                <el-col :span="20">
                  <div>{{ formState.remark }}</div>
                </el-col>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getDictLabel } from '@/utils/dict/config'
import options from '@/utils/dict/options'
import { getExpertDetails } from '@/api/system/expert'
import TooltipOver from '@/views/components/TooltipOver/index.vue'
import DictType from '@/utils/dict/DictType'
import { findProvinceCity } from '@/utils/index'
import { fetchProvinceTree } from '@/api/system/province'

const initForm = {
  nickName: ''
}
export default {
  name: 'ExpertDetails',
  components: { TooltipOver },
  dicts: [DictType.sys_sex, DictType.political_status, DictType.sys_nation_type, DictType.professional_title_grade, DictType.educational_background],
  data() {
    return {
      DictType,
      options,
      detailsId: this.$route.query.id,
      formState: Object.assign({}, initForm),
      areaList: [],
      normaleducation: [],
      highestEducation: [],
      srcList: []
    }
  },
  created() {
    this.getProvinceData()
  },
  mounted() {
    this.scrollToTop()
  },
  methods: {
    /**
     * 初始进入页面跳转到顶部
     */
    scrollToTop() {
      const elScrollbar = document.querySelector('.main-container .el-scrollbar__wrap')
      if (elScrollbar) {
        elScrollbar.scrollTop = 0
      }
    },
    getDictLabel,
    findProvinceCity,
    // 详情回显
    getExpertDetailsFn(val) {
      getExpertDetails(val).then(({ data, code }) => {
        if (code === 200) {
          this.formState = data
          this.formState.workExperience = JSON.parse(this.formState.workExperience)
          this.handleEducation(JSON.parse(this.formState.education))
        }
      })
    },
    getProvinceData() {
      fetchProvinceTree().then(({ data }) => {
        const result = this.sortTreeData(data)
        if (this.level > 0) {
          result.forEach(item => {
            if (this.level < 2) {
              item.children = null
            } else {
              (
                item.children.forEach(item => {
                  if (this.level < 3) {
                    item.children = null
                  }
                })
              )
            }
          })
        }
        this.areaList = result
        this.getExpertDetailsFn(this.detailsId)
      })
    },
    sortTreeData(tree) {
      let obj = {}
      return tree.map((item, i) => {
        const level = Number(item.level)
        obj = {
          ...item,
          label: level === 1 ? item.province : level === 2 ? item.city : item.district,
          value: level === 1 ? item.provinceId : level === 2 ? item.cityId : item.districtId
        }
        if (item.childrenList && item.childrenList.length > 0) {
          obj.children = this.sortTreeData(item.childrenList)
        }
        return Object.assign({}, item, obj)
      })
    },
    // 处理学历
    handleEducation(valArr) {
      if (valArr) {
        valArr.map(item => {
          if (item.educationalBackgroundType === '1') {
            this.normaleducation.push(item)
          } else if (item.educationalBackgroundType === '2') {
            this.highestEducation.push(item)
          }
        })
      }
    },
    vbs(val) {
      this.srcList = []
      this.srcList.push(val)
    }

  }

}
</script>
<style scoped lang="scss">
.electricPileDetails {
  .basicInformation {
    //border-bottom: 1px solid #e8e8e8;

    .basicInformationContent {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.85);

      .el-row {
        margin-bottom: 15px;
      }

      .textValue {
        color: rgba(0, 0, 0, 0.65);
      }
    }
  }

  .title {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 900;
    line-height: 23px;
    color: rgba(0, 0, 0, 0.85);
    margin: 24px 0 19px;
    text-align: left !important;
  }
}

.mustIcon {
  display: flex;
  //overflow: hidden;
  .textLabel {
    width: 130px;
    padding-left: 30px;
    display: inline-block;
    white-space: nowrap;
    padding-right: 13px;
    text-align: right;
    box-sizing: border-box;
  }

  .textValue {
    overflow: hidden;
    flex: 1;
  }
  .textValues {
    overflow: hidden;
    flex: 1;
  }
}
.ttxt {
  font-size: 14px;
  color: rgba(26,26,26,0.6);
}
.long {
  margin-right: 50px;
}
pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
.info-wrapper {
  max-height: 192px;
  overflow-y: auto;
}
</style>
