<template>
  <n-drawer v-bind="getDrawerOptions" @update:show="handleDrawerColse">
    <n-drawer-content closable title="图片位置">
      <position-msg :data="problemList" :type="positionType" />
    </n-drawer-content>
  </n-drawer>
</template>

<script>
import { defineComponent, computed, reactive, toRefs, watch } from 'vue'
import PositionMsg from '@/components/PositionMsg/index.vue'

export default defineComponent({
  name: 'PositionDrawer',
  components: { PositionMsg },
  props: {
    /* 可见 */
    visible: {
      type: Boolean,
      default: false
    },
    /* 选中的数据 */
    data: {
      type: Object,
      default: () => {}
    }
  },
  emits: {
    'update:visible': null
  },
  setup(props, { emit }) {
    const data = reactive({
      flag: props.visible,
      problemList: [],
      positionType: 'handle'
    })
    watch(() => props.data, (value) => {
      data.problemList = [value]
    }, { deep: true })
    /* 获取抽屉的信息 */
    const getDrawerOptions = computed(() => {
      return {
        show: props.visible,
        width: '100%',
        placement: 'right'
      }
    })

    /* 关闭抽屉 */
    function handleDrawerColse() {
      emit('update:visible', false)
    }

    return {
      ...toRefs(data),
      getDrawerOptions,
      handleDrawerColse
    }
  }
})
</script>

<style scoped lang='scss'>
.n-button+.n-button{
  margin-left: 30px;
}
</style>
