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

<script lang="ts" setup name="registerCatalogCreate">
import { ref } from 'vue';
import { useRouter, useRoute } from "vue-router";
import useUserStore from "@/store/modules/user";
import {
  getAreaData
} from "@/api/modules/queryService";
import {
  getDamTypesList,
  getSubjectDoaminList,
  dataSourcesList,
  registerCatalogSave,
  existDamName,
  getRegisterCatalogDetail,
  getRegisterCatalogTableDetail,
  registerCatalogUpdate,
  registerCatalogTableSave,
  registerCatalogTableUpdate,
  registerCatalogTableDelete,
  getRegisterCatalogTableList,
  checkDamTableChange
} from "@/api/modules/dataAsset";
import { ContentWrap } from '@/components/ContentWrap';
import importTableField from "./importTableField.vue";
import { useValidator } from '@/hooks/useValidator';
import useDataAssetStore from "@/store/modules/dataAsset";
import { handleContentWrapView, scrollLastRowToView, changeNum } from '@/utils/common';

const { proxy } = getCurrentInstance() as any;
const { required, checkExistName } = useValidator();
const userStore = useUserStore();
const assetStore = useDataAssetStore();
const router = useRouter();
const route = useRoute();
const fullPath = route.fullPath;
const damGuid = ref(route.query.guid);
const fullscreenLoading = ref(false);
const damTypes: any = ref([]);
/** 所属主题多级列表 */
const subjectDomainListData: any = ref([]);
const detailInfo: any = ref({});
const getParentAreaPromise: any = ref(null);
const getAreaDataPromise: any = ref({});
const getAreaDatas: any = ref({});
const parentAreaData: any = ref([]);

const getArea = (node, resolve) => {
  const { level } = node
  let params = {
    parentId: node.value
  }
  if (!node.value) {
    if (getParentAreaPromise.value) {
      getParentAreaPromise.value.then((res: any) => {
        resolve(res);
      })
    } else {
      resolve(parentAreaData.value);
    }
    return;
  }
  if (node.loaded) {
    resolve([]);
    return;
  }
  if (getAreaDatas.value[node.value]?.length) {
    resolve(getAreaDatas.value[node.value]);
    return;
  }
  if (!getAreaDataPromise.value[node.value]) {
    getAreaDataPromise.value[node.value] = getAreaData(params).then((res: any) => {
      node.loaded = true;
      getAreaDataPromise.value[node.value] = null;
      if (res?.code == proxy.$passCode) {
        const data = res.data ?? []
        data.map(item => {
          item.leaf = level >= 1
        })
        resolve(data)
        getAreaDatas.value[node.value] = data;
        return data;
      }
    })
  } else {
    getAreaDataPromise.value[node.value].then((data) => {
      getAreaDataPromise.value[node.value] = null;
      node.loaded = true;
      data.map(item => {
        item.leaf = level >= 1
      })
      resolve(data)
    })
  }
}

const baseInfoExpand = ref(true);
const assetTableInfoExpand = ref(true);
const importTableFieldRef = ref();

const baseInfoFormRef = ref();

const baseInfoFormItems = ref([
  {
    label: '资源名称',
    type: 'input',
    placeholder: '请输入',
    field: 'damName',
    maxlength: 20,
    default: '',
    required: true
  },
  {
    label: '资源类型',
    type: 'select',
    placeholder: '请选择',
    field: 'damType',
    default: '1',
    options: damTypes.value,
    props: {
      value: 'paramValue',
      label: 'paramName'
    },
    required: true,
    visible: true
  },
  {
    label: '所属主题',
    type: 'tree-select',
    placeholder: '请选择',
    field: 'subjectDomain',
    options: subjectDomainListData.value,
    showAllLevels: false,
    checkStrictly: false,//只能选择叶子节点。
    lazy: false,
    props: {
      label: "paramName",
      value: "paramValue",
    },
    filterable: true,
    clearable: true,
    default: '',
    required: true
  },
  {
    label: '数据覆盖地域',
    type: 'checkbox-select',
    placeholder: '全国',
    field: 'coverageArea',
    default: "",
    trueValue: 'all',
    falseValue: '',
    isRequire: true,
    children: [
      {
        label: '',
        type: "cascader",
        placeholder: "请选择",
        field: "coverageAreas",
        default: [],
        showAllLevels: true,
        props: {
          label: 'name',
          value: 'guid',
          lazy: true,
          lazyLoad: getArea,
          multiple: true,
        },
        collapse: true,
        tagsTooltip: true,
        //     filterable: true,
        clearable: true,
        required: true,
        col: 'checkbox-right',
        visible: true
      }
    ],
    clearable: false,
    required: true,
    col: 'checkbox-cascader'
  },
  {
    label: '数据库类型',
    type: 'select',
    placeholder: '请选择',
    field: 'databaseType',
    default: 'Mysql',
    options: [{
      value: 'Mysql',
      label: 'Mysql',
    }, {
      value: 'Oracle',
      label: 'Oracle',
    }],
    clearable: true,
    required: false,
    visible: true
  },
  {
    label: "数据来源",
    type: "radio-group",
    placeholder: "",
    field: "dataSources",
    block: true,
    default: 1,
    options: dataSourcesList,
    required: true,
  },
  {
    label: '资源描述',
    type: 'textarea',
    placeholder: '该数据资源主要包含的信息，数据更新方式等。',
    field: 'propertyDescription',
    default: '',
    focusValue: true,
    block: true,
    maxlength: 500,
    clearable: true,
    required: true,
  },
  {
    label: '应用场景描述',
    type: 'textarea',
    placeholder: '该数据资源应用场景是***，基于**、**、**等各类的数据，结合AI算法为**提供***模型，提高***服务能力，优化公司的成本及效率。',
    field: 'sceneDescription',
    focusValue: true,
    default: '',
    clearable: true,
    required: true,
    block: true,
    example: '示例：该数据资源应用场景是数字化市场营销，基于LBS、销售数据、人力数据等各类的数据，结合AI算法为客户提供精准营销模型，提高营销人员精准服务客户的能力，优化公司的成本及效率。',
    // col: 'col2 mr8'
  },
  {
    label: '应用场景限制',
    type: 'textarea',
    placeholder: '请输入',
    field: 'sceneLimit',
    default: '',
    clearable: true,
    required: true,
    block: true,
    exampleBtns: [{
      value: '无限制',
      label: '无限制'
    }, {
      value: '主体限制',
      label: '主体限制：仅限于国企央企政府使用；不可同行业竞争对手使用等；'
    }, {
      value: '行业限制',
      label: '行业限制：仅可用于企业征信场景等'
    }],
    example: "",
    // col: 'col2'
  },
]);

const checkedInfo = ref({});

const baseInfoFormRules = ref({
  damName: [required('请填写资源名称'), checkExistName(checkedInfo.value, existDamName, detailInfo.value, 'damName')],
  damType: [required('请选择资源类型')],
  subjectDomain: [required('请选择所属主题')],
  coverageAreas: [required('请选择数据覆盖地域')],
 // databaseType: [required('请选择数据库类型')],
  propertyDescription: [required('请填写资源描述')],
  sceneDescription: [required('请填写应用场景描述')],
  sceneLimit: [required('请填写应用场景限制')],
});

const getTableFieldPromise: any = ref({});
const assetTableRef = ref();
const assetDataTableInfo = ref({
  id: 'asset-data-table',
  rowKey: 'guid',
  showPage: false,
  minHeight: '200px',
  height: '200px',
  loading: false,
  fields: [
    { label: "序号", type: "index", width: 56, align: "center" },
    { label: "表中文名称", field: "tableChName", width: 150, align: "left" },
    { label: "表英文名称", field: "tableName", width: 150, align: "left" },
    { label: "表数据总数(条)", field: "dataCount", width: 150, align: "right", getName: (scope) => {
      return scope.row["dataCount"] == null ? '--' : changeNum(scope.row["dataCount"], 0) 
    }  },
    { label: "描述", field: "description", width: 240 },
    { label: "修改人", field: "updateUserName", width: 140 },
    { label: "修改时间", field: "updateTime", width: 180 },
  ],
  data: <any[]>[],
  actionInfo: {
    width: damGuid.value ? 260 : 160,
    btns: (scope) => {
      let btns = [{
        label: "编辑", value: "edit", click: (scope) => {
          //分为未建表的编辑，和已建表的编辑。
          let row = scope.row;
          importTableEditIndex.value = scope.$index;
          if (row.guid) {//已建表的
            if (!row.damCatalogTableField) {
              if (getTableFieldPromise.value[row.guid]) {
                return;
              }
              getTableFieldPromise.value[row.guid] = getRegisterCatalogTableDetail(row.guid).then((res: any) => {
                delete getTableFieldPromise.value[row.guid];
                if (res.code == proxy.$passCode) {
                  row.damCatalogTableField = res.data.damCatalogTableField || [];
                  importTableFieldVisible.value = true;
                  nextTick(() => {
                    importTableFieldRef.value.setTableInfo(row);
                  });
                } else {
                  proxy.$ElMessage.error(res.msg);
                }
              });
            } else {
              importTableFieldVisible.value = true;
              nextTick(() => {
                importTableFieldRef.value.setTableInfo(row);
              });
            }
          } else {
            importTableFieldVisible.value = true;
            nextTick(() => {
              let file = row?.fileUrl ? [{
                name: row?.fileName,
                url: row?.fileUrl
              }] : [];
              importTableFieldRef.value.setFormValue({
                file: file,
                sheetName: row.sheetName
              });
              importTableFieldRef.value.setTableInfo(row);
            });
          }
        }
      }, {
        label: "删除", value: "delete", click: (scope) => {
          //分为未建表的删除，和已建表的删除。
          if (scope.row.guid) {
            let params = baseInfoFormRef.value.formInline;
            /** 只有数据集和api类型时，目录表必填。 */
            if (params.damType == '1' || params.damType == '2') {
              if (assetDataTableInfo.value.data.length == 1) {
                proxy.$ElMessage.warning('当资源类型为数据应用或API时，资源表不能全部被删除');
                return;
              }
            }
            proxy.$openMessageBox('此操作将永久删除该资源表，是否继续？', () => {
              registerCatalogTableDelete({ damGuid: damGuid.value, subjectGuid: scope.row.guid }).then((res: any) => {
                if (res.code == proxy.$passCode) {
                  assetDataTableInfo.value.loading = true;
                  getRegisterCatalogTableList(damGuid.value).then((res: any) => {
                    assetDataTableInfo.value.loading = false;
                    if (res.code == proxy.$passCode) {
                      assetDataTableInfo.value.data = res.data || [];
                    } else {
                      proxy.$ElMessage.error(res.msg);
                    }
                  });
                  proxy.$ElMessage.success('删除成功');
                } else {
                  proxy.$ElMessage.error(res.msg);
                }
              })
            }, () => {
              proxy.$ElMessage.info("已取消删除");
            });
          } else {
            proxy.$openMessageBox('此操作将永久删除该资源表，是否继续？', () => {
              let index = scope.$index;
              assetDataTableInfo.value.data.splice(index, 1);
              proxy.$ElMessage.success('删除成功');
            }, () => {
              proxy.$ElMessage.info("已取消删除");
            });
          }
        }
      }];
      if (scope.row.guid) {
        btns.push({
          label: "导入数据", value: "importData", click: (scope) => {
            let row = scope.row;
            router.push({
              name: "importFileDam",
              query: {
                bizGuid: row.guid,
                name: row.tableChName,
                isfileImport: '2',
                damName: route.query.damName
              }
            })
          }
        });
        btns.push({
          label: "查看样例数据", value: "viewData", click: (scope) => {
            let row = scope.row;
            router.push({
              name: 'damTableDataView',
              query: {
                guid: row.guid,
                name: row.tableChName,
                damName: detailInfo.value.damName
              }
            });
          }
        });
      }
      return btns;
    }
  }
});

const setFormItems = (val) => {
  val = Object.assign({ dataSources: 1, damType: 1, databaseType: 'Mysql' }, val);
  baseInfoFormItems.value.forEach(item => {
    item.default = val[item.field];
    if (item.children?.length) {
      item.children[0].default = val[item.children[0].field] || [];
    }
  });
}

const baseSelectChange = (val, item, row) => {
  if (item.field == 'damType') {
    if (row.damType != '1' && row.damType != '2') {
      row.databaseType = '';
      setFormItems(row);
    } else {
      if (!row.databaseType) {
        row.databaseType = 'Mysql';
        setFormItems(row);
      }
    }
  }
}

const handleBaseInfoCheckboxChange = (val, info) => {
  let item = baseInfoFormItems.value.find(b => b.field == 'coverageArea');
  item && (item.default = val);
  item && item.children?.length && (item.children[0].visible = !val);
  setFormItems(info);
}

const handleCreateTable = () => {
  if (assetDataTableInfo.value.data.length >= 15) {
    proxy.$ElMessage.error('最多允许添加15张资源表');
    return;
  }
  importTableFieldVisible.value = true;
}

const importTableFieldVisible = ref(false);

/** 记录当前正在编辑的资产表的序号。 */
const importTableEditIndex: any = ref(null);

const addAssetTable = () => {
  importTableFieldVisible.value = true;
}

onBeforeMount(() => {
  getParentAreaPromise.value = getAreaData({ parentId: null }).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      parentAreaData.value = res.data ?? [];
      return parentAreaData.value;
    }
  })
  if (damGuid.value) {
    fullscreenLoading.value = true;
    getRegisterCatalogDetail(damGuid.value).then((res: any) => {
      fullscreenLoading.value = false;
      if (res.code == proxy.$passCode) {
        detailInfo.value = res.data || {};
        baseInfoFormItems.value.forEach((item: any) => {
          item.default = detailInfo.value[item.field];
          if (item.field == 'subjectDomain') {
            let tree = detailInfo.value.subjectDomainTree?.[0];
            if (tree) {
              if (!tree.children[0]?.children?.[0]?.children) {
                item.expandKeys = tree.children[0]?.children?.[0].parentGuids;
              } else if (!tree.children[0]?.children?.[0]?.children?.[0]?.children) {
                item.expandKeys = tree.children[0]?.children?.[0]?.children?.[0]?.parentGuids;
              }
            }
          }
          else if (item.field == 'coverageArea') {
            if (detailInfo.value.coverageArea[0][0] == 'all') {
              item.default = 'all';
              if (item.children?.length) {
                item.children[0].visible = false;
                item.children[0].default = [];
              }
            } else {
              item.default = '';
              if (item.children?.length) {
                item.children[0].visible = true;
                item.children[0].default = [detailInfo.value.coverageArea[0]] as any;
                let p: any = [];
                detailInfo.value.coverageArea.forEach(area => {
                  if (p.includes(area[0])) {
                    return;
                  }
                  p.push(area[0]);
                  getArea({ value: area[0], level: 1 }, () => { })
                });
                let ps: any = []
                for (const key in getAreaDataPromise.value) {
                  ps.push(getAreaDataPromise.value[key])
                }
                Promise.all(ps).then(() => {
                  item.children[0].default = detailInfo.value.coverageArea;
                });
              }
            }
          }
        });
        checkedInfo.value = {};
        nextTick(() => {
          baseInfoFormRules.value.damName[1] = checkExistName(checkedInfo.value, existDamName, detailInfo.value, 'damName');
        })
        assetDataTableInfo.value.data = detailInfo.value.damCatalogTableInfo;
      } else {
        proxy.$ElMessage.error(res.msg);
        fullscreenLoading.value = false;
      }
    });
  }
  getDamTypesList().then((res: any) => {
    if (res.code == proxy.$passCode) {
      damTypes.value = res.data || [];
      let item = baseInfoFormItems.value.find(item => item.field == 'damType');
      item && (item.options = damTypes.value);
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
  getSubjectDoaminList().then((res: any) => {
    if (res.code == proxy.$passCode) {
      subjectDomainListData.value = res.data || [];
      let item = baseInfoFormItems.value.find(item => item.field == 'subjectDomain');
      item && (item.options = subjectDomainListData.value);
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
});

const cancel = () => {
  proxy.$openMessageBox("当前页面尚未保存，确定放弃修改吗？", () => {
    userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
    router.push({
      path: '/data-asset/register-catalog'
    });
  }, () => {
    proxy.$ElMessage.info("已取消");
  });
}

const save = () => {
  baseInfoFormRef.value?.ruleFormRef?.validate((valid, errorItem) => {
    if (valid) {
      let params = { ...baseInfoFormRef.value.formInline };
      /** 只有数据集和api类型时，目录表必填。 */
      if (params.damType == '1' || params.damType == '2') {
        if (!params.databaseType) {
          proxy.$ElMessage.error('资源类型为数据集或API时，数据库类型必填');
          baseInfoExpand.value = true;
          return;
        }
        if (!assetDataTableInfo.value.data) {
          proxy.$ElMessage.error('资源类型为数据集或API时，必需添加资源表');
          assetTableInfoExpand.value = true;
          nextTick(() => {
            setTimeout(() => {
              handleContentWrapView('tableInfo');
            }, 500)
          });
          return;
        }
      }
      if (params.coverageArea == 'all') {
        params.coverageArea = [['all']];
      } else if (!params.coverageArea) {
        params.coverageArea = params.coverageAreas;
      }
      if (damGuid.value) {
        params.guid = damGuid.value;
        fullscreenLoading.value = true;
        registerCatalogUpdate(params).then((res: any) => {
          fullscreenLoading.value = false;
          if (res.code == proxy.$passCode) {
            proxy.$ElMessage.success('资源目录编辑提交成功');
            router.push({
              name: 'registerCatalogManagement'
            });
            userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
            assetStore.setDamCatalogRefresh(true);
          } else {
            proxy.$ElMessage.error(res.msg);
          }
        });
      } else {
        params.damCatalogTableInfo = assetDataTableInfo.value.data;
        fullscreenLoading.value = true;
        registerCatalogSave(params).then((res: any) => {
          fullscreenLoading.value = false;
          if (res.code == proxy.$passCode) {
            proxy.$ElMessage.success('资源目录新建提交成功');
            router.push({
              name: 'registerCatalogManagement'
            });
            userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
            assetStore.setDamCatalogRefresh(true);
          } else {
            proxy.$ElMessage.error(res.msg);
          }
        });
      }
    } else {
      baseInfoExpand.value = true;
      nextTick(() => {
        setTimeout(() => {
          var obj = Object.keys(errorItem);
          baseInfoFormRef.value.ruleFormRef.scrollToField(obj[0])
        }, 500)
      });
    }
  });
}

const handleCancelImport = () => {
  importTableEditIndex.value = null
  importTableFieldVisible.value = false;
}

const handleImportSave = (val) => {
  // 先校验表名是否重名。
  let names: string[] = [];
  assetDataTableInfo.value.data.forEach((d, index) => {
    if (importTableEditIndex.value == index) {
      return;
    }
    names.push(d.tableName);
  })
  if (names.includes(val.tableName)) {
    proxy.$ElMessage.error('同一资源内的表英文名称不能重名');
    return;
  }
  if (!damGuid.value) {
    importTableFieldRef.value.fullscreenLoading = true;
    checkDamTableChange([val]).then((res: any) => {
      importTableFieldRef.value.fullscreenLoading = false;
      if (res.code == proxy.$passCode) {
        importTableFieldVisible.value = false;
        if (importTableEditIndex.value !== null) {
          assetDataTableInfo.value.data[importTableEditIndex.value] = val;
          proxy.$ElMessage.success('资源表编辑成功');
        } else {
          assetDataTableInfo.value.data.push(val);
          proxy.$ElMessage.success('资源表添加成功');
          nextTick(() => {
            setTimeout(() => {
              scrollLastRowToView(assetTableRef.value?.tableRef, assetDataTableInfo.value.data.length);
            }, 1000)
          })
        }
        importTableEditIndex.value = null;
      } else {
        proxy.$ElMessage.error(res.msg);
      }
    });
  } else {
    // 调用接口。
    val.damGuid = damGuid.value;
    if (importTableEditIndex.value !== null) {
      importTableFieldRef.value.fullscreenLoading = true;
      registerCatalogTableUpdate(val).then((res: any) => {
        importTableFieldRef.value.fullscreenLoading = false;
        if (res.code == proxy.$passCode) {
          assetDataTableInfo.value.loading = true;
          getRegisterCatalogTableList(damGuid.value).then((res: any) => {
            assetDataTableInfo.value.loading = false;
            if (res.code == proxy.$passCode) {
              assetDataTableInfo.value.data = res.data || [];
            } else {
              proxy.$ElMessage.error(res.msg);
            }
          });
          proxy.$ElMessage.success('资源表编辑成功');
          importTableFieldVisible.value = false;
          importTableEditIndex.value = null;
        } else {
          proxy.$ElMessage.error(res.msg);
        }
      });
    } else {
      importTableFieldRef.value.fullscreenLoading = true;
      registerCatalogTableSave([val]).then((res: any) => {
        importTableFieldRef.value.fullscreenLoading = false;
        if (res.code == proxy.$passCode) {
          assetDataTableInfo.value.loading = true;
          getRegisterCatalogTableList(damGuid.value).then((res: any) => {
            assetDataTableInfo.value.loading = false;
            if (res.code == proxy.$passCode) {
              assetDataTableInfo.value.data = res.data || [];
            } else {
              proxy.$ElMessage.error(res.msg);
            }
          });
          proxy.$ElMessage.success('资源表添加成功');
          importTableFieldVisible.value = false;
          nextTick(() => {
            setTimeout(() => {
              scrollLastRowToView(assetTableRef.value?.tableRef, assetDataTableInfo.value.data.length);
            }, 1000)
          })
          importTableEditIndex.value = null;
        } else {
          proxy.$ElMessage.error(res.msg);
        }
      });
    }
  }
}

</script>

<template>
  <div class="container_wrap full" v-loading="fullscreenLoading">
    <div class="content_main">
      <ContentWrap id="id-baseInfo" title="资源基本信息" description="" :isExpand="baseInfoExpand" :expand-swicth="true"
        class="mb16" @expand="(v) => baseInfoExpand = v">
        <Form ref="baseInfoFormRef" :itemList="baseInfoFormItems" formId="base-info-form" :rules="baseInfoFormRules"  @selectChange="baseSelectChange"
          @checkboxChange="handleBaseInfoCheckboxChange" col="col3" />
      </ContentWrap>
      <ContentWrap id="id-tableInfo" title="资源表" description="" :expand-swicth="true" :isExpand="assetTableInfoExpand"
        @expand="(v) => assetTableInfoExpand = v">
        <div v-show="assetDataTableInfo.data.length" class="tools_btns">
          <el-button type="primary" @click="handleCreateTable" v-preReClick>添加</el-button>
        </div>
        <Table ref="assetTableRef" v-show="assetDataTableInfo.data.length" :tableInfo="assetDataTableInfo"
          class="mb10" />
        <div class="no-data" v-show="!assetDataTableInfo.data.length">暂无资源表 <span class="text_btn"
            @click="addAssetTable">添加</span></div>
      </ContentWrap>
    </div>
    <div class="bottom_tool_wrap" v-show="!importTableFieldVisible">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save" v-preReClick>提交</el-button>
    </div>
    <importTableField ref="importTableFieldRef" style="z-index: 2;position: absolute;background: #fff;top:0"
      v-if="importTableFieldVisible" @cancelImport="handleCancelImport" @save="handleImportSave">
    </importTableField>
  </div>
</template>

<style lang="scss" scoped>
.content_main {
  height: calc(100% - 40px);
  padding: 16px;
  overflow: hidden auto;
  position: sticky;
}

.bottom_tool_wrap {
  height: 40px;
  padding: 0 16px;
  border-top: 1px solid #d9d9d9;
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.el-form) {
  .checkbox-cascader {
    display: flex;

    .el-cascader {
      margin-left: 8px;
    }
  }

  .checkbox-right {
    width: calc(100% - 50px);

    &.el-form-item {
      margin-bottom: 0px;
      margin-right: 0px;
      width: 100%;
    }
  }
}

.tools_btns {
  margin-bottom: 8px;
}

.no-data {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: break-spaces;
  color: #999;
}
</style>