<template>
  <div id="AlarmConfiguration">
    <div id="ACTopSearchBox">
      <el-select
        v-model="ProjectNo"
        filterable
        clearable
        placeholder="请选择所属项目"
        @change="selectV()"
      >
        <el-option
          v-for="(item, index) in allProject"
          :key="index"
          :label="item.key"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-input
        placeholder="请输入站点名称"
        v-model="ACValue"
        clearable
      ></el-input>
      <el-button type="primary" icon="el-icon-search" @click="loadGridData()"
        >搜索</el-button
      >
    </div>
    <div
      id="ACContent"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.3)"
    >
      <el-table :data="TableData" style="width: 100%;height:calc(100% - 45px)">
        <el-table-column prop="stCode" label="站点编号"></el-table-column>
        <el-table-column prop="name" label="所属项目"></el-table-column>
        <el-table-column prop="stName" label="名称"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="details(scope.$index, scope.row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="ACSizeChange"
        @current-change="ACCurrentChange"
        :current-page="ACPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="ACSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="ACDatagridDataLength"
        style="margin-top:10px;"
      ></el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="60%">
      <div id="DialogSearch">
        <el-input
          placeholder="请输入因子名"
          v-model="YZValue"
          clearable
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="loadGridDataYZ()"
          >搜索</el-button
        >
        <el-button type="primary" icon="el-icon-plus" @click="AddJinJieXian()"
          >新增警戒线</el-button
        >
      </div>
      <div id="DialogCentent">
        <el-table
          :data="YZTableData"
          style="width: 100%;height:calc(100% - 45px)"
        >
          <el-table-column
            prop="factorsAscii"
            label="因子编号"
          ></el-table-column>
          <el-table-column
            prop="factorsName"
            label="因子名称"
          ></el-table-column>
          <el-table-column
            prop="compareWayDesc"
            label="运算符"
          ></el-table-column>
          <el-table-column prop="warnValue" label="线值"></el-table-column>
          <el-table-column prop="warnTypeDesc" label="警戒类型">
            <template slot-scope="scope">
              <span v-if="scope.row.warnType == 2" style="color:red">{{
                scope.row.warnTypeDesc
              }}</span>
              <span v-else style="color: yellow">{{
                scope.row.warnTypeDesc
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="Edit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="Del(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="YZSizeChange"
          @current-change="YZCurrentChange"
          :current-page="YZPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="YZSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="YZDatagridDataLength"
          style="margin-top:10px;"
        ></el-pagination>
      </div>
      <el-dialog
        :visible.sync="dialogVisible2"
        width="400px"
        append-to-body
        top="20%"
      >
        <div class="Dialog2List">
          <span class="Dialog2ListName">级&nbsp;&nbsp;&nbsp;&nbsp;别:</span>
          <el-select
            v-model="Dialog2warnType"
            filterable
            placeholder="请选择级别"
            :disabled="!isAdd"
          >
            <el-option
              v-for="item in Dialog2JB"
              :key="item.warnType"
              :label="item.warnTypeDesc"
              :value="item.warnType"
            ></el-option>
          </el-select>
        </div>
        <div class="Dialog2List">
          <span class="Dialog2ListName">因&nbsp;&nbsp;&nbsp;&nbsp;子:</span>
          <el-select
            v-model="Dialog2factors"
            filterable
            placeholder="请选择因子"
            :disabled="!isAdd"
            @change="Dialog2factorsChange"
          >
            <el-option
              v-for="item in Dialog2YZ"
              :key="item.index"
              :label="item.factorsName"
              :value="item.factorsAscii"
            ></el-option>
          </el-select>
        </div>
        <div class="Dialog2List">
          <span class="Dialog2ListName">运算符:</span>
          <el-select
            v-model="Dialog2compareWay"
            filterable
            placeholder="请选择运算符"
          >
            <el-option
              v-for="item in Dialog2YSF"
              :key="item.index"
              :label="item.name"
              :value="item.compareWay"
            ></el-option>
          </el-select>
        </div>
        <div class="Dialog2List">
          <span class="Dialog2ListName">线&nbsp;&nbsp;&nbsp;&nbsp;值:</span>
          <el-input
            placeholder="请输入线值"
            v-model="warnValue"
            clearable
            type="number"
          ></el-input>
        </div>
        <div class="Dialog2List">
          <a
            href="javascript:void(0)"
            class="Dialog2ListButton"
            @click="dialogVisible2 = false"
            >取&nbsp;&nbsp;&nbsp;&nbsp;消</a
          >
          <a
            href="javascript:void(0)"
            class="Dialog2ListButton2"
            @click="EditAndAdd"
            >确&nbsp;&nbsp;&nbsp;&nbsp;定</a
          >
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { message } from "./../../util/item";
import { mapGetters } from "vuex";
export default {
  name: "AlarmConfiguration",
  data: function() {
    return {
      ProjectNo: "", //所选择的项目的项目编号
      ACValue: "", //顶部模糊搜索
      TableData: [], //表格数据
      ACPage: 1, //分页默认显示页
      ACDatagridDataLength: 0, //分页上显示的数据总条数
      ACSize: 10, //分页上显示的每页的条数
      dialogVisible: false, //一级弹窗的默认状态，
      SiteSel: "", //点击的站点
      YZValue: "", //因子模糊搜索
      YZTableData: [], //表格数据
      YZPage: 1, //分页默认显示页
      YZDatagridDataLength: 0, //分页上显示的数据总条数
      YZSize: 10, //分页上显示的每页的条数
      dialogVisible2: false, //二级弹窗的状态
      Dialog2warnType: "", //级别
      Dialog2JB: [
        { warnType: 1, warnTypeDesc: "预警" },
        { warnType: 2, warnTypeDesc: "报警" }
      ], //级别选项
      Dialog2compareWay: "", //级别
      Dialog2YSF: [
        { compareWay: ">", name: "大于" },
        { compareWay: "<", name: "小于" }
      ], //级别选项
      Dialog2factors: "", //因子
      Dialog2YZ: [], //因子选项
      warnValue: "", //线值
      isAdd: true, //新增为true,修改为false
      clickplatformCode: "", //点击站点时 保存当前站点所属得平台编号
      clicksiteName: "", //点击站点时 保存当前站点名称
      clickYinZiName: "", //选择因子时保存因子名称
      loading: false
    };
  },
  computed: {
    ...mapGetters(["allProject"])
  },
  methods: {
    selectV() {
      this.loadGridData();
    },
    //分页
    ACSizeChange(val) {
      // 改变每页的条数
      this.ACSize = val;
      this.loadGridData();
    },
    ACCurrentChange(val) {
      //改变页数
      this.ACPage = val;
      this.loadGridData();
    },
    // 根据平台获取已配置的预警报警线 可选填站点
    loadGridData() {
      this.loading = true;
      this.TableData = [];
      let params = {
        current: this.ACPage,
        size: this.ACSize,
        data: {
          platformCode: this.ProjectNo, //平台编号，可不传
          stName: this.ACValue //模糊查询，可不传
        }
      };
      this.$http
        .post(this.nozzle.sysSiteListStationBaseWithPage, params)
        .then(response => {
          this.loading = false;
          if (response.data.code === 200) {
            this.TableData = response.data.data.records;
            this.ACDatagridDataLength = response.data.data.total;
          } else {
            message(response);
          }
        })
        .catch(response => {
          this.loading = false;
          message(response);
        });
    },
    // 查看详情
    details(index, rows) {
      this.dialogVisible = true;
      // 保存当前站点编号
      this.SiteSel = rows.stCode;
      //  保存当前站点名称
      this.clicksiteName = rows.stName;
      // 保存当前站点所属得平台编号
      this.clickplatformCode = rows.platformCode;
      this.loadGridDataYZ();
    },

    //分页
    YZSizeChange(val) {
      // 改变每页的条数
      this.YZSize = val;
      this.loadGridDataYZ();
    },
    YZCurrentChange(val) {
      //改变页数
      this.YZPage = val;
      this.loadGridDataYZ();
    },
    // 加载因子数据
    loadGridDataYZ() {
      this.YZTableData = [];
      let params = {
        current: this.YZPage,
        size: this.YZSize,
        data: {
          siteNo: this.SiteSel, //站点编号，可不传
          fuzzyQuery: this.YZValue //模糊搜索
        }
      };
      this.$http
        .post(this.nozzle.warnConfigListWarnConfig, params)
        .then(response => {
          if (response.data.code === 200) {
            this.YZTableData = response.data.data.records;
            this.YZDatagridDataLength = response.data.data.total;
          } else {
            message(response);
          }
        })
        .catch(response => {
          message(response);
        });
    },
    // 点击编辑因子状态
    Edit(index, rows) {
      this.dialogVisible2 = true;
      this.isAdd = false;
      // 默认值回显
      this.Dialog2warnType = rows.warnType;
      this.Dialog2compareWay = rows.compareWay;
      this.warnValue = rows.warnValue;
      this.Dialog2YZ = [
        { factorsName: rows.factorsName, factorsAscii: rows.factorsAscii }
      ];
      this.Dialog2factors = rows.factorsAscii;
    },
    // 删除
    Del(index, rows) {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var DelID = [];
          DelID.push(rows.id);
          this.$http
            .post(this.nozzle.warnConfigDeleteWarnConfig, DelID)
            .then(response => {
              message(response);
              this.dialogVisible2 = false;
              this.loadGridDataYZ();
            })
            .catch(response => {
              message(response);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 选择因子
    Dialog2factorsChange(vId) {
      let obj = {};
      obj = this.Dialog2YZ.find(item => {
        //这里的userList就是上面遍历的数据源
        return item.factorsAscii === vId; //筛选出匹配数据
      });
      this.clickYinZiName = obj.factorsName; //我这边的name就是对应label的
    },
    // 请求未分配的因子
    loadSiteNoYinz() {
      this.Dialog2YZ = [];
      let params = {
        data: {
          siteNo: this.SiteSel //站点编号，可不传
        }
      };
      this.$http
        .post(this.nozzle.warnConfigListNonConfig, params)
        .then(response => {
          if (response.data.code === 200) {
            this.Dialog2YZ = response.data.data;
          } else {
            message(response);
          }
        })
        .catch(response => {
          message(response);
        });
    },
    // 新增警戒线
    AddJinJieXian() {
      this.dialogVisible2 = true;
      this.Dialog2warnType = "";
      this.Dialog2compareWay = "";
      this.Dialog2factors = "";
      this.Dialog2YZ = [];
      this.clickYinZiName = "";
      this.warnValue = "";
      this.isAdd = true;
      this.loadSiteNoYinz();
    },
    //确认
    EditAndAdd() {
      var params2;
      if (this.isAdd) {
        // 新增
        var URL = this.nozzle.warnConfigInsertWarnConfig;
        params2 = {
          data: {
            siteNo: this.SiteSel, //站点编号
            siteName: this.clicksiteName, //站点名称
            platForm: this.clickplatformCode, //平台编号
            factorsAscii: this.Dialog2factors, //因子ASCII
            factorsName: this.clickYinZiName, //因子中文名
            warnValue: this.warnValue, //警戒线值
            warnType: this.Dialog2warnType, //警戒等级1：预警，2：报警
            compareWay: this.Dialog2compareWay //比较方式>：大于，<：小于
          }
        };
      } else {
        // 修改
        var URL = this.nozzle.warnConfigUpdateWarnConfig;
        params2 = {
          data: {
            siteNo: this.SiteSel, //站点编号
            factorsAscii: this.Dialog2factors, //因子ASCII
            warnType: this.Dialog2warnType, //警戒等级1：预警，2：报警
            // siteName: this.clicksiteName, //站点名称
            // platForm: this.clickplatformCode, //平台编号
            /**上三个参数固定，不让修改，但是要传给后台*/
            warnValue: this.warnValue, //警戒线值
            compareWay: this.Dialog2compareWay //比较方式>：大于，<：小于
          }
        };
      }
      this.$http
        .post(URL, params2)
        .then(response => {
          message(response);
          this.dialogVisible2 = false;
          this.loadGridDataYZ();
        })
        .catch(response => {
          message(response);
        });
    }
  },
  mounted: function() {
    this.loadGridData();
  }
};
</script>

<style scoped>
#AlarmConfiguration {
  width: 100%;
  height: 100%;
}
/* 顶部搜索 */
#ACTopSearchBox {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: left;
}
#ACTopSearchBox .el-input {
  width: 250px;
  margin: 0 10px;
}
/* 表格 */
#ACContent {
  width: 100%;
  height: calc(100% - 70px);
  margin-top: 10px;
  /* background: rgba(53, 53, 53, 0.5); */
}
/* 弹窗 */
#DialogSearch {
  width: 100%;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  text-align: left;
}
#DialogSearch .el-input {
  width: 250px;
  margin: 0 10px;
}
#DialogCentent {
  width: 100%;
  height: 600px;
}
/* 内层弹窗 */
.Dialog2List {
  width: 100%;
  height: 60px;
  line-height: 60px;
  box-sizing: border-box;
  text-align: center;
}
.Dialog2List .el-input {
  width: 217px;
}
.Dialog2ListName {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  color: var(--white);
  text-align: center;
}
.Dialog2ListButton {
  height: 40px;
  width: 100px;
  display: inline-block;
  line-height: 40px;
  border-radius: 2px;
  text-decoration: none;
  color: rgb(0, 111, 255);
  background: rgba(255, 255, 255, 0);
  border: 1px solid rgb(0, 111, 255);
  margin: 0 30px;
}
.Dialog2ListButton2 {
  height: 40px;
  width: 100px;
  display: inline-block;
  line-height: 40px;
  border-radius: 2px;
  text-decoration: none;
  color: white;
  background: rgb(0, 111, 255);
  border: 1px solid rgb(0, 111, 255);
  margin: 0 30px;
}
</style>

<style>
.el-dialog__body {
  padding-top: 0 !important;
}
</style>