<template>
  <div class="div_page_bg">
    <tab custom-bar-width="60px">
      <tab-item :selected="true" @on-item-click="onItemClick(1)">基本信息</tab-item>
      <tab-item @on-item-click="onItemClick(2)">履约成绩</tab-item>
    </tab>
    <div class="div_content">
      <div v-if="selectIndex === 1" style="margin: 0 15px">
        <div class="div_content_key_value"
             v-for="(data,index) in keyValues"
             :key="index" >
          <span class="span_key">{{data.key}}</span>
          <span class="span_value" v-if="!data.type" @click="onClickValue(data)">{{data.value}}</span>
        </div>
      </div>

      <div v-if="selectIndex === 2">
        <div class="div_year">
          <span class="span_year" @click="showStartDatePicker">{{year}}</span>
        </div>
        <div class="div_score">
          <span class="span_score">{{yearAvgScore}}</span>
          <span class="span_score_avg">月平均分数</span>
        </div>
        <div class="div_score_list" v-for="(data,index) in avgScore" :key="index">
          <div class="div_score_list_detail">
            <span class="span_score_list">{{data.achievement}}</span>
            <span class="span_month_list">{{data.month}}</span>
          </div>
          <div class="line-h"></div>
        </div>
      </div>
    </div>
    <loading v-model="loading" text="加载中"></loading>
  </div>
</template>

<script>
  import {achievementDetail, contractDetail, getContractAchievementYearAvg, getFilePath} from "../../service/getData";
  import util from "../../util/util";
  import * as TimeUtils from "../../util/TimeUtils";

  export default {
    name: "providerDocumentAgreementDetail",
    data(){
      return{
        selectIndex:1,
        keyValues:[],
        year:this.util.formatYear(new Date()),
        contractId:'',
        loading:false,
        yearAvgScore:'0',
        avgScore:[]
      }
    },
    created(){
      try {
        EbeiPlugins.setNavigationItemTitle("合同详情");
      }
      catch (e) {

      }
      this.contractId = this.$route.query.contractId;
      this.contractDetailJs();
    },
    methods:{
      onItemClick(value){
        this.selectIndex = value;
        console.log(this.selectIndex)
        switch (this.selectIndex) {
          case 1:
            this.contractDetailJs();
            break;
          case 2:
            this.achievementDetailJs();
            break;

        }
      },
      showStartDatePicker () {
        let currDate = this.year;
        let that = this
        this.$datePickerUtil.showDatePicker(this, 'YYYY', '', currDate, (dateStr) => {
          that.year = dateStr;
          that.achievementDetailJs();
        })
      },
      contractDetailJs(){
        let that = this;
        let params = {
          contractId:this.contractId
        }
        that.loading = true;
        contractDetail(params).then(res => {
          that.loading = false;
          if (res.status === 200) {
            that.initDetail(res.data);
          } else {
            that.showTips(res.message);
          }
        }).catch(error => {
          that.loading = false;
        })
      },
      achievementDetailJs(){
        let that = this;
        let params = {
          contractId:this.contractId,
          year:this.year
        }
        that.loading = true;
        achievementDetail(params).then(res => {
          that.loading = false;
          this.avgScore = [];
          if (res.status === 200) {
            for (let i = 0; i < res.data.length; i++) {
              that.avgScore.push(res.data[i]);
            }
          } else {
            that.showTips(res.message);
          }
          that.getContractAchievementYearAvgJs();
        }).catch(error => {
          that.loading = false;
        })
      },
      getContractAchievementYearAvgJs(){
        let that = this;
        let params = {
          contractId:this.contractId,
          year:this.year
        }
        that.loading = true;
        getContractAchievementYearAvg(params).then(res => {
          that.loading = false;
          if (res.status === 200) {
            if (util.isNotEmpty(res.data)) {
              this.yearAvgScore = res.data;
            } else {
              this.yearAvgScore = "0";
            }

          } else {
            that.showTips(res.message);
          }
        }).catch(error => {
          that.loading = false;
        })
      },

      showTips (tip) {
        this.$vux.toast.show({
          type: 'text',
          text: tip,
          position: 'bottom'
        })
      },
      initDetail(detail){
        this.keyValues = [
          {
            key:"合同编号：",
            value:detail.contractNo,
          },
          {
            key:"合同名称：",
            value:detail.contractName,
          },
          {
            key:"合同类别：",
            value:detail.typeName,
          },
          {
            key:"签约公司：",
            value:detail.areaName,
          },
          {
            key:"履约项目：",
            value:detail.projectName,
          },
          {
            key:"数量：",
            value:detail.quantity,
          },
          {
            key:"单价：",
            value:detail.unitPrice,
          },
          {
            key:"合同总金额：",
            value:detail.totalPrice,
          },
          {
            key:"单年度合同金额：",
            value:detail.singleYearContractAmount,
          },
          {
            key:"本年度合同金额：",
            value:detail.currentYearContractAmount,
          },
          {
            key:"签订日期：",
            value:TimeUtils.formatDateTimeOfYMD(detail.signDate),
          },
          {
            key:"开始日期：",
            value:TimeUtils.formatDateTimeOfYMD(detail.startDate),
          },
          {
            key:"结束日期：",
            value:TimeUtils.formatDateTimeOfYMD(detail.endDate),
          },
          {
            key:"合同状态：",
            value:detail.contractName,
          },
          {
            key:"附件：",
            value:detail.contractName,
            type:true,
          },
          {
            key:"备注：",
            value:detail.remark,
          },

        ]
      },
      onClickValue(data){
        // if (data.type) {
        //   getFilePath({type:2,fileid:data.fileid,realIp:'219.159.248.175:5901'}).then((res) => {
        //     let info = that.x2js.xml_str2json(res.data)
        //     if (info.FileWebPathResult.resultCode != 0) {
        //       // Toast({
        //       //   message:'部分文件未找到',
        //       //   duration: 1000
        //       // })
        //       that.bgImg = loadfail
        //     } else {
        //       that.filePath = info.FileWebPathResult.fileWebPath
        //       that.showImg = true
        //     }
        //   })
        // }

      }
    }
  }
</script>

<style scoped>
  .div_page_bg{
    width: 100%;
    height: 100vh;
    background-color: #F7F7F7;
  }

  .div_content{
    margin: 15px;
    background-color: white;
    border-radius: 5px;
    height: calc(100vh - 74px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
  }
  .div_content_key_value{
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 15px;
  }
  .span_key{
    color: #999999;
    font-size: 12px;
    width: 110px;
  }
  .span_value{
    color: #333333;
    font-size: 12px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .div_year{
    display: flex;
    height: 40px;
    justify-content: center;
    align-items: center;
  }
  .span_year{
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 16px;
    color: #333333;
  }
  .span_year::after{
    content: " ";
    display: block;
    height: 16px;
    width: 16px;
    margin-left: 5px;
    background: url("../../assets/images/icon_arrow_down.png") no-repeat;
    background-size: 100%;
  }
  .div_score{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #E9FCFF;
    height: 95px;
  }
  .span_score{
    display: flex;
    flex-direction: row;
    align-items: baseline;
    font-size: 40px;
    color: #47BCC8;
  }
  .span_score::after{
    content: "分";
    font-size: 14px;
    color: #333333;
    margin-left: 2px;
  }
  .span_score_avg{
    font-size: 14px;
    color: #333333;
  }
  .div_score_list{
    display: flex;
    flex-direction: column;
    padding: 0 10px;
  }
  .div_score_list_detail{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 60px;
    align-items: center;
  }
  .span_score_list{
    display: flex;
    flex-direction: row;
    align-items: baseline;
    font-size: 16px;
    color: #333333;
  }
  .span_score_list::after{
    content: "分";
    font-size: 6px;
    color: #333333;
    margin-left: 1px;
  }
  .span_month_list{
    font-size: 16px;
    color: #333333;
  }

  .line-h{
    width: calc(100%);
    height: 1px;
    background-color: #D9D9D9;
  }
</style>
