<template>
  <div class="zhpp">
    <!-- <div class="five" v-show="$route.path === '/engineering'">
      <router-view />
    </div> -->
    <div class="mask-txt" v-show="tabIndex === 0">横锦水库</div>
    <div class="right-box">
      <ENPanel id="yjxx" title="预警信息">
        <div class="yjxx">
          <div class="row-c">
            <span>大坝稳定安全</span>
            <div
              class="status green"
              :class="{ red: damWarmData.zbhj !== '安全' }"
            >
              {{ damWarmData.zbhj }}
            </div>
          </div>
          <div class="row-c">
            <span>关联评估</span>
            <div class="status green">安全</div>
          </div>
          <div class="v-title">
            <h4>单参数评估</h4>
            <div class="title-box">
              <img src="@/assets/images/engineering/icon_red.png" />
              <p class="red">红色预警</p>
              <span class="num">{{ numObj.red }}</span>
            </div>
            <div class="title-box">
              <img src="@/assets/images/engineering/icon_yellow.png" />
              <p class="yellow">黄色预警</p>
              <span class="num">{{ numObj.yellow }}</span>
            </div>
            <div class="title-box">
              <img src="@/assets/images/engineering/icon_green.png" />
              <p class="green">正常</p>
              <span class="num">{{ numObj.green }}</span>
            </div>
          </div>
          <div
            class="row"
            v-for="(item, index) in damWarmData.yjxx"
            :key="index"
          >
            <div class="column column1">
              {{ item.infoName }}
            </div>
            <div class="column column2">
              <div class="status white" :class="{ red: item.red > 0 }">
                {{ item.red }}
              </div>
            </div>
            <div class="column column3">
              <div class="status white" :class="{ yellow: item.yellow > 0 }">
                {{ item.yellow }}
              </div>
            </div>
            <div class="column column4">
              <div class="status green">
                {{ item.green }}
              </div>
            </div>
          </div>
        </div>
      </ENPanel>
      <ENPanel class="f1" title="结论评估&nbsp;/&nbsp;预警点位">
        <p v-for="(item, index) in damWarmData.ypjl" :key="index">{{ item }}</p>
        <button @click="iframeShow = true">附件：体检报告</button>
      </ENPanel>
    </div>
    <div class="legend" :key="imgBtnKey">
      <div class="box title">图例</div>
      <div class="box" v-for="(item, index) in damWarmData.yjxx" :key="index">
        <img
          :class="{
            active: imgBtnObj[item.infoName]
              ? imgBtnObj[item.infoName]['正常']
              : false,
          }"
          @click="imgBtn(item.infoName, 1)"
          :src="imgFn(item.infoName, 1)"
        />
        <img
          :class="{
            active: imgBtnObj[item.infoName]
              ? imgBtnObj[item.infoName]['黄色预警']
              : false,
          }"
          @click="imgBtn(item.infoName, 2)"
          :src="imgFn(item.infoName, 2)"
        />
        <img
          :class="{
            active: imgBtnObj[item.infoName]
              ? imgBtnObj[item.infoName]['红色预警']
              : false,
          }"
          @click="imgBtn(item.infoName, 3)"
          :src="imgFn(item.infoName, 3)"
        />
        <span>{{ item.infoName }}</span>
      </div>
    </div>
    <BigChart
      :show="dianShow"
      @close-dialog="dianClose"
      :title="dianTitle"
      class="dian-dialog"
    >
      <div class="title">
        <button @click="tabChange(0)" :class="{ active: tabIndex === 0 }">
          预警信息
        </button>
        <button @click="tabChange(1)" :class="{ active: tabIndex === 1 }">
          过程线
        </button>
        <button @click="tabChange(2)" :class="{ active: tabIndex === 2 }">
          基本信息
        </button>
        <button @click="tabChange(3)" :class="{ active: tabIndex === 3 }">
          理论分析反演
        </button>
      </div>
      <div class="content c1" v-show="tabIndex === 0">
        <table border>
          <tbody>
            <tr v-for="(item, index) in dianData.list[0].list" :key="index">
              <td>{{ item.key }}</td>
              <td>{{ item.value }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="content c2" v-show="tabIndex === 1">
        <div id="lineChart"></div>
      </div>
      <div class="content c3" v-show="tabIndex === 2">
        <table border>
          <tbody>
            <tr>
              <td>设备名称</td>
              <td>{{ dianData.info.sensorName }}</td>
            </tr>
            <tr>
              <td>纵向桩号（m）</td>
              <td>{{ dianData.info.mileage }}</td>
            </tr>
            <tr>
              <td>轴距（m）</td>
              <td>{{ dianData.info.wheelbase }}</td>
            </tr>
            <tr>
              <td>高程（m）</td>
              <td>{{ dianData.info.altitude }}</td>
            </tr>
            <tr>
              <td>传感器类型</td>
              <td>{{ dianData.info.sensorType }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="content c4" v-show="tabIndex === 3">
        <img :src="'https://hjsk.guangchuan.org/' + dianData.imgUrl" />
        <p>监测成果与理论反演分析成果无明显背离。</p>
      </div>
    </BigChart>
    <BigChart :show="iframeShow" @close-dialog="closeIframe" title="体检报告">
      <iframe
        style="width: 100%; height: 100%"
        src="http://hjsk.guangchuan.org/api/fxyp/downloadYpbg"
      ></iframe>
    </BigChart>
  </div>
</template>

<script>
import axios from 'axios'
import spwyLv from '@/assets/images/engineering/icon/icon_spwy_lv.png'
import spwyHs from '@/assets/images/engineering/icon/icon_spwy_hs.png'
import spwyHh from '@/assets/images/engineering/icon/icon_spwy_hh.png'
import czwyLv from '@/assets/images/engineering/icon/icon_czwy_lv.png'
import czwyHs from '@/assets/images/engineering/icon/icon_czwy_hs.png'
import czwyHh from '@/assets/images/engineering/icon/icon_czwy_hh.png'
import dbslLv from '@/assets/images/engineering/icon/icon_dbsl_lv.png'
import dbslHs from '@/assets/images/engineering/icon/icon_dbsl_hs.png'
import dbslHh from '@/assets/images/engineering/icon/icon_dbsl_hh.png'
import rbslLv from '@/assets/images/engineering/icon/icon_rbsl_lv.png'
import rbslHs from '@/assets/images/engineering/icon/icon_rbsl_hs.png'
import rbslHh from '@/assets/images/engineering/icon/icon_rbsl_hh.png'
import scspwyLv from '@/assets/images/engineering/icon/icon_scspwy_lv.png'
import scspwyHs from '@/assets/images/engineering/icon/icon_scspwy_hs.png'
import scspwyHh from '@/assets/images/engineering/icon/icon_scspwy_hh.png'

export default {
  name: 'Zhpp',
  // created () {
  //   this.imgBtnData.forEach(item => {
  //     this.imgBtnObj[item] = {
  //       green: false,
  //       yellow: false,
  //       red: false
  //     }
  //   })
  // },
  created () {
    this.$eventBus.$on('open-zhpp-dialog', async (data) => {
      this.dianFlag = data
      this.dianTitle = data + '点位详情'
      const res = await axios.get(`https://hjsk.guangchuan.org/api/fxyp/getSensorYpInfo?sensorName=${data}`)
      console.log('查看点位数据', res.data.data)
      this.dianData = res.data.data
      this.dianData.dataList.reverse().forEach(item => {
        this.chartObj.x.push(item.recordDate.substring(0, 10))
        this.chartObj.y.push(Number(item.value).toFixed(2))
        this.chartObj.yMax.push(Number(this.dianData.maxValue).toFixed(2))
        this.chartObj.yMin.push(Number(this.dianData.minValue).toFixed(2))
      })
      this.dianShow = true
    })
  },
  async mounted () {
    this.$eventBus.$emit('setTMDB', 'open')
    this.getDamWarmData()
    window.addEventListener('resize', this.resizeChart)
  },
  data () {
    return {
      srcObj: {
        spwyLv,
        spwyHs,
        spwyHh,
        czwyLv,
        czwyHs,
        czwyHh,
        dbslLv,
        dbslHs,
        dbslHh,
        rbslLv,
        rbslHs,
        rbslHh,
        scspwyLv,
        scspwyHs,
        scspwyHh
      },
      iframeShow: false,
      numObj: {
        red: 0,
        yellow: 0,
        green: 0
      },
      chartObj: {
        x: [],
        y: [],
        yMax: [],
        yMin: []
      },
      lineChart: null,
      // 解决二次弹窗触发
      dianFlag: '',
      dianTitle: '',
      tabIndex: 0,
      dianData: {
        info: {},
        list: [
          { list: [] }
        ]
      },
      dianShow: false,
      damWarmData: {},
      imgBtnData: [],
      imgBtnObj: {},
      imgBtnKey: 0
    }
  },
  methods: {
    imgFn (infoName, num) {
      if (infoName === '水平位移') {
        if (num === 1) {
          return this.srcObj.spwyLv
        } else if (num === 2) {
          return this.srcObj.spwyHs
        } else if (num === 3) {
          return this.srcObj.spwyHh
        }
      } else if (infoName === '垂直位移') {
        if (num === 1) {
          return this.srcObj.czwyLv
        } else if (num === 2) {
          return this.srcObj.czwyHs
        } else if (num === 3) {
          return this.srcObj.czwyHh
        }
      } else if (infoName === '坝体渗流') {
        if (num === 1) {
          return this.srcObj.dbslLv
        } else if (num === 2) {
          return this.srcObj.dbslHs
        } else if (num === 3) {
          return this.srcObj.dbslHh
        }
      } else if (infoName === '绕坝渗流') {
        if (num === 1) {
          return this.srcObj.rbslLv
        } else if (num === 2) {
          return this.srcObj.rbslHs
        } else if (num === 3) {
          return this.srcObj.rbslHh
        }
      } else if (infoName === '防渗墙应力应变') {
        if (num === 1) {
          return this.srcObj.scspwyLv
        } else if (num === 2) {
          return this.srcObj.scspwyHs
        } else if (num === 3) {
          return this.srcObj.scspwyHh
        }
      }
    },
    closeIframe () {
      this.iframeShow = false
    },
    tabChange (num) {
      this.tabIndex = num
      if (num === 1) {
        this.$nextTick(() => {
          this.initLineChart(this.chartObj)
        })
      }
    },
    dianClose () {
      this.dianShow = false
      this.tabIndex = 0
      this.chartObj = {
        x: [],
        y: [],
        yMax: [],
        yMin: []
      }
    },
    resizeChart () {
      if (this.lineChart) this.lineChart.resize()
    },
    disposeChart () {
      if (this.lineChart) this.lineChart.dispose()
    },
    initLineChart (obj) {
      console.log('查看12i3u182937981273981273', obj)
      if (!this.lineChart) this.lineChart = this.echarts.init(document.getElementById('lineChart'))
      const { color, fontSize } = {
        color: '#fff',
        fontSize: 12,
        colorCCC: '#ccc'
      }
      const option = {
        grid: {
          left: '3%',
          right: '6%',
          // top: '8%',
          // bottom: '8%',
          containLabel: true
        },
        legend: {
          type: 'plain',
          show: true,
          textStyle: {
            color: '#fff'
          },
          data: ['点位值']
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          borderColor: 'rgba(0, 0, 0, 0.7)',
          textStyle: {
            color: '#fff',
            fontSize
          }
        },
        color: ['#5c7bd9', '#93d47f', '#e4c26c'],
        backgroundColor: 'transparent',
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: obj.x,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.3)'
            }
          },
          // 坐标轴刻度
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          name: '单位（mm）',
          nameTextStyle: {
            color,
            fontSize,
            align: 'left', // 'left', 'center', 'right'
            verticalAlign: 'middle' // 'top', 'middle', 'bottom'
            // lineHeight: 56
            // padding: [0, 0, 0, 0] // 使用 padding 要将 align 属性改为 'center'
          },
          minInterval: 0.5,
          min: ({ min, max }) => parseInt(min - Math.abs(max - min) / 10),
          max: ({ min, max }) => parseInt(max + Math.abs(max - min) / 10),
          axisLine: {
            show: false,
            lineStyle: {
              color
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.3)'
            } // 样式
            // 坐标轴分隔线的显示间隔,在类目轴中有效,默认同 axisLabel.interval 一样,默认会采用标签不重叠的策略间隔显示标签
          }
        },
        series: [
          {
            name: '点位值',
            type: 'line',
            smooth: true,
            data: obj.y,
            tooltip: {
              valueFormatter: value => `${Number(value).toFixed(2)} mm`
            }
          },
          {
            name: '阈值',
            type: 'line',
            smooth: true,
            data: obj.yMax,
            symbolSize: 0,
            tooltip: {
              valueFormatter: value => `${Number(value).toFixed(2)} mm`
            },
            lineStyle: {
              color: '#93d47f'
            },
            markLine: {
              silent: true,
              symbol: 'none',
              label: {
                show: true
              },
              lineStyle: {
                color: 'transparent'
              },
              data: [
                {
                  type: 'max',
                  name: '最大值',
                  label: {
                    position: 'middle',
                    formatter: '阈值',
                    color: '#fff',
                    fontSize: 14
                  }
                }
              ]
            }
          },
          {
            name: '阈值',
            type: 'line',
            smooth: true,
            data: obj.yMin,
            symbolSize: 0,
            tooltip: {
              valueFormatter: value => `${Number(value).toFixed(2)} mm`
            },
            lineStyle: {
              color: '#e4c26c'
            },
            markLine: {
              silent: true,
              symbol: 'none',
              label: {
                show: true
              },
              lineStyle: {
                color: 'transparent'
              },
              data: [
                {
                  type: 'max',
                  name: '最大值',
                  label: {
                    position: 'middle',
                    formatter: '阈值',
                    color: '#fff',
                    fontSize: 14
                  }
                }
              ]
            }
          }
        ]
      }
      this.lineChart.clear()
      this.lineChart.setOption(option)
    },
    // 大坝运行预警
    async getDamWarmData () {
      const res = await axios.get('https://hjsk.guangchuan.org/api/fxyp/zhyp')
      console.log('大坝运行预警', res.data.data)
      this.damWarmData = res.data.data

      this.damWarmData.yjxx.forEach((item, index) => {
        this.numObj.red += item.red
        this.numObj.yellow += item.yellow
        this.numObj.green += item.green
        this.imgBtnObj[item.infoName] = {
          正常: index === 0,
          黄色预警: false,
          红色预警: false
        }
      })
      this.$eventBus.$emit('addLegend', res.data.data, this.imgBtnObj)
    },
    imgBtn (txt, num) {
      const obj = {
        green: '正常',
        yellow: '黄色预警',
        red: '红色预警'
      }
      if (num === 1) {
        this.imgBtnObj[txt][obj.green] = !this.imgBtnObj[txt][obj.green]
      } else if (num === 2) {
        this.imgBtnObj[txt][obj.yellow] = !this.imgBtnObj[txt][obj.yellow]
      } else if (num === 3) {
        this.imgBtnObj[txt][obj.red] = !this.imgBtnObj[txt][obj.red]
      }
      this.imgBtnKey = Date.now()
      this.$eventBus.$emit('addLegend', this.damWarmData, this.imgBtnObj)
    }
  },
  destroyed () {
    this.$eventBus.$emit('setTMDB', 'close')
    this.$eventBus.$emit('hiddenFilter')
    this.disposeChart()
    window.removeEventListener('resize', this.resizeChart)
  }
}
</script>

<style lang="scss" scoped>
.zhpp {
  position: absolute;
  left: 0;
  top: 0;
  .legend {
    position: absolute;
    left: 0;
    top: 656px;
    padding: 10px;
    padding-top: 0;
    background-color: rgba(125, 251, 244, 0.2);
    color: #fff;
    .box {
      display: flex;
      align-items: center;
      height: 50px;
      border-bottom: 1px solid rgba(125, 251, 244, 0.4);
      &.title {
        justify-content: center;
        height: 30px;
      }
      img {
        width: 26px;
        height: 26px;
        margin-right: 12px;
        cursor: pointer;
        opacity: 0.5;
        &.active {
          opacity: 1;
        }
      }
      span {
        font-size: 14px;
        white-space: nowrap;
      }
    }
  }
  .five {
    flex: 1;
  }
  .right-box {
    display: flex;
    position: absolute;
    top: 0;
    left: 1240px;
    flex-direction: column;
    width: 440px;
    height: 946px;
    background-color: #12386d;
  }
  #yjxx {
    height: 577px;
  }
  .f1 {
    flex: 1;
    p {
      line-height: 20px;
      margin-bottom: 20px;
    }
    button {
      padding: 10px;
      color: #1890ff;
    }
  }
  .yjxx {
    background-color: rgba(134, 158, 192, 0.1);
    .status {
      width: 52px;
      height: 26px;
      color: #fff;
      text-align: center;
      line-height: 26px;
      &.white {
        background: url("~@/assets/images/flood/white_icon.png") no-repeat
          center / contain;
      }
      &.green {
        background: url("~@/assets/images/flood/green_icon.png") no-repeat
          center / contain !important;
      }
      &.red {
        background: url("~@/assets/images/flood/red_icon.png") no-repeat center /
          contain !important;
      }
      &.yellow {
        background: url("~@/assets/images/flood/yellow_icon.png") no-repeat
          center / contain !important;
      }
    }
    .row-c {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      width: 100%;
      height: 40px;
      margin-bottom: 10px;
      padding: 0 25px 0 20px;
      background-color: #092957;
      &::after {
        content: "";
        display: block;
        position: absolute;
        width: 2px;
        height: 20px;
        background-color: #60fff6;
        top: 10px;
        left: 8px;
      }
      span {
        color: #fff;
        font-size: 14px;
      }
    }

    .v-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      width: 100%;
      height: 90px;
      margin-top: 10px;
      margin-bottom: 2px;
      padding: 0 17px 0 20px;
      background-color: #092957;
      .title-box {
        @include f_c2;
        position: relative;
        width: 65px;
        height: 70px;
        background: url("~@/assets/images/engineering/img_leftbj.png") no-repeat
          center / 100% 100%;
        border-radius: 3px;
        img {
          width: 40px;
          height: 40px;
          opacity: 0.7;
          margin-bottom: 5px;
        }
        p {
          font-size: 14px;
          &.green {
            color: #9cf6ba;
          }
          &.red {
            color: #ff839d;
          }
          &.yellow {
            color: #ffb667;
          }
        }
        .num {
          @include pa_xc;
          top: 20px;
          font-weight: 700;
        }
      }
      .box:last-child {
        margin-right: 0;
      }
      h4 {
        width: 130px;
        color: #fff;
        font-size: 14px;
        font-weight: 400;
      }
    }
    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      width: 100%;
      color: #d1d5d9;
      margin-bottom: 5px;
      padding: 0 25px 0 20px;
      background-color: rgba(96, 255, 246, 0.1);
      &::after {
        content: "";
        display: block;
        position: absolute;
        width: 2px;
        height: 20px;
        background-color: #60fff6;
        top: 15px;
        left: 8px;
      }
      .column {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        font-size: 14px;
      }
      .column1 {
        width: 130px;
        justify-content: flex-start;
      }
      .column2 {
        width: 52px;
      }
      .column3 {
        width: 52px;
      }
      .column4 {
        width: 52px;
      }
    }
    .row:last-child {
      margin-bottom: 0;
    }
  }
}
.dian-dialog ::v-deep {
  .el-dialog {
    display: flex;
    flex-direction: column;
    width: 700px;
    height: 500px;
    margin-top: 26vh !important;
    .el-dialog__header {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 100%;
      height: 50px;
      padding: 0;
      background-color: #12407f;
      color: #fff;
      font-size: 20px;
      .el-dialog__headerbtn {
        top: 50%;
        transform: translateY(-50%);
        i {
          color: #fff;
        }
      }
      .t-l,
      .t-r {
        width: 24px;
        height: 16px;
        background-size: 100% 150%;
      }
      .t-l {
        background: url("~@/assets/images/common/title_left.png") no-repeat left
          center;
      }
      .t-r {
        background: url("~@/assets/images/common/title_right.png") no-repeat
          right center;
      }
      p {
        margin: 0 20px;
      }
    }
    .el-dialog__body {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      flex: 1;
      padding: 10px;
      background-color: #0c3061;
      color: #fff;
      .big-chart-btn-box {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-bottom: 20px;
        button {
          width: 140px;
          height: 40px;
          margin-right: 50px;
          background-color: rgba(96, 255, 246, 0.5);
          color: #fff;
          &:hover {
            background-color: rgba(227, 133, 0, 0.6);
          }
          &.active {
            background-color: rgba(227, 133, 0, 0.6);
          }
        }
        button:last-child {
          margin-right: 0;
        }
      }
    }
    .el-dialog__footer {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      padding: 20px;
      background-color: pink;
    }
  }
}
.dian-dialog ::v-deep {
  .el-dialog__body {
    display: flex;
    flex-direction: column;
    .title {
      width: 100%;
      height: 40px;
      background-color: rgba(96, 255, 246, 0.05);
      padding: 0 20px;
      margin-bottom: 15px;
      button {
        height: 100%;
        margin-right: 20px;
        background-color: transparent;
        font-size: 14px;
        border-bottom: 1px solid transparent;
        transition: all 0.3s;
        &:hover {
          color: #60fff6;
        }
        &.active {
          color: #60fff6;
          border-bottom: 1px solid #60fff6;
        }
      }
    }
    .content {
      width: 100%;
      flex: 1;
      background-color: rgba(96, 255, 246, 0.05);
    }

    table {
      width: 100%;
      height: 100%;
      border-color: skyblue;
      border-collapse: collapse;
      tr {
        height: 40px;
        td {
          text-align: center;
        }
        td:nth-child(1) {
          width: 40%;
        }
        td:nth-child(2) {
          width: 60%;
        }
      }
    }
    .c2 {
      #lineChart {
        width: 100%;
        height: 100%;
      }
    }
    .c4 {
      display: flex;
      flex-direction: column;
      img {
        width: 100%;
        flex: 1;
      }
      p {
        color: #fff;
        font-size: 20px;
        text-align: center;
        line-height: 40px;
      }
    }
  }
}
.mask-txt {
  position: fixed;
  bottom: 12px;
  z-index: 999;
  width: 200px;
  height: 26px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 1);
  color: #fff;
  text-align: center;
  line-height: 26px;
}
</style>
