<!--开门记录柜锁列表-->
<template>
  <div class="page-container chemicalsCabinetManage-listPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">{{newData.cabinetName}} 丨 <i style="font-style: normal;color: #333333">{{newData.buildName}}-{{newData.floorName}}-{{newData.subName}}({{newData.roomNum}})</i></p>
      <p class="page-top-title-num-p">化学品总数：{{newData.chemicalNum}}</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
    </div>
    <div class="content-box">
      <div class="table-max-box">
        <p @click="tableButton(item)"
          :class="item.doorUniqueId == tableCheck?'tableCheck':''"
           v-for="(item,index) in tableList" :key="index">
          {{item.doorName}}
        </p>
      </div>
      <div class="page-form-title-box">
        <el-form :model="queryParams" class="form-box" ref="queryForm"
                 :inline="true" style="width:100%;">
          <el-form-item label="" prop="state">
            <el-date-picker
              :clearable="false"
              v-model="dateRange"
              size="small"
              style="width: 215px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="过期时间"
              end-placeholder="过期时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="" prop="useStatus">
            <el-select v-model="queryParams.useStatus"
                       placeholder="请选择状态" style="width: 140px">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="chemicalCategory">
            <el-select v-model="queryParams.chemicalCategory"
                       placeholder="请选择类别" style="width: 140px">
              <el-option
                v-for="item in categoryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="chemicalLevel">
            <el-select v-model="queryParams.chemicalLevel"
                       placeholder="请选择级别" style="width: 140px">
              <el-option
                v-for="item in levelOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="" prop="searchValue">
            <el-input
              maxLength="30"
              v-model="queryParams.searchValue"
              placeholder="化学品名/CAS/编码/归属人"
              clearable
              style="width: 220px"
            />
          </el-form-item>
          <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
          <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
        </el-form>
      </div>
      <p class="num-min-box">化学品数 {{stockNum}} ， 使用中数 {{useNum}}</p>
      <div class="page-content-box">
        <el-table class="table-box" border :data="dataList">
          <el-table-column label="名称" prop="chemicalName" show-overflow-tooltip/>
          <el-table-column label="编码" prop="tagCode" width="150" show-overflow-tooltip/>
          <el-table-column label="类别" prop="chemicalCategoryName" width="130" show-overflow-tooltip/>
          <el-table-column label="级别" prop="chemicalLevelName" width="130" show-overflow-tooltip/>
          <el-table-column label="纯度" prop="chemicalPurity" width="130" show-overflow-tooltip/>
          <el-table-column label="规格" prop="specNum" width="130" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.specNum}}{{scope.row.specUnit}}/{{scope.row.packUnit}}</span>
            </template>
          </el-table-column>
          <el-table-column label="余量" prop="surplus" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.surplus}}{{scope.row.specUnit}}</span>
            </template>
          </el-table-column>
          <el-table-column label="过期时间" prop="expireTime" width="180" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.expireStatus==-1" style="color: #333333">{{scope.row.expireTime}}</span>
              <span v-if="scope.row.expireStatus==1" style="color: #999999">{{scope.row.expireTime}} | 已过期</span>
              <span v-if="scope.row.expireStatus==2" style="color: #FF7009">{{scope.row.expireTime}} | 即将过期</span>
            </template>
          </el-table-column>
          <el-table-column label="柜层" prop="layers" width="80" show-overflow-tooltip/>
          <el-table-column label="归属人" prop="belongName" width="150" show-overflow-tooltip/>
          <el-table-column label="状态" prop="useStatusName" width="120" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.useStatus==0" style="color: #0183FA">{{scope.row.useStatusName}}</span>
              <span v-if="scope.row.useStatus==1" style="color: #11932F">{{scope.row.useStatusName}}</span>
              <span v-if="scope.row.useStatus==2" style="color: #E80000">{{scope.row.useStatusName}}</span>
              <span v-if="scope.row.useStatus==3" style="color: #E80000">{{scope.row.useStatusName}}</span>
              <span v-if="scope.row.useStatus==4" style="color: #E80000">{{scope.row.useStatusName}}</span>
              <span v-if="scope.row.useStatus==5" style="color: #E80000">{{scope.row.useStatusName}}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page-sizes="[20, 30, 40, 50]"
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
  //import { getDicts } from "@/api/commonality/noPermission";
  //import { systemUserSelect } from "@/api/commonality/permission";
  //import { getInfo } from "@/api/basicsModules/index";
  import { chemicalCabinetGetDoorList, chemicalStockStockUse } from '@/api/chemicalManage'
  import { getDicts } from '@/api/commonality/noPermission'

  export default {
    name: 'listPage',
    props:{
      propsData:{},
    },
    data(){
      return{
        showType:false,
        //状态
        statusOptions:[
          {label:'未使用',value:'0'},
          {label:'使用中',value:'1'},
          {label:'超时未归还',value:'2'},
        ],
        //类别
        categoryOptions:[],
        //级别
        levelOptions:[
          {label:'管控',value:'1'},
          {label:'非管控',value:'2'},
        ],
        dateRange:[],
        //查询条件
        queryParams:{
          page:1,
          pageSize:20,
          searchValue:"",
          chemicalLevel :null,
          useStatus :null,
          chemicalCategory :null,
          doorId :this.propsData.doorList[0].doorUniqueId,
        },
        //列表数据
        dataList:[],
        //数据数量
        total:10,
        tableCheck:this.propsData.doorList[0].doorUniqueId,
        tableList:[],
        newData:{},
        stockNum:this.propsData.doorList[0].stockNum,
        useNum:this.propsData.doorList[0].useNum,
      }
    },
    created(){
    },
    mounted(){
      console.log(this.propsData)
      if(this.propsData.cabinetId){
        this.newData=this.propsData;
        this.$set(this,'tableList',this.propsData.doorList);
        this.getDicts()
        this.getList()
      }

    },
    methods:{

      // 返回按钮
      backPage(){
        this.$parent.tableButton(5);
      },
      //选项切换
      tableButton(type){
        if(type != this.tableCheck){
          this.$set(this.queryParams,'doorId',type.doorUniqueId);
          this.$set(this,'tableCheck',type.doorUniqueId);
          this.$set(this,'stockNum',type.stockNum);
          this.$set(this,'useNum',type.useNum);
          this.getList();
        }
      },
      //查询按钮
      handleQuery(){
        this.$set(this.queryParams,'page',1);
        this.getList();
      },
      //重置按钮
      resetQuery(){
        this.$set(this,'dateRange',[]);
        this.$set(this,'queryParams',{
          page:1,
          pageSize:20,
          searchValue:"",
          useStatus :null,
          chemicalLevel :null,
          chemicalCategory :null,
          doorId :this.queryParams.doorId,
        });
        this.getList();
      },
      //获取化学品类别
      getDicts(){
        getDicts('chemicals_category').then(response => {
          this.$set(this,'categoryOptions',response.data);
        });
      },
      getList(){
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        if(this.dateRange[0]){
          obj.startExpireTime = this.dateRange[0]+'T00:00:00'
          obj.endExpireTime = this.dateRange[1]+'T23:59:59'
        }else{
          obj.startExpireTime = "";
          obj.endExpireTime = "";
        }
        chemicalStockStockUse(obj).then(response => {
          this.$set(this,'dataList',response.data.records);
          this.$set(this,'total',response.data.total);
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {

          }
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  .chemicalsCabinetManage-listPage{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .page-top-title-num-p{
      line-height:40px;
      margin-right:40px;
    }
    .content-box{
      flex:1;
      display: flex;
      flex-direction: column;
      padding:20px;
      overflow: hidden;
      .table-max-box{
        p{
          cursor: pointer;
          display: inline-block;
          text-align: center;
          padding:0 20px;
          color:#333;
          border:1px solid #E0E0E0;
          border-radius:4px;
          line-height:40px;
          margin-right:10px;
        }
        .tableCheck{
          color:#fff;
          background-color: #0183FA;
          border:1px solid #0183FA;
        }
      }
      .page-form-title-box{
        border:none;
        padding-left: 0;
      }
      .num-min-box{
        background-color:rgba(1,131,250,0.2);
        color:#0183FA;
        font-size:14px;
        line-height:40px;
        padding:0 20px;
        margin-bottom: 20px;
      }
      .page-content-box{
        padding:0;
      }
    }
  }
</style>
