<template>
  <div class="instrumentDangerComponentTable">
    <div class="top-title-max-ox">
      <p></p>
      <p>大仪实验室隐患统计</p>
      <p></p>
      <div class="title-button" @click="outButton">
        <img src="@/assets/ZDimages/icon_yh_fh@1x.png">
        <p>返回</p>
      </div>
    </div>
    <div class="table-title-box">
      <p class="table-title-p">数据筛选</p>
      <el-form :model="queryParams" class="form-box" ref="queryForm"
               :inline="true" style="width:100%;">
        <el-form-item label="学院：" prop="state">
          <el-select v-model="queryParams.state"
                     placeholder="请选择学院"
                     style="width: 260px">
            <el-option
              v-for="item in deptOptions"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="周期：" prop="timeType" style="margin-left:30px!important;">
          <el-select v-model="queryParams.timeType"
                     placeholder="请选择周期"
                     style="width: 260px;">
            <el-option key="1" label="年度" value="1"/>
            <el-option key="2" label="季度" value="2"/>
            <el-option key="3" label="月度" value="3"/>
          </el-select>
        </el-form-item>
        <p class="form-inquire-common-style-button" @click="handleQuery">查询</p>
        <p class="form-reset-common-style-button" @click="resetQuery">重置</p>
      </el-form>
    </div>
    <div class="table-list-box">
      <p class="table-list-p">数据列表</p>
      <div class="table-list">
        <el-table class="table-box" :row-class-name="tableRowClassName"
                  :data="dataList" @sort-change="sortChange">
          <el-table-column align="center" label="序号"  width="150"  type="index"/>
          <el-table-column align="center" label="一级分类" prop="data1"  show-overflow-tooltip/>
          <el-table-column align="center" label="二级分类" prop="data2" show-overflow-tooltip/>
          <el-table-column align="center" label="三级分类" prop="data3" show-overflow-tooltip/>
          <el-table-column align="center" sortable="custom" label="实验室数" prop="data4" width="240" show-overflow-tooltip/>
          <el-table-column align="center" sortable="custom" label="隐患数" prop="data5" width="240" show-overflow-tooltip/>
          <el-table-column align="center" sortable="custom" label="同比" prop="data6" width="240" show-overflow-tooltip>
            <template slot-scope="scope">+{{scope.row.data6}}%</template>
          </el-table-column>
          <el-table-column align="center" sortable="custom" label="已整改" prop="data7" width="240" show-overflow-tooltip/>
          <el-table-column align="center" sortable="custom" label="未整改" prop="data8" width="240" show-overflow-tooltip/>
          <el-table-column align="center" sortable="custom" label="已超期" prop="data9" width="240" show-overflow-tooltip>
            <template slot-scope="scope">{{scope.row.data9}}%</template>
          </el-table-column>
          <!--<el-table-column align="center" label="创建时间" prop="createTime" width="200" show-overflow-tooltip>-->
          <!--<template slot-scope="scope">-->
          <!--<span>{{ parseTime(scope.row.createTime,"{y}-{m}-{d} {h}:{i}") }}</span>-->
          <!--</template>-->
          <!--</el-table-column>-->
        </el-table>
        <pagination :page-sizes="[20, 30, 40, 50]"
                    v-show="total>0"
                    :total="total"
                    layout="total,sizes, prev, pager, next"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>
<script>
  import { getDeptDropList,} from "@/api/index";
  export default {
    name: 'instrumentDangerComponentTable',
    data () {
      return {
        //学院列表
        deptOptions:[],
        //查询条件
        queryParams:{
          page:1,
          pageSize:20,
          searchValue:"",
          state :null,
          timeType:null,
        },
        //列表数据
        dataList:[],
        //数据数量
        total:60,
      }
    },
    created(){

    },
    mounted(){
      this.getDeptDropList();
      this.getList();
    },
    methods:{
      outButton(){
        this.$parent.checkComponentType(null)
      },
      //排序方法
      sortChange(val){

      },
      //列表查询
      getList(){
        let list = [];
        let dataNameA = ['强磁类','激光类','强电','高压','高温','低温'];
        let dataNameB = ['易燃','易爆','高速','高大'];
        let dataNameC = ['碰撞','夹击','剪切','卷入'];
        let maxNum = 20;
        let num = 9;
        function getRandomInt(min, max) {
          min = Math.ceil(min); // 确保min是整数
          max = Math.floor(max); // 确保max是整数
          return Math.floor(Math.random() * (max - min + 1)) + min; // 返回介于min和max之间的整数
        }
        for(let i=0;i<maxNum;i++){
          let obj = {};
          for(let o=0;o<num;o++){
            if(o == 0){
              if(dataNameA[0]){
                obj['data'+(o+1)] = dataNameA[getRandomInt(0,(dataNameA.length-1))]
              }else{
                obj['data'+(o+1)] = getRandomInt(1,500)
              }
            }else if(o == 1){
              if(dataNameB[0]){
                obj['data'+(o+1)] = dataNameB[getRandomInt(0,(dataNameB.length-1))]
              }else{
                obj['data'+(o+1)] = getRandomInt(1,500)
              }
            }else if(o == 2){
              if(dataNameC[0]){
                obj['data'+(o+1)] = dataNameC[getRandomInt(0,(dataNameC.length-1))]
              }else{
                obj['data'+(o+1)] = getRandomInt(1,500)
              }
            }else if(o == 5){
              obj['data'+(o+1)] = getRandomInt(1,100)
            }else if(o == 8){
              obj['data'+(o+1)] = getRandomInt(1,100)
            }else{
              obj['data'+(o+1)] = getRandomInt(1,500)
            }
          }
          list.push(obj)
        }
        this.$set(this,'dataList',list);
      },
      //查询按钮
      handleQuery(){
        this.$set(this.queryParams,'page',1);
        // this.getList();
      },
      //重置按钮
      resetQuery(){
        this.$set(this,'queryParams',{
          page:1,
          pageSize:20,
          searchValue:"",
          state :null,
        });
        // this.getList();
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex  % 2 == 0) {
          return 'warning-row';
        } else {
          return 'success-row';
        }
        return ''
      },
      //查询学院列表
      getDeptDropList(){
        getDeptDropList({deptName:"",level:2,deptType:1}).then(response => {
          this.$set(this, 'deptOptions', response.data)
        });
      },
    },
  }
</script>
<style scoped lang="scss">
  .instrumentDangerComponentTable{
    padding:0 62px;
    height:1340px;
    display: flex;
    flex-direction: column;
    flex:1;
    overflow: hidden;
    .top-title-max-ox{
      display: flex;
      margin:20px 0;
      p:nth-child(1){
        width:10px;
        height:30px;
        background-color: #15827C;
        margin:5px 20px 0 0;
      }
      p:nth-child(2){
        color:#00FFFF;
        font-size:26px;
        line-height:40px;
      }
      p:nth-child(3){
        flex:1;
      }
      .title-button{
        width:120px;
        height:40px;
        background-color: #021D20;
        border:1px solid #15827C;
        display: flex;
        cursor: pointer;
        img{
          display: block;
          width:24px;
          height:24px;
          margin:8px 15px 0 12px;
        }
        p{
          font-size:18px;
          line-height:42px;
          color:#fff;
        }
      }
    }
    .table-title-box{
      height:200px;
      background-color: #002329;
      margin-bottom:20px;
      .table-title-p{
        line-height:80px;
        border-bottom:1px solid #15827C;
        padding-left:30px;
        font-size:24px;
        color:#fff;
      }
    }
    .table-list-box{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
      .table-list-p{
        line-height:80px;
        border-bottom:1px solid #15827C;
        padding-left:30px;
        font-size:24px;
        color:#fff;
      }
      .table-list{
        padding:35px 30px 0;
        flex:1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
    }
  }
</style>
