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

<script lang="ts" setup name="registerCatalogDetail">
import { ref } from 'vue';
import { useRouter } from "vue-router";
import useUserStore from "@/store/modules/user";
import { ContentWrap } from '@/components/ContentWrap';
import {
  getRegisterCatalogDetail,
  dataSourcesList,
  getRegisterCatalogTableDetail,
} from "@/api/modules/dataAsset";
import { changeNum } from '@/utils/common'

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
const fullPath = route.fullPath;
const catalogGuid = route.query.guid;

const { proxy } = getCurrentInstance() as any;
/** 当前主要类型的详情信息。 */
const detailInfo: any = ref({});
/** 整个页面处于加载转圈状态。 */
const fullscreenLoading = ref(false);
/** 文字超过两行是否要截断 */
const isTruncated = ref(false);
const isExpanded = ref(false);

const baseInfoFormItems = ref([
  {
    label: '资源描述',
    type: 'textarea',
    placeholder: '该数据资源主要包含的信息，数据更新方式等。',
    field: 'propertyDescription',
    default: '该数据资源主要包含的信息，数据更新方式等',
    block: true,
    maxlength: 500,
    clearable: true,
    readonly: true,
    required: true,
  },
  {
    label: '应用场景描述',
    type: 'textarea',
    field: 'sceneDescription',
    default: '该数据资源应用场景是***，基于**、**、**等各类的数据，结合AI算法为**提供***模型，提高***服务能力，优化公司的成本及效率。',
    clearable: true,
    required: true,
    readonly: true,
    block: true,
  },
  {
    label: '应用场景限制',
    type: 'textarea',
    field: 'sceneLimit',
    default: '主体限制：仅限于国企央企政府使用；不可同行业竞争对手使用等',
    clearable: true,
    required: true,
    readonly: true,
    block: true,
  },
]);

const getDetailInfo = () => {
  fullscreenLoading.value = true;
  getRegisterCatalogDetail(catalogGuid).then((res: any) => {
    if (res.code == proxy.$passCode) {
      const data = res.data || {};
      detailInfo.value = data;
    //  detailInfo.value.damTypeName = damTypes.find(d => d.value == detailInfo.value.damType)?.label;
      detailInfo.value.dataSourcesName = dataSourcesList.find(d => d.value == detailInfo.value.dataSources)?.label;
      baseInfoFormItems.value.forEach(item => {
        item.default = detailInfo.value[item.field]
      });
      if (fullPath === route.fullPath) {
        document.title = `详情-${data.damName}`;
      }
      let tab: any = userStore.tabbar.find((tab: any) => tab.fullPath === fullPath);
      if (tab) {
        tab.meta.title = `详情-${data.damName}`;
      }
      isTextTruncated();
      fullscreenLoading.value = false;
    } else {
      fullscreenLoading.value = false;
      proxy.$ElMessage.error(res.msg);
    }
  });
}

onBeforeMount(() => {
  getDetailInfo();
});

onActivated(() => {
  if (detailInfo.value?.damName) {
    if (fullPath === route.fullPath) {
      document.title = `详情-${detailInfo.value?.damName}`;
    }
  }
});

onMounted(() => {
  window.addEventListener('resize', () => {
    isTextTruncated();
  })
  isTextTruncated();
})

const handleExpand = () => {
  isExpanded.value = !isExpanded.value;
}

const isTextTruncated = () => {
  isTruncated.value = false;
  isExpanded.value = false;
  nextTick(() => {
    let domDesc = document.getElementsByClassName('right-main')?.[0];
    if (!domDesc) {
      return;
    }
    if (domDesc.clientHeight > 64) {
      isTruncated.value = true;
    } else {
      isTruncated.value = false;
      isExpanded.value = false;
    }
  });
}

const tableFieldsLoading = ref({});
const handleTableExpandChange = (row: any, expandedRows: any[]) => {
  let expand = expandedRows.includes(row);
  if (expand && !row.damCatalogTableField?.length) {
    tableFieldsLoading.value[row.guid] = true;
    getRegisterCatalogTableDetail(row.guid).then((res: any) => {
      tableFieldsLoading.value[row.guid] = false;
      if (res.code == proxy.$passCode) {
        row.damCatalogTableField = res.data.damCatalogTableField || [];
      } else {
        proxy.$ElMessage.error(res.msg);
      }
    });
  }
}

const handleTableViewData = (scope) => {
  let row = scope.row;
  router.push({
    name: 'damTableDataView',
    query: {
      guid: row.guid,
      name: row.tableChName,
      damName: detailInfo.value.damName
    }
  });
}

</script>

<template>
  <div class="main-content" v-loading="fullscreenLoading">
    <div class="header">
      <div class="left-img"></div>
      <div class="right-main">
        <div class="asset-title">
          <div style="display: flex;align-items: center;">
            <div class="title1">{{ detailInfo.damName ?? '--' }}</div>
            <div class="dataLabel">{{ detailInfo.damTypeName }}</div>
            <div class="dataLabel">{{ detailInfo.subjectDomainName || detailInfo.subjectDomain }}</div>
            <div class="dataLabel dataLabel1">{{ detailInfo.databaseType }}</div>
            <div class="dataLabel dataLabel1">{{ detailInfo.dataSourcesName }}</div>
          </div>
        </div>
        <div class="applicationScenarios"
          :style="{ 'margin-right': (isTruncated && !isExpanded) ? '30px' : '0px', WebkitLineClamp: (!isTruncated ? 'inherit' : (isExpanded ? 'inherit' : 1)), WebkitBoxOrient: 'vertical' }">
          {{ '覆盖地域：' + (detailInfo.coverageArea?.[0]?.[0] == 'all' ? '全国' : (detailInfo.coverageAreaName?.map(c =>
            c.join('/')).join(',') ?? '--')) }}<span v-if="isTruncated" class="text_btn expand_btn"
            :style="{ position: isExpanded ? 'inherit' : 'absolute', 'margin-left': isExpanded ? '4px' : '0px' }" @click="handleExpand()" v-preReClick>{{
              isExpanded
                ?
                '收起' : '展开' }}</span></div>
      </div>
    </div>
    <ContentWrap id="id-assetContent" title="基础信息" description="" style="margin: 0 16px">
      <Form ref="baseInfoFormRef" :itemList="baseInfoFormItems" formId="base-info-form" />
    </ContentWrap>
    <ContentWrap id="id-table" title="资源表" description="" style="margin: 16px 16px 16px">
      <el-table v-show="!fullscreenLoading" ref="tableRef" :data="detailInfo.damCatalogTableInfo"
        :highlight-current-row="true" stripe border @expand-change="handleTableExpandChange" height="100%"
        tooltip-effect="light" row-key="guid" :style="{
          width: '100%',
          height: '400px',
          display: 'inline-block',
        }">
        <el-table-column type="expand">
          <template #default="scope">
            <el-table ref="fieldsTableRef" :data="scope.row.damCatalogTableField" :highlight-current-row="true" stripe
              border v-loading="tableFieldsLoading[scope.row.guid]" height="100%" tooltip-effect="light" :style="{
                width: '100%',
                'max-height': '100%',
                display: 'inline-block',
              }">
              <el-table-column label="排序" type="index" width="56px" align="center" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="chName" label="字段中文名称" width="140px" align="left" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="enName" label="字段英文名称" width="140px" align="left" show-overflow-tooltip>

              </el-table-column>
              <el-table-column prop="dataTypeName" label="字段类型" width="110px" align="left" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="fieldLength" label="长度" width="90px" align="left" show-overflow-tooltip>
                <template #default="scope">
                  <span>{{ scope.row["fieldLength"] == null ? '--' : scope.row["fieldLength"] }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="fieldPrecision" label="精度" width="90px" align="left" show-overflow-tooltip>
                <template #default="scope">

                  <span>{{ scope.row["fieldPrecision"] == null ? '--' : scope.row["fieldPrecision"] }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="dictionaryCode" label="关联字典" width="130px" align="left" show-overflow-tooltip>
                <template #default="scope">
                  <span>{{ scope.row["dictionaryName"] || '--' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="isPrimary" label="是否主键" width="90px" align="left" show-overflow-tooltip>
                <template #default="scope">
                  <span>{{ scope.row["isPrimary"] ? (scope.row["isPrimary"] == 'Y' ? '是' : '否') : '--' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="notNull" label="是否必填" width="90px" align="left" show-overflow-tooltip>
                <template #default="scope">
                  <span>{{ scope.row["notNull"] ? (scope.row["notNull"] == 'Y' ? '是' : '否') : '--' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="description" label="业务规则描述" width="180px" align="left" show-overflow-tooltip>
                <template #default="scope">
                  <span>{{ scope.row["description"] || '--' }}</span>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index" width="56px" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="tableChName" label="表中文名称" width="150px" align="left" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="tableName" label="表英文名称" width="150px" align="left" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="dataCount" label="表数据总数(条)" width="150px" align="right" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ scope.row["dataCount"] == null ? '--' : changeNum(scope.row["dataCount"], 0) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="表描述" width="150px" align="left" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ scope.row["description"] || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateUserName" label="修改人" width="140px" align="left" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ scope.row["updateUserName"] || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="修改时间" width="180px" align="left" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ scope.row["updateTime"] || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" minWidth="120px" align="left" fixed="right" show-overflow-tooltip>
          <template #default="scope">
            <span class="text_btn" @click="handleTableViewData(scope)">查看样例数据</span>
          </template>
        </el-table-column>
      </el-table>
    </ContentWrap>
  </div>
</template>

<style lang="scss" scoped>
.main-content {
  overflow-y: auto;
  height: 100%;
}

.header {
  min-height: 96px;
  padding: 16px;
  display: inline-flex;
  width: 100%;
  height: auto;

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

  .right-main {
    width: calc(100% - 64px);
    position: relative;
    margin-left: 12px;

    .asset-title {
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title1 {
        font-size: 20px;
        color: #212121;
        letter-spacing: 0;
        line-height: 30px;
        font-weight: 600;
      }

      .dataLabel {
        background: #F2F9FF;
        border: 1px solid rgba(224, 239, 255, 1);
        border-radius: 2px;
        font-size: 12px;
        color: #0E5FD8;
        letter-spacing: 0;
        text-align: center;
        line-height: 18px;
        font-weight: 400;
        padding: 0 8px;
        margin-left: 8px;
      }

      .dataLabel1 {
        background: #F2FFF5;
        border: 1px solid rgba(220, 250, 228, 1);
        color: #1BA854;
      }
    }

    .applicationScenarios {
      font-size: 14px;
      color: #666666;
      letter-spacing: 0;
      line-height: 21px;
      font-weight: 400;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      margin-top: 4px;
    }

    .expand_btn {
      position: absolute;
      right: 0px;
      top: 34px;
      font-size: 14px;
      line-height: 21px;
    }
  }
}

:deep(.el-table) {
  .el-table__expanded-cell {
    background: #fff !important;
    padding-left: 48px;
    padding-right: 8px;
  }
}
</style>