<template>
  <div style="padding: 0.2% 0.5%">
    <el-row>
      <el-col :span="24">
        <el-button type="primary" class="el-icon-plus" size="mini" @click="add"
          >新增</el-button
        >
        <span style="font-weight: ; font-size: 14px">数据筛选:</span>
        <el-input
          v-model="input"
          placeholder="请选择筛选数据"
          style="width: 10%"
        ></el-input>
        <el-button
          type="primary"
          style="float: right"
          class="el-icon-download"
          size="mini"
          >导出</el-button
        >
      </el-col>
      <el-col :span="24" style="margin-top: 0.2%">
        <el-table
          stripe
          
          :data="tableData"
          border
          :height="height"
          style="width: 100%"
          :header-cell-style="{
            height: '25px',
            top: '0px',
            padding: '0px',
          }"
          :row-style="{ height: '25px' }"
          :cell-style="{ padding: '0px' }"
        >
          <el-table-column align="center" prop="dj" label="等级">
            <template slot-scope="scope">
              <span v-if="scope.row.dj == 1" style="color: green">不重要</span>
              <span v-if="scope.row.dj == 2" style="color: #0099ff">普通</span>
              <span v-if="scope.row.dj == 3" style="color: #cc9900">重要</span>
              <span v-if="scope.row.dj == 4" style="color: red">极重要</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="sjwzx" label="数据完整性">
            <template slot-scope="scope">
              <span
                v-if="
                  scope.row.sjwzx > 0 &&
                  scope.row.sjwzx <= 60 &&
                  scope.row.sjwzx !== 3.14159
                "
                style="color: red"
                >{{ scope.row.sjwzx }}</span
              >
              <span
                v-if="
                  scope.row.sjwzx > 60 &&
                  scope.row.sjwzx < 90 &&
                  scope.row.sjwzx !== 3.14159
                "
                style="color: #cc9900"
                >{{ scope.row.sjwzx }}</span
              >
              <span
                v-if="scope.row.sjwzx >= 90 && scope.row.sjwzx !== 3.14159"
                style="color: green"
                >{{ scope.row.sjwzx }}</span
              >
              <span v-if="scope.row.sjwzx == 3.14159">暂无数据</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="zxl" label="在线率">
            <template slot-scope="scope">
              <span
                v-if="
                  scope.row.zxl > 0 &&
                  scope.row.zxl <= 60 &&
                  scope.row.zxl !== 3.14159
                "
                style="color: red"
                >{{ scope.row.zxl }}</span
              >
              <span
                v-if="
                  scope.row.zxl > 60 &&
                  scope.row.zxl < 90 &&
                  scope.row.zxl !== 3.14159
                "
                style="color: #cc9900"
                >{{ scope.row.zxl }}</span
              >
              <span
                v-if="scope.row.zxl >= 90 && scope.row.zxl !== 3.14159"
                style="color: green"
                >{{ scope.row.zxl }}</span
              >
              <span v-if="scope.row.zxl == 3.14159">暂无数据</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="cxzdsc"
            label="持续中断时长(s)"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="gjcs"
            label="告警次数"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="gxrq"
            label="更新日期"
          ></el-table-column>
          <el-table-column align="center" prop="gxyh" label="更新用户">
          </el-table-column>
          <el-table-column
            align="center"
            label="操作"
            fixed="right"
            width="220"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                class="el-icon-edit"
                size="mini"
                @click="editData"
                >修改</el-button
              >
              <el-button
                type="primary"
                class="el-icon-delete"
                size="mini"
                @click="deleteData"
                >删除</el-button
              >
              <!-- <el-button v-if="scope.row.state==1" disabled type="primary">已处理</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="float: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageData.currentPage"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="pageData.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.total"
        >
        </el-pagination>
        <el-dialog
          :close-on-click-modal="false"
          :title="title"
          :visible.sync="dialogVisible"
          width="20%"
          :before-close="handleClose"
        >
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="监测点等级">
              <el-input v-model="form.jcddj" style="width: 89%"></el-input>
            </el-form-item>
            <el-form-item label="数据完整性标准">
              <el-select v-model="form.bz" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="终端在线率标准">
              <el-select v-model="form.zdbz" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="中断持续时长">
              <el-select v-model="form.cxsc" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="告警次数">
              <el-select v-model="form.gjcs" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false"
              >提 交</el-button
            >
          </span>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { tableheight } from "@/assets/commjs/common";
export default {
  data() {
    return {
      dialogVisible: false,
      title: "",
      height: "",
      tableData: [
        {
          dj: 1,
          sjwzx: 30,
          zxl: 90,
          cxzdsc: 12,
          gjcs: 15,
          gxrq: "2022-03-25 11:25:56",
          gxyh: "业务管理员",
        },
        {
          dj: 2,
          sjwzx: 70,
          zxl: 40,
          cxzdsc: 12,
          gjcs: 15,
          gxrq: "2022-03-25 11:25:56",
          gxyh: "业务管理员",
        },
        {
          dj: 3,
          sjwzx: 95,
          zxl: 70,
          cxzdsc: 12,
          gjcs: 15,
          gxrq: "2022-03-25 11:25:56",
          gxyh: "业务管理员",
        },
        {
          dj: 4,
          sjwzx: 30,
          zxl: 40,
          cxzdsc: 12,
          gjcs: 15,
          gxrq: "2022-03-25 11:25:56",
          gxyh: "业务管理员",
        },
      ],
      form: {
        jcddj: "",
        bz: "",
        zdbz: "",
        cxsc: "",
        gjcs: "",
      },
      //分页
      pageData: {
        currentPage: 1,
        pagesize: 100,
        total: 200,
      },
    };
  },
  created() {},
  mounted() {
    this.height = tableheight() + "px";
  },
  methods: {
    add() {
      this.dialogVisible = true;
      this.title = "新增告警策略";
    },
    editData(row) {
      this.title = "修改告警策略";
      this.dialogVisible = true;
    },
    deleteData() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>