<template>
  <!-- 数据能力 -->
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-width="auto"
    >
      <el-form-item label="站点:" prop="st">
        <el-select v-model="queryParams.st" placeholder="请选择站点">
          <el-option
            v-for="dict in searchSiteList"
            :key="dict.stCode"
            :label="dict.stName"
            :value="dict.stCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="告警类型:" prop="st">
        <el-select v-model="queryParams.st" placeholder="请选告警类型">
          <el-option
            v-for="dict in searchSiteList"
            :key="dict.stCode"
            :label="dict.stName"
            :value="dict.stCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="告警级别:" prop="st">
        <el-select v-model="queryParams.st" placeholder="请选告警级别">
          <el-option
            v-for="dict in searchSiteList"
            :key="dict.stCode"
            :label="dict.stName"
            :value="dict.stCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间阈值(分钟):" prop="st">
        <el-input type="number" style="width: 215px" v-model="queryParams.input" placeholder="时间阈值"></el-input>
      </el-form-item>
      
      <el-form-item label="备注:" prop="dateRange" style="width: 100%;">
        <el-input type="textarea" v-model="queryParams.desc"></el-input>
      </el-form-item>
    </el-form>
    <el-collapse accordion v-model="activeName" >
  <el-collapse-item title="告警条件" name="first">
    <el-table :data="filterTableData" style="width: 100%">
      <el-table-column type="index" width="50">
        <template slot="header" #header="scope">
          <el-icon @click="addCofig" style="color: skyblue;"><Plus /></el-icon>
            </template>
      </el-table-column>
    <el-table-column label="监测项" prop="date">
      <template #default="scope">
        <el-select v-model="form.ruleId" placeholder="监测项">
                <el-option
                  v-for="item in ruleList"
                  :key="item.ruleId"
                  :label="item.ruleName"
                  :value="item.ruleId"
                ></el-option>
              </el-select>
          </template>
    </el-table-column>
    <el-table-column label="判断" prop="name" >
      <template #default="scope">
        <el-select v-model="form.ruleId" placeholder="判断">
                <el-option
                  v-for="item in ruleList"
                  :key="item.ruleId"
                  :label="item.ruleName"
                  :value="item.ruleId"
                ></el-option>
              </el-select>
          </template>
    </el-table-column>
    <el-table-column label="值" prop="name" >
      <template #default="scope">
        <el-input  placeholder="值" type="number" v-model="scope.row.measure"></el-input>
          </template>
    </el-table-column>
    <el-table-column label="连接" prop="name">
      <template #default="scope">
        <el-select v-model="form.ruleId" placeholder="判断">
                <el-option
                  v-for="item in ruleList"
                  :key="item.ruleId"
                  :label="item.ruleName"
                  :value="item.ruleId"
                ></el-option>
              </el-select>
          </template>
    </el-table-column>
    <el-table-column align="right">
      <template #default="scope">
        <!-- <el-button size="small" type="primary" @click="addCofig">新增</el-button> -->
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  </el-collapse-item>
</el-collapse>
  </div>
</template>

<script setup>
import {
  pageRepairSite_page_with_all_site,
  listRuleEngine,
  listRepairAllSite,
  listSite,
  listSiteSupportedProperty,
  siteconfigdetail_by_st,
  addRtuRepairConfig,
  updateRtuRepairConfig,
} from "@/api/dataAnalysis/repairdata";

const { proxy } = getCurrentInstance();
const siteTypes = proxy.fixDict["siteTypes"]; //站点类型
const elevationSystemTypes = proxy.fixDict["elevationSystemTypes"]; //高程系统/坐标系
const monitorTargetTypes = proxy.fixDict["monitorTargetTypes"]; //监测对象类型
const buildTypes = proxy.fixDict["buildTypes"]; //建设方式
const onlineStatus = proxy.fixDict["onlineStatus"]; //在线状态
const faultStatus = proxy.fixDict["faultStatus"]; //故障状态
const isNumberState = proxy.fixDict["isNumberState"];
const activeName = ref("first");
const rtuSiteInfoList = ref([]);
const open = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const currentRow = ref({});
const searchSiteList = ref([]); //站点搜索列表
const isconfigAdd = ref(true); //修改/新增判断按钮
const isliuliangzhan = ref(false);
const ruleList = ref([{ruleName:'111',ruleId:'12121212'}]); //规则下拉框
const yulianglist = ref([]); //雨量站下拉框
const liulianglist = ref([]); //流量站下拉框
const guanwanglist = ref([]); //雨水管网下拉框
const xiufulist = ref([]); //修复因子下拉
const data = reactive({
  form: {
    siteRepairPropertyConfigList: [
      {
        id: "",
        isEnable: 1,
        maxValue: "",
        minValue: "",
        property: "",
        propertyName: "",
        siteRepairConfigId: "",
        st: "",
        type: "",
      },
      
    ],
  
  },
  queryParams: {
    pageNo: 1,
    pageSize: 10,
    st: null,
    dateRange: [],
  },
  rules: {
    ruleId: [
      {
        required: true,
        message: "请选择规则引擎",
        trigger: "blur",
      },
    ],
    referRainStationSt: [
      {
        required: true,
        message: "请选择关联雨量站",
        trigger: "blur",
      },
    ],
    isEnable: [
      {
        required: true,
        message: "请选择是否启用",
        trigger: "blur",
      },
    ],
  },
});
const { queryParams, form, rules } = toRefs(data);
const filterTableData=ref(   [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],)
watch(
  () => form.value.siteRepairPropertyConfigList,
  (v1, v2) => {
    let propertys = form.value.siteRepairPropertyConfigList.map((item) => {
      return item.property;
    });
    isliuliangzhan.value = propertys.includes("va");
    form.value.referFlowStationSt = isliuliangzhan.value
      ? form.value.referFlowStationSt
      : [];
  }
);
/** 查询RTU站点列表 */
function getList() {
  loading.value = true;
  let params = proxy.formatAddDateRange(
    queryParams.value,
    queryParams.value.dateRange,
    "startDatetime",
    "endDatetime"
  );
  pageRepairSite_page_with_all_site(params).then((response) => {
    if (response.data.length > 0) {
      response.data.forEach((item) => {
        if (item.siteRepairPropertyConfigList.length > 0) {
          item.siteRepairPropertyConfigList.forEach((config) => {
            if (config.property == "sbl1") {
              item.sbl1 = config["isEnable"];
            }
            if (config.property == "turb") {
              item.turb = config["isEnable"];
            }
            if (config.property == "z") {
              item.z = config["isEnable"];
            }
            if (config.property == "va") {
              item.va = config["isEnable"];
            }
          });
        } else {
          item.sbl1 = "--";
          item.turb = "--";
          item.z = "--";
          item.va = "--";
        }
      });
    }
    rtuSiteInfoList.value = response.data;

    total.value = response.total;
    loading.value = false;
  });
}

//获取站点列表
function getSearchSiteList() {
  listRepairAllSite({ platformCode: 111211 }).then((res) => {
    searchSiteList.value = res.data;
  });
}
//批量添加修复因子
function addCofig() {
  // form.value.siteRepairPropertyConfigList.push({
  //   property: "", //修复因子
  //   isEnable: 1, //是否启用（0否 1是）
  //   minValue: 0, //正常范围最小值
  //   maxValue: 0, //	正常范围最大值
  // });
  filterTableData.value.push([])
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["configFormRef"].validate((valid) => {
    if (valid) {
      form.value.referFlowStationSt = form.value.referFlowStationSt.join(",");
      form.value.referRainPipeSt = form.value.referRainPipeSt.join(",");
      form.value.referRainStationSt = form.value.referRainStationSt.join(",");
      form.value.st = currentRow.value.st;
      if (isconfigAdd.value) {
        addRtuRepairConfig(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      } else {
        updateRtuRepairConfig(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  console.log(row,999);
  const _ids = row.id || ids.value;
  proxy.$modal
    .confirm("是否确认删除？")
    .then(function () {
      filterTableData.value.splice(row,1)
      // return delrtuSiteInfo(_ids);
    })
    .then(() => {
      // getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}

getList();
getSearchSiteList();
</script>
<style lang="scss" scoped></style>