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

<script lang="ts" setup name="registerCatalogManagement">
import { ref } from "vue";
import TableTools from "@/components/Tools/table_tools.vue";
import { useRouter, useRoute } from "vue-router";
import {
  getDamCatalogTable,
  registerCatalogDelete,
  getDamTypesList,
  getDamCatalogRightMainList,
  getDataReceiveContract
} from "@/api/modules/dataAsset";
import { commonPageConfig } from "@/utils/enum";
import useDataRegisterCatalogStore from "@/store/modules/dataRegisterCatalog";
import useUserStore from "@/store/modules/user";
import deliverUploadDialog from "./components/deliverUploadDialog.vue";

const userStore = useUserStore();
const userData = JSON.parse(userStore.userData);

const registerStore = useDataRegisterCatalogStore();

const props = defineProps({
  dataSources: {
    type: Number,
    default: 2,
  }
})

const router = useRouter();
const { proxy } = getCurrentInstance() as any;
const damTypes: any = ref([]);

// const subjectDomainListData: any = ref([])
// 登记状态 Y 已登记 N 未登记
const isRegisterOptions = ref<any>([
  { label: "已登记", value: "Y" },
  { label: "未登记", value: "N" },
])

/** 数据列表中所有的权利主体 */
const rightMainTenantList: any = ref([]);

// 数据来源 1:自建 2:加工交付
// const damTypesOptions = ref<any>([
//   { label: "自建", value: 1 },
//   { label: "加工交付", value: 2 },
//   { label: "专区", value: 3 },
//   { label: "江苏专区", value: 4 },
//   // { label: "数据港", value: 5 },
// ])

const searchItemList = ref([
  {
    type: "input",
    label: "",
    field: "damName",
    default: "",
    placeholder: "资源名称",
    clearable: true,
  },
  {
    type: "select",
    label: "",
    field: "damType",
    default: "",
    placeholder: "资源类型",
    clearable: true,
    filterable: true,
    options: damTypes.value,
    props: {
      value: 'value',
      label: 'label'
    }
  },
  // {
  //   label: '所属主题',
  //   type: 'tree-select',
  //   placeholder: '所属主题',
  //   field: 'subjectDomain',
  //   nodeKey: 'value',
  //   options: subjectDomainListData.value,
  //   //showAllLevels: false,
  //   checkStrictly: false,//只能选择叶子节点。
  //   lazy: false,
  //   multiple: true,
  //   collapseTagsTooltip: true,
  //   collapseTags: true,
  //   props: {
  //     label: "label",
  //     value: "value",
  //   },
  //   filterable: true,
  //   clearable: true,
  //   default: [],
  //   showCheckbox: true
  // },
  {
    type: "select",
    label: "",
    field: "rightMain",
    default: "",
    placeholder: "权利主体",
    clearable: true,
    filterable: true,
    options: rightMainTenantList.value,
    props: {
      value: 'right_main',
      label: 'right_main_name'
    }
  },
  {
    type: "select",
    label: "",
    field: "isRegister",
    default: "",
    placeholder: "登记状态",
    clearable: true,
    filterable: true,
    options: isRegisterOptions.value,
    props: {
      value: 'value',
      label: 'label'
    }
  },
]);

const pageInfo = ref({
  ...commonPageConfig,
  rows: 0,
  type: "normal",
  damName: "",
  damType: "",
  tenantGuid: "",
  dataSources: "",
  isRegister: "",
  rightMain: ''
});

const listDataLoading = ref(false);

const listData: any = ref([]);

/** 记录点击省略号弹出菜单的visible */
const cardBtnVisible: any = ref(false);

const currTableData: any = ref({});

const tableBtnClick = (scope, btn) => {
  console.log(scope, btn);
  const type = btn;
  const row = scope;
  currTableData.value = row;
  if (type === "edit") {
    router.push({
     // name: "registerCatalogCreate",
      path: props.dataSources == 1 ? '/data-asset/authordata-catalog/register-ctalog-create' : '/data-asset/register-catalog/register-ctalog-create',
      query: { guid: row.guid, damName: row.damName, foundMode: row.foundMode, dataSources: props.dataSources },
    });
  } else if (type == "delete") {
    proxy.$openMessageBox('此操作将永久删除该资源，是否继续', () => {
      let guids: any = [];
      guids = [row.guid];
      registerCatalogDelete(guids).then((res: any) => {
        if (res.code == proxy.$passCode) {
          pageInfo.value.curr = 1;
          getTableData();
          proxy.$ElMessage.success('删除资源成功');
        } else {
          proxy.$ElMessage.error(res.msg);
        }
      });
    }, () => {
      proxy.$ElMessage.info("已取消删除");
    });
  }
};

const handleDataClick = (item) => {
  //同步过来的要显示详情页面。
  if (item.nodeId || item.isGrounding == 'Y' || item.isUsed == 'Y') {
    router.push({
     // name: "registerCatalogDetail",
      path: props.dataSources == 1 ? '/data-asset/authordata-catalog/register-catalog-detail' : '/data-asset/register-catalog/register-catalog-detail',
      query: { guid: item.guid, type: "asset", dataSources: props.dataSources, foundMode: item.foundMode, name: item.damName },
    });
    return;
  }
  if (item.isRegister == "N" && item.foundMode != 3 && item.foundMode != 4 && item.foundMode != 5) {
    router.push({
      path: props.dataSources == 1 ? '/data-asset/authordata-catalog/register-ctalog-create' : '/data-asset/register-catalog/register-ctalog-create',
     // name: "registerCatalogCreate",
      query: { guid: item.guid, damName: item.damName, foundMode: item.foundMode, dataSources: props.dataSources },
    });
  } else {
    router.push({
     // name: "registerCatalogDetail",
      path: props.dataSources == 1 ? '/data-asset/authordata-catalog/register-catalog-detail' : '/data-asset/register-catalog/register-catalog-detail',
      query: { guid: item.guid, type: "asset", dataSources: props.dataSources, foundMode: item.foundMode, name: item.damName },
    });
  }
};

const getTableData = (isPage = false) => {
  listDataLoading.value = true;
  getDamCatalogTable({
    pageSize: pageInfo.value.limit,
    pageIndex: pageInfo.value.curr,
    damName: pageInfo.value.damName,
    damType: pageInfo.value.damType,
    tenantGuid: pageInfo.value.tenantGuid,
    dataSources: props.dataSources,
    isRegister: pageInfo.value.isRegister,
    rightMain: pageInfo.value.rightMain
  }).then((res: any) => {
    listDataLoading.value = false;
    if (res.code == proxy.$passCode) {
      const data = res.data || {}
      listData.value = data.records || [];
      pageInfo.value.limit = data.pageSize
      pageInfo.value.curr = data.pageIndex
      pageInfo.value.rows = data.totalRows
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  });
  if (isPage) {
    return;
  }
  //TODO。获取权利主体下拉接口，每次表格数据变化都需要更新，除了分页场景。
  getDamCatalogRightMainList().then((res: any) => {
    if (res.code == proxy.$passCode) {
      rightMainTenantList.value = res.data || [];
      let item = searchItemList.value.find(item => item.field == 'rightMain');
      item && (item.options = rightMainTenantList.value);
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
};

const toSearch = (val: any, clear: boolean = false) => {
  pageInfo.value.curr = 1;
  console.log('val', val);
  if (clear) {
    searchItemList.value.map((item) => (item.default = ""));
    pageInfo.value.damName = "";
    pageInfo.value.damType = "";
    pageInfo.value.tenantGuid = "";
    pageInfo.value.isRegister = "";
    pageInfo.value.rightMain = '';
 //   pageInfo.value.dataSources = "";
  } else {
    pageInfo.value.damName = val.damName;
    pageInfo.value.damType = val.damType;
    pageInfo.value.tenantGuid = val.tenantGuid;
    pageInfo.value.isRegister = val.isRegister;
    pageInfo.value.rightMain = val.rightMain;
  //  pageInfo.value.dataSources = val.dataSources;
  }
  getTableData();
};

const pageChange = (info) => {
  pageInfo.value.curr = Number(info.curr);
  pageInfo.value.limit = Number(info.limit);
  getTableData(true);
};

onActivated(() => {
  if (registerStore.isRefresh) {
    //如果是首次加载，则不需要调用
    pageInfo.value.curr = 1;
    getTableData();
    registerStore.set(false);
  }
});

onBeforeMount(() => {
  getDamTypesList({
    dictType: "资产类型",
  }).then((res: any) => {
    if (res.code == proxy.$passCode) {
      damTypes.value = res.data || [];
      let item = searchItemList.value.find(item => item.field == 'damType');
      item && (item.options = damTypes.value);
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
});

const handleCreate = () => {
  router.push({
    path: props.dataSources == 1 ? '/data-asset/authordata-catalog/register-ctalog-create' : '/data-asset/register-catalog/register-ctalog-create',
    query: {
      dataSources: props.dataSources
    }
    // name: "registerCatalogCreate",
  });
};

// 定义 ref 和响应式高度
const tableToolsRef = ref<any>(null);
const tableToolsHeight = ref<any>(0);
const searchHeight = ref<any>(0);

// 获取 TableTools 的高度
const getTableToolsHeight = () => {
  const tableToolsElement: any = tableToolsRef.value;
  if (tableToolsElement) {
    console.log('tableToolsElement', tableToolsElement.offsetHeight);
    tableToolsHeight.value = tableToolsElement.offsetHeight;
    if (tableToolsHeight.value > 40 && tableToolsHeight.value < 80) {
      searchHeight.value = tableToolsHeight.value - 30;
    } else if (tableToolsHeight.value > 80) {
      searchHeight.value = tableToolsHeight.value - 78;
    }
  }
};
// 在组件挂载后获取初始高度
onMounted(() => {
  // 获取初始高度
  nextTick(() => {
    getTableToolsHeight();
  });

  // 监听 window resize 事件来更新高度
  window.addEventListener('resize', handleWindowResize);
});

// 在组件卸载前移除监听
onBeforeUnmount(() => {
  window.removeEventListener('resize', handleWindowResize);
});

// 处理 window resize 事件
const handleWindowResize = () => {
  nextTick(() => {
    getTableToolsHeight();  // 更新 TableTools 高度
  });
};

/** 上传交付物相关逻辑 */
const deliverUploadVisible = ref(false);

const deliverDataReceiveContract = ref([]);

const getReceivePromise: any = ref(null);

const uploadDeliverItem: any = ref({});

const handleClickUploadBtn = (item) => {
  if (getReceivePromise.value) {
    return;
  }
  uploadDeliverItem.value = item;
  getReceivePromise.value = getDataReceiveContract().then((res: any) => {
    getReceivePromise.value = null
    if (res.code == proxy.$passCode) {
      deliverDataReceiveContract.value = res.data || [];
      if (!deliverDataReceiveContract.value?.length) {
        proxy.$ElMessage.error('没有可选择的数据接收方和合同，无法上传交付物');
      } else {
        deliverUploadVisible.value = true;
      }
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
}

const handleUploadClose = (itemGuid) => {
  deliverUploadVisible.value = false
  if (itemGuid) {
    registerStore.set(true);
    router.push({
      path: props.dataSources == 1 ? '/data-asset/authordata-catalog/register-catalog-detail' : '/data-asset/register-catalog/register-catalog-detail',
      //name: "registerCatalogDetail",
      query: { guid: itemGuid, type: "asset", dataSources: props.dataSources },
    });
  }
}

</script>

<template>
  <div class="container_wrap">
    <div class="table_tool_wrap" ref="tableToolsRef">
      <TableTools :searchItems="searchItemList" :searchId="'register-data-search'" @search="toSearch" />
      <!-- <div class="tools_btns">
        <el-button type="primary" @click="handleCreate" v-preReClick>新建</el-button>
      </div> -->
    </div>
    <div class="table_panel_wrap" :style="{ height: `calc(100% - ${tableToolsHeight + 60}px)` }">
      <div class="data-content" v-loading="listDataLoading" :style="{ height: `calc(100% - ${searchHeight}px)` }">
        <div class="v-add" @click.stop="handleCreate">
          <div class=" add-img"></div>
          <div class="add-titile">
            新增数据产品
          </div>
        </div>
        <div v-if="listData.length" v-for="(item, index) in listData" :key="item.guid" @click="handleDataClick(item)"
          :class="{ 'v-border-top': item.isRegister == 'Y', 'card-content': true, 'v-border-no-pass': item.isRegister == 'N' }">
          <div>
            <div class="v-top">
              <div class="top-tip">
                <div class="top-img" v-if="item.isRegister == 'Y'"></div>
                <div class="top-default" v-else></div>
                <div :class="{ 'word': item.isRegister == 'Y', 'word-default': item.isRegister != 'Y' }">{{
                  item.isRegister
                    == 'Y' ?
                    '已登记' : '未登记' }}</div>
              </div>
              <div class="top-titile">
                <ellipsis-tooltip :content="item.damName" class-name="w100f"
                  :refName="'tooltipOver' + item.guid"></ellipsis-tooltip>
              </div>
              <div class="top-des" style="margin-top: 4px;">
                <ellipsis-tooltip class="item" :content="item.propertyDescription">
                  <div class="top-des1">
                    {{ item.propertyDescription }}
                  </div>
                </ellipsis-tooltip>
              </div>
              <div class="label-main"> 
                <div class="dataLabel" v-if="item.damTypeName">{{ item.damTypeName  }}</div>
                <div class="dataLabel" v-show="item.domainName" style="margin-left: 4px;">{{ item.domainName || '--' }}</div>
              </div>
            </div>
            <div class="v-middle">
              <div class="mid-content">
                <div class="left">权利主体</div>
                <div class="right">{{ item.rightMainName || '--' }}</div>
              </div>
              <div class="mid-content">
                <div class="left">产品来源</div>
                <!-- TODO，要改成连接器名称 -->
                <div class="right">{{ item.foundModeName ? item.foundModeName : '自建' }}</div>
              </div>
              <div class="mid-content">
                <div class="left">登记机构</div>
                <div class="right">{{ item.exchangeName || '--' }}</div>
              </div>
            </div>
            <div class="v-bottom">
              <!-- TODO，只有数据交付之后才可以编辑和删除 -->
              <el-button plain v-if="!(item.isRegister == 'Y' || item.foundMode == 2) && item.foundMode != 3 && item.foundMode != 4 && item.foundMode != 5 && item.isGrounding != 'Y' && item.isUsed != 'Y' && !item.nodeId"
                @click.stop="tableBtnClick(item, 'delete')">删除</el-button>
              <el-button plain v-if="!(item.isRegister == 'Y') && item.foundMode != 3 && item.foundMode != 4 && item.isGrounding != 'Y' && item.isUsed != 'Y' && item.foundMode != 5 && !item.nodeId" @click.stop="handleDataClick(item)">编辑</el-button>
              <!-- <el-button plain @click.stop="handleClickUploadBtn(item)" v-if="item.isRegister == 'Y' && item.foundMode != 3 && item.foundMode != 4 && item.foundMode != 5">上传交付物</el-button> -->
              <el-button plain @click.stop="handleDataClick(item)" v-if="(item.isRegister == 'Y' || item.foundMode == 3 || item.foundMode == 4 || item.foundMode == 5 || item.nodeId || item.isGrounding == 'Y' || item.isUsed == 'Y')">详情</el-button>
            </div>
          </div>
        </div>
      </div>

    </div>
    <PageNav :class="[pageInfo.type]" :pageInfo="pageInfo" @pageChange="pageChange" />
    <deliverUploadDialog :uploadDeliverItem="uploadDeliverItem" :visible="deliverUploadVisible" :listData="deliverDataReceiveContract" @close="handleUploadClose"></deliverUploadDialog> 
  </div>

</template>

<style scoped lang="scss">
.container_wrap {
  padding: 0 16px;
}

.table_panel {
  height: calc(100% - 44px) !important;
}

.tools_btns {
  display: flex;
  align-items: center;
}

.table_panel_wrap {
  margin-top: 16px;
  position: relative;

  .card-noData {
    height: 100%;
    width: 100%;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #909399;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.data-content {
  // height: calc(100% - 44px);
  display: flex;
  flex-wrap: wrap;
  gap: 15px 15px;
  align-content: flex-start;
  overflow-y: auto;





  .v-add {
    width: calc(25% - 13px);
    min-width: 220px;
    height: 268px;
    // height: auto;
    background: #FAFAFA;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 4px;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 10;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      /* 影阴效果 */
    }

    .add-img {
      width: 26px;
      height: 26px;
      background: url("../../assets/images/add.png");
      background-size: 100% 100%;
      background-position: center right;
      background-repeat: no-repeat;
    }

    .add-titile {
      margin-top: 11px;
      font-size: 16px;
      color: #666666;
      text-align: center;
      line-height: 24px;
      font-weight: 500;
    }

  }

  .card-content {
    width: calc(25% - 13px);
    min-width: 220px;
    height: 264px;
    // height: auto;
    background: #FAFAFA;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 4px;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
    position: relative;


    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      /* 影阴效果 */
    }

    // .v-add {
    //   width: 100%;
    //   height: 100%;
    //   position: absolute;
    //   display: flex;
    //   flex-direction: column;
    //   justify-content: center;
    //   align-items: center;
    //   top: 50%;
    //   left: 50%;
    //   transform: translate(-50%, -50%);

    //   .add-img {
    //     width: 26px;
    //     height: 26px;
    //     background: url("../../assets/images/add.png");
    //     background-size: 100% 100%;
    //     background-position: center right;
    //     background-repeat: no-repeat;
    //   }

    //   .add-titile {
    //     margin-top: 11px;
    //     font-size: 16px;
    //     color: #666666;
    //     text-align: center;
    //     line-height: 24px;
    //     font-weight: 500;
    //   }

    // }

    .v-top {
      display: flex;
      flex-direction: column;
      background: #FFFFFF;
      padding: 10px 11px;

      .top-tip {
        display: flex;
        align-items: center;

        .top-img {
          width: 18px;
          height: 18px;
          background: url("../../assets/images/passed.svg");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          margin-right: 8px;
        }

        .top-default {
          width: 18px;
          height: 18px;
          background: url("../../assets/images/doing.svg");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          margin-right: 8px;
        }
      }

      .top-titile {
        font-size: 16px;
        color: #212121;
        line-height: 24px;
        font-weight: 600;
        margin-top: 9px;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .label-main {
        display: flex;
        margin-top: 8px;

            .dataLabel {
                background: #F2F2F2;
                border-radius: 2px;
                font-size: 12px;
                color: #666;
                text-align: center;
                line-height: 21px;
                font-weight: 400;
                padding: 0 8px;
              }
      }

      .top-des1 {
        font-size: 14px;
        color: #999999;
        margin-top: 4px;
        line-height: 21px;
        font-weight: 400;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .word {
        color: rgba(27, 168, 84, 1);
      }

      .word-default {
        color: rgba(255, 153, 28, 1);
      }
    }

    .v-middle {
      padding: 0 11px;

      .mid-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 8px;
        //padding: 8px 0;

        .left {
          font-size: 14px;
          color: #999999;
          line-height: 21px;
          white-space: nowrap;
        }

        .right {
          font-size: 14px;
          color: #212121;
          line-height: 21px;
          font-weight: 400;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-left: 2px;
        }
      }
    }

    .v-bottom {
      display: flex;
      justify-content: end;
      padding: 0 11px;
      margin-top: 12px;
    }

    .top-dam-img {
      width: 100%;
      height: 140px;
      background: url("../../assets/images/dam-catalog-default.png");
      background-size: 100% 100%;
      background-position: center right;
      background-repeat: no-repeat;
    }

    .dam-catalog-content {
      height: auto;
      padding: 8px 12px 12px;
      position: relative;
    }

    .title-row {
      display: flex;
      height: 24px;
      line-height: 24px;
      justify-content: space-between;

      .title {
        font-size: 16px;
        color: var(--el-text-color-primary);
        font-weight: 600;
        flex-shrink: 1;
        min-width: 0;
        flex-grow: 1;
        margin-right: 12px;
      }
    }

    .desc {
      height: 42px;
      font-size: 14px;
      color: var(--el-text-color-tip);
      line-height: 21px;
      margin-top: 4px;
      margin-right: 15px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .type-btn {
      margin-top: 4px;
      display: inline-flex;
      line-height: 24px;
      justify-content: space-between;
      align-items: center;

      .type {
        background: #F2F9FF;
        border: 1px solid rgba(224, 239, 255, 1);
        border-radius: 2px;
        font-size: 12px;
        color: #0E5FD8;
        line-height: 18px;
        padding: 0 8px;
        width: auto;
        text-align: center;
        margin-right: 4px;
      }

      .registered {
        color: green;
        /* 已登记 - 绿色 */
      }

      .not-registered {
        color: red;
        /* 未登记 - 红色 */
      }

    }

    .list-more {
      position: absolute;
      right: 13px;
      bottom: 12px;
    }
  }

  .v-border-top {
    border-top: 4px solid #1BA854;
  }

  .v-border-no-pass {
    border-top: 4px solid #FFA500;
  }
}
</style>