<template>
  <div class="equipmentLifeComponentTable">
    <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="deptId">
          <el-select v-model="queryParams.deptId"
                     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>
        <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="deptName"  show-overflow-tooltip/>
          <el-table-column align="center" sortable="custom" label="设备总数" prop="deviceNum" width="260" show-overflow-tooltip/>
          <el-table-column align="center" sortable="custom" label="5年内" prop="fiveYears" width="260" show-overflow-tooltip/>
          <el-table-column align="center" sortable="custom" label="10年内" prop="tenYears" width="260" show-overflow-tooltip/>
          <el-table-column align="center" sortable="custom" label="12年内" prop="twelveYears" width="260" show-overflow-tooltip/>
          <el-table-column align="center" sortable="custom" label="20年内" prop="twentyYears" width="260" show-overflow-tooltip/>
          <el-table-column align="center" sortable="custom" label="超期服役" prop="extendedService" width="260" show-overflow-tooltip/>
          <el-table-column align="center" label="超期占比" prop="extendedRate" width="260" show-overflow-tooltip>
            <template slot-scope="scope">{{scope.row.extendedRate?scope.row.extendedRate+'%':''}}</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,reportReportBsEquipLifeGetReportBsEquipLifeList } from "@/api/index";
  export default {
    name: 'equipmentLifeComponentTable',
    data () {
      return {
        //学院列表
        deptOptions:[],
        //查询条件
        queryParams:{
          page:1,
          pageSize:20,
          deptId:"",
          ascOrDesc:"",
          type:"",
        },
        //列表数据
        dataList:[],
        //数据数量
        total:60,
      }
    },
    created(){

    },
    mounted(){
      this.getDeptDropList();
      this.getList();
    },
    methods:{
      outButton(){
        this.$parent.checkComponentType(null)
      },
      //排序方法
      sortChange(val){
        if(val.prop == 'deviceNum'){
          //设备总数
          this.$set(this.queryParams,'ascOrDesc',val.order=='ascending'?true:(val.order=='descending'?false:''));
          this.$set(this.queryParams,'type',1);
          this.handleQuery();
        }else if(val.prop == 'fiveYears'){
          //5年内
          this.$set(this.queryParams,'ascOrDesc',val.order=='ascending'?true:(val.order=='descending'?false:''));
          this.$set(this.queryParams,'type',2);
          this.handleQuery();
        }else if(val.prop == 'tenYears'){
          //10年内
          this.$set(this.queryParams,'ascOrDesc',val.order=='ascending'?true:(val.order=='descending'?false:''));
          this.$set(this.queryParams,'type',3);
          this.handleQuery();
        }else if(val.prop == 'twelveYears'){
          //12年内
          this.$set(this.queryParams,'ascOrDesc',val.order=='ascending'?true:(val.order=='descending'?false:''));
          this.$set(this.queryParams,'type',4);
          this.handleQuery();
        }else if(val.prop == 'twentyYears'){
          //20年内
          this.$set(this.queryParams,'ascOrDesc',val.order=='ascending'?true:(val.order=='descending'?false:''));
          this.$set(this.queryParams,'type',5);
          this.handleQuery();
        }else if(val.prop == 'extendedService'){
          //超期服役
          this.$set(this.queryParams,'ascOrDesc',val.order=='ascending'?true:(val.order=='descending'?false:''));
          this.$set(this.queryParams,'type',6);
          this.handleQuery();
        }else{
          this.$set(this.queryParams,'ascOrDesc','');
          this.$set(this.queryParams,'type','');
          this.handleQuery();
        }
      },
      //列表查询
      getList(){
        reportReportBsEquipLifeGetReportBsEquipLifeList(this.queryParams).then(response => {
          this.$set(this,'dataList',response.data.records);
          this.$set(this,'total',response.data.total);
        });
      },
      //查询按钮
      handleQuery(){
        this.$set(this.queryParams,'page',1);
        this.getList();
      },
      //重置按钮
      resetQuery(){
        this.$set(this,'queryParams',{
          page:1,
          pageSize:20,
          deptId:"",
          ascOrDesc:"",
          type:"",
        });
        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">
  .equipmentLifeComponentTable{
    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>
