<template>
  <div class="container">
    <div class="title_top">
      <div class="title_name">
        {{ $dictLabel('index_title') }}
        <!-- {{ this.$dictLabel('node_title8') }} -->
      </div>
    </div>
    <leftNav selNavId="0" />


    <div ref="threeDiv" id="webgl" class="webgl"></div>

    <!-- <div class="legend_box" v-show="isShow">
            <div class="legend_head"><span class="text_gradual head_text">显示选择</span></div>
            <div class="legend_content">
                <div class="legend_item" v-for="(v, k) in legendList" :key="k">
                    <div :class="{ icon_check: true, icon_checked: v.visible }" @click="handleCheck(v, k)"></div>
                    <span :class="{ span_checked: v.visible }">{{ v.name }}</span>
                </div>
            </div>
        </div> -->

    <div class="title_box" v-if="titleName">
      <span class="text_gradual text">{{ titleName }}场景</span>
    </div>

    <div class="tooltip_box">
      <div class="tooltip_list" v-show="isShow">
        <div class="tooltip_item" v-for="el, i in tipLengthR" :key="i">
          <div class="tooltip_head">
            <!-- <el-checkbox v-model="form.checked"></el-checkbox> -->
            <div class="icon_1" :class="{ backColor: el.state == '1' }"></div>
            <span class="text_gradual head_text"> {{ el.label }}</span>
          </div>
          <div class="tooltip_content" @click="handleClick(el, i)">
            <div class="content_1">
              <img :src="el.url" alt="" style="width: 100%; height: 100%;">
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog custom-class="" :title="dialogTitle" :visible.sync="open" :before-close="beforeClose">
      <div class="dia_box" @click="handleLink">
        <img :src="diaUrl" alt="" style="width: 100%; height: 100%;">
      </div>
    </el-dialog>
    <div class="operate-box">
      <div @click="changeScene('ocean')">
        海洋
      </div>
      <div @click="changeScene('grass')">
        草地
      </div>
      <div @click="changeScene('desert')">
        沙漠
      </div>
    </div>

  </div>
</template>

<script>
import { lastData } from "@/api/bigScreen/api.js";
import { drawAxes } from "@/utils/three.js";

import { connectWebsocket, closeWebsocket } from "@/utils/websocket.js";
import { planeGrass } from "@/utils/plane_grass.js";
import { planeDesert } from "@/utils/plane_desert.js";
import { ocean } from "@/utils/plane_ocean.js";
export default {
  name: 'Home',
  props: {

  },
  components: {

  },
  data() {
    return {
      diaUrl: '',
      isShow: false,
      legendList: [],
      tipLengthR: [
        { state: '0', label: this.$dictLabel('right_title1'), url: '/1.png' },
        { state: '0', label: this.$dictLabel('right_title2'), url: '/2.png' },
        { state: '0', label: this.$dictLabel('right_title3'), url: '/3.png' },
        { state: '0', label: this.$dictLabel('right_title4'), url: '/4.png' },
      ],
      open: false,
      demo1: null,
      destinationStats: [],  //  信宿
      sourceStats: [],  //  信源
      typeStats: [],  //  分类
      data: [], //  模型单位数据 x-y-z
      dataList: [],  //  点位数据 列表  信宿-信源-分类
      form: {

      },
      titleName: '',
      imgIndex: -1,
      dialogTitle: '',

    }
  },
  mounted() {
    // console.log(THREE.Scene);
    // this.init()

    const sceneBox = document.getElementById('webgl');

    const options = {
      gridSize: { x: 50, y: 50, z: 50 }, // 三维网格尺寸
      // gridSize: { x: 100, y: 100, z: 100 }, // 三维网格尺寸
      // grid_uv_up: [5, 5],
      grid_uv_down: [5, 5],
      grid_uv_left: [5, 5],
      // grid_uv_right: [5, 4],
      // grid_uv_front: [5, 4],
      grid_uv_back: [5, 5],
      show_water: true, // 是否显示水面
      water_height: 5, // 水面厚度
      data: [
        {
          name: '分类一',
          point: [
            {
              fourLinks: true,
              id: 1,
              pointData: [20, 40, 0]
            },
            {
              fourLinks: true,
              id: 2,
              pointData: [20, 40, 10],
            },
            {
              fourLinks: true,
              id: 3,
              pointData: [20, 40, 20],
            },
            {
              fourLinks: true,
              id: 4,
              pointData: [20, 40, 30],
            },
            {
              fourLinks: true,
              id: 5,
              pointData: [20, 40, 40],
            },
          ],
        },
        {
          name: '分类二',
          point: [
            {
              fourLinks: true,
              id: 6,
              pointData: [10, 10, 0],
            },
            {
              fourLinks: true,
              id: 7,
              pointData: [10, 10, 10],
            },
            {
              fourLinks: true,
              id: 8,
              pointData: [10, 10, 20],
            },
          ],
        },
        {
          name: '分类三',
          point: [
            {
              fourLinks: true,
              id: 9,
              pointData: [20, 20, 0],
            },
            {
              fourLinks: true,
              id: 10,
              pointData: [20, 20, 10],
            },
            {
              fourLinks: true,
              id: 11,
              pointData: [20, 20, 20],
            },
            {
              fourLinks: true,
              id: 12,
              pointData: [40, 20, 20],
            },
            {
              fourLinks: true,
              id: 13,
              pointData: [40, 20, 0],
            },
          ],
        },
        {
          name: '分类四',
          point: [
            {
              fourLinks: true,
              id: 14,
              pointData: [30, 30, 0],
            },
            {
              fourLinks: true,
              id: 15,
              pointData: [30, 30, 10],
            },
            {
              fourLinks: true,
              id: 16,
              pointData: [30, 30, 20],
            },
            {
              fourLinks: true,
              id: 17,
              pointData: [40, 30, 0],
            },
            {
              fourLinks: true,
              id: 19,
              pointData: [40, 30, 10],
            },
          ],
        },
        {
          name: '分类五',
          point: [
            {
              fourLinks: true,
              id: 20,
              pointData: [20, 50, 0],
            },
            {
              fourLinks: true,
              id: 21,
              pointData: [20, 50, 10],
            },
            {
              fourLinks: true,
              id: 22,
              pointData: [30, 50, 20],
            },
            {
              fourLinks: true,
              id: 23,
              pointData: [30, 50, 0],
            },
            {
              fourLinks: true,
              id: 24,
              pointData: [30, 50, 10],
            },
          ],
        }
      ],
      labels_left: ["", "A", "B", "C", "D", "E"],
      // labels_left: ["", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
      labels_back: ["", "A", "B", "C", "D", "E"],
      // labels_back: ["", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
    };
    //   scene, camera, renderer, dispose
    this.demo1 = drawAxes(sceneBox, options, (falg, val) => {
      this.onBallClick(falg, val)
    })

    this.legendList = this.demo1.getGroups()
    planeGrass.visible = false
    planeGrass.position.set(25, 1, 25)
    this.demo1.scene.add(planeGrass)
    planeDesert.visible = false
    planeDesert.position.set(25, 1, 25)
    this.demo1.scene.add(planeDesert)
    ocean.position.set(25, 1, 25)
    this.demo1.scene.add(ocean)
  },
  beforeDestroy() {
    if (this.demo1) {
      this.demo1.dispose()
    }
  },
  methods: {
    async init() {
      let res = await lastData()
      if (res.code == 0) {
        const data = res.data
        this.dataList = data.list
        this.destinationStats = data.stats.destinationStats   //  信宿
        this.typeStats = data.stats.typeStats  //  分类
        this.sourceStats = data.stats.sourceStats   //   信源
        this.titleName = data.task.title
        const ztObj = data.zt

        const sizeX = this.destinationStats.length   //  信宿
        const sizeY = this.typeStats.length  //  分类
        const sizeZ = this.sourceStats.length  //   信源

        let labels_back = this.destinationStats.map(el => { return el.name })
        let labels_left = this.sourceStats.map(el => { return el.name })
        let typeList = this.typeStats.map(el => { return el.name })
        labels_left.unshift('')
        labels_back.unshift('')

        this.data = []
        typeList.forEach(el => {
          this.data.push({
            name: el,
            point: []
          })
        })

        this.data.forEach((el, index) => {
          this.dataList.forEach(el2 => {
            if (el.name == el2.type) {

              let x = labels_back.indexOf(el2.destination)
              let z = labels_left.indexOf(el2.source)
              let y = typeList.indexOf(el2.type)

              const yHeight = typeList.length * 10
              let axisY = yHeight - y * 10


              // // 动态添加单个点位
              // this.demo1.addPoint(el.name, [x * 10, y * 10, z * 10], index);
              let fourLinks = true
              if (el2.remark1 != 1 || el2.remark4 != 1 || el2.remark7 != 1 || el2.remark10 != 1) {
                fourLinks = false
              }
              let pointDetail = {
                fourLinks: fourLinks,
                id: el2.id,
                pointData: [x * 10, axisY, z * 10]
              }
              el.point.push(pointDetail)


              const pointRoot = [x * 10, axisY, 0]
              let falg = el.point.some(item => item.pointData[0] == pointRoot[0] && item.pointData[1] == pointRoot[1] && item.pointData[2] == pointRoot[2])

              let pointRootDetail = {
                id: el2.destination + el2.type,
                pointData: pointRoot
              }

              if (!falg) {
                el.point.push(pointRootDetail)
                // this.demo1.addPoint(el.name, pointRoot, index);
              }

            }

          })
        })

        const sceneBox = document.getElementById('webgl');

        const options = {
          gridSize: { x: sizeX * 10, y: sizeY * 10, z: sizeZ * 10 }, // 三维网格尺寸
          grid_uv_back: [sizeX, sizeY],  //  [z,y]
          grid_uv_left: [sizeZ, sizeY],  //  [x,y]
          grid_uv_down: [sizeX, sizeZ],  //  [x,z]
          show_water: true, // 是否显示水面
          water_height: 5, // 水面厚度
          data: this.data,
          labels_left: labels_left,
          labels_back: labels_back,
          labels_height: typeList,
          ztObj: ztObj,
        };
        //   scene, camera, renderer, dispose ,getGroups
        this.demo1 = drawAxes(sceneBox, options, (falg, val) => {
          this.onBallClick(falg, val)
        })
        this.legendList = this.demo1.getGroups()
      }
    },
    //  点击 小球 //  点击 空白
    onBallClick(falg, val) {
      const legendObj = this.dataList.find(el => el.id == val.pointId)
      if (legendObj && legendObj.id) {
        this.tipLengthR[0].state = legendObj.remark1
        this.tipLengthR[1].state = legendObj.remark4
        this.tipLengthR[2].state = legendObj.remark7
        this.tipLengthR[3].state = legendObj.remark10
      }
      this.isShow = falg
    },
    //  点击 四通   出现弹窗
    handleClick(v, k) {
      this.dialogTitle = this.tipLengthR[k].label
      this.diaUrl = v.url
      this.open = true
      this.imgIndex = k

      if (k != 2) return;


    },
    handleLink() {
      if (this.imgIndex != 2) return
      if (this.$dictLabel('link_url1') != '') {
        window.open(this.$dictLabel('link_url1'), '_bank')
      }
      const websocketUrl = 'ws://48.2.16.137:8666/TBDD/websocket'
      connectWebsocket(
        websocketUrl,
        { data: 'sdvdvdsdv' }, // 初始化数据
        (data) => {
          console.log("前端websocket接受的数据", data);
          // const dataObj = JSON.parse(data)
          // this.updateWebsoctData(dataObj)
        },
        (event) => {
          console.log("关闭的回调函数", event);
          closeWebsocket()
        },
        (err) => {
          console.log("失败的回调函数", err);
          closeWebsocket()
        }
      );
    },
    //  关闭弹窗前
    beforeClose(done) {
      this.imgIndex = -1
      done()
    },
    changeScene(scene) {
      if (scene == 'grass') {
        planeGrass.visible = true
        planeDesert.visible = false
        ocean.visible = false
      } else if (scene == 'desert') {
        planeGrass.visible = false
        planeDesert.visible = true
        ocean.visible = false
      } else if (scene == 'ocean') {
        planeGrass.visible = false
        planeDesert.visible = false
        ocean.visible = true
      }
    },
    handleCheck(v, k) {
      if (this.legendList[k]) this.legendList[k].visible = !this.legendList[k].visible;
    },
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;

  // background-color: transparent;
  .webgl {
    width: 100%;
    height: 100%;
  }

  .head_text {
    font-weight: 700;
    font-size: 16px;
  }

  .legend_box {
    position: absolute;
    top: 120px;
    right: 150px;
    width: 195px;
    height: fit-content;

    .legend_head {
      width: 100%;
      height: 38px;
      background-image: url('~@/assets/bigScreen/point/icon_bg_1.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 38px;
      user-select: none;


    }

    .legend_content {
      width: 100%;
      height: fit-content;
      // height: 316px;
      background-image: url('~@/assets/bigScreen/point/icon_bg_2.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 30px 20px;

      .legend_item {
        width: 100%;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #99bbd7;

        .icon_check {
          width: 20px;
          height: 20px;
          cursor: pointer;
          background-image: url('~@/assets/bigScreen/point/icon_check.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }

        .icon_checked {
          background-image: url('~@/assets/bigScreen/point/icon_checked.png');
        }

        span {
          margin-left: 15px;
          font-size: 16px;
        }

        .span_checked {
          color: #69ffdd;
        }
      }
    }
  }

  .tooltip_box {
    position: absolute;
    top: 100px;
    right: 40px;
    z-index: 99;
    width: fit-content;
    height: fit-content;

    .tooltip_list {
      width: fit-content;
      height: calc(100vh - 120px);
      // max-width: 86vh;
      overflow: auto;
      // &::-webkit-scrollbar{

      // }
      &::-webkit-scrollbar-track {
        background-color: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #0979ca;
      }

      .tooltip_item {
        width: 450px;
        height: fit-content;

        .tooltip_head {
          width: 100%;
          height: 40px;
          background-image: url('~@/assets/bigScreen/point/icon_crad_1.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          line-height: 30px;
          padding-left: 56px;
          display: flex;
          align-items: center;

          ::v-deep .el-checkbox {
            .el-checkbox__inner {
              width: 16px;
              height: 16px;
              background-color: transparent;
              border-color: #FFFFFF40;
            }

            .el-checkbox__input.is-checked .el-checkbox__inner {
              border-color: #FFFFFF40;
            }

            .el-checkbox__inner::after {
              left: 5px;
            }
          }

          .icon_1 {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #FF004F;
            margin-left: 10px;
            margin-right: 10px;
          }

          .backColor {
            background-color: #00fb59;
          }
        }

        .tooltip_content {
          box-sizing: border-box;
          padding: 15px;
          width: 100%;
          height: 180px;
          background-image: url('~@/assets/bigScreen/point/icon_crad_2.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;

          .content_1 {
            width: 100%;
            height: 100%;
            // background-color: #0979ca;
          }
        }
      }

      .tooltip_item+.tooltip_item {
        margin-top: 20px;
      }
    }
  }

  .title_box {
    position: absolute;
    top: 120px;
    left: 50%;
    // bottom: 80px;
    transform: translateX(-50%);

    .text {
      font-size: 18px;
      font-weight: 700;
    }
  }

  ::v-deep .el-dialog {
    margin-top: 25vh !important;
    background-color: transparent;
    width: 992px;
    // height: 390px;
    height: 440px;
    background-image: url('~@/assets/bigScreen/task/img_bg_1.png');
    background-repeat: no-repeat;
    background-position: -18px -18px;
    background-size: 1028px 472px;

    .el-dialog__header {
      padding: 30px;
      padding-bottom: 10px;

      .el-dialog__title {
        background: linear-gradient(to bottom, #ffffff, #8af3ff);
        /* 渐变颜色 */
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        /* 使文字透明，以显示背景渐变 */
        // color: #8af3ff;
        font-weight: bold;
        font-size: 18px;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
        /* 白色发光 */
        letter-spacing: 0.1em;
      }

      .el-dialog__headerbtn {
        top: 30px;
        right: 30px;

        .el-dialog__close {
          font-weight: 700;
          font-size: 18px;
          color: #50a4fd;
        }
      }
    }

    .el-dialog__body {
      padding-left: 30px;
      padding-right: 30px;
      padding-top: 10px;
    }

    .dia_box {
      // width: 800px;
      width: 100%;
      height: 320px;
      background-color: #0979ca;
    }
  }
}
</style>


<style lang="scss" scoped>
.operate-box {
  position: absolute;
  top: 0;
  right: 0;

  width: 100px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  >div {
    width: 100%;
    height: 30px;
    background-color: antiquewhite;
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    background-color: #0979ca;
    border: 1px solid #0979ca;

    &:hover {
      background-color: #00fb59;
    }

  }
}
</style>
