<script name="flowRecordDialog" setup>
import { watch, ref } from 'vue'
import FlowRecord from '@/pages/toDoCenter/components/flowRecord.vue'
import SjFlowRecord from '@/pages/projectStoreManage/projectStore/projectDetail/components/sjFlowRecord.vue'
const
  props = defineProps({
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    flowData: {
      type: Array,
      default: undefined
    },
    sjFlowData: {
      type: String,
      default: undefined
    }
  }),
  emits = defineEmits(['close']),
  flowTabActiveName = ref('1')
watch(
  () => props.visible,
  async val => {
    flowTabActiveName.value = props.sjFlowData ? '2' : '1'
  }
)
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="审核记录"
    width="70%"
    destroy-on-close
    @close="emits('close')"
  >
    <el-tabs v-if="props?.sjFlowData?.length" v-model="flowTabActiveName" class="mb-16">
      <el-tab-pane label="省级部门联审流程记录" name="2" />
      <el-tab-pane label="联审确认流程记录" name="1" />
    </el-tabs>
    <flow-record v-if="flowTabActiveName==='1'" :flow-data="props.flowData||[]" />
    <sj-flow-record v-if="flowTabActiveName==='2'" :flow-data="props.sjFlowData&&JSON.parse(props.sjFlowData)||[]" />
  </el-dialog>
</template>
