<template>
  <div id="AlarmConfiguration">
    <div id="ACTopSearchBox">
      <el-select v-model="ProjectNo" filterable placeholder="请选择" @change="selectV()">
        <el-option
          v-for="item in SiteOptions"
          :key="item.index"
          :label="item.name"
          :value="item.platformCode"
        ></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">
      <el-table :data="TableData" style="width: 100%;height:calc(100% - 45px)" stripe>
        <el-table-column prop="stCode" 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">新增警戒线</el-button>
      </div>
      <div id="DialogCentent">
        <el-table :data="YZTableData" style="width: 100%;height:calc(100% - 45px)" stripe>
          <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 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="请选择" @change="selectV()">
            <el-option
              v-for="item in Dialog2JB"
              :key="item.warnType"
              :label="item.name"
              :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="请选择" @change="selectV()">
            <el-option
              v-for="item in Dialog2YZ"
              :key="item.index"
              :label="item.warnTypeDesc"
              :value="item.platformCode"
            ></el-option>
          </el-select>
        </div>
        <div class="Dialog2List">
          <span class="Dialog2ListName">运算符:</span>
          <el-select v-model="Dialog2compareWay" filterable placeholder="请选择" @change="selectV()">
            <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></el-input>
        </div>
        <div class="Dialog2List">
          <a href="javascript:void(0)" class="Dialog2ListButton">取&nbsp;&nbsp;&nbsp;&nbsp;消</a>
          <a href="javascript:void(0)" class="Dialog2ListButton2">确&nbsp;&nbsp;&nbsp;&nbsp;定</a>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "AlarmConfiguration",
  data: function() {
    return {
      SiteOptions: [
        {
          //数据格式

          name: "全部项目",
          shortName: "全部项目",
          latitude: "定位坐标",
          longitude: "定位坐标",
          zoomLevel: "8",
          platformCode: ""
        }
      ], //渲染项目下拉框的数据
      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: "" //线值
    };
  },
  methods: {
    selectV() {
      this.LoadAllProject();
    },
    //分页
    ACSizeChange(val) {
      // 改变每页的条数
      this.ACSize = val;
      this.loadGridData();
    },
    ACCurrentChange(val) {
      //改变页数
      this.ACPage = val;
      this.loadGridData();
    },
    // 获取所有平台
    LoadAllProject() {
      this.$http
        .post(this.nozzle.sysPlatformListPlatform, {
          data: {}
        })
        .then(response => {
          if (response.data.code === 200) {
            this.SiteOptions = this.SiteOptions.concat(
              response.data.data.records
            );
            this.loadGridData();
          } else {
            message(response);
          }
        })
        .catch(response => {
          message(response);
        });
    },
    // 根据平台获取已配置的预警报警线 可选填站点
    loadGridData() {
      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 => {
          if (response.data.code === 200) {
            this.TableData = response.data.data.records;
            this.ACDatagridDataLength = response.data.data.total;
          } else {
            message(response);
          }
        })
        .catch(response => {
          message(response);
        });
    },
    // 查看详情
    details(index, rows) {
      this.dialogVisible = true;
      this.SiteSel = rows.stCode;
      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;
    },
    // 请求未分配的因子
    loadSiteNoYinz() {
      let params = {
        data: {
          stCode: this.SiteSel, //站点编号，可不传
        }
      };
      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);
        });
    }
  },
  mounted: function() {
    this.LoadAllProject();
  }
};
</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: 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>