<template>
  <div id="pdfCentent">
    <!-- 河道信息 -->
    <div class="report__container">
      <div class="report__title">河道信息</div>
      <ul class="report__table">
        <li v-for="(item, index) in streamList" :key="index" class="table__item">
          <div class="item__title">{{ item.label }}</div>
          <div class="item__content"><span>{{ reportMessage[item.key] }}</span></div>
        </li>
      </ul>
    </div>

    <div class="report__container">
      <div class="report__title">巡检信息</div>
      <ul class="report__table">
        <li v-for="(item, index) in inspectionList" :key="index" class="table__item">
          <div class="item__title">{{ item.label }}</div>
          <div v-if="item.options" class="item__content">
            <span>{{ item.options[reportMessage[item.key]] }}</span>
          </div>
          <div v-else class="item__content">{{ reportMessage[item.key] }}</div>
        </li>
      </ul>
    </div>

    <div class="report__container">
      <div class="report__title">巡检结果</div>
      <div class="report__table is--merge">
        <div class="merge__header">
          <div class="header__item">项目</div>
          <div class="header__item">巡检内容</div>
          <div class="header__item">巡检监测结果</div>
        </div>
        <div class="merge__table">
          <ul class="table__container">
            <li v-for="(item, index) in resultList" :key="index" class="table__content" style="margin-top: -1px;">
              <span class="merge__title">{{ item.name }}</span>
              <ul>
                <li v-for="(cItem, cIndex) in item.type" :key="cIndex" class="merge__item" style="margin-bottom: -1px;">
                  <span v-if="cItem.content.length" class="merge__name">{{ cItem.name }}</span>
                  <ul v-if="cItem.content.length">
                    <li v-for="(sItem,sIndex) in cItem.content" :key="sIndex" class="content-item">
                      <div class="inspection-content" style="margin-right: -1px;">{{ sItem.content }}</div>
                      <div class="inspection-result">{{ filterResult(sItem.code) }}</div>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 问题清单 -->
    <!-- <div v-show="imageList.length" class="report__container">
      <div class="report__title">问题清单</div>
      <ul class="image-list">
        <li v-for="(item, index) in imageList" :key="index" class="image-item">
          <div class="lon-lat image-index">
            问题{{ index+1 }}
          </div>
          <div class="lon-lat">
            <div class="position-label">
              <span>坐标</span>
            </div>
            <div class="position-value">
              <span>{{ item.longitude }}, {{ item.latitude }}</span>
            </div>
          </div>
          <div class="lon-lat">
            <div class="position-label">
              <span>问题描述</span>
            </div>
            <div class="position-value">
              <span>{{ item.content }}</span>
            </div>
          </div>
          <div class="lon-lat">
            <div class="position-image-lable">
              <span>问题图片</span>
            </div>
            <div class="position-value">
              <img class="problem-img" :src="item.fileImage" alt="">
            </div>
          </div>
          <div class="lon-lat image-index">
            处理结果
          </div>
          <div class="lon-lat">
            <div class="position-label">
              <span>处理人</span>
            </div>
            <div class="position-value">
              <span>{{ item.handerName }}</span>
            </div>
          </div>
          <div class="lon-lat">
            <div class="position-label">
              <span>处理时间</span>
            </div>
            <div class="position-value">
              <span>{{ item.handTime }}</span>
            </div>
          </div>
          <div class="lon-lat">
            <div class="position-label">
              <span>备注</span>
            </div>
            <div class="position-value">
              <span>{{ item.handContent }}</span>
            </div>
          </div>
          <div v-for="(i, j) in item.handImg" :key="j" class="lon-lat">
            <div class="position-image-lable">
              <span>结果图片</span>
              <span v-show="item.handImg.length>1">{{ j+1 }}</span>
            </div>
            <div class="position-value">
              <img class="result-img" :src="i" alt="">
            </div>
          </div>
        </li>
      </ul>
    </div> -->
    <!-- <div class="download_box">
      <a-button :loading="downloadFlag" class="export-btn" type="primary" @click="exportReport">下载</a-button>
    </div> -->
  </div>
</template>

<script>
import { reportDetail } from '@/api/report/river.js'
import { getQuestionTree } from '@/api/common/index.js'
import { defineComponent, watch, computed, reactive, toRefs } from 'vue'
export default defineComponent({
  name: 'ResultReport',
  props: {
    reportId: {
      type: [String, Number],
      default: null
    }
  },
  setup(props, { emit }) {
    const data = reactive({
      streamList: [
        { label: '责任单位', key: 'streamArea' },
        { label: '河道名称', key: 'streamName' },
        { label: '河段长（公里）', key: 'streamLength' },
        { label: '巡检里程（公里）', key: 'streamLength' },
        { label: '起讫位置', key: 'streamLocation' }
      ],
      inspectionList: [
        { label: '天气情况', key: 'weather' },
        { label: '巡查人数', key: 'inspectionPeopleCount' },
        { label: '巡查人员', key: 'flightHandName' },
        { label: '巡查方式', key: 'inspectionWay', options: { 1: '无人机', 2: '机场', 3: '人工' }},
        { label: '巡查设备', key: 'inspectionDevice' },
        { label: '巡查日期', key: 'inspectionTime' },
        { label: '飞行高度', key: 'flightHeight' },
        { label: '巡查类型', key: 'inspectionType', options: { 1: '常规巡河', 2: '其它' }},
        { label: '问题点数量', key: 'questionCount' }
      ],
      resultList: [],
      reportMessage: {}
    })

    const queryResult = (async() => {
      const res = await getQuestionTree({ reportId: props.reportId })
      if (res.code === 0) {
        data.resultList = res.data
      }
    })()

    const queryDetail = (async() => {
      const res = await reportDetail({ reportId: props.reportId })
      if (res.code === 0) {
        data.reportMessage = res.data
      }
    })()

    const filterResult = (code) => {
      const list = data.reportMessage?.inspectionResult || []
      const result = list.find((item) => {
        return item.code === code
      })
      return result?.totalCount
    }

    return {
      ...toRefs(data),
      queryResult,
      queryDetail,
      filterResult
    }
  }
})

</script>
<style scoped lang='scss'>
*{
  box-sizing: border-box;
}
.report__container {
  width: 100%;
  padding: 0 30px 20px 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  .report__title {
    width: 100%;
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
  }
  .report__table {
    border-top: 1px solid rgba(220,223,230,1);
    border-left: 1px solid rgba(220,223,230,1);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    width: 800px;
    &.is--merge{
      align-items: flex-start;
      .merge__header{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .header__item{
        padding: 6px;
        text-align: center;
        background: rgba(245,247,250,1);
        &:nth-child(1){
          width: 171px;
          border-bottom: 1px solid rgba(220,223,230,1);
        }
        &:nth-child(2){
          flex: 1;
          border-left: 1px solid rgba(220,223,230,1);
          border-right: 1px solid rgba(220,223,230,1);
        }
        &:nth-child(3){
          width: 160px;
          border-right: 1px solid rgba(220,223,230,1);
        }
      }
    }
    .table__item {
      display: flex;
      justify-content: center;
      align-items: stretch;
      width: 100%;
    }
    .item__title {
      width: 40%;
      background: rgba(245,247,250,1);
      height: 30px;
      text-align: center;
      line-height: 30px;
      border-right: 1px solid rgba(220,223,230,1);
      border-bottom: 1px solid rgba(220,223,230,1);
    }
    .item__content {
      width: 60%;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border-right: 1px solid rgba(220,223,230,1);
      border-bottom: 1px solid rgba(220,223,230,1);
    }
  }
  .merge__table{
    width: 100%;
    .table__container{
      margin-bottom: 0;
      .table__content{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-right: 1px solid rgba(220,223,230,1);
        border-bottom: 1px solid rgba(220,223,230,1);
        .merge__title{
          width: 70px;
          text-align: center;
        }
        ul{
          flex: 1;
          flex-shrink: 0;
        }
        .merge__item{
          display: flex;
          justify-content: flex-start;
          align-items: center;
          border-top: 1px solid rgba(220,223,230,1);
          border-left: 1px solid rgba(220,223,230,1);
        }
        .merge__name{
          width: 100px;
          text-align: center;
        }
        .content-item {
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
        .inspection-content {
          flex: 1;
          flex-shrink: 0;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-left: 1px solid rgba(220,223,230,1);
          border-right: 1px solid rgba(220,223,230,1);
          border-bottom: 1px solid rgba(220,223,230,1);
        }
        .inspection-result {
          width: 160px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-bottom: 1px solid rgba(220,223,230,1);
        }
      }
    }
  }
}
</style>
