<!--报警记录-->
<template>
  <div class="app-container alarmRecord">
    <div class="alarmRecord-page" v-if="pageType == 1">
      <el-form :model="queryParamsData" class="form-box" ref="queryForm" :inline="true">
        <el-form-item label="关键字" prop="searchValue">
          <el-input
            maxLength="20"
            v-model="queryParamsData.searchValue"
            placeholder="实验室"
            clearable
            size="small"
            style="width: 160px"
          />
        </el-form-item>
        <el-form-item label="学院" prop="deptId">
          <el-select v-model="queryParamsData.deptId" clearable placeholder="请选择学院" style="width: 150px">
            <el-option
              v-for="item in optionsListOne"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报警时间" prop="dateRange">
          <el-date-picker
            :clearable="false"
            v-model="dateRange"
            size="small"
            style="width: 220px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="报警方式" prop="alarmMode">
          <el-select v-model="queryParamsData.alarmMode" clearable placeholder="请选择报警方式" style="width: 150px">
            <el-option
              v-for="item in optionsListTwo"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="handlingStatus">
          <el-select v-model="queryParamsData.handlingStatus" clearable placeholder="请选择状态" style="width: 150px">
            <el-option
              style="width: 150px"
              v-for="item in optionsListThree"
              :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-item style="float: right;">
          <el-col :span="1.5" v-hasPermiAnd="['chemical:hxpAlarmRecord:configQuery','chemical:hxpAlarmRecord:configAdd']">
            <p class="add-button-one-90"
               style="width:110px;"
               @click="pageToggle(2)"
            >报警通知配置</p>
          </el-col>
        </el-form-item>
        <el-form-item style="float: right;">
          <el-dropdown @command="exportButton" v-hasPermi="['chemical:hxpAlarmRecord:export']">
            <div class="form-dropdown-box">
              <img src="@/assets/ZDimages/personnelManagement/icon_jzgxx_sc.png">
              <p>导出</p>
              <img src="@/assets/ZDimages/personnelManagement/icon_jzggl_xljt.png">
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;color:#333;" :command="{command:1}">导出全部数据</el-dropdown-item>
              <el-dropdown-item style="margin:0 10px;color:#666;" :command="{command:2}">导出选中数据</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
      </el-form>
      <el-table  border :data="tableList" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
        <el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>
        <el-table-column label="报警时间" align="center" prop="alarmTime" width="160"/>
        <el-table-column label="报警内容" align="center" prop="alarmContent" show-overflow-tooltip/>
        <el-table-column label="报警方式" align="center" prop="alarmMode" width="100"/>
        <el-table-column label="学院" align="center" prop="alarmDeptName" width="150" show-overflow-tooltip/>
        <el-table-column label="实验室" align="center" prop="subName" width="160" show-overflow-tooltip/>
        <el-table-column label="负责人" align="center" prop="safeUserNames" width="160" show-overflow-tooltip/>
        <el-table-column label="处理时间" align="center" prop="handlingTime" width="160"/>
        <el-table-column label="处理人" align="center" prop="handlingUserName" width="130"/>
        <el-table-column label="操作" align="center" prop="operate" width="110">
          <template slot-scope="scope">
            <div class="button-box">
              <p class="table-min-button" @click="pageToggle(3,scope.row)">{{scope.row.operate}}</p>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;height:32px;margin-top:15px;">
        <!--<p style="flex:4;"></p>-->
        <p style="text-align: left;margin:0;line-height:32px;margin-right:20px;font-size:14px;color:#999;">
          <i class="el-icon-warning" style="color:#0183FA;"></i>
          已选择 {{selectedNum}} 项
        </p>
        <div style="flex:5;">
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </div>
    <add-page v-if="pageType == 2"></add-page>
    <info-page v-if="pageType == 3" :propsInfoData="propsInfoData"></info-page>
  </div>
</template>

<script>
  import { getHxpAlarmRecordList } from "@/api/medicUniversity-3_1/index";
  import { listDepartments } from "@/api/system/dept";
  import addPage from "./addPage.vue"
  import infoPage from "./infoPage.vue"
    export default {
      name: "alarmRecord",
      components: {
        addPage,
        infoPage
      },
      data() {
        return {
          // 遮罩层
          loading:false,
          //页面状态
          pageType:1,
          // 搜索数据
          dateRangeData:[],
          queryParamsData:{
            pageNum:1,
            pageSize:10,
          },
          dateRange:[],
          // 搜索实际发送数据
          queryParams:{
            pageNum:1,
            pageSize:10,
          },
          //数据数量
          total:0,
          //数据数组
          tableList:[],
          //表格扩展选择器---需要在@selection-change绑定的方法内监控selection数组长度
          selectedNum:0,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          //专业列表
          optionsListOne:[],
          //学院列表
          optionsListTwo:[{id:"1",name:"系统通知"},{id:"2",name:"声光报警"},{id:"3",name:"短信通知"}],
          optionsListThree:[{id:"1",name:"待处理"},{id:"2",name:"已处理"}],
          //待处理传参数据
          propsInfoData:{},
        };
      },
      created() {

      },
      mounted(){
        this.listDepartments();
        this.getList();
      },
      methods: {
        //获取学院列表
        listDepartments(){
          listDepartments().then(response => {
            this.optionsListOne = response.data;
          });
        },
        pageToggle(type,item){
          if(type == 1){
            this.pageType = 1;
            this.getList();
          }else if(type == 2){
            //新增
            this.pageType = 2;
          }else if(type == 3){
            console.log("type",type)
            console.log("item",item)
            //处理报警
            this.$set(this,'propsInfoData',item);
            this.pageType = 3;
          }
        },
        //获取数据列表
        getList(){
          this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));
          if(this.dateRange){
            this.queryParamsData.alarmTimeBegin = this.dateRange[0]
            this.queryParamsData.alarmTimeEnd = this.dateRange[1]
          }
          getHxpAlarmRecordList(this.queryParamsData).then(response => {
            this.total = response.total;
            let id = localStorage.getItem('userId')
            for(let i=0;i<response.rows.length;i++){
              response.rows[i].safeUserId = response.rows[i].safeUserId.split(",");
              for(let o=0;o<response.rows[i].safeUserId.length;o++){
                if(response.rows[i].safeUserId[o] == id){
                  response.rows[i].buttonType = 1;
                  break
                }else{
                  response.rows[i].buttonType = 2;
                }
              }
            }
            this.tableList = response.rows;
          });
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParamsData.pageNum = 1;
          this.queryParamsData.pageSize = 10;
          this.queryParams = JSON.parse(JSON.stringify(this.queryParamsData));
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.$set(this,'queryParamsData',{});
          this.$set(this,'queryParams',{});
          this.dateRange = [];
          this.handleQuery();
        },
        /** 当前时间 */
        getCurrentTime () {
          const yy = new Date().getFullYear()
          const mm = new Date().getMonth() + 1
          const dd = new Date().getDate()
          const hh = new Date().getHours()
          const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
          const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
          return yy + '-' + mm + '-' + dd
        },
        /** 导出按钮操作 */
        exportButton(item) {
          let self = this;
          let currentDate = this.getCurrentTime()
          if(item.command == 1){
            self.$confirm(`确认导出全部数据?`, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(async () => {
              self.download('/chemical/hxpAlarmRecord/export/', {...self.queryParams}, '报警记录-'+currentDate+'.xlsx')
            }).catch(() => {})
          }else if(item.command == 2){
            if(self.ids.length>0) {
              self.$confirm(`确认导出选中数据?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(async () => {
                let ids = self.ids.join(',');
                let obj = {
                  ids :ids
                }
                self.download(`/chemical/hxpAlarmRecord/export/`,obj, '报警记录-'+currentDate+'.xlsx')
              }).catch(() => {})
            }else {
              this.msgError('请选择要导出的数据')
            }
          }
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
          this.selectedNum = selection.length;
          this.ids = selection.map(item => item.id);
          this.single = selection.length != 1;
          this.multiple = !selection.length;
        },
        /*===记录勾选数据===
          需要再el-table 添加  :row-key="getRowKeys"
          需要在selection 添加 :reserve-selection="true"
        */
        getRowKeys(row) {
          return row.id
        },
      }
    }
</script>

<style scoped lang="scss">
  .alarmRecord{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden!important;
    p{
      margin:0;
      padding:0;
    }
    .alarmRecord-page{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding:20px;
      .form-box{
        .form-dropdown-box{
          display: flex;
          margin:0;
          padding:0 10px;
          cursor: pointer;
          height:40px;
          img:nth-child(1){
            width:16px;
            height:16px;
            margin-top:12px;
          }
          p{
            width:47px;
            text-align: center;
            font-size:14px;
            margin:0;
            line-height:40px;
          }
          img:nth-child(3){
            width:10px;
            height:6px;
            margin-top:17px;
          }
        }
      }
      .button-box{
        display: flex;
      }
      .table-color-1{
        color:#FF7926;
      }
    }
  }
</style>
