<template>
  <h-card
    class="list-descriptions"
    v-bind:style="{ height: 'calc(100% - ' + headerHeight + ')' }"
    id="CodeValueAttr"
  >
    <h-descriptions class="descriptions" layout="vertical" :column="2" bordered size="small">
      <h-descriptions-item :label="t('code.codeValue.valueAttr.name')">
        {{ valueData.codeSegmentName || '-' }}
      </h-descriptions-item>
      <h-descriptions-item :label="t('code.codeValue.valueAttr.length')">
        {{ valueData.length || '-' }}
      </h-descriptions-item>
      <h-descriptions-item :label="t('code.codeValue.valueAttr.roughRules')">
        {{ valueData.roughRules || '-' }}
      </h-descriptions-item>
      <h-descriptions-item :label="t('code.codeValue.valueAttr.fineRules')">
        {{ valueData.fineRules || '-' }}
      </h-descriptions-item>
      <h-descriptions-item
        v-if="valueData.roughRules && valueData.roughRules === 'PIPELINE_CODE'"
        :label="t('code.codeValue.valueAttr.restart')"
        :span="2"
      >
        {{ valueData.restart || '-' }}
      </h-descriptions-item>
      <h-descriptions-item :label="t('code.codeValue.valueAttr.separator')">
        {{ valueData.codeSeparator || '-' }}
      </h-descriptions-item>
      <h-descriptions-item :label="t('code.codeValue.valueAttr.parentname')">
        {{ valueData.parentName || '-' }}
      </h-descriptions-item>
      <h-descriptions-item :label="t('code.codeValue.valueAttr.segmentNo')" :span="2">
        {{ valueData.segmentNo || '-' }}
      </h-descriptions-item>
      <h-descriptions-item :label="t('code.codeValue.valueAttr.describe')" :span="2">
        {{ valueData.describes || '-' }}
      </h-descriptions-item>
      <h-descriptions-item :label="t('code.codeValue.valueAttr.createUser')">
        {{ valueData.createUserName || '-' }}
      </h-descriptions-item>
      <h-descriptions-item :label="t('code.codeValue.valueAttr.createTime')">
        {{ valueData.createTime || '-' }}
      </h-descriptions-item>
      <h-descriptions-item :label="t('code.codeValue.valueAttr.updateUser')">
        {{ valueData.updateUserName || '-' }}
      </h-descriptions-item>
      <h-descriptions-item :label="t('code.codeValue.valueAttr.updateTime')">
        {{ valueData.updateTime || '-' }}
      </h-descriptions-item>
    </h-descriptions>
  </h-card>
</template>

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

export default defineComponent({
  name: 'CodeValueAttr',
  components: {},
  props: {
    activeKey: {
      type: String,
      required: true,
    },
    propsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  emits: ['refreshNode'],
  setup(props) {
    const { t } = useI18n();
    const valueData = reactive({
      codeSegmentName: '',
      codeSeparator: '',
      complementCharacter: null,
      createTime: null,
      createUserName: null,
      describes: '',
      extendedLength: null,
      fineRules: '',
      length: null,
      parentName: null,
      restart: null,
      roughRules: '',
      segmentNo: null,
      triggerCode: null,
      updateTime: null,
      updateUserName: null,
    });
    const commonParams = computed(() => {
      return {
        ...getInfo(ICP_CONFIG),
        ...props.propsData,
        activeKey: props.activeKey,
      };
    });
    watch(commonParams, () => {
      getAttrData();
    });
    let headerHeight = ref(null);

    onMounted(() => {
      getAttrData();
      //计算高度
      headerHeight.value =
        parseInt(
          getComputedStyle(document.getElementById('CodeManagement-queryTabs-card')).height,
        ) + 'px';
    });
    // /codeManagement/queryCodeSchemeAttribute
    const getAttrData = async () => {
      const data = await useHttp({
        url: '/api/codemanagement/codeSegment/queryCodeSegmentAttribute',
        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) {
        Object.assign(valueData, data.data);
      } else {
        message.error(data.msg);
      }
    };

    return {
      t,
      valueData,
      headerHeight,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-descriptions-bordered .ant-descriptions-view > table) {
  table-layout: fixed !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>
