<template>
  <div class="content">
    <!-- 头部 -->
    <div class="content-top">
      <el-form ref="form" :model="form" :inline="true" label-width="auto" size="small">
        <el-form-item label="关键字">
          <el-input v-model="form.pipeNo" placeholder="支持搜索管段编号" clearable></el-input>
        </el-form-item>
        <el-form-item label="缺陷类型">
          <el-select v-model="form.flawType" placeholder="请选择" style="width:150px" clearable>
            <el-option v-for="(item,index) in drainageOptions" :key="index" :label="item.notes" :value="item.codeValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="缺陷等级">
          <el-select v-model="form.flawLevel" placeholder="请选择" style="width:150px" clearable>
            <el-option v-for="(item,index) in defectLevelsOptions" :key="index" :label="item.notes" :value="item.notes">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="管径" label-width="40px">
          <el-select v-model="form.pipeDiameter" placeholder="请选择" style="width:120px" clearable>
            <el-option v-for="(item,index) in pipeCalOptions" :key="index" :label="item.notes" :value="item.codeValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排水类型">
          <el-checkbox-group v-model="drainageTypes">
            <el-checkbox label="雨水">雨水</el-checkbox>
            <el-checkbox label="污水">污水</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="管道级别" style="margin-left:30px;">
          <el-checkbox-group v-model="pipelineLevels">
            <el-checkbox label="主管道">主管道</el-checkbox>
            <el-checkbox label="支管">支管</el-checkbox>
            <el-checkbox label="小区管网">小区管网</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label-width="0" style="margin:0;float:right;">
          <el-button type="primary" @click="query()">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="content-body">
      <el-table :data="tableData" stripe height="100%" ref="dTable" :header-cell-style="{background:'#eaf1fd',color:'rgb(50,59,65)',height:'39px',textAlign:'center'}" @cell-dblclick="rowdbClick">
        <template slot="empty">
          <img src="@/assets/icon/null.png" alt />
        </template>
        <el-table-column prop="date" label="序号" align="center" width="50">
          <template slot-scope="scope">{{scope.$index+1}}</template>
        </el-table-column>
        <el-table-column prop="pipeNo" label="管道编号" align="center" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="roadName" label="所在道路" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="drainageType" label="排水类型" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="pipelineLevel" label="管道级别" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="pipeDiameter" label="管径（mm）" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="texture" label="材质" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="pipeLength" label="长度（m）" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="healthLever" label="健康等级" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="networkBroken" label="管网破损" align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            {{row.networkBroken || '/'}}
          </template>
        </el-table-column>
        <el-table-column prop="groundwaterIntrusion" label="地下水入侵" align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            {{row.groundwaterIntrusion || '/'}}
          </template>
        </el-table-column>
        <el-table-column prop="sewageStraightLine" label="污水直排" align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            {{row.sewageStraightLine || '/'}}
          </template>
        </el-table-column>
        <el-table-column prop="rainSewageHybrid" label="雨污混接" align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            {{row.rainSewageHybrid || '/'}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="content-footer">
      <el-pagination :current-page="pagination.current" :page-sizes="[20, 50, 100]" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { getFlawLocation, getFlawDetail } from '../api/api'
import defectPopup from './defectPopup/index.vue'

import { fetchDictionary } from '@/api/common/index'
export default {
  data() {
    return {
      form: {},
      tableData: [],
      pagination: { current: 1, size: 20, total: 0 },
      dialogVisible: false,
      popup: null,
      handler: null,
      polygonDraw: null,
      opType: 1,
      pipelineLevels: [],
      drainageTypes: [],
      levelOptions: [],
      drainageOptions: [],
      pipeCalOptions: [],
      defectLevelsOptions: []
    }
  },
  mounted() {
    this.getEnumer()
    this.getPages()
  },
  destroyed() {
    let ety = window.viewer.entities.getById('liner')
    if (ety) window.viewer.entities.remove(ety)
    if (this.popup) this.popup.remove()
  },
  methods: {
    /**
     * 获取枚举值
     */
    getEnumer() {
      fetchDictionary('HIDDEN_DANGER_TYPE').then((res) => {
        if (res.code == 1) {
          this.drainageOptions = res.result
        }
      })
      fetchDictionary('PIPE_CAL').then((res) => {
        if (res.code == 1) {
          this.pipeCalOptions = res.result
        }
      })
      fetchDictionary('DEFECT_LEVELS').then((res) => {
        if (res.code == 1) {
          this.defectLevelsOptions = res.result
        }
      })
    },
    /**
     * 获取分页数据
     */
    getPages() {
      let params = JSON.parse(JSON.stringify(this.pagination))
      Object.assign(params, this.form)
      if (this.pipelineLevels.length > 0) params['pipelineLevels'] = this.pipelineLevels.join(',')
      if (this.drainageTypes.length > 0) params['drainageTypes'] = this.drainageTypes.join(',')
      getFlawLocation(params).then((res) => {
        if (res.code == 1) {
          this.tableData = res.result.records
          this.pagination.total = parseInt(res.result.total)
        }
      })
    },
    /**
     * 搜索查询
     */
    query() {
      this.pagination.current = 1
      this.getPages()
    },
    /**
     * 行双击事件
     */
    rowdbClick(row) {
      let ety = window.viewer.entities.getById('liner')
      if (ety) window.viewer.entities.remove(ety)
      let entity = new Cesium.Entity({
        id: 'liner',
        name: '管线',
        show: true,
        polyline: new Cesium.PolylineGraphics({
          positions: [
            new Cesium.Cartesian3.fromDegrees(row.longitude, row.latitude),
            new Cesium.Cartesian3.fromDegrees(row.longitude2, row.latitude2)
          ],
          width: 5,
          material: Cesium.Color.RED,
          clampToGround: true
        })
      })
      window.viewer.entities.add(entity)

      getFlawDetail({ code: row.code }).then((res) => {
        let entity = window.viewer.entities.getById('liner')
        let position1 = entity.polyline.positions.getValue()[0]
        let position2 = entity.polyline.positions.getValue()[1]
        let centerPosition = new Cesium.Cartesian3(
          (position1.x + position2.x) / 2,
          (position1.y + position2.y) / 2,
          (position1.z + position2.z) / 2
        )

        var cartographic = Cesium.Cartographic.fromCartesian(centerPosition)
        var lon = Cesium.Math.toDegrees(cartographic.longitude)
        var lat = Cesium.Math.toDegrees(cartographic.latitude)
        var elev = viewer.scene.globe.getHeight(cartographic)

        if (res.code == 1) {
          let data = res.result
          const defectPopup2 = Vue.extend(defectPopup)
          if (this.popup) this.popup.remove()
          this.popup = new defectPopup2({
            data: {
              id: 'gu',
              position: Cesium.Cartesian3.fromDegrees(lon, lat, elev),
              data: data
            },
            store: this.$store
          }).$mount()

          window.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(lon, lat, 100)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  .content-top {
    width: 100%;
    // height: 60px;
    padding: 20px 20px;
    .el-form {
      >>> .el-form-item {
        margin-bottom: 0 !important;
      }
    }
    >>> .el-checkbox {
      margin-right: 10px !important;
    }
  }
  .content-body {
    width: 100%;
    height: calc(100% - 132px);
    box-sizing: border-box;
    padding: 0 20px;
    padding-bottom: 5px;
    .el-table {
      >>> th > .cell {
        white-space: pre-line;
      }
      >>> .el-table__body {
        td.el-table__cell {
          padding: 0 !important;
          height: 34px;
        }
      }
    }
  }
  .content-footer {
    width: 100%;
    height: 55px;
    line-height: 35px;
    padding: 10px 20px;
  }
}
.el-dialog__wrapper {
  pointer-events: none;
  overflow: hidden;
  >>> .el-dialog {
    // 弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）
    pointer-events: auto;
    .el-dialog__header {
      background-color: #13479e;
      .el-dialog__title {
        color: #ffffff;
      }
      .el-dialog__close {
        color: #ffffff !important;
      }
    }
  }
}
</style>