<template>
  <div class="comp-content">
    <el-drawer
      v-model="visible"
      :size="400"
      title="审核状态"
      :close-on-click-modal="false"
      @close="closeFun"
    >
      <div v-if="modelValue" class="content">
        <iframe v-if="flowId && taskId && processInstanceId" class="iframe" :src="url" />
      </div>
    </el-drawer>
  </div>
</template>

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

const env = import.meta.env;

interface Props {
  modelValue: boolean;
  // flowId: string;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  // flowId: '',
});

const url = ref(`${env.VITE_API_CID_URL}/spdmApproval`);
const flowId = ref('');
const taskId = ref('');
const processInstanceId = ref('');

// flowId.value = 'P20251128142047739HM7MI';
// taskId.value = '7c74e959-f692-11f0-8da4-36c4b20f8769';
// processInstanceId.value = '7c6754b9-f692-11f0-8da4-36c4b20f8769';
// url.value = `${env.VITE_API_CID_URL}/spdmApproval?flowId=${flowId.value}&taskId=${taskId.value}&processInstanceId=${processInstanceId.value}`;
flowId.value = 'P20260121162933119N9UNT';
taskId.value = '0d81f3b5-f6b1-11f0-8da4-36c4b20f8769';
processInstanceId.value = '0d712bbc-f6b1-11f0-8da4-36c4b20f8769';
url.value = `${env.VITE_API_CID_URL}/spdmApproval?flowId=${flowId.value}&taskId=${taskId.value}&processInstanceId=${processInstanceId.value}`;

watch(
  () => props.modelValue,
  (val: boolean) => {
    visible.value = val;
  }
);

const emit = defineEmits(['update:modelValue']);

const visible = ref(false);

const closeFun = () => {
  emit('update:modelValue', false);
};
</script>

<style lang="scss" scoped>
.comp-content {
  .content {
    width: 100%;
    height: 100%;
    .iframe {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
