<!--
 * @Descripttion: 
 * @version: 
 * @Author: JC9527
 * @Date: 2023-09-04 10:20:06
 * @LastEditors: JC9527
 * @LastEditTime: 2023-09-06 11:07:37
-->
<template>
    <div class="container-main" ref="main">
      <div class="enforce-the-law-title">
        <div class="filtrate-condition">
          <div class="select-input">
            <div class="select-span">年份:</div>
            <el-select v-model="form.year" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="select-input">
            <div class="select-span">区划:</div>
            <el-select v-model="form.compartment" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="my-checkbox">
            <el-checkbox-group v-model="checkList" @change="setmealSelect">
              <el-checkbox label="全部"></el-checkbox>
              <el-checkbox label="已执法"></el-checkbox>
              <el-checkbox label="未执法"></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div class="export" @click="exportFile">
          <img src="@/assets/images/export.png" alt="">
          <span>导出excel</span>
        </div>
      </div>
      <div class="tables" :style="main">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="100%"
          :border="false"
          :row-class-name="tableRowClassName"
          :cell-style="columnStyle"
        >
          <el-table-column
            prop="date"
            label="计划年份"
            width="180"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="行政区划"
            width="180"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="frim"
            label="企业名称"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            header-align="center"
          >
            <template slot-scope="scope">
              <div class="tabs-btns">
                <div class="look" @click="look(scope.row)">
                  <span>查看执法详情</span>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <my-pagination :total="28" @pagesChange="pagesChange"></my-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import myPagination from "@/views/components/myPagination/index.vue"
  export default {
    components:{myPagination},
    name: "Article",
    data() {
      return {
        tableData: [{
          date: '2022年',
          name: '王小虎',
          address: '苏州',
          frim:'扬子石化有限公司',
          state:'未执法'
        }, {
          date: '2022年',
          name: '王小虎',
          address: '张家港市',
          frim:'扬子石化有限公司',
          state:'未执法'
        }, {
          date: '2022年',
          name: '王小虎',
          address: '常熟市',
          frim:'扬子石化有限公司',
          state:'未执法'
        }, {
          date: '2022年',
          name: '王小虎',
          address: '太仓市',
          frim:'扬子石化有限公司',
          state:'未执法'
        }, {
          date: '2022年',
          name: '王小虎',
          address: '昆山市',
          frim:'扬子石化有限公司',
          state:'未执法'
        }, {
          date: '2022年',
          name: '王小虎',
          address: '吴江区',
          frim:'扬子石化有限公司',
          state:'已执法'
        }, {
          date: '2022年',
          name: '王小虎',
          address: '吴中区',
          frim:'扬子石化有限公司',
          state:'已执法'
        }, {
          date: '2022年',
          name: '王小虎',
          address: '姑苏区',
          frim:'扬子石化有限公司',
          state:'已执法'
        }, {
          date: '2022年',
          name: '王小虎',
          address: '相城区',
          frim:'扬子石化有限公司',
          state:'已执法'
        }, {
          date: '2022年',
          name: '王小虎',
          address: '工业园区',
          frim:'扬子石化有限公司',
          state:'已执法'
        }],
        options:[],
        form:{
          year:'',
          compartment:'',
        },
        checkList: ['全部'],
        checkListTwo: [],
        main:{
          height:'',
        }
      };
    },
    // watch: {
    //   checkListTwo:{
    //     handler(newArray,oldArray){
    //       console.log(newArray,'newArray')
    //       console.log(oldArray,'oldArray')
    //     },
    //     deep:true,
    //     immediate:true,
    //   }
    // },
    methods: {
      // 多选框变化事件
      setmealSelect(){
        this.checkList = this.checkList.slice(-1);
        if(this.checkList.length > 0) {
          this.checkListTwo = this.checkList;
          this.changeList()
        } else {
          this.checkList = this.checkListTwo
        }
      },
      changeList(){
        console.log(this.checkList[0])  // 拿到需要筛选的值
      },
      // tabs不同行给不同class
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 !== 0) {
          return 'success-row';
        }
        return '';
      },
      // 根据状态数据修改字体颜色
      columnStyle({ row, column, rowIndex, columnIndex }) {
        if (columnIndex == 3) {
          if(row.state == '未执法') {
            return "color: #F71052"
          } else if(row.state == '已执法') {
            return "color: #23B06C"
          }
        }
      },
      // 页码，当前页切换事件
      pagesChange(pages){
        console.log(pages)
      },
      // 导出
      exportFile(){
        // console.log(this.multipleSelection)
      },
    },
    mounted() {
      this.checkListTwo = this.checkList;
      this.$nextTick(()=>{
        let dom = document.getElementsByClassName('tables');
        let height = dom[0].getBoundingClientRect();
        let windowHeight = window.innerHeight;
        let relativeHeight = windowHeight - height.top
        this.main.height = relativeHeight - 80 + 'px'
      })
    },
  };
  </script>
  <style lang="scss" scoped>
  .container-main {
    // height: calc(100vh - 84px);
    overflow: hidden;
    padding: 0 20px;
    height: 100%;
    background-color: #fff;
    .enforce-the-law-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 31px 0 12px 0;
      .filtrate-condition {
        display: flex;
        align-items: center;
        .select-input {
          margin-right: 20px;
          display: flex;
          align-items: center;
          .select-span {
            font-size: 14px;
            font-family: 'Alibaba PuHuiTi';
            font-weight: 400;
            color: #525966;
            line-height: 40px;
            margin-right: 10px;
          }
          ::v-deep .el-select {
            background-color: transparent;
            width: 210px;
            .el-input__inner {
              height: 33px;
            }
            // border-radius: 2px;
            .el-input .el-input__suffix .el-input__suffix-inner .el-icon-arrow-up::before {
              content: "";
              background: url(../../assets/images/down2.png) center center no-repeat;
              background-size: cover;
              position: absolute;
              width: 10px;
              height: 7px;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
        .my-checkbox {
          margin-left: 50px;
          ::v-deep .el-checkbox-group {
            .el-checkbox__label {
              font-size: 14px;
              font-family: 'Alibaba PuHuiTi';
              font-weight: 400;
              color: #525966;
            }
          }
        }
      }
      .export {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px 19px;
        background-color: #2378EC;
        cursor: pointer;
        img {
          width: 22px;
          margin-right: 10px;
        }
        span {
          color: #ffffff;
          font-size: 14px;
          font-family: 'Alibaba PuHuiTi';
          font-weight: 400;
        }
      }
    }
    .tables {
      margin-top: 10px;
      background-color: #EAF2FD;
      .tabs-btns {
        display: flex;
        align-items: center;
        justify-content: center;
        .look {
          display: flex;
          align-items: center;
          cursor: pointer;
          span {
            font-size: 15px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #045FFD;
            text-decoration: underline;
          }
        }
      }
      ::v-deep .el-table {
        .success-row {
          background-color: rgba(234, 242, 253, 0.25);
        }
        td {
          height: 42px;
          text-align: center;
          font-size: 14px;
          font-family: 'Alibaba PuHuiTi';
          font-weight: 400;
          color: #525966;
        }
        th {
          height: 45px;
          background-color: #EAF2FD;
          font-size: 15px;
          font-family: 'Alibaba PuHuiTi';
          font-weight: bold;
          color: #525966;
          .el-checkbox {
            display: none;
          }
        }
      }
      ::v-deep .el-table::before {
        height: 0;
      }
    }
    .pagination {
      margin-top: 40px;
    }
  }
  </style>
  