<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <!-- <el-form-item label="关键字" prop="searchValue">
            <el-input v-model="queryParams.searchValue" placeholder="请输入员工姓名，编号" maxlength="20" clearable style="width: 240px"/>
        </el-form-item> -->
        <el-form-item label="违规内容" prop="alarmType">
            <el-select v-model="queryParams.alarmType" style="width: 240px" clearable> 
                <el-option label="未戴口罩" value="1"></el-option>
                <el-option label="垃圾桶未盖报警 " value="2"></el-option>
                <el-option label="发现老鼠" value="3"></el-option>
                <el-option label="未穿厨师服" value="4"></el-option>
                <el-option label="未戴厨师帽" value="5"></el-option>
                <el-option label="未戴手套" value="6"></el-option>
                <el-option label="抽烟" value="7"></el-option>
                <el-option label="打电话" value="8"></el-option>
                <el-option label="地面巡检" value="9"></el-option>
                <el-option label="设备归位 " value="10"></el-option>
                <el-option label="未授权人员进入 " value="11"></el-option>
                <el-option label="动火离人" value="13"></el-option>
            </el-select>   
        </el-form-item>
        <el-form-item label="记录时间">
            <el-date-picker
                v-model="dateRange"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd" style="width: 400px" 
                :picker-options="pickerOptions" >
            </el-date-picker>
        </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="tableListData" height="800">
      <el-table-column label="序号" align="center" width="80" type="index">
        <template slot-scope="scope">
          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column> 
      <el-table-column label="设备名称" align="center" prop="deviceName" :show-overflow-tooltip="true"/>
      <el-table-column label="设备编号" align="center" prop="deviceNo" :show-overflow-tooltip="true"/>
      <el-table-column label="位置" align="center" prop="subPlace" :show-overflow-tooltip="true"/>
      <el-table-column label="违规内容" align="center" prop="alarmType" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span v-if="scope.row.alarmType==1">未戴口罩</span>
          <span v-if="scope.row.alarmType==2">垃圾桶未盖报警</span>
          <span v-if="scope.row.alarmType==3">发现老鼠</span>
          <span v-if="scope.row.alarmType==4">未穿厨师服</span>
          <span v-if="scope.row.alarmType==5">未戴厨师帽</span>
          <span v-if="scope.row.alarmType==6">未戴手套</span>
          <span v-if="scope.row.alarmType==7">抽烟</span>
          <span v-if="scope.row.alarmType==8">打电话</span>
          <span v-if="scope.row.alarmType==9">地面巡检</span>
          <span v-if="scope.row.alarmType==10">设备归位</span>
          <span v-if="scope.row.alarmType==11">未授权人员进入</span>
          <span v-if="scope.row.alarmType==13">动火离人</span>
        </template>
      </el-table-column>
      <el-table-column label="违规图片" align="center" prop="imgUrl" :show-overflow-tooltip="true">
        <template slot-scope="scope"> 
          <img :src="scope.row.imgUrl" v-if="scope.row.imgUrl" alt="" style="width: 80px;height: 40px;" @click="openImg(scope.row)">
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column label="违规时间" align="center" prop="recordTime" :show-overflow-tooltip="true"/> 
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog :visible.sync="dialogVisible" width="700px">
      <img style="width: 100%;height: 100%;" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script> 
import { getStaffIllegalListApi } from "@/api/kitchen/staff";

export default {
  name: "",
  dicts: [],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      //表格数据
      tableListData: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,  
        searchValue: undefined,
        alarmType: undefined, 
      },
      dialogVisible:false,//图片弹窗
      dialogImageUrl:"",//图片弹窗  
      dateRange:this.defaultDateRange(),
      pickerOptions: {
          shortcuts: [{
              text: '最近一周',
              onClick(picker) {
              const start = new Date();
              const end = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit('pick', [start, end]);
              }
          },{
              text: '最近一个月',
              onClick(picker) {
              const start = new Date();
              const end = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
              }
          },{
              text: '最近三个月',
              onClick(picker) {
              const start = new Date();
              const end = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 91);
              picker.$emit('pick', [start, end]);
              }
          }]
      },
    };
  },
  created() { 
    this.getList();
  },
  methods: { 
      /** 搜索按钮操作 */
      handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() { 
        this.dateRange = this.defaultDateRange()
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,  
          searchValue: undefined,
          alarmType: undefined, 
        }
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 查询列表 */
      getList() {
          this.loading = true;
          let param = {
            "pageNum": this.queryParams.pageNum, 
            "pageSize": this.queryParams.pageSize,  
            // "searchValue": this.queryParams.searchValue,  
            "alarmType": this.queryParams.alarmType,  
          }
          if(this.dateRange&&this.dateRange.length>0){
              param.startTime=this.formatDate(this.dateRange[0])
              param.endTime=this.formatDate(this.dateRange[1])
          }else{
              param.startTime=undefined;
              param.endTime=undefined;
          }
          getStaffIllegalListApi(param).then(response => {
              this.tableListData = response.rows;
              this.total = Number(response.total);
              this.loading = false;
          });
      },
      openImg(row) {
        this.dialogImageUrl = row.imgUrl;
        this.dialogVisible = true;
      },
      defaultDateRange() {
          const end = new Date(new Date().toLocaleDateString());
          end.setTime(end.getTime() + 24 * 60 * 60 * 1000 -1);
          const start = new Date((new Date().toLocaleDateString()));
          start.setTime(start.getTime() - 30 * 24 * 60 * 60 * 1000); 
          this.start = parseInt(start.getTime() / 1000)
          this.end = parseInt(end.getTime() / 1000)
          return [start, end]
      }, 
      //日期
      formatDate(date) {
          // 格式化为 YYYY-MM-DD
          date = new Date(date)
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
          const day = String(date.getDate()).padStart(2, '0');
          return `${year}-${month}-${day}`;
      },
      //日期时间
      formatDateTime(date) {
          // 格式化为 YYYY-MM-DD
          date = new Date(date)
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
          const day = String(date.getDate()).padStart(2, '0');
          const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
          const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
          const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      }
  }
};
</script>
