<template>
  <div class="siteManage">
    <div class="searchBox">
      <n-space>
        <n-input
          v-model:value="filterInfo.query.searchStr"
          clearable
          placeholder="请输入因子名称/ASCII码"
        />
        <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"
        striped
        :max-height="700"
        :columns="tableInfo.columns"
        :data="tableInfo.data"
        :remote="true"
        :loading="tableInfo.loading"
        :pagination="pagination"
      ></n-data-table>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, ref, h, onMounted, computed } from "vue";
import { Search, Add } from "@vicons/ionicons5";
import { useStore } from "vuex";
import { equipConfigList, equipConfigUpdate } from "@/services";

export default {
  components: {
    Search,
    Add,
  },
  setup() {
    const store = useStore();
    const formRef = ref();
    const alldata = reactive({
      // 搜索相关
      filterInfo: {
        query: {
          searchStr: "",
          platformCode: "",
        },
      },
      // 表单相关
      formInfo: {
        loading: false,
        data: {
          id: "",
          codeProperty: "",
          codeAscll: "",
          code: "",
          maxValue: "",
          minValue: "",
          unit: "",
          orderNo: "",
        },
        rules: {
          codeProperty: {
            required: true, message: '请输入因子名称', trigger: 'blur'
          },
          codeAscll: {
            required: true, message: '请输入因子ASCII码', trigger: 'blur'
          },
        }
      },
      // 表格相关
      tableInfo: {
        loading: false,
        columns: [
          {
            title: "因子ASCII码",
            key: "codeAscll",
            align: "center",
            ellipsis: {
              tooltip: true
            }
          },
          {
            title: "因子名称",
            key: "codeProperty",
            align: "center",
            ellipsis: {
              tooltip: true
            }
          },
          {
            title: "水文编号",
            key: "code",
            align: "center",
          },
          {
            title: "因子最大值",
            key: "maxValue",
            align: "center",
            ellipsis: {
              tooltip: true
            },
          },
          {
            title: "因子最小值",
            key: "minValue",
            align: "center",
            ellipsis: {
              tooltip: true
            },
          },
          {
            title: "因子单位",
            key: "unit",
            align: "center",
          },
        ],
        data: [],
      },
    });
    alldata.filterInfo.query.platformCode = computed(() => {
      return store.getters.platformCode;
    });
    //分页
    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 handleClick = (type, row) => {
      switch (type) {
        // 搜索
        case "search":
          paginationReactive.page = 1;
          getTableData();
          break;
        // 编辑
        case "update":
          alldata.dialogInfo.type = type;
          for(let key in row) {
            if(key in alldata.formInfo.data) {
              alldata.formInfo.data[key] = row[key];
            }
          }
          alldata.dialogInfo.visible = true;
          break;
        // 表单提交
        case "submit":
          formRef.value.validate((errors) => {
            if (!errors) {
              submit();
            } else {
              console.log(errors);
            }
          });
          break;
      }
    };
    // 表单提交
    async function submit() {
      let params = {
        current: 0,
        size: 0,
        data: alldata.formInfo.data
      };
      alldata.formInfo.loading = true;
      let result = await equipConfigUpdate(params);
      alldata.formInfo.loading = false;
      if(result.code === 1) {
        alldata.dialogInfo.visible = false;
        if(alldata.dialogInfo.type === "create") {
          alldata.paginationReactive.page = 1;
        }
        getTableData();
        resetForm();
      }else{
        return ;
      }
    };
    // 重置表单
    function resetForm() {
      alldata.formInfo.data = {
        id: "",
        stName: "",
        stCode: "",
        station: [],
        stationType: "",
        installationType: "",
        constructionStatus: 0,
        isKnow: 1,
        address: "",
        person: "",
        videoPath: "",
        lat: "",
        lon: "",
      };
    };
    // 获取表格数据
    const getTableData = async () => {
      let pramas = {
        current: paginationReactive.page,
        size: paginationReactive.pageSize,
        data: alldata.filterInfo.query,
      };
      alldata.tableInfo.loading = true;
      let res = await equipConfigList(pramas);
      alldata.tableInfo.loading = false;
      if (res && res.code == 1) {
        alldata.tableInfo.data = res.data.list ? res.data.list : [];
        paginationReactive.pageCount = res.data.pages;
        paginationReactive.itemCount = res.data.total;
      }
    };
    onMounted(() => {
      getTableData();
    });
    return {
      formRef,
      ...toRefs(alldata),
      pagination: paginationReactive,
      getTableData,
      handleClick,
    };
  },
};
</script>

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