<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();

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
});

//记录每次点击的节点。
const handleTreeNodeChange = (checkedObj, id, nodeObj) => {
  debugger
  let treeRefs = treeRef.value.treeRef;
  let checkedKeys = checkedObj.checkedObj || [];//全勾选的所有节点。
  let halfCheckedKeys = checkedObj.halfCheckedKeys || [];//半勾选的节点。
  //思路，一个个的分类判断是否在半勾选，如果是，就将其勾选的子节点获取出来。
  /** 先damType */
  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);

/** 触发搜索查询 */
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);
}

const searchEnterFun = (event) => {
  isEnter.value = true;
  event.target?.blur();
}

/** 查询表格数据 */
const getSearchData = (clear = false) => {

}

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", disabled: (scope) => {
      return scope.row.contractStatus == '06';
    }, click: (scope) => {
      if (scope.row.contractStatus == '06') {
        return;
      }
      router.push({
        name: 'productSortCatalogDetail',
        query: {
          guid: scope.row.dataProductGuid,
          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，是否申请过的不能再申请？

        }
      }]
    }
  }
});

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
    });
    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
    });
    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>