<template>
  <div class="page-container chemicalsCabinetManage-infoPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">
        <span>{{propsData.cabinetName}}</span>
        <span>{{propsData.buildName}}-{{propsData.floorName}}-{{propsData.subName}}({{propsData.roomNum}})</span>
      </p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
    </div>
    <div class="content-box">
      <div class="left-max-box scrollbar-box">
        <div class="for-left-max-box" :class="checkType == index ? 'for-left-check-box':''"
             @click="leftCheck(index)"
             v-for="(item,index) in leftDataList" :key="index">
          <div class="for-title-box">
            <p>{{item.doorName}}</p>
            <p :class="item.openOrClose?'open-p':''">{{item.openOrClose?'已开启':'已关闭'}}</p>
          </div>
          <div class="for-num-box">
            <p>化学品数量：{{item.stockNum}}</p>
          </div>
          <div class="for-user-box">
            <p>管理员：<span v-for="(minItem,minIndex) in item.cabinetAdminVoList">{{minItem.userName}}</span></p>
          </div>
        </div>
      </div>
      <div class="right-max-box">
        <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="dateRangeA"
                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="state">-->
              <!--<el-date-picker-->
                <!--:clearable="false"-->
                <!--v-model="dateRangeB"-->
                <!--size="small"-->
                <!--style="width: 215px"-->
                <!--value-format="yyyy-MM-dd"-->
                <!--type="daterange"-->
                <!--range-separator="-"-->
                <!--start-placeholder="关门时间"-->
                <!--end-placeholder="关门时间"-->
              <!--&gt;</el-date-picker>-->
            <!--</el-form-item>-->
            <el-form-item label="" prop="operationType">
              <el-select v-model="queryParams.operationType" placeholder="请选择业务类型" style="width: 160px">
                <el-option
                  v-for="item in lockTypeList"
                  :key="item.type"
                  :label="item.typeName"
                  :value="item.type"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="searchValue">
              <el-input
                maxlength="10"
                v-model="queryParams.searchValue"
                placeholder="操作人/双人认证"
                clearable
                style="width:215px;"
              />
            </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>
        <div class="page-content-box">
          <el-table class="table-box" border :data="dataList">
            <el-table-column label="开门时间" prop="name" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.openTime,"{y}-{m}-{d} {h}:{i}") }}</span>
              </template>
            </el-table-column>
            <!--<el-table-column label="关门时间" prop="content" width="180" show-overflow-tooltip/>-->
            <!--<el-table-column label="开门时长" prop="content" width="120" show-overflow-tooltip/>-->
            <el-table-column label="业务类型" prop="operationTypeStr" width="120" show-overflow-tooltip/>
            <el-table-column label="操作人" prop="createByName" width="140" show-overflow-tooltip/>
            <el-table-column label="双人认证" prop="content" width="180" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.oneUserName}} - {{ scope.row.twoUserName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="返回结果" prop="isSuccessOpen" width="150" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{scope.row.isSuccessOpen?'开门成功':'--'}}</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>
  </div>
</template>

<script>
  import { chemicalCabinetGetDoorList,chemicalLockLogLockTypeList,chemicalLockLogLockList } from '@/api/chemicalManage'
  export default {
    name: 'infoPage',
    props:{
      propsData:{},
    },
    data(){
      return{
        lockTypeList:[],
        optionsB:[{type:false,typeName:'操作人'},{type:true,typeName:'双人认证'}],
        //左侧柜门数据
        leftDataList:[],
        checkType:0,
        //查询条件
        queryParams:{
          page:1,
          pageSize:20,
          operationType :null,
          searchValue :null,
        },
        //时间数据
        dateRangeA:[],
        //时间数据
        dateRangeB:[],
        //列表数据
        dataList:[],
        //数据数量
        total:0,
      }
    },
    created(){
    },
    mounted(){
      this.initialize();
    },
    methods:{
      //初始化
      initialize(){
        chemicalCabinetGetDoorList({cabinetId:this.propsData.cabinetId}).then(response => {
          this.$set(this,'leftDataList',response.data);
          if(response.data[0]){
            this.$set(this,'checkType',0);
            this.getList();
          }
        });
        chemicalLockLogLockTypeList({}).then(response => {
          this.$set(this,'lockTypeList',response.data);
        });
      },
      //左侧柜门选中
      leftCheck(index){
        if (this.checkType != index){
          this.$set(this,'checkType',index);
          this.resetQuery();
        }
      },
      //查询按钮
      handleQuery(){
        this.$set(this.queryParams,'page',1);
        this.getList();
      },
      //重置按钮
      resetQuery(){
        this.$set(this,'dateRangeA',[]);
        this.$set(this,'dateRangeB',[]);
        this.$set(this,'queryParams',{
          page:1,
          pageSize:20,
          operationType :null,
          searchValue :null,
        });
        this.getList();
      },
      //获取数据列表
      getList(){
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        obj.doorId = this.leftDataList[this.checkType].doorUniqueId
        if(this.dateRangeA[0]){
          obj.openTime = this.dateRangeA[0]+'T00:00:00'
          obj.openEndTime = this.dateRangeA[1]+'T23:59:59'
        }else{
          obj.openTime = "";
          obj.openEndTime = "";
        }
        chemicalLockLogLockList(obj).then(response => {
          this.$set(this,'dataList',response.data.records);
          this.$set(this,'total',response.data.total);
        });
      },
      // 返回按钮
      backPage(){
        this.$parent.tableButton(1);
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {

          }
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  .chemicalsCabinetManage-infoPage{
    .page-top-title-name-p{
      span:nth-child(1){
        font-weight:700;
        margin-right:20px;
      }
    }
    .content-box{
      flex:1;
      display: flex;
      overflow: hidden;
      .left-max-box{
        width:370px;
        margin:25px;
        border-right:1px dashed #dedede;
        .for-left-check-box{
          background: rgba(1,131,250,0.2)!important;
        }
        .for-left-max-box{
          cursor: pointer;
          width:344px;
          min-height:130px;
          background: #F5F5F5;
          border-radius:10px;
          padding:19px 0 12px;
          margin:0 0 20px 0;
          .for-title-box{
            display: flex;
            padding:0 15px 0;
            p:nth-child(1){
              flex:1;
              font-weight: 700;
              font-size:16px;
              line-height:24px;
            }
            p:nth-child(2){
              width:60px;
              line-height:24px;
              text-align: center;
              font-size:12px;
              border-radius:6px;
              border:1px solid #666;
              color:#666;
            }
            .open-p{
              border:1px solid #0183FA!important;;
              color:#0183FA!important;;
            }
          }
          .for-num-box{
            padding:0 15px;
            margin:19px 0 8px 0;
            p{
              font-size:14px;
              line-height:24px;
            }
          }
          .for-user-box{
            padding:0 15px;
            p{
              font-size:14px;
              line-height:20px;
              padding:2px 0;
              span{
                margin-right:10px;
              }
            }
          }
        }
      }
      .right-max-box{
        flex:1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .page-form-title-box{
          border:none;
          padding:20px 0 0 0;
        }
        .page-content-box{
          padding-top:0;
          padding-left:0;
        }
      }
    }
  }
</style>
