<template>
  <n-drawer v-bind="getDrawerOptions">
    <n-drawer-content :title="getDrawerOptions.title">
      <ResultReport v-if="getDrawerOptions.show" :report-id="getPatrolId" />
    </n-drawer-content>
  </n-drawer>
</template>

<script>
import { defineComponent, watch, computed, reactive, toRefs } from 'vue'
import ResultReport from './ResultReport.vue'
export default defineComponent({
  name: 'ReportDrawer',
  components: { ResultReport },
  props: {
    /* 可见 */
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'river'
    },
    /* 选中的数据 */
    data: {
      type: Object,
      default: () => {}
    }
  },
  emits: {
    'update:visible': null
  },
  setup(props, { emit }) {
    const DRAWER_TYPE = {
      'river': '巡河报告',
      'result': '处理结果'
    }

    /* 获取抽屉的信息 */
    const getDrawerOptions = computed(() => {
      return {
        title: DRAWER_TYPE[props.type],
        show: props.visible,
        trapFocus: false,
        width: '100%',
        placement: 'right'
      }
    })

    const getPatrolId = computed(() => {
      return props.data.patrolId
    })

    /**
     * @description: 返回
     * @return {*}
     */
    function handleBack() {
      emit('update:visible', false)
    }

    return {
      getDrawerOptions,
      getPatrolId,
      handleBack
    }
  }
})
</script>

<style scoped lang='scss'>
.draw-button{
  text-align: center;
  line-height: 40px;
  margin-top: 40px;
  .n-button+.n-button{
    margin-left: 30px;
  }
}
</style>
