<template>
  <!-- 报警设置 -->
  <div class="alarmSettings">
    <div class="searchBox">
      <n-space>
        <n-select v-model:value="searchValue1" filterable clearable :options="options1" placeholder="请选择站点类型" />
        <n-input v-model:value="searchValue2" clearable placeholder="请输入站点名称或站点编号" />
        <n-button type="primary" @click="handleClick('search')">
          <template #icon>
            <n-icon><Search /></n-icon>
          </template>
          搜索
        </n-button>
      </n-space>
    </div>
    <div class="tableBox">
      <n-data-table
        ref="tableRef"
        :bordered="false"
        :max-height="700"
        striped
        :columns="columns"
        :data="tableData"
        :loading="tableLoading"
        :remote="true"
        :pagination="pagination"
      ></n-data-table>
    </div>
    <!-- 阈值配置 -->
    <n-modal v-model:show="showinfos" title="阈值配置" :show-icon="false" preset="card" :style="{ width: '70%' }">
      <n-space>
        <n-input v-model:value="searchValue4" clearable placeholder="请输入因子名称" />
        <n-button type="primary" @click="handleClick('searchInfos')">
          <template #icon>
            <n-icon><Search /></n-icon>
          </template>
          搜索
        </n-button>
        <n-button type="primary" @click="handleClick('addWarnLine')">
          <template #icon>
            <n-icon><Add /></n-icon>
          </template>
          新增警戒线
        </n-button>
      </n-space>
      <n-data-table
        :style="{ marginTop: '10px' }"
        ref="tableRef"
        :bordered="false"
        :max-height="700"
        striped
        :columns="infosColumns"
        :data="infosData"
        :remote="true"
        :pagination="pagination2"
      ></n-data-table>
    </n-modal>
    <!-- 新增/编辑警戒线 -->
    <n-modal v-model:show="showAddOrUpdate" :show-icon="false" :title="addOrUpdateTitle" preset="card" :style="{ width: '500px' }">
      <n-form :label-width="100" :model="addOrUpdateValue" :rules="addOrUpdateRules" label-placement="left" ref="formRef">
        <n-form-item label="级别：" path="warnType">
          <n-select
            v-model:value="addOrUpdateValue.warnType"
            @update:value="getNonConfigList()"
            filterable
            clearable
            :options="option3"
            :disabled="cofigDisabled"
            placeholder="请选择级别"
          />
        </n-form-item>
        <n-form-item label="因子：" path="factorsAscii" v-if="!cofigDisabled">
          <n-select
            v-model:value="addOrUpdateValue.factorsAscii"
            :multiple="multiple"
            filterable
            clearable
            :options="option4"
            placeholder="请选择因子"
            @update:value="changeFactorsAscii"
          />
        </n-form-item>
        <n-form-item label="运算符：" path="compareWay">
          <n-select v-model:value="addOrUpdateValue.compareWay" filterable clearable :options="option5" placeholder="请选择运算符" />
        </n-form-item>
        <n-form-item label="线值：" path="warnValue">
          <n-input-number v-model:value="addOrUpdateValue.warnValue" clearable placeholder="请输入线值" style="width: 100%" />
        </n-form-item>
      </n-form>
      <template #action>
        <n-space>
          <n-button @click="() => (showAddOrUpdate = false)">取消</n-button>
          <n-button type="primary" @click="handleClick('sure')">确定</n-button>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>

<script>
import { reactive, toRefs, h, onMounted, ref } from 'vue';
import { NButton, useDialog, NTag } from 'naive-ui';
import { Search, Add } from '@vicons/ionicons5';
import { getSettingList, getWarnConfigList, getWarnNonList, addWarnConfig, editWarnConfig, deleteWarnConfig } from '@/services';

export default {
  name: 'alarmSettings',
  components: {
    Search,
    Add,
  },
  setup() {
    const dialog = useDialog();
    const allData = reactive({
      // 搜索
      searchValue1: null,
      searchValue2: null,
      options1: [
        {
          label: '水质站(地表水)',
          value: 0,
        },
        {
          label: '水质站(污水)',
          value: 1,
        },
        {
          label: '非水质类型',
          value: 2,
        },
      ],
      //表格
      columns: [
        {
          title: '站点编码',
          key: 'stCode',
          align: 'center',
        },
        {
          title: '名称',
          key: 'stName',
          align: 'center',
        },
        {
          title: '预警阈值',
          key: 'warnInfos',
          align: 'center',
        },
        {
          title: '报警阈值',
          key: 'alarmInfos',
          align: 'center',
        },
        {
          title: '水质预警阈值',
          key: 'waterWarnInfo',
          align: 'center',
        },
        {
          title: '水质报警阈值',
          key: 'waterAlarmInfo',
          align: 'center',
        },
        {
          title: '操作',
          key: 'actions',
          width: '220',
          align: 'center',
          render(row) {
            const btn = allData.actionColumn.map((item, index) => {
              return h(
                NButton,
                {
                  text: true,
                  size: item.size,
                  style: {
                    margin: '10px',
                  },
                  type: item.btnType,
                  onClick: () => handleClick(item.type, row),
                },
                { default: () => item.default }
              );
            });
            return btn;
          },
        },
      ],
      data: [],
      actionColumn: [
        {
          size: 'small',
          btnType: 'primary',
          type: 'configureInfos',
          default: '阈值配置',
        },
        // {
        //   size: "small",
        //   btnType: "primary",
        //   type: "configureWaterInfos",
        //   default: "水质阈值配置",
        // },
      ],
      // 阈值配置弹窗
      showinfos: false,
      searchValue4: null,
      infosColumns: [
        {
          title: '因子编号',
          key: 'factorsAscii',
          align: 'center',
        },
        {
          title: '因子名称',
          key: 'factorsName',
          align: 'center',
        },
        {
          title: '运算符',
          key: 'compareWayDesc',
          align: 'center',
        },
        {
          title: '线值',
          key: 'warnValue',
          align: 'center',
          render(row) {
            return h(
              NTag,
              {
                bordered: false,
              },
              {
                default: () => (row.warnValue > 0 ? row.warnValue : row.compareWay),
              }
            );
          },
        },
        {
          title: '警戒类型',
          key: 'warnType',
          align: 'center',
          render(row) {
            return h(
              NTag,
              {
                bordered: false,
                type: row.warnType === 1 ? 'success' : 'warning',
                color: {
                  color: 'transparent',
                  textColor: row.warnType === 1 ? '#fcb040' : '#d03050',
                },
              },
              {
                default: () => (row.warnType === 1 ? '预警' : '报警'),
              }
            );
          },
        },
        {
          title: '操作',
          key: 'actions',
          align: 'center',
          render(row) {
            const btn = allData.infoActionColumn.map((item, index) => {
              return h(
                NButton,
                {
                  text: true,
                  size: item.size,
                  style: {
                    margin: '10px',
                  },
                  type: item.btnType,
                  onClick: () => handleClick(item.type, row),
                },
                { default: () => item.default }
              );
            });
            return btn;
          },
        },
      ],
      tableData: [],
      infosData: [],
      tableLoading: true,
      infoActionColumn: [
        {
          size: 'small',
          btnType: 'primary',
          type: 'editWarnLine',
          default: '编辑',
        },
        {
          size: 'small',
          btnType: 'error',
          type: 'deleteWarnLine',
          default: '删除',
        },
      ],
      // 新增/修改警戒线
      showAddOrUpdate: false,
      rows: {},
      addOrUpdateTitle: '',
      multiple: false,
      cofigDisabled: false,
      addOrUpdateValue: {
        warnType: 1,
        factorsAscii: null,
        factorsName: null,
        warnValue: null,
        compareWay: null,
      },
      addOrUpdateRules: {
        warnType: {
          required: true,
          type: 'number',
          trigger: ['change'],
          message: '请选择',
        },
        factorsAscii: {
          required: true,
          trigger: ['change'],
          message: '请选择',
        },
        compareWay: {
          required: true,
          trigger: ['change'],
          message: '请选择',
        },
        warnValue: {
          required: true,
          type: 'number',
          trigger: ['blur'],
          message: '请输入',
        },
      },
      option3: [
        { label: '预警', value: 1 },
        { label: '报警', value: 2 },
      ],
      option4: [],
      option5: [
        { label: '大于', value: '>' },
        { label: '小于', value: '<' },
      ],
    });
    //分页
    const paginationReactive = reactive({
      page: 1,
      pageSize: 10,
      showSizePicker: true,
      pageSizes: [10, 20, 50],
      showQuickJumper: true,
      pageCount: 0,
      itemCount: 0,
      onChange: (page) => {
        paginationReactive.page = page;
        getTableData();
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
        getTableData();
      },
    });
    // 阈值配置分页
    const paginationReactive2 = reactive({
      page: 1,
      pageSize: 10,
      showSizePicker: true,
      pageSizes: [10, 20, 50],
      showQuickJumper: true,
      pageCount: 0,
      itemCount: 0,
      onChange: (page) => {
        paginationReactive2.page = page;
        getTableData();
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive2.pageSize = pageSize;
        paginationReactive2.page = 1;
        getTableData();
      },
    });
    // 获取配置列表
    const getSettingData = async () => {
      let pramas = {
        data: {
          platformCode: '',
          stName: allData.searchValue2,
          stationType: allData.searchValue1,
        },
        current: paginationReactive.page,
        size: paginationReactive.pageSize,
      };
      allData.tableLoading = true;
      let res = await getSettingList(pramas);
      if (res && res.code == 200) {
        let datas = res.data;
        allData.tableData = datas.list || [];
        paginationReactive.pageCount = datas.pages;
        paginationReactive.itemCount = datas.total;
      }
      allData.tableLoading = false;
    };
    //获取阈值列表
    const getInfosList = async (row) => {
      allData.siteNo = row.stCode;
      let pramas = {
        current: paginationReactive2.page,
        size: paginationReactive2.pageSize,
        data: {
          fuzzyQuery: allData.searchValue4,
          siteNo: row.stCode,
        },
      };
      let res = await getWarnConfigList(pramas);
      if (res && res.code == 200) {
        let datas = res.data;
        allData.infosData = datas.list;
        paginationReactive.pageCount = datas.pages;
        paginationReactive.itemCount = datas.total;
      }
    };

    // 获取因子列表
    const getNonConfigList = async () => {
      let pramas = {
        data: {
          siteNo: allData.siteNo,
          warnType: allData.addOrUpdateValue.warnType,
        },
      };
      let res = await getWarnNonList(pramas);
      if (res && res.code == 200) {
        allData.option4 = res.data.map((v) => {
          return {
            label: v.factorsName,
            value: v.factorsAscii,
          };
        });
      }
    };
    const formRef = ref(null);
    // 按钮点击事件
    const handleClick = (type, row) => {
      switch (type) {
        case 'search':
          getSettingData();
          break;
        // 配置阈值点击
        case 'configureInfos':
          allData.showinfos = true;
          allData.rows = { ...row };
          getInfosList(row);
          break;
        //阀值配置搜索
        case 'searchInfos':
          getInfosList(allData.rows);
          break;
        // 新增警戒线
        case 'addWarnLine':
          allData.showAddOrUpdate = true;
          allData.cofigDisabled = false;
          allData.addOrUpdateTitle = '新增警戒线';
          allData.addOrUpdateValue.warnType = 1;
          getNonConfigList();
          break;
        // 修改警戒线
        case 'editWarnLine':
          allData.showAddOrUpdate = true;
          allData.cofigDisabled = true;
          allData.addOrUpdateTitle = '修改警戒线';
          allData.addOrUpdateValue = { ...row };
          allData.addOrUpdateValue.warnType = row.warnType;
          getNonConfigList();
          break;
        case 'deleteWarnLine':
          dialog.info({
            title: '提示',
            content: `确定对[id=${row.id}]进行删除操作吗？`,
            positiveText: '确定',
            negativeText: '取消',
            onPositiveClick: () => {
              let id = [row.id];
              deleteConfig(id);
            },
            onNegativeClick: () => {},
          });
          break;
        case 'sure':
          if (allData.addOrUpdateTitle == '新增警戒线') {
            formRef.value.validate((errors) => {
              if (!errors) {
                addconfig();
              } else {
                $message.error('验证失败,请检查必填项');
              }
            });
          } else if (allData.addOrUpdateTitle == '修改警戒线') {
            formRef.value.validate((errors) => {
              if (!errors) {
                editConfig();
              } else {
                $message.error('验证失败,请检查必填项');
              }
            });
          }
          break;
      }
    };
    // 新增阈值
    const addconfig = async () => {
      allData.siteNo = allData.rows.stCode;
      let pramas = {};
      pramas = {
        data: {
          compareWay: '>',
          conditionType: 1,
          factorsAscii: allData.addOrUpdateValue.factorsAscii,
          factorsName: allData.addOrUpdateValue.factorsName,
          platForm: allData.rows.platformCode,
          siteName: allData.rows.stName,
          siteNo: allData.rows.stCode,
          warnType: allData.addOrUpdateValue.warnType,
          warnValue: String(allData.addOrUpdateValue.warnValue),
        },
      };
      let res = await addWarnConfig(pramas);
      if (res && res.code == 200) {
        allData.showAddOrUpdate = false;
        getInfosList(allData.rows);
      }
    };
    // 修改阈值
    const editConfig = async () => {
      allData.siteNo = allData.rows.stCode;
      let pramas = {
        data: {
          conditionType: 1,
          compareWay: allData.addOrUpdateValue.compareWay,
          factorsAscii: allData.addOrUpdateValue.factorsAscii,
          siteNo: allData.rows.stCode,
          warnType: allData.addOrUpdateValue.warnType,
          warnValue: allData.addOrUpdateValue.warnValue,
        },
      };
      let res = await editWarnConfig(pramas);
      if (res && res.code == 200) {
        allData.showAddOrUpdate = false;
        getInfosList(allData.rows);
      }
    };
    // 删除阈值
    const deleteConfig = async (id) => {
      let res = await deleteWarnConfig(id);
      if (res && res.code == 200) {
        getInfosList(allData.rows);
      }
    };
    // 单条件/多条件切换
    const changeConditionTypeo = (value) => {
      allData.addOrUpdateValue.factorsAscii = null;
      if (value == 1) {
        allData.multiple = false;
      } else {
        allData.multiple = true;
      }
    };
    //选择因子
    const changeFactorsAscii = (value, option) => {
      allData.addOrUpdateValue.factorsName = option.label;
    };
    onMounted(() => {
      getSettingData();
    });

    return {
      ...toRefs(allData),
      formRef,
      pagination: paginationReactive,
      pagination2: paginationReactive2,
      getSettingData,
      getNonConfigList,
      handleClick,
      addconfig,
      editConfig,
      changeFactorsAscii,
      changeConditionTypeo,
    };
  },
};
</script>

<style lang="less" scoped>
.alarmSettings {
  .tableBox {
    margin-top: 10px;
  }
}
</style>