<template>
  <div class="dialog-body-container">
    <el-form inline :model="searchForm" class="search-form">
      <el-form-item label="时间：">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="yyyy-MM-dd"
          @change="changeTime"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <DialogApiDataTable
      :has-index="true"
      ref="table"
      :columns="columns"
      :parameters="searchForm"
      :api="api"
      :path-id="projectId"
    >
    </DialogApiDataTable>
  </div>
</template>
  <script>
import { getWarningList } from "@/api/index";
export default {
  name: "WarningMsg",
  props: {
    projectId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      searchForm: {},
      columns: [
        { label: "预警时间", prop: "record_time" },
        { label: "设备编号", prop: "device_sn" },
        { label: "预警内容", prop: "warning_msg" },
      ],
      dateRange: [],
      api: getWarningList,
    };
  },
  mounted() {},
  methods: {
    handleSearch() {
      this.$refs.table.getData();
    },
    openPdf(url) {
      window.open(url);
    },
    changeTime(tr) {
      this.searchForm.start_time = tr[0] ? tr[0] : "";
      this.searchForm.end_time = tr[1] ? tr[1] : "";
    },
  },
};
</script>
  <style lang="less" scoped>
.search-form {
  margin: 20px 0 10px 0;
}

.blue {
  color: #0178ff;
  &:hover {
    cursor: pointer;
  }
}
.dialog-body-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>