<!--化学品柜管理-智能锁-操作记录-->
<template>
  <div class="operationRecord">
    <div class="title-box">
      <p>{{operationRecordPropsData.name}}-{{operationRecordPropsData.posi}}-{{operationRecordPropsData.cabinetName}}</p>
      <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
    </div>
    <div class="operationRecord-min-page">
      <el-form :model="queryParamsData" class="form-box" ref="queryForm" :inline="true">
        <el-form-item label="关键字" prop="searchValue">
          <el-input
            maxLength="30"
            v-model="queryParamsData.searchValue"
            placeholder="姓名"
            clearable
            size="small"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="开锁日期" prop="unLockTimeBegin" label-width="78px">
          <el-date-picker
            style="width:260px;"
            v-model="unLockTime"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="关锁日期" prop="title" label-width="78px">
          <el-date-picker
            style="width:260px;"
            v-model="closeLockTime"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="操作方式" prop="operationType">
          <el-select v-model="queryParamsData.operationType" clearable placeholder="请选择状态">
            <el-option
              v-for="item in optionsList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
          <p class="reset-button-one" @click="resetQuery">重置</p>
        </el-form-item>
      </el-form>
      <el-table  border :data="tableList" ref="multipleTable">
        <el-table-column label="开锁时间" align="center" prop="unLockTime"/>
        <el-table-column label="关锁时间" align="center" prop="closeLockTime"/>
        <el-table-column label="操作时长" align="center" prop="timeLength" width="250"/>
        <el-table-column label="操作类型" align="center" prop="operationTypeContent" width="200"/>
        <el-table-column label="操作人" align="center" prop="operationNames" width="250"/>
        <el-table-column label="操作" align="center" width="110" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <div class="table-button-box">
              <p class="table-button-null"></p>
              <p class="table-button-p" v-if="scope.row.closeLockVideo" @click="pageToggle(2,scope.row)">操作视频</p>
              <p class="table-button-null"></p>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-sizes="[20, 30, 40, 50]"
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <el-dialog title="操作视频" :visible.sync="videoType" v-if="videoType" :close-on-click-modal="false"
               width="840px" append-to-body id="operationRecord-dialog-box">
      <video style="width:800px;height:450px;" controls="" autoplay="" name="media" :poster="videoCover">
        <source :src="videoData.url" type="video/mp4">
      </video>
    </el-dialog>
  </div>
</template>

<script>
  import { lockLogList } from "@/api/medicUniversity-3_1/index";
  export default {
    name: "operationRecord",
    props:{
      operationRecordPropsData:{},
    },
    data() {
      return {
        //操作方式
        optionsList:[{id:1,name:"入库"},{id:2,name:"出库"},{id:3,name:"领用"},{id:4,name:"归还"},{id:0,name:"系统"}],
        // 搜索数据
        queryParamsData:{
          pageNum:1,
          pageSize:20,
        },
        // 搜索实际发送数据
        queryParams:{
          pageNum:1,
          pageSize:20,
        },
        //开锁时间
        unLockTime:[],
        //关锁时间
        closeLockTime:[],
        tableList:[],
        total:0,
        //开关锁视频相关数据
        videoCover:window.location.href.split('://')[0]+'://' + this.judgmentNetworkReturnAddress() + "/admin/" + localStorage.getItem('videoCover'),
        videoType:false,
        videoData:{},
      }
    },
    created() {

    },
    mounted(){
      this.getList();
    },
    methods:{
      //视频按钮
      pageToggle(type,row){
        if(!row.closeLockVideo){
          this.msgError('操作视频异常无法观看');
          return
        }
        let obj = {
          type:type,
          url:window.location.href.split('://')[0]+'://' + this.judgmentNetworkReturnAddress() + "/admin/" + row.closeLockVideo
        };
        // if(type == 1){
        //   obj.url = row.unLockVideo;
        // }else if(type == 2){
        //   obj.url = row.closeLockVideo;
        // }
        this.$set(this,'videoData',obj);
        this.videoType = true;
      },
      getList(){
        this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));
        this.queryParamsData.cabinetlockId = this.operationRecordPropsData.id;
        if(this.unLockTime[0]){
          this.queryParamsData.unLockTimeBegin = this.unLockTime[0];
          this.queryParamsData.unLockTimeEnd = this.unLockTime[1];
        }else{
          this.queryParamsData.unLockTimeBegin = "";
          this.queryParamsData.unLockTimeEnd = "";
        }
        if(this.closeLockTime[0]){
          this.queryParamsData.closeLockTimeBegin = this.closeLockTime[0];
          this.queryParamsData.closeLockTimeEnd = this.closeLockTime[1];
        }else{
          this.queryParamsData.closeLockTimeBegin = "";
          this.queryParamsData.closeLockTimeEnd = "";
        }
        lockLogList(this.queryParamsData).then(response => {
          this.total = response.total;
          this.tableList = response.rows;
        });
      },
      backPage(){
        this.$parent.pageToggle(0);
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParamsData.pageNum = 1;
        this.queryParamsData.pageSize = 20;
        this.queryParams = JSON.parse(JSON.stringify(this.queryParamsData));
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$set(this,'unLockTime',[]);
        this.$set(this,'closeLockTime',[]);
        this.$set(this,'queryParamsData',{});
        this.$set(this,'queryParams',{});
        this.handleQuery();
      },
    }
  }
</script>

<style scoped lang="scss">
  .operationRecord{
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    p{
      margin:0;
    }
    .title-box{
      display: flex;
      height:90px;
      border-bottom: 1px solid #D8D8D8;
      p:nth-child(1){
        flex:1;
        font-size:16px;
        line-height:90px;
        margin-left:18px;
        color:#0045AF;
      }
      p:nth-child(2){
        margin:25px 25px 0 0;
      }
    }
    .button-box{
      display: flex;
    }
    .operationRecord-min-page{
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding:20px !important;
    }
  }
</style>
