<template>
  <div class="overlay_container">
    <div class="overlay_head">
      <img class="close_img" src="@/assets/point/close.png" alt="" @click="updateVisible">
    </div>
    <div class="overlay_main">
      <n-form
        ref="formRef"
        :model="form"
        :label-width="80"
        label-placement="left"
        require-mark-placement="left"
      >
        <n-form-item label="问题类型:">
          <n-select
            v-model:value="form.type"
            :disabled="positionType === 'look'"
            :options="typeList"
            placeholder="请选择问题类型"
          />
        </n-form-item>
        <n-form-item label="问题描述:">
          <span>{{ form.questionDesc }}</span>
        </n-form-item>
        <n-form-item label="经纬度:">
          <span>{{ form.lng }},{{ form.lat }}</span>
        </n-form-item>
        <n-form-item label="问题图片:">
          <n-image class="image_size" :src="form.fileMarkerUrl" alt="" width="120" />
        </n-form-item>
      </n-form>

      <n-form
        v-if="showResultForm"
        :model="resultForm"
        :label-width="80"
        label-placement="left"
        require-mark-placement="left"
      >
        <n-form-item label="处理状态:">
          <span>{{ resultList[resultForm.status] }}</span>
        </n-form-item>
        <n-form-item label="处理图片:">
          <div class="handle_image">
            <n-image
              v-for="(item,index) in resultForm.images"
              :key="index"
              class="image_size"
              :src="item"
              alt=""
              width="120"
            />
          </div>
        </n-form-item>
        <n-form-item label="处理描述:">
          <span>{{ resultForm.handlerResult }}</span>
        </n-form-item>
        <n-form-item label="处理时间:">
          <span>{{ resultForm.handlerTime }}</span>
        </n-form-item>
      </n-form>
    </div>
    <div v-if="positionType === 'handle'" class="btn_list">
      <n-button v-if="form.status !== 1" class="btn_item" type="primary" @click="makeSure">确定</n-button>
      <n-button v-if="form.status !== 2" class="btn_item" @click="pass">忽略</n-button>
    </div>
  </div>
</template>
<script>
import { toRefs, reactive, watch, inject } from 'vue'
import { QUESTION_TYPE } from '@/utils/dictionary.js'
import { orderDetail } from '@/api/order/index.js'
export default {
  name: 'OverLay',
  props: {
    data: {
      type: Object,
      default: () => null
    },
    type: {
      type: String,
      default: ''
    },
    showResult: {
      type: Boolean,
      default: false
    }
  },
  emits: {
    'close': null
  },
  setup(props, { emit }) {
    const data = reactive({
      form: {},
      resultForm: {},
      resultList: { 0: '待处理', 1: '已处理' },
      showResultForm: false,
      positionType: '',
      typeList: []
    })
    /* 引入祖先组件注册的方法 */
    const handleRow = inject('handleRow', null)

    watch(() => props.data, () => {
      data.positionType = props.type
      data.typeList = QUESTION_TYPE
      data.form = Object.assign({}, props.data)
      if (props.showResult && props.data.status === 1) {
        orderDetail({ questionId: props.data.questionId })
          .then(res => {
            data.showResultForm = true
            data.resultForm = res.data.questionHandle
            data.resultForm.images = res.data.questionHandle.handlerImage.split(',')
          })
      }
    })

    const updateVisible = function() {
      emit('close')
    }
    function makeSure() {
      handleRow('confirm', data.form.id, data.form.type)
      updateVisible()
    }
    function pass() {
      handleRow('ignore', data.form.id, data.form.type)
      updateVisible()
    }
    return {
      ...toRefs(data),
      updateVisible,
      makeSure,
      pass
    }
  }

}
</script>
<style lang="scss" scoped>
.overlay_container {
  width: 100%;
  height: 436px;
  border-radius: 6px;
  padding: 0;
  overflow-y: scroll;
  background-color: #fff;
  position: relative;
}

.overlay_head {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
}
.close_img {
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.overlay_main {
    width: 100%;
    margin-top: 10px;
    padding: 40px 30px 60px 40px;
}
.btn_list {
  width: 100%;
  padding-right: 32px;
  position: fixed;
  bottom: 20px;
  right: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.btn_item {
  width: 64px;
  height: 32px;
  margin-left: 20px;
}

.handle_image{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .n-image{
    margin: 0 0 5px 0;
  }
}

</style>
