<template>
  <approvalTypeHeader :data="data" />
  <div class="content">
    <div class="table">
      <BaseTable ref="baseTableRef" tableName="PARAMETER_LIST" hidePagination />
    </div>
    <div class="info">
      <el-descriptions class="info-content-descriptions" :column="1" label-width="100px" border>
        <el-descriptions-item
          v-if="baseInfo?.parameterLibraryCategoryObjectName"
          label="对象名称"
          >{{ baseInfo?.parameterLibraryCategoryObjectName }}</el-descriptions-item
        >
        <el-descriptions-item label="所属库">{{
          baseInfo?.parameterLibraryName
        }}</el-descriptions-item>
        <el-descriptions-item v-if="baseInfo?.parameterLibraryCategoryName" label="所属分类">{{
          baseInfo?.parameterLibraryCategoryName
        }}</el-descriptions-item>
        <el-descriptions-item v-if="baseInfo?.createTime" label="创建时间">{{
          baseInfo?.createTime
        }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import ApprovalTypeHeader from './approvalTypeHeader.vue';

interface Props {
  data: any;
}

const props = withDefaults(defineProps<Props>(), {
  data: {},
});

const baseTableRef = ref<any>();
const baseInfo = ref<any>({});

onMounted(() => {
  const approveContents = JSON.parse(props.data.approveContents);
  const { paramData = {} } = approveContents;
  const { parameterJsonValue = [] } = paramData;
  baseTableRef.value.setDataFun(parameterJsonValue);
  baseInfo.value = paramData;
});
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  .table {
    flex: 1;
    padding-right: 20px;
    margin-right: 20px;
    border-right: solid 1px var(--el-border-color);
  }
  .info {
    width: 300px;
  }
}
</style>
