<!--个人实验室进出记录-->
<template>
  <div class="app-container record-my">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">我的进出记录</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
    </div>
    <div class="record-my-page">
      <div class="page-form-title-box">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="" prop="subId">
            <el-select v-model="queryParams.subId" placeholder="选择实验室" style="width:220px;">
              <el-option
                v-for="item in subjectOptions"
                :key="item.subId"
                :label="item.subName"
                :value="item.subId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-date-picker
              :clearable="false"
              v-model="dateRange"
              style="width: 240px;height:40px;"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="进入时间"
              end-placeholder="进入时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <p class="page-inquire-common-style-button" style="margin:0 20px;" @click="handleQuery">查询</p>
            <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
          </el-form-item>
        </el-form>
      </div>
      <div class="page-content-box">
        <el-table class="table-box" v-loading="loading" border :data="recordList" ref="multipleTable">
          <el-table-column label="实验室" align="left" prop="subName" show-overflow-tooltip/>
          <el-table-column label="学院" align="left" prop="deptName" show-overflow-tooltip width="300"/>
          <el-table-column label="进入时间" align="left" prop="inTime" show-overflow-tooltip width="210"/>
          <el-table-column label="离开时间" align="left" prop="outTime" show-overflow-tooltip width="210"/>
          <el-table-column label="停留时间" align="left" prop="hoursMinutes" show-overflow-tooltip width="210"/>
          <el-table-column label="操作" align="left" width="160">
            <template slot-scope="scope">
              <div class="table-button-box">
                <p class="table-button-null"></p>
                <p class="table-button-p" v-if="scope.row.accessStatus == 2" @click="lookInfo(scope.row)">详情</p>
                <p class="table-button-null"></p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          layout="total, prev, pager, next, sizes, jumper"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <el-dialog class="record-el-dialog-max-box" title="详情" width="770px" append-to-body
               :visible.sync="infoShadeType" v-if="infoShadeType"
               @close="dialogOff()" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="record-el-dialog-big-box scrollbar-box">
        <div class="record-el-dialog-for-box" v-for="(item,index) in infoList" :key="index">
          <img v-if="item.subUrl" :src="item.subUrl">
          <p :class="item.subUrl?'borderA':'borderB'">{{item.checkOutName}}</p>
        </div>
      </div>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="dialogOff">取消</p>
        <p class="dialog-footer-button-primary" @click="dialogOff()">确定</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { examPointsRecordList, getRecord, delRecord, addRecord, updateRecord,myListRecord,subjectDictList } from "@/apiDemo/laboratory/record";
import { listDepartments } from "@/apiDemo/system/dept";

import { treeselect } from "@/apiDemo/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
//                                    V3
import { laboratorySubPassOutMyList,laboratorySubPassOutPhotoList,laboratorySubPassOutCheckedSubList } from '@/api/integratedManagement/index'

export default {
  name: "Record",
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 实验室进出记录表格数据
      recordList: [],
      subjectOptions:[],
      // 查询参数
      queryParams: {
        page: 1,
        pageSize:20,
        subId: null,
      },
      //表格扩展选择器---需要在@selection-change绑定的方法内监控selection数组长度
      selectedNum:0,
      dateRange:[],
      //详情遮罩开关
      infoShadeType:false,
      infoList:[],
    };
  },
  created() {
    this.getList();
    this.laboratorySubPassOutCheckedSubList();
  },
  methods: {
    //关闭弹层
    dialogOff() {
      this.$set(this, 'infoShadeType', false)
    },
    backPage(){
      this.$parent.clickPage(1);
    },
    //查看详情
    lookInfo(row){
      laboratorySubPassOutPhotoList({passOutId:row.passOutId}).then(response => {
        this.$set(this,'infoList',response.data);
        this.$set(this,'infoShadeType',true);
      });
    },
    //=========表格扩展选择器方法---结束=========
    getList() {
      this.loading = true;
      if(this.dateRange&&this.dateRange.length>0) {
        this.queryParams.startTime = this.dateRange[0]+ 'T00:00:00';
        this.queryParams.endTime = this.dateRange[1]+ 'T23:59:59';
      } else {
        this.queryParams.startTime = null;
        this.queryParams.endTime = null;
      }
      laboratorySubPassOutMyList(this.queryParams).then(response => {
        this.recordList = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    //查询有进出记录的实验室
    laboratorySubPassOutCheckedSubList(){
      laboratorySubPassOutCheckedSubList({}).then(response => {
        this.subjectOptions = response.data;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.$set(this,'queryParams',{
        page: 1,
        pageSize:20,
        subId: null,
      });
      this.handleQuery();
    },
  }
};
</script>

<style scoped lang="scss">
  .record-my {
    flex:1;
    display: flex!important;
    flex-direction: column;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    .top-title-box{
      display: flex;
      border-bottom:1px solid #E0E0E0;
      p:nth-child(1){
        flex:1;
        line-height:80px;
        font-size:18px;
        color:#0045AF;
        margin-left:20px;
      }
      p:nth-child(2){
        margin:20px;
      }
    }
    .record-my-page{
      flex:1;
      display: flex!important;
      flex-direction: column;
      overflow: hidden;
    }
    .el-row{
      margin-bottom:20px;
    }
    .sheet-expand-box{
      height:40px;
      display:flex;
      background:rgba(1,131,250,0.1);
      border-radius: 5px;
      margin-bottom:18px;
      font-size:14px;
      i{
        margin:10px 16px 0 14px;
        height:20px;
        width:20px;
        font-size:20px;
        display: block;
      }
      p{
        margin:0;
      }
      p:nth-child(2){
        width:132px;
        font-size:14px;
        height:40px;
        line-height:40px;
      }
      p:nth-child(3){
        width:60px;
        font-size:14px;
        height:40px;
        line-height:40px;
        margin-right:20px;
      }
      p:nth-child(4){
        width:60px;
        font-size:14px;
        height:40px;
        line-height:40px;
        margin-right:20px;
      }
      p:nth-child(5){
        font-size:14px;
        line-height:30px;
        width: 100px;
        height: 30px;
        border-radius: 6px;
        text-align: center;
        margin-top:5px;
        margin-right:20px;
      }
      p:nth-child(6){
        font-size:14px;
        line-height:30px;
        width: 100px;
        height: 30px;
        border-radius: 6px;
        text-align: center;
        margin-top:5px;
      }
    }
  }
</style>
<style lang="scss">
  .record-el-dialog-max-box{
    .record-el-dialog-big-box{
      height:500px;
      .record-el-dialog-for-box{
        padding-bottom:20px;
        overflow: hidden;
        img{
          display: block;
          width:730px;
          height:400px;
          border-top-left-radius:6px;
          border-top-right-radius:6px;
          overflow: hidden;
        }
        p{
          font-size:16px;
          padding:0 20px;
          line-height:40px;
          overflow: hidden;
          background-color: #E0E0E0;
        }
        .borderA{
          border-bottom-left-radius:6px;
          border-bottom-right-radius:6px;
        }
        .borderB{
          border-radius:6px;
        }
      }
    }
  }
</style>
