<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="form" inline>-->
<!--        &lt;!&ndash;        <el-form-item label="时间">&ndash;&gt;-->
<!--        &lt;!&ndash;          <el-date-picker&ndash;&gt;-->
<!--        &lt;!&ndash;              size="small"&ndash;&gt;-->
<!--        &lt;!&ndash;              v-model="formData.value1"&ndash;&gt;-->
<!--        &lt;!&ndash;              type="date"&ndash;&gt;-->
<!--        &lt;!&ndash;              placeholder="选择日期">&ndash;&gt;-->
<!--        &lt;!&ndash;          </el-date-picker>&ndash;&gt;-->
<!--        &lt;!&ndash;        </el-form-item>&ndash;&gt;-->
<!--        <el-form-item class="btn-i">-->
<!--          <el-button>导出</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
      <div class="tab-area">
        <tab-control :tab-id.sync="currentElectricCardId" style-type="colorful" :data-arr="isElectricCardTabArr" />
      </div>
      <div class="table-area">
        <my-table  @clickTableTr="clickTable"  :table-data="tableData"   :headers="currentTableHeader">
        </my-table>
      </div>
      <div class="page">
        <ele-pagination @sizeOrPageChange="sizeOrPageChange"  :total-count="totalCount" :current-page="currentPage" :page-size="pageSize"/>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  electricsjyzsxsTableHeader, electricdyzzzlTableHeader,electricyzqddycsTableHeader,electricyzqddycsdbbjkTableHeader,
  electricyzqddycsfhzxdyyqTableHeader,
  isElectricCardTabArr
} from "@/views/units/local-data";
import TabControl from "@/components/common-panel/c-cpns/TabControl";
import ElePagination from "@/components/ele-paga/ElePagination";
import MyTable from "@/components/my-table/MyTable";
export default {
  name: "ElectricCardTableModel",
  components: {MyTable,
    TabControl,ElePagination
  },
  props:{
    dialogVisible:{
      type:Boolean
    },

    title:{

    },
    searchDate:{

    }

  },
  data() {
    return {
      dialogFormTop:'12vh',
      // formData:{
      //   value1:''
      // },
      currentPage:1,
      pageSize:10,
      currentElectricCardId:'',
      tableData:[
      ],
      totalCount:'',
      currentTableHeader:''
    }
  },
  computed:{
    //实际用证事项数
    electricsjyzsxsTableHeader(){
      return electricsjyzsxsTableHeader
    },
    //调用证照种类
    electricdyzzzlTableHeader(){
      return electricdyzzzlTableHeader
    },
    //“用证清单”调用次数
    electricyzqddycsTableHeader(){
      return electricyzqddycsTableHeader
    },
    //“用证清单”调用次数（对比办件库）
    electricyzqddycsdbbjkTableHeader(){
      return electricyzqddycsdbbjkTableHeader
    },
    //“用证清单”调用次数（符合最新调用要求）
    electricyzqddycsfhzxdyyqTableHeader(){
      return electricyzqddycsfhzxdyyqTableHeader
    },
    isElectricCardTabArr() {
      return isElectricCardTabArr
    }
  },
  mounted() {

  },
  methods:{
    sizeOrPageChange(page,size){
      this.currentPage = page;
      this.pageSize = size;
      this.commit();
    },
    clickTable(e1,e2,e3) {
      this.$emit('clickTableTr',e1,e2,e3)
    },
    handleClose() {
      this.$emit('update:dialogVisible',false)
    },
    changeHeader(id){
      if(id=='1'){ //事项
        this.currentTableHeader = this.electricsjyzsxsTableHeader;
      }else if(id=='0'){ //单位
        this.currentTableHeader = this.electricdyzzzlTableHeader;
      }else if(id=='2'){
        this.currentTableHeader = this.electricyzqddycsTableHeader;
      }else if(id=='3'){
        this.currentTableHeader = this.electricyzqddycsdbbjkTableHeader;
      }else if(id=='4'){
        this.currentTableHeader = this.electricyzqddycsfhzxdyyqTableHeader;
      }
    },
    onCommit(){
      this.pageIndex = 1;
      this.commit();
    },
    commit(){
      this.$request({
        url:'/ywtb/selectYwtbLicenseReport',
        method:'post',
        data:{
          "TYPE":this.currentElectricCardId,
          "INSERT_TIME":this.searchDate,
          "PAGESIZE":this.pageSize,
          "PAGEINDEX":this.currentPage
        }
      }).then(response => {
        let useData= []
        let dataArr = response.data.msg[0].Rows;
        for(let i=0;i<dataArr.length;i++){
          let tempdata = {
            MATTER_CODE:dataArr[i].MATTER_CODE,
            MATTER_NAME:dataArr[i].MATTER_NAME,
            HANDING_NUMBER: dataArr[i].HANDING_NUMBER,
            HOLDER_NUMBER:dataArr[i].HOLDER_NUMBER,
            TYPE:dataArr[i].TYPE,
            INSERT_TIME:dataArr[i].INSERT_TIME,
            CATALOG_CODE:dataArr[i].CATALOG_CODE,
          }
          useData.push(tempdata);
        }
        this.tableData = useData;
        this.totalCount =response.data.msg[0].TotalRowCount;
      })
    },
  },
  watch: {
    dialogVisible:{
      handler(val){
        if(val){
          console.log(this.searchDate);
          this.changeHeader('1');
          this.onCommit();
        }
      },
      deep:true
    },
    currentElectricCardId:{
      handler(n){
        this.changeHeader(n);
        this.onCommit();
      },
      deep:true
    },

  }
}
</script>

<style scoped  lang="scss">
::v-deep{
  .el-button{

    color: #fff;
  }
  .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;
  }
  .table-area{
    width: 100%;
    height: 90%;
    .page{
      margin-top: 20px;
      text-align: right;
    }
  }
}

</style>
