<template>
  <div class="header">
    <div class="label">{{ $t('通用.审批类型') }}</div>
    <div class="content">
      <el-tag :type="tagTypeMap[approveAction]" size="small">{{ contents }}</el-tag>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue';

interface Props {
  data: any;
}

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

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 || '{}');
    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>
