<template>
  <div class="content-main">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        :label="item.label"
        :name="item.name"
        v-for="(item,index) in typeList"
        :key="index"
      >
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline search-form"
          label-width="100px"
          style="width:100%"
        >
          <el-row style="width:100%">
            <el-form-item label="承储企业:">
              <el-input
                class="inputCompatible"
                clearable
                v-model="formInline.kqmc"
                style="width: 170px"
                placeholder="模糊查询库点名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="仓号:">
              <el-input
                class="inputCompatible"
                clearable
                v-model="formInline.chmc"
                style="width: 170px"
                placeholder="模糊查询仓房名称"
              ></el-input>
            </el-form-item>

            <el-form-item class="search-button">
              <span class="search-line"></span>
              <div class="search-select" @click="searchShowMore">
                更多条件
                <i class="el-icon-arrow-up" v-show="searchShowMoreBool"></i
                ><i class="el-icon-arrow-down" v-show="!searchShowMoreBool"></i>
              </div>
              <el-button
                type="primary"
                @click="doSearch"
                size="small"
                class="iconfont iconchaxun"
                >查询</el-button
              >
              <el-button
                type="primary"
                @click="doReset"
                size="small"
                class="iconfont iconzhongzhi"
                >重置</el-button
              >
            </el-form-item>
          </el-row>
          <el-row v-show="searchShowMoreBool">
            <el-form-item label="报警日期:">
              <el-date-picker
                v-model="formInline.jcsj"
                type="date"
                style="width: 180px"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-row>
          <el-button
            type="warning"
            size="small"
            @click="msgDialogVisible = true"
            style="position: absolute; top: 3px; right: 10px"
            >预警说明</el-button
          >
          <el-dialog
            title="预警说明"
            size="small"
            :visible.sync="msgDialogVisible"
            width="35%"
            top="30vh"
            :modal="false"
          >
            <span
              >以下记录超过温度报警高限值，或低于温度报警低限值，请及时采取措施。</span
            >
          </el-dialog>
        </el-form>
        <el-row>
          <el-table
            :data="tableData"
            v-loading="listLoading"
            border
            stripe
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column
              align="center"
              label="序号"
              width="50"
              type="index"
            ></el-table-column>
            <el-table-column
              align="center"
              min-width="250"
              prop="kqmc"
              label="承储企业"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              min-width="105"
              align="center"
              prop="chmc"
              label="仓号"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="cgw"
              label="仓高温"
            >
              <template slot-scope="scope">
                <span :class="{ redWarning: scope.row.jblx == 0 }">{{
                  scope.row.cgw
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="cdw"
              label="仓低温"
            >
              <template slot-scope="scope">
                <span :class="{ redWarning: scope.row.jblx == 2 }">{{
                  scope.row.cdw
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="cavg"
              label="平均温度"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="yjgx"
              label="预警高限"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="yjdx"
              label="预警低限"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="bjz"
              label="报警值"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="jcsj"
              min-width="160"
              label="报警日期"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.jcsj.substr(0, 10) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="jblx"
              label="类型"
              v-if="item.alarmType == 0"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.jblx == 0">高温报警</span>
                <span v-if="scope.row.jblx == 2">低温报警</span>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageForm.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageForm.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageForm.total"
          ></el-pagination>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { alarmList } from "@/api/earlyWarning/humitureWarning/index";

export default {
  props: ["type", "url"],
  data() {
    return {
      msgDialogVisible: false,
      searchShowMoreBool: false,
      listLoading: true,
      formInline: {
        kqmc: "",
        chmc: "",
        jcsj: "", //温度报警时间
      },
      pageForm: {
        page: 1,
        size: 10,
        total: 0,
      },
      tableData: [],
      activeName: "alarm",
      typeList: [
        {
          label: "报警",
          name: "alarm",
          alarmType: 0,
        },
        {
          label: "预警",
          name: "warning",
          alarmType: 1,
        },
      ],
    };
  },
  methods: {
    doReset() {
      this.formInline = {
        kqmc: "",
        chmc: "",
        jcsj: "",
      };
      this.doSearch();
    },
    doSearch() {
      this.pageForm.page = 1;
      this.listLoading = true;
      this.getList();
    },
    getList() {
      let data = {
        ...this.formInline,
        pageNum: this.pageForm.page,
        pageSize: this.pageForm.size,
        jblx: this.activeName == "alarm"? 0 : 1,
      };
      alarmList(data, this.url)
        .then((res) => {
          this.listLoading = false;
          this.tableData = res.list;
          this.pageForm.total = res.total;
          this.pageForm.page = res.pageNum;
        })
        .catch((err) => {
          this.listLoading = false;
          this.$message.error("获取数据失败");
        });
    },
    handleSizeChange(val) {
      this.pageForm.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageForm.page = val;
      this.getList();
    },
    searchShowMore() {
      this.searchShowMoreBool = !this.searchShowMoreBool;
    },
    handleClick(tab) {
      this.activeName = tab.name
      this.doReset()
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.inputCla {
  width: 90%;
}
.inputClaBig {
  width: 96%;
}
.content_box {
  width: 70%;
  min-height: 400px;
  margin: auto;
  .block {
    margin-top: 10px;
    border: 1px solid #006ad576;
  }
}
.redWarning {
  color: red;
}
</style>
