<template>
  <div class="fixed-part">
    <div class="table-part">
      <common-layout  ref="layoutRef" :table-attrs="{
     'has-operation':false
   }" :form-attrs="{
     'span-attrs':{
       span:4
     }
   }" :table-header="commissionCreditInformationHomeHeader" :get-table-list="getTableData" :filter-form="formConfig">
        <template #DATE_MATTER_TYPE="{data}">
          <span>{{getDateMatterTypeName(data.DATE_MATTER_TYPE)}}</span>
        </template>
        <template #DATE_COUNT="{data}">
          <span v-if="data.TABLE_NAME == 'SUMMARY'" >{{data.DATE_COUNT}}</span>
          <span v-else class="to_detail" @click="getDetail('0',data)" >{{data.DATE_COUNT}}</span>
        </template>
        <template #ZJTG_S="{data}">
          <span v-if="data.TABLE_NAME == 'SUMMARY'" >{{data.ZJTG_S}}</span>
          <span v-else class="to_detail" @click="getDetail('3',data)" >{{data.ZJTG_S}}</span>
        </template>
        <template #ZJBTG_S="{data}">
          <span v-if="data.TABLE_NAME == 'SUMMARY'" >{{data.ZJBTG_S}}</span>
          <span v-else  :class="[data.ZJBTG_S >0?'to_detail_red':'to_detail']"  @click="getDetail('5',data)" >{{data.ZJBTG_S}}</span>
        </template>
        <template #ZJTG_PERCENT="{data}">
          <span>{{getPercent(data.ZJTG_S,data.DATE_COUNT)}}</span>
        </template>
      </common-layout>
    </div>
    <div class="echarts-part">
      <div class="top-echarts" ref="topEcharts">

      </div>
      <div class="bottom-echarts" ref="bottomEcharts">

      </div>
    </div>
  </div>
</template>

<script>
import {onBeforeMount, ref} from "vue";
import {commissionCreditInformationManageHome} from "@/data/all-form";
import {commissionCreditInformationHomeHeader} from "@/data/all-table-header";
import commonLayout from "@/components/CommonLayout.vue";
import {
  queryLogInfo,
  queryUnitList
} from "@/service/credit-information/commission-credit-information-manage/commission-credit-information-manage";
import {setLabelStaBottomEcharts,setLabelStaTopEcharts} from "@/echarts/option";
import {handleMes} from "@/units/element-ui/tip";
import {InsertSyslog} from "@/units/use-method/user-log";
export default {
  name: "CommissionCreditInformationManageHome",
  components:{commonLayout},
  setup(props,{emit}) {
    const layoutRef = ref(null);
    const formConfig = ref({...commissionCreditInformationManageHome});
    const topEcharts = ref(null)
    const bottomEcharts = ref(null)
    function getTableData(){
      queryLogInfo({
        unitCode:layoutRef.value.form.UNITCODE,
        stateDate:layoutRef.value.form.START_DATE,
        endDate:layoutRef.value.form.END_DATE,
        pageIndex:layoutRef.value.pageIndex,
        pageSize:layoutRef.value.pageSize
      }).then(res =>{
        layoutRef.value.getResData(res.msg[0].Rows,res.msg[0].TotalRowCount);
        InsertSyslog(localStorage.getItem("xyxx_usercode"),localStorage.getItem("xyxx_unitcode"), "信息查询", "委信用信息管理查询成功", "委信用信息管理", "")
        let codeData = res.msg[0].Rows;
        getTopEcharts(codeData);
      })
    }
    function getTopEcharts(data){
      //date
      let tempdate = [];
      //业务数量
      let ywsl = [];
      //委平台质检通过
      let wptzjtg = [];
      //市信用质检通过
      let sptzjtg = [];
      //质检不通过委
      let zjbtg_w = [];
      //质检不通过市
      let zjbtg_s = [];
      //质检不通过市
      let wzjs_s = [];

      //最大质检延迟
      let maxYC = [];
      let minYC = [];
      let map = {};

      for (let i = data.length - 1 ; i >= 0 ; i--) {
        tempdate.push(data[i]["BUSINESS_TIME"].toString().split(" ")[0].substring(5));
        ywsl.push(data[i]["DATE_COUNT"]);//业务数量
        //wptzjtg.push(data[i]["ZJTG_W"]);//委质检通过
        sptzjtg.push(data[i]["ZJTG_S"]);//市质检通过
        //zjbtg_w.push(data[i]["ZJBTG_W"]);//委质检不通过
        zjbtg_s.push(data[i]["ZJBTG_S"]);//市质检不通过
        wzjs_s.push(data[i]["WZJS_S"])//市未质检数量
        maxYC.push(data[i]["MAX_DELAY_TIME"]);
        minYC.push(data[i]["MIN_DELAY_TIME"]);
      }
      map["tempdate"] = tempdate;
      map["maxYC"] = maxYC;
      map["minYC"] = minYC;
      setLabelStaTopEcharts(topEcharts.value,tempdate,ywsl,sptzjtg,zjbtg_s,wzjs_s);
      getBottomEcharts(map);
    }
    function getBottomEcharts(map){
      setLabelStaBottomEcharts(bottomEcharts.value,map);
    }
    function getUnitOption(){
      queryUnitList({}).then(res =>{
        let tempOption = res.msg[0].Rows;
        let returnOption = [];
        returnOption =  tempOption.map(i => ({
          ...i,
          label:i.UNIT_NAME,
          value:i.UNIT_CODE,
        }))
        let option = [
          {
            value:'',
            label:'请选择'
          }
        ].concat(returnOption);
        const unitcodeItem = formConfig.value.formItemsArr.find(i => i.modelValue === "UNITCODE");
        unitcodeItem.options = [...option]
      })
    }
    function getDateMatterTypeName(type){
      switch (type){
        case "1":
          return "许可";
          break;
        case "2":
          return "处罚";
          break;
        case "3":
          return "逾期";
          break;
        default:
          return type;
          break;
      }
    }
    function getDetail(type,data){
      if(data["TABLE_NAME"] == "SUMMARY"){  //委当日小结
        return;
      }
      let tempObj = {
        "tableName": data["TABLE_NAME"],
        "businessTime": data["BUSINESS_TIME"],
        "timeType": "1",
        "DATE_MATTER_TYPE": data["DATE_MATTER_TYPE"],
        "dateType": type,
        "unitCode":data["UNIT_CODE"]
      }
      emit('changeOperation','detail',tempObj)
    }
    function getPercent(num, total){
      num = parseFloat(num);
      total = parseFloat(total);
      if (isNaN(num) || isNaN(total)) {
        return "-";
      }
      return total <= 0? "0%" : Math.round((num / total) * 10000) / 100.0 + "%";
    }
    function getNowDate(){  //获取当前时间
      let date = new Date();
      let nowDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" +(date.getDate());
      let nowDa
    }
    onBeforeMount(()=>{
      getUnitOption()
    })
    return {
      layoutRef,
      getTableData,
      commissionCreditInformationHomeHeader,
      formConfig,
      getDateMatterTypeName,
      getDetail,
      getPercent,
      topEcharts,
      bottomEcharts
    }
  }
}
</script>

<style scoped lang="scss">
.to_detail{
  text-decoration: underline;
  color: #1c84c6;
  cursor: pointer;
}
.to_detail_red{
  text-decoration: underline;
  color: red;
  cursor: pointer;
}
.fixed-part{
  height: 1800px;
  .table-part{
    height: 800px;
  }
}
.top-echarts,.bottom-echarts{
  flex: 1;
  height: 500px;
  overflow: hidden;
}
</style>