<route lang="yaml">
  name: demandManage
  </route>

<script lang="ts" setup name="demandManage">
import { ref } from 'vue';
import { TableColumnWidth, commonPageConfig } from '@/utils/enum';
import { ElMessage, ElMessageBox } from "element-plus";
import { CirclePlus, Search } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import { changeNum, getCurrentTime } from '@/utils/common';
import useUserStore from "@/store/modules/user";
import useCatchStore from "@/store/modules/catch";
import {
  getDemandAll,
  saveDemandTree,
  updateDemandTree,
  deleteDemandTree,
  getDemandList,
  saveDemand,
  updateDemand,
  deleteDemand,
} from '@/api/modules/dataPricing';

const router = useRouter();
const userStore = useUserStore()
const userData = JSON.parse(userStore.userData)
const { proxy } = getCurrentInstance() as any;
const cacheStore = useCatchStore()

/** 左侧标签列表管理 */
const treeInfoRef = ref();
const treeData = ref([]);
const treeInfo = ref({
  id: "demand-tree",
  filter: true,
  editTreeItem: true,
  queryValue: "",
  loading: false,
  className: 'tree-list-manage',
  queryPlaceholder: "输入关键字搜索",
  props: {
    label: "menuName",
    value: "guid",
    children: 'childList',
  },
  prefix: {
    type: 'prefixIcon'
  },
  lazy: false,
  nodeKey: 'guid',
  expendAll: true,
  currentNodeKey: '',
  expandOnNodeClick: false,
  data: [],
});

const catalogData = ref([]);
const searchItemList = ref([
  {
    type: "select",
    label: "",
    field: "isRequired",
    placeholder: "是否必选",
    default: "",
    options: [
      { label: '是', value: 'Y' },
      { label: '否', value: 'N' }
    ],
    clearable: true,
    style: {
      width: '140px'
    }
  },
  {
    type: "input",
    label: "",
    field: "fieldName",
    default: "",
    placeholder: "字段名称",
    clearable: true,
    style: {
      width: '230px'
    }
  },
]);

const lastClickNode: any = ref({});
const showTable = ref(false)
/** 记录正在提交审批流程的api，防止重复提交 */
const addDataPromise: any = ref();
const tableRef = ref();
const tableData: any = ref([]);
const selectRowData: any = ref([])
const currTableData: any = ref({});
const page: any = ref({
  ...commonPageConfig,
  fieldName: '',
  isRequired: '',
});
const tableFields: any = [
  { label: "字段名称", field: "fieldName" },
  { label: "是否必选", field: "isRequired", type: 'select' },
  { label: "排序", field: "orderNum", type: 'defaultValue' },
  { label: '启用状态', field: 'bizState', type: 'switch', activeText: '启用', inactiveText: '停用', activeValue: 'Y', inactiveValue: 'N' },
  { label: "创建时间", field: "createTime", type: 'defaultValue' },
]
const tableInfo: any = ref({
  id: 'api-data-table',
  rowKey: 'guid',
  loading: false,
  multiple: true,
  fields: [
    { label: "字段名称", field: "fieldName", width: 200, align: "left", type: 'edit' },
    {
      label: "是否必选", field: "isRequired", width: 140, type: 'edit', getName: (scope) => {
        return scope.row.isRequired == 'Y' ? '是' : '否'
      }
    },
    { label: "排序", field: "orderNum", width: 120, type: 'edit', dataTypeName: 'fieldType' },
    {
      label: '启用状态', field: 'bizState', type: 'edit', activeText: '启用', inactiveText: '停用', activeValue: 'Y', inactiveValue: 'N', switchWidth: 56, width: 96, align: 'center',
    },
    { label: "创建时间", field: "createTime", width: TableColumnWidth.DATETIME, type: 'edit', dataTypeName: 'dateType' },
  ],
  data: tableData.value,
  editInfo: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    isMore: false,
    width: 120,
    btns: (scope) => {
      let btns: any[] = [];
      if (scope.row.STATUS == 'edit') {
        btns.push({
          value: 'save', label: '保存', click: (scope) => {
            if (addDataPromise.value) {
              return;
            }
            // 调用新增数据的接口。
            let params = { ...scope.row, tenantGuid: userData.tenantGuid };
            params.relationMenuGuid = lastClickNode.value.guid;
            delete params['ROWID'];
            delete params['STATUS'];
            delete params['STATE'];
            delete params.dateType;
            delete params.fieldType;
            if (params.guid) {
              addDataPromise.value = updateDemand(params).then((res: any) => {
                addDataPromise.value = null;
                if (res.code == proxy.$passCode) {
                  page.value.curr = 1;
                  getTableData();
                  proxy.$ElMessage.success('编辑数据保存成功');
                } else {
                  proxy.$ElMessage.error(res.msg);
                }
              });
            } else {
              addDataPromise.value = saveDemand(params).then((res: any) => {
                addDataPromise.value = null;
                if (res.code == proxy.$passCode) {
                  page.value.curr = 1;
                  getTableData();
                  proxy.$ElMessage.success('新增数据保存成功');
                } else {
                  proxy.$ElMessage.error(res.msg);
                }
              });
            }
          }
        });
        btns.push({
          value: 'del', label: '删除', click: (scope) => {
            proxy.$openMessageBox('确定要删除该条数据吗？', () => {
              tableData.value.splice(0, 1);
              proxy.$ElMessage.success("删除成功");
            }, () => {
              proxy.$ElMessage.info("已取消删除");
            })
          }
        });
        return btns;
      }
      btns.push({ value: 'edit', label: '编辑' });
      btns.push({ value: 'del', label: '删除' });
      return btns;
    }
  }
});

/** ---- 新增修改标签对话框配置-------------  */
const formItems: any = ref([
  {
    label: '需求表名称',
    type: 'input',
    placeholder: '请输入',
    field: 'menuName',
    default: '',
    maxlength: 20,
    clearable: true,
    required: true,
  },
  {
    label: '是否为目录',
    type: 'select',
    field: 'isCatalog',
    default: 'N',
    options: [
      { label: '是', value: 'Y' },
      { label: '否', value: 'N' }
    ],
    required: true,
  },
  {
    label: '所属上级',
    type: 'cascader',
    placeholder: '请选择',
    field: "parentGuid",
    default: [],
    options: [],
    showAllLevels: false,
    props: {
      checkStrictly: true,
      label: "menuName",
      value: "guid",
      children: 'childList',
      emitPath: false
    },
    clearable: true,
    filterable: true,
    block: true
  },
  {
    label: '排序',
    type: 'input',
    placeholder: '请输入',
    field: 'orderNum',
    default: '',
    inputType: 'integerNumber',
    maxlength: 6,
    clearable: true,
  },
])

const formRules = ref({
  menuName: [
    { required: true, message: '请填写需求表名称', trigger: 'blur' }
  ],
  isCatalog: [
    { required: true, message: '请选择是否为目录', trigger: 'change' }
  ]
});

/** 新建api标签对话框 */
const demScheduleLabelDialogInfo = ref({
  visible: false,
  size: 480,
  direction: "column",
  header: {
    title: "",
  },
  type: '',
  contents: [
    {
      type: 'form',
      title: '',
      formInfo: {
        id: 'add-staff-form',
        items: formItems.value,
        rules: formRules.value
      }
    }
  ],
  footer: {
    btns: [
      { type: "default", label: "取消", value: "cancel" },
      { type: "primary", label: "确定", value: "submit" },
    ],
  },
});

// 获取需求表树形数据
const getTreeData = () => {
  getDemandAll({ isCatalog: '' }).then((res: any) => {
    if (res.code == proxy.$passCode) {
      const data = res.data || [];
      treeData.value = JSON.parse(JSON.stringify(data));
      treeInfo.value.data = JSON.parse(JSON.stringify(data));
      treeInfo.value.currentNodeKey = data[0]?.guid || "";
      lastClickNode.value = data[0] || {};
      nextTick(() => {
        treeInfoRef.value?.setCurrentKey(treeInfo.value.currentNodeKey);
        if (lastClickNode.value.isCatalog != 'Y') {
          showTable.value = true;
          page.value.curr = 1;
          getTableData();
        } else {
          showTable.value = false;
        }
      })
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
  getCatalog();
}

const getCatalog = () => {
  getDemandAll({ isCatalog: 'Y' }).then((res: any) => {
    if (res.code == proxy.$passCode) {
      const data = res.data || [];
      catalogData.value = JSON.parse(JSON.stringify(data));
    }
  })
}

/** 点击左侧节点 */
const nodeClick = (data) => {
  lastClickNode.value = data || {};
  if (data.isCatalog != 'Y') {
    showTable.value = true;
    page.value.curr = 1;
    getTableData();
  } else {
    showTable.value = false;
  }
}

const setRowData = (info: any = null) => {
  const rowData: any = {
    STATUS: 'edit',
    STATE: "Running",
    ROWID: '1',
    dateType: 'datetime',
    fieldType: 'int',
    fieldName: info?.fieldName || '',
    isRequired: info?.isRequired || 'N',
    bizState: info?.bizState || 'Y',
    createTime: info?.createTime || getCurrentTime(),
    orderNum: info?.orderNum !== undefined ? info?.orderNum : tableData.value.length + 1
  }
  info && (rowData.guid = info.guid || '');
  return rowData;
}

// 新增字段
const addField = () => {
  if (tableData.value[0]?.STATUS == 'edit') {
    proxy.$ElMessage.warning('请先保存正在编辑的行数据');
    return;
  }
  // 支持新增数据，直接添加一行进行编辑。
  const rowData = setRowData();
  tableData.value.unshift(rowData);
  nextTick(() => {
    tableRef?.value?.tableRef?.setScrollTop(0);
  })
}

// 批量删除
const batching = (type) => {
  if (type == 'delete') {
    if (selectRowData.value.length == 0) {
      ElMessage({
        type: 'error',
        message: '请选择需要删除的数据',
      })
      return
    }
    open("此操作将永久删除, 是否继续?", "warning", true);
  } else if (type == 'import') {
    const info = {
      dictionaryGuid: ''
    }
    cacheStore.setCatch('uploadSetting', info)
    router.push(
      {
        name: 'importFileDemandManage',
        query: {
          isfileImport: '7'
        }
      }
    );
  }
}

const setFormItems = (info = null, type = '') => {
  const datas: any = info || {};
  formItems.value.map(item => {
    if (item.field == 'isCatalog') {
      item.default = datas[item.field] || 'N';
    } else {
      item.default = datas[item.field] || '';
    }
  })
}

const setCataLog = (dataArr, id, parentDisabled = false) => {
  return dataArr.map(item => {
    // 当前节点是否被禁选（自身匹配或父节点已禁选）
    const isDisabled = parentDisabled || item.guid === id;
    // 新节点基础属性
    const newItem = {
      ...item,
      disabled: isDisabled
    };

    // 递归处理子节点，并传递当前节点的禁选状态
    if (item.childList && item.childList.length > 0) {
      newItem.childList = setCataLog(item.childList, id, isDisabled);
    }
    return newItem;
  })
}

/** 处理标签的操作按钮，编辑，删除 */
const handleTreeItemMenuClick = async (node, type) => {
  let data = node.data;
  lastClickNode.value = data;
  if (type == "edit") {
    await setFormItems(data);
    if (data.isCatalog == 'Y') {
      formItems.value[1].disabled = data.childList && data.childList.length > 0;
    } else {
      formItems.value[1].disabled = tableData.value && tableData.value.length > 0;
    }
    let cata = setCataLog(catalogData.value, data.guid);
    formItems.value.at(-2).options = cata;
    demScheduleLabelDialogInfo.value.contents[0].formInfo.items = formItems.value;
    demScheduleLabelDialogInfo.value.header.title = "编辑需求表";
    demScheduleLabelDialogInfo.value.type = 'edit';
    demScheduleLabelDialogInfo.value.visible = true;
  } else if (type == "delete") {
    proxy.$openMessageBox('确定要删除该需求表吗？', () => {
      deleteDemandTree([lastClickNode.value.guid]).then((res: any) => {
        if (res.code == proxy.$passCode) {
          getTreeData();
          proxy.$ElMessage.success("删除该需求表成功");
        } else {
          proxy.$ElMessage.error(res.msg);
        }
      });
    }, () => {
      proxy.$ElMessage.info("已取消");
    })
  }
}
/** 新建分组对话框确定。 */
const demScheduleLabelDialogBtnClick = (btn, info) => {
  if (btn.value == 'submit') {
    let params = { ...info, parentGuid: info.parentGuid || '', tenantGuid: userData.tenantGuid };
    if (demScheduleLabelDialogInfo.value.type == 'add') {
      saveDemandTree(params).then((res: any) => {
        if (res.code == proxy.$passCode) {
          getTreeData();
          proxy.$ElMessage({
            type: 'success',
            message: '新增需求表成功'
          })
          demScheduleLabelDialogInfo.value.visible = false;
        } else {
          proxy.$ElMessage({
            type: 'error',
            message: res.msg,
          })
        }
      })
    } else {
      params.guid = lastClickNode.value.guid;
      updateDemandTree(params).then((res: any) => {
        if (res.code == proxy.$passCode) {
          getTreeData();
          proxy.$ElMessage({
            type: 'success',
            message: '编辑需求表成功'
          })
          demScheduleLabelDialogInfo.value.visible = false;
        } else {
          proxy.$ElMessage({
            type: 'error',
            message: res.msg,
          })
        }
      })
    }
  } else if (btn.value == 'cancel') {
    demScheduleLabelDialogInfo.value.visible = false;
  }
};

const addTreeNode = async () => {
  await setFormItems();
  demScheduleLabelDialogInfo.value.header.title = '新建需求表';
  formItems.value[1].disabled = false;
  formItems.value.at(-2).options = catalogData.value;
  demScheduleLabelDialogInfo.value.contents[0].formInfo.items = formItems.value;
  demScheduleLabelDialogInfo.value.type = 'add';
  demScheduleLabelDialogInfo.value.visible = true;
}

// 设置需求表表头
const setTableField = () => {
  const editInfo = {};
  tableFields.forEach(f => {
    if (f.type == 'switch') {
      editInfo[f.field] = {
        label: f.label,
        type: f.type,
        field: f.field,
        default: false,
        activeText: '启用',
        inactiveText: '停用',
        activeValue: 'Y',
        inactiveValue: 'N',
      };
    } else if (f.type == 'select') {
      editInfo[f.field] = {
        label: f.label,
        type: f.type,
        field: f.field,
        default: '',
        options: [
          { label: '是', value: 'Y' },
          { label: '否', value: 'N' }
        ],
        clearable: true
      }
    } else if (f.type == 'defaultValue') {
      editInfo[f.field] = {
        label: f.label,
        type: f.type,
        field: f.field,
        default: '',
        clearable: true,
        disabled: true,
      }
    } else {
      editInfo[f.field] = {
        label: f.label,
        type: 'input',
        field: f.field,
        placeholder: f.isPrimary == 'Y' ? '主键自动生成' : '请输入',
        default: '',
        clearable: true
      }
    }
  })
  tableInfo.value.editInfo = editInfo;
}

const toSearch = (val: any = null, clear: boolean = false) => {
  page.value.curr = 1;
  if (clear) {
    searchItemList.value.map((item) => (item.default = ""));
    page.value.fieldName = '';
    page.value.isRequired = '';
  } else {
    let info = val ? { ...val } : {};
    searchItemList.value.map(item => {
      info[item.field] = item.default;
    })
    page.value.fieldName = info.fieldName || '';
    page.value.isRequired = info.isRequired || '';
  }
  getTableData();
};

// 获取表格数据
const getTableData = () => {
  if (!lastClickNode.value?.guid) {
    return;
  }
  tableInfo.value.loading = true;
  getDemandList({
    pageSize: page.value.limit,
    pageIndex: page.value.curr,
    relationMenuGuid: lastClickNode.value.guid,
    fieldName: page.value.fieldName,
    isRequired: page.value.isRequired,
  }).then((res: any) => {
    tableInfo.value.loading = false;
    if (res.code == proxy.$passCode) {
      const data = res.data || {};
      tableData.value = data.records || [];
      tableInfo.value.data = tableData.value;
      tableInfo.value.page.limit = data.pageSize
      tableInfo.value.page.curr = data.pageIndex
      tableInfo.value.page.rows = data.totalRows
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
}

const tablePageChange = (info) => {
  page.value.curr = Number(info.curr);
  page.value.limit = Number(info.limit);
  getTableData();
};

const tableSelectionChange = (val) => {
  selectRowData.value = val;
};

const tableSwitchBeforeChange = (scope, field, callBack) => {
  if (scope.row.STATUS == 'edit') {
    callBack(true);
  } else {
    // proxy.$openMessageBox(`确定要更新该字段值吗？`, () => {
    //   const state = scope.row[field] == 'Y' ? 'N' : 'Y';
    //   let mdmModelData: any = {};
    //   mdmModelData[field] = state;
    //   let pkValue = scope.row[mergeFormItems.value[0].field];
    //   mdmModelData[mergeFormItems.value[0].field] = pkValue;
    //   updateMdmModelData({
    //     mdmModelTableGuid: props.modelConfigInfo.guid,
    //     mdmModelData: mdmModelData,
    //     pkValues: [pkValue]
    //   }).then((res: any) => {
    //     if (res.code == proxy.$passCode) {
    //       proxy.$ElMessage.success('该字段值更新成功');
    //       let firstData = tableData.value[0];
    //       getMainModelData().then((res: any) => {
    //         if (firstData && firstData.STATUS == 'edit') {
    //           tableData.value.unshift(firstData);
    //         }
    //       });
    //       callBack(true)
    //     } else {
    //       proxy.$ElMessage.error(res.msg);
    //       callBack(false)
    //     }
    //   });
    // }, () => {
    //   callBack(false);
    // })
  }
}

const tableSwitchChange = (val, scope, field) => {
  if (scope.row.STATUS == 'edit') {
    tableData.value[scope.$index][field] = val;
  }
}

const tableBtnClick = (scope, btn) => {
  const type = btn.value;
  const row = scope.row;
  currTableData.value = row;
  if (type === 'edit') { // 编辑
    if (tableData.value.find(t => t.STATUS == 'edit')) {
      proxy.$ElMessage.warning('请先保存正在编辑的行数据');
      return;
    }
    const rowData = setRowData(row);
    tableData.value[scope.$index] = rowData;
  } else if (type === 'del') { // 删除
    open('确定要删除该条数据吗？', 'warning');
  }
};

const open = (msg, type, isBatch = false) => {
  ElMessageBox.confirm(msg, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: type,
  }).then(() => {
    let guids = [currTableData.value.guid]
    if (isBatch) {
      guids = selectRowData.value.map(item => item.guid);
    }
    deleteDemand(guids).then((res: any) => {
      if (res.code == proxy.$passCode) {
        getTableData();
        ElMessage({
          type: "success",
          message: "删除成功",
        });
      } else {
        ElMessage({
          type: "error",
          message: res.msg,
        });
      }
    });
  });
};

onBeforeMount(() => {
  getTreeData();
  setTableField();
});

onActivated(() => {

})

</script>

<template>
  <div class="container_wrap full flex">
    <div class="aside_wrap">
      <div class="aside_title">需求表列表</div>
      <el-icon class="icon-add" color="#4fa1a4" @click="addTreeNode()">
        <CirclePlus />
      </el-icon>
      <Tree ref="treeInfoRef" :treeInfo="treeInfo" @nodeClick="nodeClick" @itemMenuClick="handleTreeItemMenuClick" />
    </div>
    <div class="main_wrap">
      <template v-if="showTable">
        <div class="table_tool_wrap">
          <div class="tools_btns">
            <el-button type="primary" @click="addField" v-preReClick>添加</el-button>
            <el-button @click="batching('import')" v-preReClick>批量导入</el-button>
            <el-button @click="batching('delete')" v-preReClick>批量删除</el-button>
          </div>
          <div class="tools_serach">
            <template v-for="(item, i) in searchItemList" :key="'s_' + i">
              <el-select v-if="item.type == 'select'" v-model="item.default" :placeholder="item.placeholder"
                :clearable="item.clearable" :style="item.style" @change="val => toSearch()">
                <el-option v-for="(opt, o) in item.options" :label="opt.label" :value="opt.value" :key="o" />
              </el-select>
              <el-input v-else v-model.trim="item.default" :placeholder="item.placeholder" :suffix-icon="Search"
                :clearable="item.clearable" :style="item.style" @change="val => toSearch()" />
            </template>
          </div>
        </div>
        <div class="table_panel_wrap">
          <Table ref="tableRef" :tableInfo="tableInfo" @tableSelectionChange="tableSelectionChange"
            @tablePageChange="tablePageChange" @tableBtnClick="tableBtnClick" />
        </div>
      </template>
      <div class="card-noData" v-else>
        <img src="@/assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
        <p>请选择需求表</p>
      </div>
    </div>
    <!-- 添加编辑需求表的对话框 -->
    <Dialog :dialogInfo="demScheduleLabelDialogInfo" @btnClick="demScheduleLabelDialogBtnClick" />
  </div>
</template>

<style lang="scss" scoped>
.container_wrap {
  padding: 0;
  display: flex;
  justify-content: space-between;

  .aside_wrap {
    width: 199px;
    border-right: 1px solid #d9d9d9;
    box-shadow: none;

    .aside_title {
      width: calc(100% - 32px);
      display: inline-block;
    }

    .icon-add.el-icon {
      width: 24px;
      height: 24px;
      vertical-align: middle;
      cursor: pointer;

      svg {
        width: 24px;
        height: 24px;
      }
    }

    :deep(.tree_panel) {
      height: 100%;
      padding-top: 0;

      .el-tree {
        margin: 0;
        height: calc(100% - 68px);
        overflow: hidden auto;
      }
    }

  }

  .main_wrap {
    padding: 0 8px;
    height: auto;
    flex: 1;

    .table_tool_wrap {
      width: 100%;
      padding: 0 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .tools_btns {
        padding: 0px 0 0;
      }

      .tools_serach {
        width: 378px;
        display: flex;
        justify-content: space-between;
      }
    }

    .table_panel_wrap {
      width: 100%;
      height: calc(100% - 44px);
      padding: 0px 8px 0;
    }

    .card-noData {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}

.row-dialog-content {
  height: 300px;

  .tools_btns {
    margin-bottom: 8px;
  }
}

:deep(.el-form) {
  .select-input-long {
    .el-form-item:first-child {
      width: 67%;
      margin-right: 0px;
    }

    .el-form-item:last-child {
      width: 33%;
      margin-right: 0px;

      .item-label {
        white-space: pre;

        .required_mark::after {
          content: '';
        }
      }
    }
  }

  .select-input-long-reverse {
    .el-form-item:first-child {
      width: 100px;
      margin-right: 0px;
    }

    .el-form-item:last-child {
      width: calc(100% - 100px);
      margin-right: 0px;

      .item-label {
        white-space: pre;

        .required_mark::after {
          content: '';
        }
      }
    }
  }
}
</style>