<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">
      <el-form size="small" :model="formData" inline>
        <el-form-item label="开始日期">
          <el-date-picker
              size="small"
              v-model="formData.value1"
              type="month"
              format="yyyy 年 MM 月"
              value-format="yyyy-MM"
              placeholder="时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker
              size="small"
              v-model="formData.value2"
              type="month"
              format="yyyy 年 MM 月"
              value-format="yyyy-MM"
              placeholder="时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="btn-i">
          <el-button @click="showData()">查询</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="currentCommentId" style-type="colorful" :data-arr="isBadCommentTabArr" />
        </div>
        <div class="total_info">
          <span>共有</span>
          <span>{{totalCount}}</span>
          <span>条记录</span>
        </div>
      </div>
      <div class="table-area">
        <my-table  @clickTableTr="clickTable"  :table-data="tableData" :table-list="tableData"  :headers="currentTableHeader">

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

<script>


import {evaluateStaListTableHeader,  isBadCommentTabArr,evaluateStaListUnitTableHeader} from "@/views/units/local-data";
import MyTable from "@/components/my-table/MyTable";
import TabControl from "@/components/common-panel/c-cpns/TabControl";
export default {
  name: "StaTableModel",
  components: {MyTable,TabControl},
  props:{
    dialogVisible:{
      type:Boolean
    },

    title:{

    },


  },
  data() {
    return {
      totalCount:0,
      dialogFormTop:'12vh',
      currentCommentId:'',
      currentTableHeader:[],
      formData:{
        value1:'',
        value2:''
      },
      tableData:[
      ]

    }
  },



  computed:{
    evaluateStaListTableHeader(){
      return evaluateStaListTableHeader
    },
    evaluateStaListUnitTableHeader(){
      return evaluateStaListUnitTableHeader
    },
    isBadCommentTabArr() {
      return isBadCommentTabArr
    }
  },
  mounted() {
    this.currentCommentId('0')
  },
  methods:{
    downloadFile(){
      let  START_TIME = this.formData.value1;
      let END_TIME =  this.formData.value2;

      let TYPE = this.currentCommentId;

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

      if(START_TIME!=''){
        url +='&START_TIME='+START_TIME
      }
      if(END_TIME!=''){
        url +='&END_TIME='+END_TIME
      }
      if(TYPE!=''){
        url +='&TYPE='+TYPE
      }

      console.log(url)
      const a = document.createElement('a')
      a.href = url;
      a.style.display="none";
      //测试链接
      console.log(a.href)
      a.download = '差评回复--'+START_TIME + '--' + END_TIME;// 下载文件的名字
      document.body.appendChild(a)
      a.click();
      document.body.removeChild(a);
    },
    showData(){
      this.$request({
        url:'/ywtb/selectYwtbRectificationStatistics',
        method:'post',
        data:{
          "START_TIME":this.formData.value1,
          "END_TIME":this.formData.value2,
          "TYPE":this.currentCommentId,
        }
      }).then(response => {
        let useData= []
        let dataArr = response.data.msg[0].Rows;
        for(let i=0;i<dataArr.length;i++){
          let tempdata = {
            //name:dataArr[i].MATTER_NAME,
            event:dataArr[i].MATTER_NAME,
            count:dataArr[i].BJ_ALL_NUM,
            percent:dataArr[i].NAME,
            department: dataArr[i].UNIT_NAME,
            commentCount:dataArr[i].PL_ALL_NUM,
            agreeCount:dataArr[i].HP_NUM,
            agreePercent:dataArr[i].HPL,
            disAgreeCount:dataArr[i].CP_NUM,
            disAgreePercent:dataArr[i].CPL,
            plan:dataArr[i].IS_RECTIFICATION,
          }
          useData.push(tempdata);
        }
        this.tableData = useData;
        this.totalCount =response.data.msg[0].TotalRowCount;
      })
    },

    clickTable(e1,e2,e3) {
      this.$emit('clickTableTr',e1,e2,e3)
    },
    handleClose() {

      this.$emit('update:dialogVisible',false)

    },
    changeTableHeader(id){
      if(id=='0'){ //事项
        this.currentTableHeader = this.evaluateStaListTableHeader;
        this.showData();
      }else if(id=='1'){ //单位
        this.currentTableHeader = this.evaluateStaListUnitTableHeader;
        this.showData();
      }
    }
  },
  watch:{
    dialogVisible:{
      handler(val){
        if(val){
          this.formData.value1 = '';
          this.formData.value2 = '';
          this.currentCommentId = '0';
          this.changeTableHeader('0');
        }
      },
      deep:true
    },
    currentCommentId:{
      handler(n){
        this.changeTableHeader(n);
      },
      deep:true
    },
  }
}
</script>

<style scoped lang="scss">

::v-deep{
  .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;
    }
  }
  .el-button{

    color: #fff;
  }
}
.dialog_content{
  width: 100%;
  height:785px;
}
.table-area{
  width: 100%;
  height:90%;
}
.header_info{
  width: 100% !important;
  display: flex;
}
.tab-area{
  width: 90%;
}
.total_info{
  width: 100%;
  color: #fff;
  font-size: 17px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
</style>
