<template>
  <div class="data-watch">
    <el-card class="box-card">
      <div class="lcl-title">报警记录</div>
      <div class="mt20">
        <span>报警时间：</span>
        <el-date-picker
          v-model="queryParams.dates"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="timeBE"
        >
        </el-date-picker>
        <el-select
          v-model="queryParams.monNumber"
          placeholder="请选择设备"
          class="mr10"
          clearable
        >
          <el-option
            v-for="item in deviceSelectList"
            :key="item.monNumber"
            :label="item.monName"
            :value="item.monNumber"
          >
          </el-option>
        </el-select>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="medium"
          @click="handleQuery"
          >搜索</el-button
        >
        <!-- <el-button size="medium">生成曲线</el-button> -->
      </div>
    </el-card>
    <el-card class="mt10 box-card">
      <div class="lcl-title">渗水压力报警记录表</div>
      <div class="mt10" id=" radar-table">
        <el-table
          :data="alarmList"
          border
          stripe
          style="width: 100%"
          :header-cell-style="{
            textAlign: 'center',
            height: '20px',
          }"
          :row-style="{ height: '20px' }"
        >
          <el-table-column
            label="监测编号"
            align="center"
            prop="alarmMonNumber"
          />
          <el-table-column align="center" prop="monValue" label="监测值（mm）">
          </el-table-column>
          <el-table-column
            label="报警时间"
            align="center"
            prop="alarmTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.alarmTime, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="报警解除时间"
            align="center"
            prop="alarmResTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{
                parseTime(scope.row.alarmResTime, "{y}-{m}-{d}")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="报警解除时长"
            align="center"
            prop="alarmResHours"
          />
          <el-table-column label="报警级别" align="center" prop="alarmLevel">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.slope_alarm_level"
                :value="Number(scope.row.alarmLevel)"
              />
            </template>
          </el-table-column>
          <el-table-column label="是否报警 " align="center" prop="alarmIfRes">
            <template slot-scope="scope">
              <span v-if="scope.row.alarmIfRes == 0">否</span>
              <span v-if="scope.row.alarmIfRes == 1">是</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="cancleAlarm(scope.row)"
                :disabled="scope.row.alarmIfRes === 1 ? true : false"
                >解除报警</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-card>
    <el-dialog
      :title="cancleAlarmList.monName"
      :visible.sync="cancleAlarmVisible"
      width="30%"
      top="50vh"
    >
      <el-form :model="cancleAlarmform">
        <el-form-item
          label="解除时长(小时)"
          label-width="120"
          prop="hours"
          :rules="[
            { required: true, message: '解除时长不能为空' },
            { type: 'number', message: '解除时长必须为数字值' },
          ]"
        >
          <el-input
            v-model.number="cancleAlarmform.hours"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="解除原因" label-width="120">
          <el-input
            v-model="cancleAlarmform.reason"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleAlarmVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitCancleAlarm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import { defineComponent } from "@vue/composition-api";
import { dataAlarm, monDic, alarmRelieve } from "@/api/lclApi/lclapi";
export default {
  dicts: ["slope_alarm_level"],
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        monNumber: null,
        monValue: null,
        monValueAll: null,
        monAlarmStatus: null,
        monType: 8,
        dates: [],
      },
      // 总条数
      total: 0,
      alarmList: [
        {
          createTime: "2023-03-11 19:06:20",
          updateTime: "2023-03-11 08:38:13",
          monStatus: 0,
          pointName: 0,
          id: 14,
          monNumber: "2#沉降仪",
          monValueA: "0.2",
          monValueB: "0.21",
          monAlarmStatus: 0,
          monDept: "10m/20m",
        },
      ],
      selectValue: "ss",
      cancleAlarmVisible: false,
      cancleAlarmList: {
        reason: null,
        hours: null,
      },
      cancleAlarmform: {
        reason: null,
        hours: null,
      },
      deviceSelectList: [
        {
          monName: "1-1测斜仪",
          monNumber: "1-1测斜仪",
        },
      ],
      monNumber: "",
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.monDicData();
      this.getList();
    });
  },
  methods: {
    alarmreset() {
      this.cancleAlarmList = {
        reason: null,
        hours: null,
      };
      this.cancleAlarmform = {
        reason: null,
        hours: null,
      };
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getList() {
      let that = this;
      dataAlarm(this.queryParams).then((res) => {
        if (res && res.code === 200 && res.rows) {
          this.alarmList = res.rows;
          this.total = res.total;
        }
      });
    },
    cancleAlarm(row) {
      console.log(row);
      this.cancleAlarmList = row;
      this.cancleAlarmVisible = true;
    },
    submitCancleAlarm() {
      this.cancleAlarmform.monNumber = this.cancleAlarmList.alarmMonNumber;
      this.cancleAlarmform.monType = Number(this.cancleAlarmList.monTypes);
      alarmRelieve(this.cancleAlarmform).then((res) => {
        if (res && res.code === 200) {
          this.alarmreset();
          this.$modal.msgSuccess("解除成功");
          this.getList();
          this.cancleAlarmVisible = false;
        }
      });
    },
    monDicData() {
      monDic({ monType: 8 }).then((res) => {
        if (res && res.code === 200 && res.rows) {
          this.deviceSelectList = res.rows;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.data-watch {
  width: 100%;
  min-height: 100%;
  // border-radius: 10px;
  // background-color: teal;
  .box-card {
    width: 100%;
    .lcl-title {
      font-size: 22px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      line-height: 30px;
      position: relative;
      padding-left: 10px;
      &:before {
        content: "";
        position: absolute;
        left: 0px;
        top: 4px;
        width: 6px;
        height: 22px;
        background: #0d85f4;
      }
    }
  }
}
</style>