<template>
  <div class="app-container">
    <el-form :inline="true" ref="form" :model="form" size="mini">
      <el-form-item label="预警级别" prop="type">
        <el-select v-model="form.type" filterable placeholder="请选择预警级别">
          <el-option
            v-for="(item, index) in ruleTypeList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="起止时间" prop="start">
        <el-date-picker
          v-model="datetime"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="right"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="end">
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="onReset('form')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="isLoading"
      element-loading-text="Loading"
      :data="list"
      size="mini"
      border
      stripe
      fit
      highlight-current-row
    >
      <el-table-column
        prop="title"
        label="预警事件"
        align="center"
        width="300"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column prop="type" label="预警级别" align="center" width="80">
        <template slot-scope="scope">
          {{ scope.row.type | getLevelDays }}
        </template>
      </el-table-column>
      <el-table-column
        prop="color"
        label="预警颜色"
        align="center"
        width="80"
      ></el-table-column>
      <el-table-column
        prop="user.username"
        label="消息接收者"
        align="center"
        width="120"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column prop="ignore" label="是否查看" align="center" width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.ignore" size="small" type="success"
            >已查看</el-tag
          >
          <el-tag v-else size="small" type="warning">未查看</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="create_at"
        label="预警时间"
        align="center"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="content"
        label="预警内容"
        align="left"
        min-width="150"
        :show-overflow-tooltip="true"
      ></el-table-column>
    </el-table>
    <div class="page-wrapper">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="form.pagenum"
        background
        small
        :page-size="form.pagesize"
        :pager-count="5"
        layout="pager, prev, next, total"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getWarningLogList } from "@/api/warning";
import { mapTrim } from "@/utils/index";
import { formatUTCDateTime } from "@/utils/utils";

const today = new Date();
const yestoday = new Date();
yestoday.setDate(today.getDate() - 1); // 昨天

export default {
  name: "WarningLog",
  data() {
    return {
      total: 0,
      list: [],
      isLoading: false,
      datetime: [yestoday, today],
      form: {
        uuid: null,
        type: null,
        start: null,
        end: null,
        user: null,
        pagesize: 15,
        pagenum: 1,
      },
      dialogVisible: false,
      currentValue: null,
      currentIndex: null,
      post: {
        title: null,
        type: 1,
        color: "yellow",
        time: null,
        content: null,
      },
      rules: {
        name: [
          {
            type: "string",
            required: true,
            message: "用户名不能为空",
            trigger: "blur",
          },
          {
            min: 1,
            max: 20,
            message: "字符串长度在 1 到 20 之间",
            trigger: "blur",
          },
        ],
      },
      ruleTypeList: [
        { id: 0, name: "一般" },
        { id: 1, name: "重要" },
        { id: 2, name: "紧急" },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  filters: {
    getLevelDays(type) {
      if (type == 0) return "一般";
      else if (type == 1) return "重要";
      else return "紧急";
    },
  },
  methods: {
    fetchData(params) {
      this.isLoading = true;
      getWarningLogList(params)
        .then((res) => {
          this.total = res.count;
          this.list = res.data;
        })
        .catch((err) => {
          this.$message.warning(err.message)
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    handleSizeChange(e) {
      this.form.pagesize = e;
      this.fetchData(mapTrim(this.form));
    },
    handleCurrentChange(e) {
      this.form.pagenum = e;
      this.fetchData(mapTrim(this.form));
    },
    onSubmit() {
      this.form.pagenum = 1;
      this.form.pagesize = 15;
      if (this.form.start !==  formatUTCDateTime(this.datetime[0]))
        this.form.start = formatUTCDateTime(this.datetime[0])
      else this.form.start = null
      if (this.form.end !== formatUTCDateTime(this.datetime[1]))
        this.form.end = formatUTCDateTime(this.datetime[1])
      else this.form.end = null
      this.fetchData(mapTrim(this.form));
    },
    onReset(formName) {
      this.form.start = null
      this.form.end = null
      this.$refs[formName].resetFields()
      this.form.pagenum = 1
      this.form.pagesize = 15
      this.fetchData(mapTrim(this.form))
    },
  },
  mounted() {},
  created() {
    if (this.$route.params.uuid) {
      this.form.uuid = this.$route.params.uuid
    }
    this.fetchData(mapTrim(this.form))
  },
};
</script>

<style lang="less" scoped>
.app-container {
  & > div.page-wrapper {
    margin: 10px 0px;
  }
}
</style>