<template>
  <my-drawer
    class="sop-dialog"
    :class="{ 'cant-see': screenshot }"
    :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"
      :screenshot="screenshot"
      @getScreenImgs="getScreenImgs"
    ></sop-step>
  </my-drawer>
</template>

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

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

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>
<style lang="less">
.cant-see {
  opacity: 0;
  position: relative;
  z-index: -1;
}
</style>
