<template>
  <div class="department-data">
    <diy-el-form ref="formRef"  v-bind="{'span-attrs':{span:4}}"   v-model:model-form="forms" :forms="formConfig">
      <template #searchBtn>
        <el-button  type="primary" :icon="Search" @click="getTableData()">查询</el-button>
      </template>
    </diy-el-form>
    <div class="department-content">
      <div class="left-echarts" ref="leftEcharts">

      </div>
      <div class="right-echarts" ref="rightEcharts">

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

<script>
import {onMounted, ref} from "vue";
import {matterImputationStaticsSituation} from "@/data/all-form";
import {proSelectXyxxSjtjNew} from "@/service/credit-data/data-imputation-push/data-imputation-push";
import {getFullYear} from "@/units/use-method/veritification-tools";
import DiyElForm from "@/components/common/DiyElForm.vue";
import {Close, Delete, Document, Search, SuccessFilled} from "@element-plus/icons-vue";
import {
  matterApplySituationStaticsLeftEcharts,
  matterApplySituationStaticsRightEcharts
} from "@/echarts/option";
import {proSelectXyxxSjtjYyqk} from "@/service/credit-data/apply-information/apply-information";
import {InsertSyslog} from "@/units/use-method/user-log";

export default {
  name: "MatterApplySituationStatics",
  components:{DiyElForm},
  computed: {
    Delete() {
      return Delete
    },
    Search() {
      return Search
    },
    Document() {
      return Document
    },
    SuccessFilled() {
      return SuccessFilled
    },
    Close() {
      return Close
    }
  },
  setup(){
    const forms = ref({});
    const formRef = ref(null);
    const formConfig = ref({...matterImputationStaticsSituation});
    const leftEcharts = ref(null);
    const rightEcharts = ref(null);
    function getTableData(){
      proSelectXyxxSjtjYyqk({
        startM:forms.value.START_DATE,
        //startC:"2019-01-01",
        endM:forms.value.END_DATE,
        pageSize:10000,
        pageIndex:1
      }).then(res =>{
        InsertSyslog(localStorage.getItem("xyxx_usercode"),localStorage.getItem("xyxx_unitcode"), "信息查询", "应用情况查询成功", "应用情况", "")
        getEchartsAndTable(res);
      })
    }
    function getEchartsAndTable(data){
      let date = data.msg[0];
      var jiekou_Number = 0;
      for (var i = 0;i<date.Rows.length;i++){
        delete date.Rows[i].RN;
        date.Rows[i].value = date.Rows[i].VALUE * 1;
        jiekou_Number += date.Rows[i].value;
        date.Rows[i].name = date.Rows[i].NAME;
        delete date.Rows[i].VALUE;
        delete date.Rows[i].NAME;
      }
      let firstData = [
        {
          value: 0,
          name: '在沪建筑业企业信用评价'
        },
        {
          value: 0,
          name: '三类人员资格审查'
        }
      ]
      for(let i=0;i<date.Rows.length;i++){
        for(let j=0;j<firstData.length;j++){
          if(date.Rows[i].name==firstData[j].name){
            firstData[j].value = date.Rows[i].value;
          }
        }
      }

      let secondData = [{
        value: 0,
        name: '数据查询'
      },
        {
          value: Number.isNaN(jiekou_Number)?0:jiekou_Number,
          name: '接口调用'
        },
        {
          value: 0,
          name: '数据下载'
        }
      ]
      debugger
      matterApplySituationStaticsLeftEcharts(leftEcharts.value,firstData);
      matterApplySituationStaticsRightEcharts(rightEcharts.value,secondData);
    }
    onMounted(()=>{
      forms.value.START_DATE = getFullYear("year") + "-01-01";
      forms.value.END_DATE = getFullYear("day");
      getTableData()
    })
    return {
      forms,
      formRef,
      formConfig,
      getTableData,
      leftEcharts,
      rightEcharts
    }
  }
}
</script>

<style scoped lang="scss">
.department-data{
  padding: 20px;
}
.department-content{
  display: flex;
  justify-content: space-between;
}
.left-echarts{
  height: 600px;
  width: 46%;
  padding-right: 50px;
  margin-right: 50px;
  border-right: 1px #DCDCDC solid;
}
.right-echarts{
  height: 600px;
  width: 46%;
}
</style>