<template>
  <span @click.stop="look"
    ><slot></slot>
    <LoadingBox v-if="showLoading" />
    <ProcessLayout class="wrap" v-if="visible" @click.stop="">
      <template #title> {{ t('查看流程') }} </template>
      <template #close>
        <a-button type="primary" class="clean-icon" @click.stop="close">{{ t('关闭') }}</a-button>
      </template>
      <template #left>
        <LookTask
          v-if="visible"
          :taskId="props.taskId"
          :processId="props.processId"
          @get-form-configs="(config) => (formConfigs = config)"
        />
      </template>
      <template #right>
        <a-tabs
          class="process-right-Tab"
          :tabBarStyle="{ height: '50px', borderBottom: '1px solid #EEEEEE' }"
        >
          <a-tab-pane key="1" :tab="t('打印表单')" force-render>
            <PrintProperty :formConfigs="formConfigs" :disabled="true" />
          </a-tab-pane>
        </a-tabs>
      </template>
    </ProcessLayout>
  </span>
</template>

<script setup lang="ts">
  import ProcessLayout from './flow/Layout.vue';
  import LookTask from './flow/LookTask.vue';
  import { LoadingBox } from '/@/components/ModalPanel/index';
  import { notification } from 'ant-design-vue';
  import { onMounted, ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import PrintProperty from './print/PrintProperty.vue';
  const { t } = useI18n();
  const props = withDefaults(
    defineProps<{
      processId: string;
      taskId: string;
      visible?: boolean;
    }>(),
    {
      processId: '',
      taskId: '',
      visible: false,
    },
  );
  let emits = defineEmits(['close']);
  let visible = ref(false);
  let showLoading = ref(false);
  const formConfigs = ref();
  onMounted(() => {
    if (props.visible) {
      look();
    }
  });
  async function look() {
    if (props.processId) {
      showLoading.value = false;
      visible.value = true;
    } else {
      showLoading.value = false;
      notification.open({
        type: 'error',
        message: t('查看'),
        description: t('请选择一个流程进行查看'),
      });
    }
  }
  function close() {
    visible.value = false;
    emits('close');
  }
</script>
