<template>
  <h-card
    class="list-descriptions"
    id="CodeSegmentAttr"
    v-bind:style="{ height: 'calc(100% - ' + headerHeight + ')' }"
  >
    <h-descriptions class="descriptions" layout="vertical" :column="2" bordered size="small">
      <h-descriptions-item class="he-item">
        <h-descriptions
          class="he-inner-content"
          layout="vertical"
          :column="2"
          bordered
          size="small"
        >
          <h-descriptions-item
            class="code-title"
            :label="t('code.codeSegment.segmentAttr.name')"
            :span="2"
          >
            {{ segmentData.codeSchemeName || '-' }}
          </h-descriptions-item>
          <h-descriptions-item :label="t('code.codeSegment.segmentAttr.state')" :span="2">
            {{ segmentData.state || '-' }}
          </h-descriptions-item>
        </h-descriptions>
      </h-descriptions-item>
      <h-descriptions-item :label="t('code.codeSegment.segmentAttr.rule')">
        <coding-rule-view class="code-rule" :data-source="dataImgs"></coding-rule-view>
      </h-descriptions-item>
      <h-descriptions-item :label="t('code.codeSegment.segmentAttr.oiCode')">
        {{ segmentData.oiCode || '-' }}
      </h-descriptions-item>
      <h-descriptions-item :label="t('code.codeSegment.segmentAttr.streamCode')">
        {{ segmentData.streamingCode || '-' }}
      </h-descriptions-item>
      <h-descriptions-item :label="t('code.codeSegment.segmentAttr.useObject')" :span="2">
        {{ segmentData.useObject || '-' }}
      </h-descriptions-item>
      <h-descriptions-item :label="t('code.codeSegment.segmentAttr.describe')" :span="2">
        {{ segmentData.describes || '-' }}
      </h-descriptions-item>
      <h-descriptions-item :label="t('code.codeSegment.segmentAttr.createUser')">
        {{ segmentData.createUserName || '-' }}
      </h-descriptions-item>
      <h-descriptions-item :label="t('code.codeSegment.segmentAttr.createTime')">
        {{ segmentData.createTime || '-' }}
      </h-descriptions-item>
      <h-descriptions-item :label="t('code.codeSegment.segmentAttr.updateUser')">
        {{ segmentData.updateUserName || '-' }}
      </h-descriptions-item>
      <h-descriptions-item :label="t('code.codeSegment.segmentAttr.updateTime')">
        {{ segmentData.updateTime || '-' }}
      </h-descriptions-item>
      <h-descriptions-item :label="t('code.codeSegment.segmentAttr.org')">
        {{ segmentData.ownGid || '-' }}
      </h-descriptions-item>
    </h-descriptions>
  </h-card>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, reactive, watch, ref } from 'vue';
import { CodingRuleView, message } from '@crami/ui';
import type { ICodingDataItemProps } from '@crami/ui-types';
/* import { getInfo, ICP_CONFIG } from '@/utils/commMethods'; */
import { getInfo, ICP_CONFIG } from '@remote/icpx-platform/utils';
import { useHttp } from '@crami/http';
import { useI18n } from '@crami/locale';

export default defineComponent({
  name: 'CodeSegmentAttr',
  components: {
    CodingRuleView,
  },
  props: {
    activeKey: {
      type: String,
      required: true,
    },
    propsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  emits: ['refreshNode'],
  setup(props) {
    const { t } = useI18n();
    const segmentData = reactive({
      codeSchemeName: '',
      createTime: null,
      createUserName: '',
      describes: '',
      oiCode: '',
      state: '',
      streamingCode: '',
      updateTime: null,
      updateUserName: '',
      useObject: '',
      ownGid: '-',
    });
    const dataImgs = ref<ICodingDataItemProps>([]);
    const commonParams = computed(() => {
      return {
        ...getInfo(ICP_CONFIG),
        ...props.propsData,
        activeKey: props.activeKey,
      };
    });
    watch(commonParams, () => {
      getAttrData();
    });
    let headerHeight = ref(null);
    onMounted(() => {
      //计算高度
      headerHeight.value =
        parseInt(
          getComputedStyle(document.getElementById('CodeManagement-queryTabs-card')).height,
        ) + 'px';
      getAttrData();
    });
    const getAttrData = async () => {
      const data = await useHttp({
        url: '/api/codemanagement/codeManagement/queryCodeSchemeAttribute',
        method: 'post',
        params: {
          objectId: commonParams.value.value1,
          lang: commonParams.value?.lang,
          connect: commonParams.value?.connect,
          companyId: commonParams.value?.companyId,
          timeZone: commonParams.value?.TIME_ZONE,
        },
      });
      if (data.code === 200) {
        dataImgs.value.length = 0;
        if (data.data.segmentIllustrationVos) {
          dataImgs.value = [].concat(
            data.data.segmentIllustrationVos.map(item => {
              return { name: item.name, type: getType(item.type), length: item.length };
            }),
          );
        }

        Object.assign(segmentData, data.data);
      } else {
        message.error(data.msg);
      }
    };
    const getType = (type: string) => {
      let temp = '01';
      if (type === 'NUMBER') {
        temp = '01';
      } else if (type === 'LETTER') {
        temp = '02';
      } else if (type === 'NUMBER_OR_LETTER') {
        temp = '03';
      } else if (type === 'PIPELINE_CODE') {
        temp = '04';
      } else if (type === 'DATE') {
        temp = '05';
      }
      return temp;
    };
    return {
      t,
      segmentData,
      dataImgs,
      headerHeight,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-descriptions-row > .ant-descriptions-item-label > span) {
  color: #333333;
  font-weight: 600;
  height: 22px;
}
:deep(.ant-descriptions-row > .ant-descriptions-item-content > span) {
  height: 22px;
}
:deep(.descriptions > .ant-descriptions-view > table > tbody > .ant-descriptions-row:nth-child(2)) {
  height: 0px;
}
.descriptions {
  :deep(.he-item) {
    padding: 0px;
    position: relative;
    min-width: 150px;
    border-left: none;
  }
  :deep(.he-item .he-inner-content) {
    position: absolute;
    top: -56px;
    height: calc(100% + 56px);
    width: calc(100% + 2px);
    margin-left: -1px;
    .ant-descriptions-view {
      margin-top: 16px;
    }
    .code-title > span {
      height: 22px;
      line-height: 22px;
      overflow-y: scroll;
      display: block;
    }
  }
  :deep(.code-rule-item) {
    overflow: hidden;
  }

  :deep(.code-rule) {
    overflow-x: scroll;
    //高度调试防止出现双表格线
    height: 103px;
    .ant-empty-image {
      height: 58px;
    }
  }
}
:deep(.ant-descriptions-bordered .ant-descriptions-view > table) {
  table-layout: fixed !important;
}
//解决构建后样式出现多边框问题
:deep(.ant-descriptions-bordered .ant-descriptions-row:last-child) {
  border-bottom: none !important;
}
:deep(.ant-descriptions-bordered .ant-descriptions-item-label:last-child, .ant-descriptions-bordered
    .ant-descriptions-item-content:last-child) {
  border-right: none !important;
}
.list-descriptions.ant-card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  > :deep(.ant-card-body) {
    height: 100%;
  }
}
.descriptions {
  height: 100%;
  overflow-y: auto;
}
</style>
