<template>
  <n-drawer v-bind="getDrawerOptions" @update:show="handleDrawerColse">
    <n-drawer-content closable title="报告详情">
      <div class="report__container">
        <div class="report__item">
          <p class="report__item--title">林场信息</p>
          <div>
            <n-grid :cols="2">
              <n-gi><span>责任单位</span></n-gi>
              <n-gi><span>{{ reportDetail.company }}</span></n-gi>
              <n-gi><span>林场名称</span></n-gi>
              <n-gi><span>{{ reportDetail.lcName }}</span></n-gi>
              <n-gi><span>巡查里程</span></n-gi>
              <n-gi><span>{{ reportDetail?.mission?.mileage / 1000 }}公里</span></n-gi>
            </n-grid>
          </div>
        </div>
        <div class="report__item">
          <p class="report__item--title">巡检信息</p>
          <div>
            <n-grid :cols="2">
              <n-gi><span>气象信息</span></n-gi>
              <n-gi><span>{{ reportDetail.airWeather || '-' }}</span></n-gi>
              <n-gi><span>巡检方式</span></n-gi>
              <n-gi><span>{{ taskType[reportDetail.mission?.inspectionType] }}</span></n-gi>
              <n-gi><span>巡检设备</span></n-gi>
              <n-gi><span>{{ reportDetail?.mission?.droneName }}</span></n-gi>
              <n-gi><span>巡检开始时间</span></n-gi>
              <n-gi><span>{{ reportDetail?.mission?.executionStartTime }}</span></n-gi>
              <n-gi><span>巡检结束时间</span></n-gi>
              <n-gi><span>{{ reportDetail?.mission?.executionEndTime }}</span></n-gi>
              <n-gi><span>问题数量</span></n-gi>
              <n-gi><span>{{ reportDetail.questionCount }}</span></n-gi>
            </n-grid>
          </div>
        </div>
        <div class="report__item">
          <p class="report__item--title">巡检结果</p>
          <div>
            <n-grid :cols="2">
              <n-gi><span>巡检内容</span></n-gi>
              <n-gi><span>巡检检查结果</span></n-gi>
              <template v-for="(item,index) in problemsList" :key="index">
                <n-gi><span>{{ item.label }}</span></n-gi>
                <n-gi><span>{{ item.value }}</span></n-gi>
              </template>
            </n-grid>
          </div>
        </div>
        <div v-if="reportDetail.questionCount>0" class="report__item">
          <p class="report__item--title">问题清单</p>
          <!-- <n-image-group> -->
          <div v-for="(item,index) in reportDetail.questionReportList" :key="index">
            <p>问题{{ index + 1 }}</p>
            <n-grid :cols="2">
              <n-gi><span>坐标</span></n-gi>
              <n-gi><span>{{ item.lng }},{{ item.lat }}</span></n-gi>
              <n-gi><span>问题描述</span></n-gi>
              <n-gi><span>{{ item.questionDesc ? item.questionDesc : '-' }}</span></n-gi>
              <n-gi><span>问题图片</span></n-gi>
              <n-gi><n-image :src="item.fileMarkerUrl" /></n-gi>
              <n-gi v-if="type === 'result' && item.list.length"><span>处理结果</span></n-gi>
              <n-gi v-if="type === 'result' && item.list.length"><n-image v-for="(cItem,cIndex) in item.list" :key="cIndex" :src="cItem" /></n-gi>
            </n-grid>
          </div>
          <!-- </n-image-group> -->
        </div>
        <div class="report__operate">
          <n-button type="primary" @click="handleDownload">下载</n-button>
        </div>
      </div>
    </n-drawer-content>
  </n-drawer>
</template>

<script>
import { QUESTION_TYPE } from '@/utils/dictionary.js'
import { getReportDetail, reportDownload, reportHandleDownload } from '@/api/report/index.js'
import { defineComponent, reactive, toRefs, computed, watch } from 'vue'

export default defineComponent({
  name: 'LiveDrawer',
  props: {
    /* 可见 */
    visible: {
      type: Boolean,
      default: false
    },
    /* 选中的数据 */
    data: {
      type: Object,
      default: () => {}
    },
    type: {
      type: String,
      default: 'inspection'
    }
  },
  emits: {
    'update:visible': null
  },
  setup(props, { emit }) {
    const data = reactive({
      reportDetail: {},
      problemsList: [],
      taskType: {
        1: '日常巡检',
        2: '应急巡检'
      }
    })

    /* 获取抽屉的信息 */
    const getDrawerOptions = computed(() => {
      return {
        show: props.visible,
        width: '100%',
        placement: 'right'
      }
    })
    /* 关闭抽屉 */
    function handleDrawerColse() {
      emit('update:visible', false)
    }
    watch(() => props.data,
      (val) => {
        if (val.id) {
          getReportDetail(val.id)
            .then(res => {
              if (res.code === 0) {
                data.reportDetail = res.data
                data.problemsList = []
                QUESTION_TYPE.value.forEach((item) => {
                  const obj = {
                    label: item.label,
                    value: 0
                  }
                  res.data.questionTypeInfo.forEach((list) => {
                    if (item.code === list.type) {
                      obj.value = list.quantity
                    }
                  })
                  data.problemsList.push(obj)
                })
                data.reportDetail.questionReportList.forEach((item) => {
                  const list = item.questionHandleList[0]?.handlerImage.split(',') || []
                  item.list = list
                })
                // data.reportDetail.questionReportList.forEach((item, index) => {
                //   if (index === 0)item.fileMarkerUrl = 'https://image.t-aaron.com/XJRW20220720165837/2022-07-20-17-07-34_frame-6563-6720_type-%E6%B0%B4%E7%94%9F%E6%A4%8D%E8%A2%AB_o3MORSWHXz5pQ8F9_s-live-XJRW20220720165837-a0ec218ddd884ffcadd4f3c8fc27d825_AI.jpg'
                //   if (index === 1)item.fileMarkerUrl = 'https://image.t-aaron.com/XJRW20220720165837/2022-07-20-17-04-30_frame-1802-1920_type-%E6%B0%B4%E7%94%9F%E6%A4%8D%E8%A2%AB_b0N6GXoM178nUxhC_s-live-XJRW20220720165837-a0ec218ddd884ffcadd4f3c8fc27d825_AI.jpg'
                // })
              }
            })
        }
      })

    function handleDownload() {
      if (props.type === 'inspection') {
        reportDownload(props.data.id)
          .then((res) => {
            const download = document.createElement('iframe')
            download.src = res.data
            download.style.display = 'none'
            document.body.appendChild(download)
            setTimeout(() => {
              document.body.removeChild(download)
            }, 300)
          })
      }
      if (props.type === 'result') {
        reportHandleDownload(props.data.id)
          .then((res) => {
            const download = document.createElement('iframe')
            download.src = res.data
            download.style.display = 'none'
            document.body.appendChild(download)
            setTimeout(() => {
              document.body.removeChild(download)
            }, 300)
          })
      }
    }

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

<style scoped lang='scss'>
.report__container{
  width: 900px;
  margin: 0 auto 40px auto;
  .report__item{
    margin-bottom: 40px;
    .report__item--title{
      font-size: 18px;
      color: #333333;
      line-height: 44px;
    }
    .n-grid{
      border-top: 1px solid rgba(216, 216, 216, 1);
      border-left: 1px solid rgba(216, 216, 216, 1);
      >div{
        position: relative;
        text-align: center;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
        padding: 6px 12px;
        word-wrap: break-word;
        word-break: normal;
        border-right: 1px solid rgba(216, 216, 216, 1);
        border-bottom: 1px solid rgba(216, 216, 216, 1);
        &:nth-child(2n-1){
          span{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
          }
          background: rgba(228, 231, 237, 1);
        }
      }
    }
  }
  .report__operate{
    text-align: center;
  }
}
::v-deep(.n-image){
  width: 100%;
  img{
    width: 100%;
  }
}
</style>
