<template>
  <my-drawer
    class="sop-dialog"
    :visible="visible"
    :header="title"
    size="85%"
    attach="body"
    :closeOnOverlayClick="false"
    :close-btn="true"
    :footer="false"
    @close="emit('update:visible', false)"
  >
    <sop-step
      v-if="visible"
      :type="type"
      :sop="sop"
      @confirm="stepConfirm"
    ></sop-step>
  </my-drawer>
</template>

<script setup name="SopStepDialog">
import { computed } from 'vue';
import SopStep from './index.vue';

const emit = defineEmits(['update:visible', 'confirm']);
const props = defineProps({
  visible: Boolean,
  type: {
    type: String,
    default: 'fill',
  },
  sop: {
    type: Object,
    default() {
      return {};
    },
  },
});

const title = computed(() => {
  if (props.type === 'fill') return 'SOP填报';
  if (props.type === 'new') return 'SOP新增';
  if (props.type === 'edit') return 'SOP编辑';
  if (props.type === 'view') return 'SOP详情';
});

const stepConfirm = () => {
  emit('update:visible', false);
  emit('confirm');
};
</script>
