<template>
  <div ref="popupwindow" v-show="showPopup" class="popupwindow">
    <div v-if="showPipeInfo" class="pipe-window">
      <div class="info-title">
        <span style="font-weight: bold; user-select: none">
          {{ currPipeForm.expNo || '' + currPipeForm.pipeType || '' }}
          <i class="el-icon-caret-left" style="cursor: pointer" type="text" @click="lastPipePage" ></i>
          {{ `${pipeFormIndex + 1}/${pipeFormArr.length}` }}
          <i class="el-icon-caret-right" style="cursor: pointer" type="text" @click="nextPipePage" ></i>
        </span>
        <a style="font-size: 12px; color: #2d74e7; text-decoration: underline" @click="openDetailsDialog(currPipeForm.id)">详情</a>
      </div>
      <div style="font-size:12px;">管径：{{ currPipeForm.diameter }}mm 材质：{{ currPipeForm.material }}</div>
      <div class="info-content">
        <div class="left" style="width: 200px;margin:5px 0;">
          <div class="detailsTitle" style="margin-top: 5px">检测日期 {{ currPipeForm.sampleTime }}</div>
          <div class="text-space" style="margin: 10px 0">
            <el-link style="font-size: 12px;" v-if="currPipeForm.wordFilePath" type="primary" @click.stop="downloadDocx" >
              <div style="max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis" >
                {{ currPipeForm.wordInfoName + '.docx' }}
              </div>
            </el-link>
          </div>
          <div class="detailsTitle">结构性缺陷 等级:{{ currPipeForm.structClass }}</div>
          <p class="detail-econtent">评价: {{ currPipeForm.structEstimate }}</p>
          <div class="detailsTitle">功能性缺陷 等级:{{ currPipeForm.funcClass }}</div>
          <p class="detail-econtent">评价: {{ currPipeForm.funcEstimate }}</p>
        </div>
        <div class="right" style="width: 250px; margin-left: 20px; height: 220px;">
          <el-tabs v-model="pipeTabActiveName">
            <el-tab-pane :label="`照片`" name="pic">
              <div class="container">
                <el-image style="width: 100%; height: 90%; -webkit-user-drag: none" :src="getPipeImgUrl" :preview-src-list="getPipeImgUrlArr" ></el-image>
                <div style="text-align: center">
                  <i class="el-icon-caret-left" style="cursor: pointer" type="text" @click="lastImg" ></i>
                  {{ currPipeForm.pipeDefects ? (currPipeForm.pipeDefects.length ? imgArrIndex + 1 : 0) : 0 }}/{{ currPipeForm.pipeDefects ? currPipeForm.pipeDefects.length || 0 : 0 }}
                  <i class="el-icon-caret-right" style="cursor: pointer" type="text" @click="nextImg" ></i>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane :label="`视频`" name="viedo">
              <div style="width: 100%; height: 100%" v-if="currPipeForm.videoPath">
                <video controls="controls" width="100%" height="83%">
                  <source :src="getPipeVideoUrl" type="video/mp4" />
                </video>
              </div>
              <div v-show="!currPipeForm.videoPath" style="text-align: center; margin-top: 20px" >暂无视频</div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div v-if="showDefectInfo" class="defect-window">
      <div class="info-title">
        <span style="font-weight: bold" >功能性缺陷:({{ defectForm.defectCode }}){{ defectForm.defectName }} </span>
        <a style="font-size: 12px; color: #2d74e7; text-decoration: underline" @click="openDetailsDialog(defectForm.stateId)">详情</a >
      </div>
      <div style="font-size:12px;">{{ `${defectForm.expNo } ${defectForm.pipeType}` }}</div>
      <div class="info-content" style="font-size: 12px">
        <div class="left" style="width: 200px;margin:5px 0;">
          <div style="padding: 3px 0">检测日期:&emsp; {{ defectForm.sampleTime }}</div>
          <div style="display: flex; padding: 3px 0">
            <span style="flex: 1">距离:&emsp;{{ defectForm.direction }}</span>
            <span style="flex: 1">等级:&emsp;{{ defectForm.defectLevel }}</span>
          </div>
          <div style="display: flex; padding: 3px 0">
            <p class="detail-econtent">评价:{{ defectForm.pipeNote }}</p>
          </div>
        </div>
        <div class="right" style="width: 250px; margin-left: 20px; height: 220px;">
          <el-tabs v-model="defectTabActiveName">
            <el-tab-pane :label="`照片`" name="pic">
              <div class="container" v-if="getDefectImgUrl.length">
                <el-image style="width: 100%; height: 90%; -webkit-user-drag: none" :src="getDefectImgUrl" :preview-src-list="[getDefectImgUrl]" ></el-image>
              </div>
              <div v-show="!getDefectImgUrl.length" style="text-align: center; margin-top: 20px">暂无照片</div>
            </el-tab-pane>
            <el-tab-pane :label="`视频`" name="viedo">
              <div style="width: 100%; height: 100%" v-if="defectForm.videopath">
                <video controls="controls" width="100%" height="90%">
                  <source :src="getDefectVideoUrl" type="video/mp4" />
                </video>
              </div>
              <div v-else style="text-align: center; margin-top: 20px">暂无视频</div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CesiumUtil from '../common/cesiumUtil'

import { histroyPipeData, queryDefectdetails  } from '@/views/pipelineDefect/api/pipelineDefect'
import { baseAddress } from '@/utils/request'
import axios from 'axios'

export default {
    props: ['rootPage'],
    data () {
        return {
            showPopup: false,
            popupPosition: null,
            removeListener: null,
            cesiumUitl: null,
            baseFilePath: '/psjc/file',

            offset: { x: 0, y: 0 },
            pOffset: { x: 237, y: 343 },
            eOffset: { x: 232, y: 354 },

            showPipeInfo: false,
            showDefectInfo: false,
            // 管道
            pipeFormArr: [],
            pipeFormIndex: 0,
            pipeTabActiveName: 'pic',
            imgArrIndex: 0,
            // 缺陷
            defectForm: {},
            defectTabActiveName: 'pic'
        }
    },
    computed: {
      // 管线信息
      currPipeForm () {
        return this.pipeFormArr.length !== 0 ? this.pipeFormArr[this.pipeFormIndex] : {}
      },
      getPipeImgUrl () {
        console.log('图片路径加载')
        return this.getPipeImgUrlArr[this.imgArrIndex]
      },
      getPipeImgUrlArr () {
        return this.currPipeForm.pipeDefects.map((v) => {
          return baseAddress + this.baseFilePath + v.picPath
        })
      },
      getPipeVideoUrl () {
        return baseAddress + this.baseFilePath + this.currPipeForm.videoPath
      },
      // 缺陷信息
      getDefectImgUrl () {
        return baseAddress + this.baseFilePath + this.defectForm.picPath
      },
      getDefectVideoUrl () {
        return baseAddress + this.baseFilePath + this.defectForm.videopath
      }
    },
    methods: {
        // position : car3
        showPopupWindow(position, data, type) {
          if (type === 'line') {
            this.showPipeWindow(position, data.expNo)
          } else {
            this.showDefectWindow(position, data.id)
          }
        },
        // 缺陷弹窗
        showDefectWindow (position, id) {
            queryDefectdetails(id).then(res => {
              if (res.code === 1) {
                this.defectForm = res.result

                this.cesiumUitl = new CesiumUtil(viewer)
                let dom = this.$refs.popupwindow
                this.popupPosition = position
                let { x, y } = this.cesiumUitl.car32WindowPosition(position)

                this.offset = this.eOffset
                dom.style.top = `${y - this.offset.y}px`
                dom.style.left = `${x - this.offset.x}px`
                //
                this.showPipeInfo = false
                this.showDefectInfo = true
                this.showPopup = true 
              } else this.$message.error('请求管线数据失败')
            })
        },
        // 管道弹窗
        showPipeWindow (position, id) {
            histroyPipeData({ expNo: id }).then(res => {
              if (res.code === 1) {
                this.pipeFormArr = res.result
                
                this.cesiumUitl = new CesiumUtil(viewer)
                let dom = this.$refs.popupwindow
                this.popupPosition = position
                let { x, y } = this.cesiumUitl.car32WindowPosition(position)

                this.offset = this.pOffset
                dom.style.top = `${y - this.offset.y}px`
                dom.style.left = `${x - this.offset.x}px`
                //
                this.showPipeInfo = true
                this.showDefectInfo = false
                this.showPopup = true
              } else this.$message.error('请求管线数据失败')
            })
        },
        // 移除弹窗
        removePopupWindow () {
            this.showPipeInfo = false
            this.showDefectInfo = false
            this.showPopup = false
            this.popupPosition = null
            this.removeListener && this.removeListener()
            this.removeListener = null
        },
        // 弹窗移动
        movePosition () {
            if (!this.popupPosition || !this.showPopup) return
            let dom = this.$refs.popupwindow
            let { x, y } = this.cesiumUitl.car32WindowPosition(this.popupPosition)
            dom.style.top = `${y - this.offset.y}px`
            dom.style.left = `${x - this.offset.x}px`
        },
        // 管线
        lastPipePage () {
          if (this.pipeFormIndex !== 0) {
            this.pipeFormIndex -= 1
          }
        },
        nextPipePage () {
          let num = this.pipeFormArr.length
          if (this.pipeFormIndex < num - 1) {
            this.pipeFormIndex += 1
          }
        },
        lastImg () {
          if (this.imgArrIndex !== 0) {
            this.imgArrIndex -= 1
          }
        },
        nextImg () {
          let num = this.getPipeImgUrlArr.length
          if (this.imgArrIndex < num - 1) {
            this.imgArrIndex += 1
          }
        },
        // 下载文档
        downloadDocx() {
          this.$message('正在加载文档地址...')
          let url = baseAddress + '/psjc/file' + this.currPipeForm.wordFilePath
          let label = this.currPipeForm.wordInfoName + '.docx'
          axios.get(url, { responseType: 'blob' }).then((response) => {
              const blob = new Blob([response.data])
              const link = document.createElement('a')
              link.href = URL.createObjectURL(blob)
              link.download = label
              link.click()
              URL.revokeObjectURL(link.href)
            })
            .catch(console.error)
        },
        // 缺陷

        // 缺陷详情
        openDetailsDialog (id) {
          this.rootPage.setDefectId(id)
          this.rootPage.setDetailVisible(true)
          console.log('详情')
        }
    }
}
</script>

<style lang='scss' scoped>
// 弹窗
.popupwindow {
  position: absolute;
  z-index: 2;
  padding: 10px;
  background: #fff;
  box-shadow: 0px 0px 9px 2px #ddd;
  &::after {
    content: '';
    display: block;
    width: 45px;
    height: 27px;
    background: url('./testImg/corner.png');
    position: absolute;
    bottom: -26px;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .pipe-window {
    width: 500px;
    height: 300px;
    box-sizing: border-box;
    .info-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 30px;
      font-size: 14px;
      box-sizing: border-box;
    }
    .info-content {
      justify-content: space-between; 
      display: flex; 
      font-size: 12px;
      .detailsTitle {
        margin: 5px 0;
      }
      .detail-econtent {
        padding-left: 10px;
        letter-spacing: 1px;
      }
    }
  }
  .defect-window {
    width: 500px;
    height: 300px;
    box-sizing: border-box;
    .info-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 30px;
      font-size: 14px;
      box-sizing: border-box;
    }
    .info-content {
      justify-content: space-between; 
      display: flex; 
      font-size: 12px;
      .detailsTitle {
        margin: 5px 0;
      }
      .detail-econtent {
        letter-spacing: 1px;
      }
    }
  }

}
</style>