<template>
  <!-- 数据能力 -->
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" :rules="rules" label-width="auto">
      <el-form-item label="站点:" prop="stCode" style="width: 45%">
        <el-select
          v-model="queryParams.stCode"
          placeholder="请选择站点"
          style="width: 100%"
          @change="changeStation"
          :disabled="!!!infoList.type"
        >
          <el-option v-for="dict in projectList" :key="dict.stCode" :label="dict.stName" :value="dict.stCode"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="告警类型:" prop="warnType" style="width: 45%">
        <el-select v-model="queryParams.warnType" placeholder="请选告警级别" style="width: 100%">
          <el-option
            v-for="dict in searchSiteList"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="告警级别:" prop="warnLevel" style="width: 45%">
        <el-select v-model="queryParams.warnLevel" placeholder="请选告警类型" style="width: 100%">
          <el-option v-for="dict in dataTypes" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间阈值(分钟):" prop="timeThreshold" style="width: 45%">
        <el-input type="number" v-model="queryParams.timeThreshold" placeholder="时间阈值"></el-input>
      </el-form-item>

      <el-form-item label="备注:" prop="dateRange" style="width: 100%">
        <el-input
          type="textarea"
          show-word-limit
          maxlength="200"
          :autosize="{ minRows: 4 }"
          v-model="queryParams.remark"
        ></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; font-size: 22px">
                <CirclePlus />
              </el-icon>
            </template>
          </el-table-column>
          <el-table-column label="监测项" prop="warnFactor">
            <template #default="scope">
              <el-select v-model="form.warnFactor[`D${scope.$index}`]" placeholder="监测项">
                <el-option
                  v-for="item in jcsjList"
                  :key="item.monitorCode"
                  :label="item.monitorName"
                  :value="item.monitorCode"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="判断" prop="ruleId">
            <template #default="scope">
              <el-select v-model="form.ruleId[`D${scope.$index}`]" placeholder="判断">
                <el-option
                  v-for="item in TYList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="值" prop="name">
            <template #default="scope">
              <el-input placeholder="值" type="number" v-model="form.zhiVlue[`D${scope.$index}`]"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="连接" prop="pdinfo">
            <template #default="scope">
              <el-select v-model="form.pdinfo[`D${scope.$index}`]" placeholder="判断">
                <el-option
                  v-for="item in ljLIST"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="right">
            <template #header>
              <el-button @click="submitFill(1)" type="primary" size="small"> 获取告警公式 </el-button>
            </template>
            <template #default="scope">
              <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <span class="warnContent" v-if="gsList.length > 0">
        告警公式： <span v-for="i in gsList">{{ i.gjgs ? i.gjgs : '' }}</span>
      </span>
    </el-collapse>
    <div class="pop_btn" style="text-align: center">
      <el-button type="primary" @click="submitFill(2)">确定</el-button>
      <el-button @click="emits('closeEd')">取消</el-button>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { rtuSiteInfoList } from '@/api/dataAnalysis/repairdata';
import { ElMessage } from 'element-plus';
import { rtuWarnConfigAdd, rtuSiteMonitorList, rtuWarnConfigedit } from '@/api/AlertService';
const { infoList } = defineProps(['infoList']);
const { proxy } = getCurrentInstance();
const activeName = ref('first');
const showSearch = ref(true);
const emits = defineEmits();
const ids = ref([]);
let jcsjList = ref([]);
const dataTypes = reactive([
  { label: '告警', value: 'warn' },
  { label: '预警', value: 'early_warn' },
]);
const projectList = ref([]);
const searchSiteList = ref([
  {
    dictValue: 'water_level',
    dictLabel: '水位',
  },
  {
    dictValue: 'flow',
    dictLabel: '流量',
  },
  {
    dictValue: 'rain',
    dictLabel: '降雨 ',
  },
  {
    dictValue: 'quality',
    dictLabel: '水质 ',
  },
  {
    dictValue: 'other',
    dictLabel: '其它 ',
  },
]); //站点搜索列表

const TYList = ref([
  {
    dictValue: '>',
    dictLabel: '>',
  },
  {
    dictValue: '>=',
    dictLabel: '>=',
  },
  {
    dictValue: '<',
    dictLabel: '< ',
  },
  {
    dictValue: '<=',
    dictLabel: '<= ',
  },
]);
const ljLIST = ref([
  {
    dictValue: '&&',
    dictLabel: '&&',
  },
  {
    dictValue: '||',
    dictLabel: '||',
  },
]);
const data = reactive({
  form: {
    siteRepairPropertyConfigList: [
      {
        id: '',
        isEnable: 1,
        maxValue: '',
        minValue: '',
        property: '',
        propertyName: '',
        siteRepairConfigId: '',
        st: '',
        type: '',
      },
    ],
    warnFactor: {},
    ruleId: {},
    pdinfo: {},
    zhiVlue: {},
    warnFormula: '',
  },
  queryParams: {},
  rules: {
    stCode: [
      {
        required: true,
        message: '请输入站点编号',
        trigger: 'blur',
      },
    ],
    warnLevel: [
      {
        required: true,
        message: '告警级别',
        trigger: 'blur',
      },
    ],
    warnType: [
      {
        required: true,
        message: '告警类型',
        trigger: 'blur',
      },
    ],
  },
});
const { queryParams, form, rules } = toRefs(data);
const filterTableData = ref([]);

//批量添加修复因子
function addCofig() {
  filterTableData.value.push([]);
}
let gsList = ref([]);
function submitFill(type) {
  let { warnFactor, ruleId, zhiVlue, pdinfo } = form.value;
  let data = form.value;
  if (type == 2) {
    proxy.$refs['queryRef'].validate(valid => {
      if (valid) {
        if (warnFactor) {
          let st = Object.keys(warnFactor);
          form.value.warnFactor = Object.values(warnFactor).join(',');
          st.forEach(i => {
            form.value.warnFormula += warnFactor?.[i] + ruleId?.[i] + zhiVlue?.[i] + pdinfo?.[i];
          });
        }
        form.value.warnFormula = data.warnFormula.replace(/undefined/,'')
        form.value.pcParseAssist = { pdinfo: data.pdinfo, ruleId: data.ruleId, zhiVlue: data.zhiVlue };
        delete form.value.pdinfo;
        delete form.value.ruleId;
        delete form.value.zhiVlue;
        if (infoList.type == 1) {
          rtuWarnConfigAdd({ ...form.value, ...queryParams.value }).then(({ code }) => {
            if (code == 200) {
              emits('closeEd');
            }
          });
        } else {
          rtuWarnConfigedit({ ...queryParams.value, ...form.value }).then(({ code }) => {
            if (code == 200) {
              emits('closeEd');
            }
          });
        }
      }
    });
  } else {
    gsList.value = [];
    if (warnFactor) {
      let arras = [];
      let st = Object.keys(warnFactor);
      jcsjList.value.forEach(i => {
        st.forEach(k => {
          if (i.monitorCode == warnFactor[k]) {
            arras.push({ ...i, ruleId: ruleId?.[k], zhiVlue: zhiVlue?.[k], pdinfo: pdinfo?.[k] });
          }
        });
      });
      arras.forEach(k => {
        gsList.value.push({ gjgs: k.monitorName + k.ruleId + k.zhiVlue + k.pdinfo });
      });
      if (gsList.value.length == 0) {
        ElMessage({
          message: '请先添加告警因子',
          type: 'warning',
        });
      }
    }
  }
}
/** 删除按钮操作 */
function handleDelete(row) {
  console.log(row, 'row');
  const _ids = row.id || ids.value;
  proxy.$modal
    .confirm('是否确认删除？')
    .then(function () {
      filterTableData.value.splice(row, 1);
      form.value.warnFactor;
      delete form.value.warnFactor[`D${row}`];
    })
    .then(() => {
      proxy.$modal.msgSuccess('删除成功');
    })
    .catch(() => {});
}
//获取站点列表
function getSearchSiteList() {
  rtuSiteInfoList().then(res => {
    projectList.value = res.data;
    queryParams.value.stCode = res.data[0].stCode;
    changeStation();
  });
}
// 选择站点获取对应监测项
function changeStation() {
  rtuSiteMonitorLists(queryParams.value.stCode);
}
const rtuSiteMonitorLists = async code => {
  let { data } = await rtuSiteMonitorList({ stCode: code });
  jcsjList.value = data;
};

function hamduLEdATE() {
  let array = infoList.warnFactor;
  queryParams.value = infoList;
  if (array) {
    let data = array.split(',');
    filterTableData.value = data;
    data.forEach((i, index) => {
       form.value.warnFactor[`D${index}`] = i;
    });
    let json = infoList.pcParseAssist;
    if (json !== 'null') {
      let { pdinfo, zhiVlue, ruleId } = JSON.parse(infoList.pcParseAssist);
      if (Object.values(pdinfo).length > 0) {
        Object.values(pdinfo).forEach((i, index) => {
          form.value.pdinfo[`D${index}`] = i;
        });
      }
      if (Object.values(zhiVlue).length > 0) {
        Object.values(zhiVlue).forEach((i, index) => {
          form.value.zhiVlue[`D${index}`] = i;
        });
      }
      if (Object.values(ruleId).length > 0) {
        Object.values(ruleId).forEach((i, index) => {
          form.value.ruleId[`D${index}`] = i;
        });
      }
    }
  }
}
onMounted(() => {
  console.log('infoList--', infoList);
  hamduLEdATE();
  getSearchSiteList();
});
</script>
<style lang="scss" scoped>
.pop_btn {
  margin: 20px auto;
}
.warnContent {
  display: inline-block;
  width: 100%;
  height: 60px;
  background: #c6c6c6;
  line-height: 60px;
  padding-left: 10px;
}
</style>