<template>
  <div class="dashboard-container">
    <div class="platform">
      <div class="platform_content">
        <div style="display: flex; justify-content: flex-end; padding-right: 30px;align-items: center">
          <span style="margin-left: 10px;margin-right: 5px;">报警页面推送</span><el-switch v-model="alarmConfig.websocketAlarm" :active-value="1" :inactive-value="0" @change="setAlarmConfig" />
          <span style="margin-left: 10px;margin-right: 5px;">报警短信推送</span><el-switch v-model="alarmConfig.shortMessageAlarm" :active-value="1" :inactive-value="0"  @change="setAlarmConfig" />
        </div>
        <div style="padding: 20px 30px; margin-bottom: 10px">
          <el-row style="height:100%;" :gutter="30">
            <el-col :span="12">
              <video-box :src="url0" />
            </el-col>
            <el-col :span="12">
              <video-box :src="url1" />
            </el-col>
          </el-row>
        </div>
        <div style="padding: 20px 30px">
          <el-row style="height:100%;" :gutter="30">
            <el-col :span="8">
              <curve-table-c-h4 :title="curveCH4.title" :power="curveCH4.power" :unit="curveCH4.unit" :row="curveCH4.row" :line="curveCH4.line" style="width: 100%" />
            </el-col>
            <el-col :span="8">
              <curve-table-c-h4 :title="curveH2S.title" :power="curveH2S.power" :unit="curveH2S.unit" :row="curveH2S.row" :line="curveH2S.line" style="width: 100%" />
            </el-col>
            <el-col :span="8">
              <curve-table-c-h4 :title="curveAtmo.title" :power="curveAtmo.power" :unit="curveAtmo.unit" :row="curveAtmo.row" :line="curveAtmo.line" style="width: 100%" />
            </el-col>
          </el-row>
        </div>
        <div style="padding: 20px 30px">
          <el-row style="height:100%;" :gutter="30">
            <el-col :span="8">
              <data-table
                name="甲烷浓度"
                unit="%LEL"
                device-type="23"
                devcode="312022070010"
                :current-vls="curveCH4.line[0]"
                :config-info="config23"
                @refreshConfig="changeShow"
              />
            </el-col>
            <el-col :span="8">
              <data-table
                name="硫化氢"
                unit="ppm"
                device-type="22"
                devcode="3C2022000001"
                :current-vls="curveH2S.line[0]"
                :config-info="config22"
                @refreshConfig="changeShow"
              />
            </el-col>
            <el-col :span="8">
              <data-table
                devcode="89860321472000648836"
                name="压力值"
                unit="MPa"
                device-type="24"
                :current-vls="curveAtmo.line[0]"
                :config-info="config24"
                @refreshConfig="changeShow"
              />
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import VideoBox from '../../components/homeComp/VideoBox.vue'
import curveTableCH4 from '../../components/homeComp/curveTableCH4.vue'
import dataTable from '../../components/homeComp/dataTableCH4.vue'

import {
  getDevInfo, getVideoUrl,
  gitNewVls,
  getAlarmSwitchStatus, setAlarmSwitch
} from '../../api/models'

export default {
  name: 'Dashboard',
  components: {
    VideoBox,
    dataTable,
    curveTableCH4
  },
  computed: {
    ...mapGetters([
      'name',
      'roleNames',
      'roleTips',
      'wellTypes',
      'deviceTypes',
      'communications',
      'area'
    ])
  },
  data() {
    return {
      websocketUrl: 'ws://111.198.10.15:11315/websocket/123456',
      socket: null,
      alarmConfig: {
        websocketAlarm: 0,
        shortMessageAlarm: 0,
        scene: 'H2S'
      },
      url0: '',
      url1: '',
      AtmoTotal: 0,
      H2STotal: 0,
      CH4Total: 0,
      config24: {
        thresholdVol: '1',
        collectInterval: 1,
        uploadCycle: '7',
        retryNum: '5',
        IP: '',
        port: '',
        current: 10,
        id: '24'
      },
      config22: {
        thresholdVol: '1',
        collectInterval: 1,
        uploadCycle: '7',
        retryNum: '5',
        IP: '',
        port: '',
        current: 14,
        id: '22'
      },
      config23: {
        thresholdVol: '20',
        collectInterval: 1,
        uploadCycle: '7',
        retryNum: '5',
        IP: '',
        port: '',
        current: 30,
        id: '23'
      },
      configInfo: { a: '', b: 10, c: '', d: '', e: '', f: '' },
      isCH4: true,
      isAtmo: true,
      isH2S: true,
      showconfig: false,
      video: '',
      total1: null,
      total2: null,
      Tiemr: null,
      currentTime: '',
      curveCH4: {
        id: 'a',
        title: '甲烷浓度变化曲线(NB-IoT)',
        line: [],
        row: [],
        unit: '浓度(%LEL)',
        power: 100
      },
      curveH2S: {
        id: 'b',
        title: '硫化氢浓度变化曲线(NB-IoT)',
        line: [],
        row: [],
        unit: '浓度(ppm)',
        power: 100
      },
      curveAtmo: {
        id: 'c',
        title: '压力变化曲线(4G)',
        line: [],
        row: [],
        unit: '压力(MPa)',
        power: 100
      },
      tableDataAtmo: [],
      tableDataH2S: [],
      tableDataCH4: [],
      tableDataHistoryAtmo: [],
      tableDataHistoryCH4: [],
      tableDataHistoryH2S: [],
      clock: null,
      refreshInterval: 60
    }
  },
  // watch: {
  //   alarmConfig: {
  //     handler(val) {
  //       this.setAlarmConfig()
  //     },
  //     deep: true,
  //     immediate: false
  //   }
  // },
  mounted() {
    this.initWebSocket()
    this.getAlarmSwitch()
    this.getVideoUrls()
    this.refreshCurve()
    this.clock = setInterval(() => {
      this.refreshCurve()
    }, this.refreshInterval * 1000)
  },
  beforeDestroy() {
    if (this.clock) {
      clearInterval(this.clock)
      this.clock = null
    }
  },
  methods: {
    // 初始化websocket
    initWebSocket() {
      if (typeof (WebSocket) === 'undefined') {
        this.$message.warning('您的浏览器不支持socket')
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.websocketUrl)
        // 监听socket连接
        this.socket.onopen = ()=> {
          console.log('websocket已打开')}
        // 监听socket错误信息
        this.socket.onerror = function() { console.log('websocket错误') }
        // 监听socket消息
        this.socket.onmessage = (msg) => {
          debugger
          console.log(msg.data)
          const message = JSON.parse(msg.data)
          this.$notify({
            title: '警告',
            message: message.message,
            type: 'warning'
          })
        }
      }
    },
    // 获取报警开关状态
    getAlarmSwitch() {
      getAlarmSwitchStatus().then(res => {
        this.alarmConfig.websocketAlarm = res.data.websocketAlarm
        this.alarmConfig.shortMessageAlarm = res.data.shortMessageAlarm
      })
    },
    // 设置报警开关状态
    setAlarmConfig() {
      setAlarmSwitch(this.alarmConfig).then(res => {
        if (res.code === 200) {
          this.$message.success('设置成功')
        }
      })
    },
    // 获取视频地址
    getVideoUrls() {
      const codes = ['a949833b73814e5aa13668082b3ccab3', 'a0e487c492b44dd8be79d2b0422fb64d']
      for (let i = 0; i < codes.length; i++) {
        getVideoUrl(codes[i]).then(res => {
          if (res.code === 200) {
            this['url' + i] = res.data.url
          }
        })
      }
    },

    refreshCurve() {
      this.fetchCurve('23', '20', '312022070010', 'curveCH4')
      this.fetchCurve('22', '20', '3C2022000001', 'curveH2S')
      this.fetchCurve('24', '20', '89860321472000648836', 'curveAtmo')
    },
    // 获取曲线
    fetchCurve(deviceType, recentNum, devcode, obj) {
      getDevInfo({ deviceType: deviceType, recentNum: recentNum, devcode: devcode }).then((res) => {
        const temp = {
          line: [],
          row: [],
          power: 100
        }
        if (res.code === 200 && res.data.length > 0) {
          temp.line = res.data.map(item => item.dataValue)
          temp.row = res.data.map(item => item.uptime.split(' ')[1])
          temp.power = parseInt(res.data[0].cell)
          this[obj].line = temp.line
          this[obj].row = temp.row
          this[obj].power = temp.power
        }
      })
    },
    // 获取阈值
    fetchVls() {
      // 获取阈值
      gitNewVls(24).then(res => {
        if (res.data.code === 200) {
          this.config24.thresholdVol = res.data.data
        }
      })
      gitNewVls(23).then(res => {
        if (res.data.code === 200) {
          this.config23.thresholdVol = res.data.data
        }
      })
      gitNewVls(22).then(res => {
        if (res.data.code === 200) {
          this.config22.thresholdVol = res.data.data
        }
      })
    },
    // 下发配置完成
    changeShow(data) {
      this.fetchVls()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 10px 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.platform {
  width: 100%;
  height: 100%;
  margin: 0 auto;

  &_title {
    display: flex;

    div {
      text-align: center;
      flex: 1;
    }

    .time {
      text-align: right;
    }
  }

  &_content {
    &_video {
      display: flex;
      justify-content: space-around;
      margin: 30px;
    }

    &_table {
      display: flex;
      width: auto;
      margin-left: auto;
      //height: 400px;
      justify-content: space-around;
    }
  }
}
</style>