<template>
  <div>
    <header>
      <p><span class="blank">学校名称</span>{{ detailData.jjmk_uo_name }}</p>
      <p><span class="blank">姓名</span> {{detailData.jjmk_xm}}</p>
      <p><span class="blank">考核类别</span> {{detailData.jjmkl_jjmkl_name_1}}</p>
      <p><span class="blank">名师类别</span> {{detailData.jjmkl_jjmkl_name_2}}</p>
      
      <div v-if="detailData.jjmkl_jjmkl_id_1 == 1">
        <p><span class="blank">教学类别</span> {{detailData.jjmkl_jjmkl_name_3 }}</p>
        <h3 class="font-size-16 text-black">进阶条件</h3>
        <ul v-if="this.jjtj.length > 0">
          <li class="mt10" v-for="(item,index) in this.jjtj">
            <div class="d-flex">
              <h3 class="font-size-14 color-6">{{index+1}}.{{item.cate1}}</h3>
              <h4 class="ml20 font-size-14 text-blue">附件：<el-button link type="text"  @click="getFile(item.file.url,item.file.name)" >{{item.file.name}}</el-button></h4>
            </div>
            <h5 class="mt10 font-size-14 color-6">{{item.desc}}</h5>
          </li>
        </ul>
        <div class="mt20 d-flex">
          <h3 class="font-size-16 text-black w-110">申报表</h3>
          <div>
           <div class="font-size-14 text-blue" v-for="f in sbb">
            <el-button link type="text"  @click="getFile(f.split('|')[0],f.split('|')[1])" >{{f.split('|')[1]}}</el-button>
            </div> 
          </div>
          
        </div>
        <div class="mt20 d-flex">
          <h3 class="font-size-16 text-black w-110">量化表</h3>
          <div>
             <div class="font-size-14 text-blue" v-for="f in lhb">
              <el-button link type="text"  @click="getFile(f.split('|')[0],f.split('|')[1])" >{{f.split('|')[1]}}</el-button>
            </div>
          </div>
         
        </div>
      </div>
      <div v-else-if="detailData.jjmkl_jjmkl_id_1 == 10">
        <ul v-if="this.zbtj.length > 0">
          <li v-for="(item,index) in this.zbtj">
            <div class="mb10 d-flex">
              <h3 class="font-size-16 text-black">一级指标 <span class="color-6 font-size-14">{{item.cate1}}</span></h3>
              <h3 class="ml15 font-size-16 text-black">二级指标 <span class="color-6 font-size-14">{{item.cate2}}</span></h3>
              <h3 class="ml15 font-size-16 text-black">得分 <span class="color-6 font-size-14">{{item.score}}</span></h3>
              <h4 class="ml15 font-size-16 text-blue">附件：<el-button link type="text"  @click="getFile(item.file.url,item.file.name)" >{{item.file.name}}</el-button></h4>
            </div>
            <h5 class="mb10 font-size-14 color-6">{{item.desc}}</h5>
          </li>
        </ul>
        <div class="mt20 d-flex">
          <h3 class="font-size-16 text-black w-110">总分</h3>
          <h4 class="font-size-14">{{detailData.jjmkl_zbzf}}</h4>
        </div>
      </div>
      <div class="mt20 d-flex">
        <h3 class="font-size-16 text-black w-110">校端审核情况</h3>
        <h4 class="font-size-14">{{detailData.jjmkl_xdshqk_option_n}}</h4>
      </div>
      <div class="mt20 d-flex">
        <h3 class="font-size-16 text-black w-110">校端处理意见</h3>
        <h4 class="font-size-14">{{detailData.jjmkl_xdshqk_clyj }}</h4>
      </div>
      <div class="mt20 d-flex">
        <h3 class="font-size-16 text-black w-110">局端审核情况</h3>
        <h4 class="font-size-14">{{detailData.jjmkl_jdshqk_option_n }}</h4>
      </div>
      <div class="mt20 d-flex">
        <h3 class="font-size-16 text-black w-110">局端处理意见</h3>
        <h4 class="font-size-14">{{detailData.jjmkl_jdshqk_clyj }}</h4>
      </div>
    </header>
  </div>
</template>
<script>
import { khhz_detail } from "./api";
import request, { download2 } from '~/utils/request';
export default {
  data() {
    return {
      https:window.globalVariables.api,
      jjmk_id:'',
      detailData: {},
      jjtj:[],
      zbtj:[],
      sbb:'',
      lhb:''
    };
  },
  methods:{
    getDetailData() {
      let data = {
        jjmk_id: this.jjmk_id
      }
      khhz_detail(data).then((res) => {
        this.detailData = res.data.one_info;
        if(this.detailData.jjmkl_jjmkl_id_1 == 1) {
          this.jjtj = JSON.parse(res.data.one_info.jjmkl_jjtj_json);
          // if(this.jjtj.length > 0) {
          //   this.jjtj.forEach(item =>{
          //     item.file.url = window.globalVariables.api + item.file.url
          //   });
          // }
          this.sbb = this.detailData.jjmkl_lhb_file.split(';');
          this.lhb = this.detailData.jjmkl_sqb_file.split(';');
        }else if(this.detailData.jjmkl_jjmkl_id_1 == 10){
          this.zbtj = JSON.parse(res.data.one_info.jjmkl_zbdffj_json);
          console.log(this.zbtj);
          // if(this.zbtj.length > 0) {
          //   this.zbtj.forEach(item =>{
          //     item.file.url = window.globalVariables.api + item.file.url
          //   });
          // }
        }
      });
    },
    getFile(url, fileName) {
      console.log(fileName);
      download2(url,null,fileName)
    },
  },
  mounted() {
    if(this.$route.params.id != '') {
      this.jjmk_id = this.$route.params.id;
      this.getDetailData();
    }
  }
};
</script>
<style lang="scss" scoped>
.el-button{
  padding: 0 !important;
}
.flex {
  display: flex;
}
header {
  padding: 15px 20px;
  font-family: PingFangSC-Regular;
  box-sizing: border-box;
  color: #969696;
  font-size: 14px;
  .title {
    justify-content: space-between;
    h3 {
      color: #000;
      font-size: 16px;
    }
  }
}
.blank {
  display: inline-block;
  color: #000;
  font-size: 16px;
  width: 110px;
  padding-bottom: 20px;
}
.imgs {
  img {
    width: 160px;
    height: 90px;
    background: rgba(0, 0, 0, 0);
    margin-right: 23px;
  }
}
</style>