<template>
  <div class="header">
    <div class="label">审批类型</div>
    <div class="content">
      <el-tag :type="tagTypeMap[approveAction]" size="small">{{ contents }}</el-tag>
    </div>
  </div>

  <knowledgeDetailModal :hasDialog="false" tableName="SIMULATION_KNOWLEDGE" :detail="knowledgeDetail"/>
</template>

<script setup lang="ts">
import knowledgeDetailModal from '@/views/competenceCenter/knowledge/components/knowledgeDetailModal.vue';
import { ref, watchEffect } from 'vue';

interface Props {
  data: any;
}

const props = withDefaults(defineProps<Props>(), {
  data: {},
});
const knowledgeDetail = ref<any>(null);
const contents = ref<string>('');
const approveAction = ref<any>();
const tagTypeMap:any = {
  1: 'success',
  2: 'primary',
  3: 'danger',
};
watchEffect(() => {
  if (props.data) {
    const approveContents = JSON.parse(props.data?.approveContents || '{}');
    knowledgeDetail.value = approveContents.afterData || approveContents.beforeData || null;
    contents.value = approveContents.contents || '';
    approveAction.value = props.data?.approveAction || '';
  }
});

</script>
<style lang="scss" scoped>
.header {
  margin-bottom: 24px;
  display: flex;
}
.label {
  font-weight: 600;
  margin-right: 16px;
}
.content {
  white-space: pre-wrap;
}

</style>
