<template>
  <Modal
    :options="getModalOptions"
    :on-close="handleClose"
  >
    <template #Context>
      <div class="modal-form">
        <label>问题类型</label>
        {{ getQuestionType }}
      </div>
      <div class="carousel__flex">
        <n-icon size="26" color="#8A8A8A">
          <LeftOutlined @click="handleCarousel('prev')" />
        </n-icon>
        <div class="carousel__container">
          <label>问题描述</label>
          <n-carousel ref="carouselRef" :default-index="selectIndex" :show-dots="false">
            <img
              v-for="item in getCarouselInfo"
              :key="item.id"
              class="carousel-img"
              :src="item.fileMarkerUrl"
            >
          </n-carousel>
        </div>
        <n-icon size="26" color="#8A8A8A">
          <RightOutlined @click="handleCarousel('next')" />
        </n-icon>
      </div>
    </template>
  </Modal>
</template>

<script>
import { QUESTION_TYPE } from '@/utils/dictionary.js'
import { LeftOutlined, RightOutlined } from '@vicons/antd'
import Modal from '@/components/Modal/index.vue'
import { defineComponent, computed, ref, reactive, toRefs } from 'vue'
export default defineComponent({
  name: 'UserModal',
  components: { Modal, LeftOutlined, RightOutlined },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => null
    },
    selectRow: {
      type: Object,
      default: () => {}
    }
  },
  emits: {
    'update:visible': null
  },
  setup(props, { emit }) {
    const formRef = ref()
    const data = reactive({
      selectRow: props.selectRow,
      selectIndex: props.data.findIndex((item) => { return item.id === props.selectRow.id }),
      selectType: props.selectRow.type
    })
    /* 获取弹窗的属性 */
    const getModalOptions = computed(() => {
      return {
        show: props.visible,
        title: '图片详情',
        width: 700
      }
    })

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

    const getQuestionType = computed(() => {
      const row = QUESTION_TYPE.value.find((item) => { return item.value === data.selectRow.type })
      return row?.label || '-'
    })

    const carouselRef = ref(null)

    function handleCarousel(type) {
      const currentIndex = carouselRef.value.getCurrentIndex()
      switch (type) {
        case 'prev':
          if (currentIndex !== 0) {
            carouselRef.value.prev()
            data.selectRow = props.data[currentIndex - 1]
            data.selectType = props.data[currentIndex - 1].type
          }
          break
        case 'next':
          if (currentIndex !== props.data.length - 1) {
            carouselRef.value.next()
            data.selectRow = props.data[currentIndex + 1]
            data.selectType = props.data[currentIndex + 1].type
          }
          break
      }
    }

    /* 关闭弹窗 */
    const handleClose = () => {
      emit('update:visible', false)
    }

    return {
      ...toRefs(data),
      formRef,
      getModalOptions,
      getQuestionType,
      getCarouselInfo,
      carouselRef,
      handleCarousel,
      handleClose
    }
  }

})
</script>
<style scoped lang='scss'>
.carousel__flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  .carousel__container{
    width: calc(100% - 100px);
    display: flex;
    margin-right: 40px;
    label{
      width: 70px;
      flex-shrink: 0;
    }
  }
  .n-icon{
    cursor: pointer;
  }
  .carousel-img{
    width: 100%;
    height: 280px;
    object-fit: cover
  }
}

.modal-form{
  width: calc(100% - 60px);
  display: flex;
  align-items: center;
  margin: 20px auto 20px;
  label{
    width: 70px;
    flex-shrink: 0;
  }
  .n-select{
    width: 300px;
  }
}
</style>
