<template>
  <el-dialog
      ref="dialog"
      :close-on-click-modal="false"
      :title="title"
      :top="dialogFormTop"
      :visible.sync="dialogVisible"
      :destroy-on-close="true"
      width="97.5%"
      :model="false"
      :before-close="handleClose"
  >
    <div class="dialog_content">
      <div class="content-left">
         <span class="singleButton top_button">
          <span class="little_span role_button" :role_button_code="unitList[0].role_button_code" :class="[unitList[0].chosen?'little_active':'']" @click="unitChange(unitList[0].code)">{{unitList[0].name}}</span>
        </span>
        <span class="singleButton middle_button">
          <span class="little_span role_button" :role_button_code="unitList[1].role_button_code" :class="[unitList[1].chosen?'little_active':'']" @click="unitChange(unitList[1].code)">{{unitList[1].name}}</span>
        </span>
      </div>
      <div class="content-right">

        <el-form size="small" :model="form" inline>
          <!--        <el-form-item label="时间">-->
          <!--          <el-date-picker-->
          <!--              size="small"-->
          <!--              v-model="formData.value1"-->
          <!--              type="date"-->
          <!--              placeholder="选择日期">-->
          <!--          </el-date-picker>-->
          <!--        </el-form-item>-->
          <el-form-item label="所属单位">
            <el-input v-model="form.unitName" placeholder="" clearable></el-input>
          </el-form-item>
          <el-form-item label="聚类主体">
            <el-select v-model="form.commitType" @change="changeType" placeholder="请选择">
              <el-option
                  v-for="item in commitTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="btn-i">
            <el-button @click="changeType">查询</el-button>
            <el-button @click="downloadFile">导出</el-button>
          </el-form-item>
        </el-form>
        <div class="header_info">
          <div class="tab-area">
            <tab-control :tab-id.sync="currentAnalysisId" style-type="colorful" :data-arr="isAnalysisTabArr" />
          </div>
          <div class="total_info">
            <span>共有</span>
            <span>{{totalCount}}</span>
            <span>条记录</span>
          </div>
        </div>

        <div class="table-area">
          <my-table  @clickTableTr="clickTable" :key="currentTableHeader"  :table-data="tableData"  :table-list="tableData" :headers="currentTableHeader">
          </my-table>
        </div>
      </div>

    </div>
  </el-dialog>
</template>

<script>
import {
  analysisSituationMatterTableHeader,
  analysisSituationSituationTableHeader,
  analysisSituationUnitTableHeader,
  analysisRemindUrgeUnitTableHeader,
  analysisRemindUrgeMatterTableHeader,
  analysisRemindUrgeSituationTableHeader,
  isAnalysisTabArr,
  analysisDataOptimizeUnitTableHeader, analysisDataOptimizeMatterTableHeader, analysisDataOptimizeSituationTableHeader
} from "@/views/units/local-data";
import TabControl from "@/components/common-panel/c-cpns/TabControl";
import MyTable from "@/components/my-table/MyTable";
export default {
  name: "AnalysisTableModel",
  components: {MyTable,
    TabControl
  },
  props:{
    dialogVisible:{
      type:Boolean
    },

    title:{

    },


  },
  data() {
    return {
      dialogFormTop:'12vh',
      // formData:{
      //   value1:''
      // },
      unitList:[
        {
          id:'1',
          code:'1',
          name:'住建委',
          chosen:true,
        },
        {
          id:'2',
          code:'2',
          name:'房管局',
          chosen:false,
        },
      ],
      commitTypeList:[
        {
          label:'单位',
          value:'UNIT',
        },
        {
          label:'事项',
          value:'MATTER',
        },
        {
          label:'情形',
          value:'SITUATION',
        },
      ],
      unitTypeList:[
        {
          label:'全部',
          value:'',
        },
        {
          label:'住建委',
          value:'1',
        },
        {
          label:'房管局',
          value:'2',
        },
      ],

      form: {
        unitName:'',
        commitType:'',
        unitType:''
      },
      sortField:'',
      groupField:'',
      currentAnalysisId:'',
      tableData1:[
        {
          name:'注销1',
          department: '部门1',
          count:1001,
          acceptRemindCount:1001,
          acceptUrgeCount:501,
          handleRemindCount:501,
          handleUrgeCount:501,
          acceptOptimize:501,
          handleOptimize:501,
        },

      ],
      tableData2:[
        {
          department: '部门2',
          count:1002,
          acceptRemindCount:1002,
          acceptUrgeCount:502,
          handleRemindCount:502,
          handleUrgeCount:502,
          acceptOptimize:502,
          handleOptimize:502,
        },

      ],
      tableData3:[
        {
          name:'注销1',
          event: '建设施工许可',
          department: '部门1',
          count:1001,
          acceptRemindCount:1001,
          acceptUrgeCount:501,
          handleRemindCount:501,
          handleUrgeCount:501,
          acceptOptimize:501,
          handleOptimize:501,
        },

      ],
      tableData:[
      ],
      totalCount:'',
      currentTableHeader:''
    }
  },
  computed:{
    analysisSituationUnitTableHeader(){
      return analysisSituationUnitTableHeader
    },
    analysisSituationMatterTableHeader(){
      return analysisSituationMatterTableHeader
    },
    analysisSituationSituationTableHeader(){
      return analysisSituationSituationTableHeader
    },

    analysisRemindUrgeUnitTableHeader(){
      return analysisRemindUrgeUnitTableHeader
    },
    analysisRemindUrgeMatterTableHeader(){
      return analysisRemindUrgeMatterTableHeader
    },
    analysisRemindUrgeSituationTableHeader(){
      return analysisRemindUrgeSituationTableHeader
    },

    analysisDataOptimizeUnitTableHeader(){
      return analysisDataOptimizeUnitTableHeader
    },
    analysisDataOptimizeMatterTableHeader(){
      return analysisDataOptimizeMatterTableHeader
    },
    analysisDataOptimizeSituationTableHeader(){
      return analysisDataOptimizeSituationTableHeader
    },
    isAnalysisTabArr() {
      return isAnalysisTabArr
    }
  },
  mounted() {
    this.commitType = 'UNIT';
    this.currentAnalysisId = "matterSituation";
  },
  methods:{
    downloadFile(){

      let SORT_FIELD = this.sortField;
      let ORGANIZATION =  this.form.unitType;
      let GROUP_FIELD = this.groupField;
      let UNIT_NAME = this.form.unitName;

      let url='http://10.81.66.9:9250/ywtb/export_queryBanjianStatisticsInfoTable?1=1';

      if(SORT_FIELD!=''){
        url +='&SORT_FIELD='+SORT_FIELD
      }
      if(ORGANIZATION!=''){
        url +='&ORGANIZATION='+ORGANIZATION
      }
      if(GROUP_FIELD!=''){
        url +='&GROUP_FIELD='+GROUP_FIELD
      }
      if(UNIT_NAME!=''){
        url +='&UNIT_NAME='+UNIT_NAME
      }
      console.log(url)
      const a = document.createElement('a')
      a.href = url;
      a.style.display="none";
      //测试链接
      console.log(a.href)
      a.download = '差评回复';// 下载文件的名字
      document.body.appendChild(a)
      a.click();
      document.body.removeChild(a);
    },
    unitChange:function(code){
      for(let i=0;i<this.unitList.length;i++){
        if(code==this.unitList[i].code){
          this.unitList[i].chosen=true;
          this.form.unitType = code;
          this.changeType();
        }else{
          this.unitList[i].chosen=false;
        }
      }

    },
    clickTable(e1,e2,e3) {
      this.$emit('clickTableTr',e1,e2,e3)
    },
    handleClose() {
      this.$emit('update:dialogVisible',false)
    },
    changeType(){
      if(this.currentAnalysisId=='matterSituation'){ //事项
        this.sortField ='NODE1';
        switch (this.form.commitType){
          case "UNIT":
            this.groupField = '1'
            this.currentTableHeader = this.analysisSituationUnitTableHeader;
            this.unitData();
            break;
          case "MATTER":
            this.groupField = '2'
            this.currentTableHeader = this.analysisSituationMatterTableHeader;
            this.matterData();
            break;
          case "SITUATION":
            this.groupField = '3'
            this.currentTableHeader = this.analysisSituationSituationTableHeader;
            this.basicData();
            break;
        }
      }else if(this.currentAnalysisId=='remindUrge'){ //单位
        this.sortField ='NODE1';
        switch (this.form.commitType){
          case "UNIT":
            this.groupField = '1'
            this.currentTableHeader = this.analysisRemindUrgeUnitTableHeader;
            this.unitData();
            break;
          case "MATTER":
            this.groupField = '2'
            this.currentTableHeader = this.analysisRemindUrgeMatterTableHeader;
            this.matterData();
            break;
          case "SITUATION":
            this.groupField = '3'
            this.currentTableHeader = this.analysisRemindUrgeSituationTableHeader;
            this.basicData();
            break;
        }
      }else{
        this.sortField ='NODE1';
        switch (this.form.commitType){
          case "UNIT":
            this.groupField = '1'
            this.currentTableHeader = this.analysisDataOptimizeUnitTableHeader;
            this.unitData();
            break;
          case "MATTER":
            this.groupField = '2'
            this.currentTableHeader = this.analysisDataOptimizeMatterTableHeader;
            this.matterData();
            break;
          case "SITUATION":
            this.groupField = '3'
            this.currentTableHeader = this.analysisDataOptimizeSituationTableHeader;
            this.basicData();
            break;
        }
      }
    },
    changeTableHeader(id){
      if(id=='matterSituation'){ //事项
        this.sortField ='NODE1';
        switch (this.form.commitType){
          case "UNIT":
            this.groupField = '1'
            this.currentTableHeader = this.analysisSituationUnitTableHeader;
            this.unitData();
            break;
          case "MATTER":
            this.groupField = '2'
            this.currentTableHeader = this.analysisSituationMatterTableHeader;
            this.matterData();
            break;
          case "SITUATION":
            this.groupField = '3'
            this.currentTableHeader = this.analysisSituationSituationTableHeader;
            this.basicData();
            break;
        }
      }else if(id=='remindUrge'){ //单位
        this.sortField ='NODE1';
        switch (this.form.commitType){
          case "UNIT":
            this.groupField = '1'
            this.currentTableHeader = this.analysisRemindUrgeUnitTableHeader;
            this.unitData();
            break;
          case "MATTER":
            this.groupField = '2'
            this.currentTableHeader = this.analysisRemindUrgeMatterTableHeader;
            this.matterData();
            break;
          case "SITUATION":
            this.groupField = '3'
            this.currentTableHeader = this.analysisRemindUrgeSituationTableHeader;
            this.basicData();
            break;
        }
      }else{
        this.sortField ='NODE1';
        switch (this.form.commitType){
          case "UNIT":
            this.groupField = '1'
            this.currentTableHeader = this.analysisDataOptimizeUnitTableHeader;
            this.unitData();
            break;
          case "MATTER":
            this.groupField = '2'
            this.currentTableHeader = this.analysisDataOptimizeMatterTableHeader;
            this.matterData();
            break;
          case "SITUATION":
            this.groupField = '3'
            this.currentTableHeader = this.analysisDataOptimizeSituationTableHeader;
            this.basicData();
            break;
        }
      }
    },
    basicData(){
      this.tableData = [];
      this.$request({
        url:'/YWTBApi/queryBanjianStatisticsInfoTable',
        method:'post',
        data:{
          "SORT_FIELD":this.sortField,
          "ORGANIZATION":this.form.unitType,
          "GROUP_FIELD":  this.groupField,
          "UNIT_NAME":  this.form.unitName
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows;
        if(dataArr.length > 0){
          for(let i=0;i<dataArr.length;i++){
            if(dataArr[i].MAX_OPERATION_TIME!=undefined){
              dataArr[i].MAX_OPERATION_TIME =  dataArr[i].MAX_OPERATION_TIME.length > 16 ?dataArr[i].MAX_OPERATION_TIME.substring(0,16):dataArr[i].MAX_OPERATION_TIME
            }
          }
          this.tableData = dataArr;
        }else{
          this.tableData = [];
        }
        this.totalCount =response.data.msg[0].TotalRowCount;
      })
    },
    matterData(){
      this.tableData = [];
      this.$request({
        url:'/YWTBApi/queryBanjianStatisticsInfoTable',
        method:'post',
        data:{
          "SORT_FIELD":this.sortField,
          "ORGANIZATION":this.form.unitType,
          "GROUP_FIELD":  this.groupField,
          "UNIT_NAME":  this.form.unitName
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows;
        if(dataArr.length > 0){
          for(let i=0;i<dataArr.length;i++){
            if(dataArr[i].MAX_OPERATION_TIME!=undefined){
              dataArr[i].MAX_OPERATION_TIME =  dataArr[i].MAX_OPERATION_TIME.length > 16 ?dataArr[i].MAX_OPERATION_TIME.substring(0,16):dataArr[i].MAX_OPERATION_TIME
            }
          }
          this.tableData = dataArr;
        }else{
          this.tableData = [];
        }
        this.totalCount =response.data.msg[0].TotalRowCount;
      })
    },
    unitData(){
      this.tableData = [];
      this.$request({
        url:'/YWTBApi/queryBanjianStatisticsInfoTable',
        method:'post',
        data:{
          "SORT_FIELD":this.sortField,
          "ORGANIZATION":this.form.unitType,
          "GROUP_FIELD":  this.groupField,
          "UNIT_NAME":  this.form.unitName
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows;
        if(dataArr.length > 0){
          for(let i=0;i<dataArr.length;i++){
            if(dataArr[i].MAX_OPERATION_TIME!=undefined){
              dataArr[i].MAX_OPERATION_TIME =  dataArr[i].MAX_OPERATION_TIME.length > 16 ?dataArr[i].MAX_OPERATION_TIME.substring(0,16):dataArr[i].MAX_OPERATION_TIME
            }
          }
          this.tableData = dataArr;
        }else{
          this.tableData = [];

        }
        this.totalCount =response.data.msg[0].TotalRowCount;
      })
    },
  },
  watch: {
    dialogVisible:{
      handler(val){
        if(val){
          this.form.commitType = 'UNIT';
          this.form.unitType = '';
          this.sortField = 'NODE1';
          this.changeTableHeader('matterSituation');
        }
      },
      deep:true
    },
    currentAnalysisId:{
      handler(n){
        this.changeTableHeader(n);
      },
      deep:true
    },
  }
}
</script>

<style scoped  lang="scss">
::v-deep{
  //.el-button{
  //
  //  color: #fff;
  //}
  //.el-table{
  //  border: 1px solid #fff;
  //}
  //.el-table th{
  //  border: 1px solid #fff !important;
  //}
  //.el-table td{
  //  border: 1px solid #fff !important;
  //}
  .el-dialog__body{
    padding-left: 0px;
  }
  .tab-item{

    //padding: 2px 4px;
    margin-right: 10px;

    &.class1{
      &.active{
        color: #40a0ff;
      }
      background: rgba(0, 128, 255, 0.3);
      border: 1px solid #0080ff;
    }
    &.class2{
      &.active{
        color: #e6ac00;
      }
      background: rgba(255, 191, 0, 0.3);
      border: 1px solid #ffbf00;
    }
    &.class3{
      &.active{
        color: #ff5c25;
      }
      background: rgba(255, 64, 0, 0.3) ;
      border: 1px solid #ff4000;
    }
    &.class4{
      &.active{
        color: #39e545;
      }
      background: rgba(34, 172, 56, 0.3);
      border: 1px solid #22ac38;
    }
  }
  .dialog_content{
    width: 100%;
    height:785px;
    display: flex;
  }
  .content-left{
    width: 2%;
    padding-right: 20px;
    height:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .singleButton{
      cursor: pointer;
      width:34px;
      height:144px;
      border-radius: 4px;
      border: none;
      padding-top: 10px;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: #25a9ee;
      .little_span{
        width:18px;
      }
      .little_active{
        color: #fff;
      }
    }
    .top_button{
      background:url("../../../assets/imgs/住建委.png") no-repeat;
      background-size: 100%;
    }
    .middle_button{
      background:url("../../../assets/imgs/房管局.png") no-repeat;
      background-size: 100%;
    }
    .singleButton:focus,
    .singleButton:hover {
      color: #fff;
    }
  }
  .content-right{
    width: 97%;
    height: 100%;
  }
  .table-area{
    width: 100%;
    height: 90%;
  }
  .header_info{
    width: 100% !important;
    display: flex;
  }
  .tab-area{
    width: 90%;
  }
  .total_info{
    width: 10%;
    height: 100%;
    color: #fff;
    font-size: 17px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
}

</style>
