<template>
  <div class="container_wrap full flex">
    <!-- 侧边栏容器，放置产品分类树 -->
    <div class="aside_wrap">
      <div class="aside_title">产品分类</div>
      <Tree ref="treeRef" :treeInfo="treeInfo" @nodeCheck="handleTreeNodeChange" />
    </div>
     <!-- 主内容区域，包含搜索框和表格 -->
    <div class="main_wrap">
      <div class="header-bg">
        <el-input v-model.trim="page.searchKey" size="large" placeholder="请输入关键字搜索" :prefix-icon="Search"
          @blur="toSearch(true, true)" @keyup.enter.native="searchEnterFun" clearable />
      </div>
      <Table :tableInfo="tableInfo" @tablePageChange="tablePageChange"
        style="height: calc(100% - 96px);margin: 16px 16px 0px;" />
    </div>
  </div>
</template>

<script lang="ts" setup name="productCatalogManage">
import { commonPageConfig } from '@/components/PageNav';
import { Search } from '@element-plus/icons-vue';
import {
  getDamTypesList
} from "@/api/modules/dataAsset";
import { USERROLE } from '@/utils/enum';

const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance() as any;

/**
 * 数据源选项列表
 * 包含四种不同类型的数据来源
 */
const dataSourceList = ref([{
  value: 1,
  label: '授权数据',
}, {
  value: 2,
  label: '自有数据',
},
{
  value: 3,
  label: '购买数据',
},
{
  value: 4,
  label: '其他来源',
}]);

/** 
 * 判断当前用户角色是否为数据使用方 
 * 如果是使用方，则显示特定的操作按钮
 */
const isDataUse = computed(() => {
  return localStorage.getItem('userRole') == USERROLE.USE;
})

const treeRef = ref(); // Tree组件引用，用于访问树组件实例

/**
 * 树形控件配置信息
 * 包含树的基本配置、数据结构定义等
 */
const treeInfo = ref({
  id: "data-product-tree", // 树的唯一标识
  filter: true, // 是否启用过滤功能
  queryValue: "", // 过滤输入框的值
  queryPlaceholder: "请输入关键字搜索", // 过滤输入框提示文字
  showCheckbox: true, // 显示复选框
  checkStrictly: false, // 不严格遵循父子节点不互相关联
  props: {
    label: "label", // 节点标签字段
    value: "value", // 节点值字段
    children: 'childDictList' // 子节点数据字段
  },
  nodeKey: 'value', // 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
  expandOnNodeClick: false, // 点击节点时不展开或收缩节点
  data: <any>[], // 树形数据
  loading: false // 加载状态
});

/**
 * 处理树节点选择变化事件
 * 处理半选和全选节点的逻辑
 * @param checkedObj - 选中的对象信息
 * @param id - 节点ID
 * @param nodeObj - 节点对象
 */
const handleTreeNodeChange = (checkedObj, id, nodeObj) => {
  debugger
  let treeRefs = treeRef.value.treeRef;
  let checkedKeys = checkedObj.checkedObj || []; // 全勾选的所有节点
  let halfCheckedKeys = checkedObj.halfCheckedKeys || []; // 半勾选的节点

  // 思路：一个个的分类判断是否在半勾选，如果是，就将其勾选的子节点获取出来

  /** 产品类型 */
  if (halfCheckedKeys.includes('damType')) {
    // 获取勾选的子节点
    treeRefs.getNode("damType").childNodes?.filter(c => c.checked == true);
  }
  // 如果是全选，则不需要处理传参

  /** 数据来源 */
  if (halfCheckedKeys.includes('dataSources')) {

  }

  /** 行业分类 */

  /** 机构分类 */

  /** 领域及应用场景 */
  if (halfCheckedKeys.includes('domain')) {
    // 计算领域下勾选的子节点，同时判断医疗健康和工业制造
  }
}

/**
 * 页面配置信息
 * 包含分页、搜索等公共配置
 */
const page = ref({
  ...commonPageConfig, // 继承通用页面配置
  searchKey: '', // 搜索关键词
});

const oldKeyWord = ref(""); // 记录上次输入的关键字，避免重复搜索
const isEnter = ref(false); // 标识是否通过回车键触发搜索

/**
 * 触发搜索查询
 * @param clear - 是否清空页码，默认为true
 * @param isBlur - 是否是失焦触发，默认为false
 */
const toSearch = (clear: boolean = true, isBlur: boolean = false) => {
  if (clear) {
    page.value.curr = 1 // 重置为第一页
  }
  // 如果是失焦且不是回车触发，且关键词没有变化，则不执行搜索
  if (isBlur && !isEnter.value && oldKeyWord.value === page.value.searchKey) {
    return;
  }
  isEnter.value = false; // 重置回车状态
  oldKeyWord.value = page.value.searchKey; // 更新关键词记录
  getSearchData(clear);
}

/**
 * 回车搜索事件处理
 * 在输入框按下回车键时触发
 * @param event - 键盘事件对象
 */
const searchEnterFun = (event) => {
  isEnter.value = true; // 标记为回车触发
  event.target?.blur(); // 输入框失去焦点
}

/**
 * 查询表格数据
 * 根据筛选条件获取表格数据
 * @param clear - 是否清除现有数据
 */
const getSearchData = (clear = false) => {
  // TODO: 实现具体的数据获取逻辑
}

/**
 * 表格配置信息
 * 定义表格列、数据、分页、操作按钮等
 */
const tableInfo = ref({
  id: 'contract-table', // 表格唯一标识
  rowKey: 'guid', // 行数据的唯一标识
  loading: false, // 加载状态
  // 表格列定义
  fields: [
    {
      label: "序号",
      type: "index",
      width: 56,
      align: "center"
    },
    {
      label: "数据产品名称",
      field: "dataProductName",
      width: 160,
      type: "text_btn",
      columClass: 'text_btn',
      value: "detail",
      // 合同状态为06时禁用点击
      disabled: (scope) => {
        return scope.row.contractStatus == '06';
      },
      // 点击查看详细信息
      click: (scope) => {
        if (scope.row.contractStatus == '06') {
          return;
        }
        router.push({
          name: 'productSortCatalogDetail',
          query: {
            guid: scope.row.dataProductGuid, // 产品GUID
            type: 'detail', // 查看类型
            foundMode: 'use', // 发现模式
            name: scope.row.dataProductName, // 产品名称
          }
        });
      }
    },
    { label: "产品类型", field: "damTypeName", width: 100 },
    { label: "应用场景", field: "scenarioName", width: 120 },
    { label: "行业分类", field: "industryName", width: 140 },
    { label: "机构分类", field: "institutionTypeName", width: 120 },
    {
      label: "数据来源",
      field: "dataSources",
      width: 100,
      // 获取数据源名称
      getName: (scope) => {
        return scope.row.dataSources && dataSourceList.value.find(i => i.value == scope.row.dataSources)?.label || '--'
      }
    },
    { label: "上架时间", field: "listingTime", width: 170 },
  ],
  data: [{}], // 表格数据
  // 分页配置
  page: {
    type: "normal", // 分页类型
    rows: 0, // 总行数
    ...page.value, // 继承页面配置
  },
  // 操作按钮配置
  actionInfo: {
    label: "操作",
    type: "btn",
    show: isDataUse.value, // 仅对数据使用方显示
    width: 120,
    // 操作按钮定义
    btns: (scope) => {
      return [{
        value: 'approve',
        label: "数据申请",
        // 点击申请数据
        click: (scope) => {
          // TODO，是否申请过的不能再申请？
          router.push({
            name: 'productApplicationEdit',
            query: {
              damGuid: scope.row.guid, // 数据资产GUID
              damName: scope.row.dataProductName // 数据产品名称
            }
          });
        }
      }]
    }
  }
});

/**
 * 表格分页变化事件处理
 * 当分页信息改变时更新页面配置并重新加载数据
 * @param info - 分页信息对象
 */
const tablePageChange = (info) => {
  page.value.curr = Number(info.curr); // 更新当前页
  page.value.limit = Number(info.limit); // 更新每页条数
  tableInfo.value.page.curr = page.value.curr; // 同步到表格分页
  tableInfo.value.page.limit = page.value.limit;
  getSearchData(); // 重新获取数据
};

// 数据字典变量定义
const damTypes: any = ref([]); // 产品类型字典列表
const subjectDomainListData: any = ref([]); // 主题域列表
const industryDictList: any = ref([]); // 行业分类字典列表
const domainDictList: any = ref([]); // 领域字典列表
const institutionTypeDictList: any = ref([]); // 机构类型字典列表
const medDepartmentCodeList: any = ref([]); // 科室代码列表

/**
 * 组件挂载前生命周期钩子
 * 初始化树形控件所需的各种字典数据
 */
onBeforeMount(() => {
  treeInfo.value.loading = true; // 开启加载状态

  // 并发请求所有字典数据
  let psAll: any[] = [];

  // 获取产品类型字典
  psAll.push(getDamTypesList({
    dictType: "资产类型",
  }).then((res: any) => {
    if (res.code == proxy.$passCode) {
      damTypes.value = res.data || [];
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  }))

  // 获取行业分类字典（一级）
  psAll.push(getDamTypesList({
    dictType: "行业分类",
    level: 1
  }).then((res: any) => {
    if (res.code == proxy.$passCode) {
      industryDictList.value = res.data || [];
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  }))

  // 获取领域字典
  psAll.push(getDamTypesList({ dictType: '领域' }).then((res: any) => {
    if (res.code == proxy.$passCode) {
      domainDictList.value = res.data || [];
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  }));

  // 获取机构类型字典
  psAll.push(getDamTypesList({
    dictType: "组织机构性质",
  }).then((res: any) => {
    if (res.code == proxy.$passCode) {
      institutionTypeDictList.value = res.data || [];
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  }))

  // 获取主题域字典
  psAll.push(getDamTypesList({
    dictType: "数据资产目录主题名称",
  }).then((res: any) => {
    if (res.code == proxy.$passCode) {
      subjectDomainListData.value = res.data?.find(d => d.value == '1')?.childDictList || [];
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  }))

  // 获取科室字典
  psAll.push(getDamTypesList({
    dictType: "科室",
  }).then((res: any) => {
    if (res.code == proxy.$passCode) {
      medDepartmentCodeList.value = res.data || [];
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  }));

  // 等待所有请求完成，然后构建树形数据
  Promise.all(psAll).then(() => {
    treeInfo.value.loading = false; // 关闭加载状态
    treeInfo.value.data = []; // 清空原有数据

    // 构建树形结构数据
    treeInfo.value.data.push({
      value: 'damType',
      label: '产品类型',
      childDictList: damTypes.value
    });

    // 特殊处理医疗健康领域（003）
    let item = domainDictList.value.find(i => i.value == '003'); // 医疗健康，下级应用场景和所属科室
    let childDictList = item.childDictList || [];
    item.childDictList = [{
      value: 'scenario',
      label: '应用场景',
      childDictList: childDictList
    }];
    // 添加所属科室节点
    item.childDictList.push({
      value: 'medDepartmentCode',
      label: '所属科室',
      childDictList: medDepartmentCodeList.value
    });

    // 特殊处理工业制造领域（004）
    let item4 = domainDictList.value.find(i => i.value == '004'); // 工业制造
    let childDictList4 = item4.childDictList || [];
    item4.childDictList = [{
      value: 'scenario',
      label: '应用场景',
      childDictList: childDictList4
    }];
    // 添加所属主题节点
    item4.childDictList.push({
      value: 'subjectDomain',
      label: '所属主题',
      childDictList: subjectDomainListData.value
    });

    // 添加领域及应用场景节点
    treeInfo.value.data.push({
      value: 'domain',
      label: '领域及应用场景',
      childDictList: domainDictList.value // TODO,需要带上主题和科室
    });

    // 添加数据来源节点
    treeInfo.value.data.push({
      value: 'dataSource',
      label: '数据来源',
      childDictList: dataSourceList.value
    });

    // 添加行业分类节点
    treeInfo.value.data.push({
      value: 'industry',
      label: '行业分类',
      childDictList: industryDictList.value
    });

    // 添加机构分类节点
    treeInfo.value.data.push({
      value: 'institutionType',
      label: '机构分类',
      childDictList: institutionTypeDictList.value
    });
  }).catch(() => {
    treeInfo.value.loading = false; // 出错时关闭加载状态
  })
})
</script>

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

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

    .aside_title {
      display: inline-block;
    }
  }

  .tree_panel {
    height: calc(100% - 36px);
    padding-top: 0;

    :deep(.el-tree) {
      margin: 0;
      overflow: hidden auto;
    }
  }

}

.container_wrap.flex {
  .main_wrap {
    padding: 0px;
  }
}

.header-bg {
  height: 80px;
  background-image: url('@/assets/images/product-catalog-bg.png');
  background-size: cover;
  /* 背景图覆盖整个元素 */
  background-position: center;
  /* 背景图居中 */
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;

  .el-input {
    width: 60%;
  }
}
</style>