<template>
  <div class="dashboard-container">
    <div class="platform">
      <div class="platform_content">
        <div style="padding: 20px 30px; margin-bottom: 10px">
          <el-row style="height:100%;" :gutter="30">
            <el-col :span="12">
              <video-box src="http://118.122.17.165:83/openUrl/itE01aM/live.m3u8" />
            </el-col>
            <el-col :span="12">
              <video-box src="http://118.122.17.165:83/openUrl/lfwY4CY/live.m3u8" />
            </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 :curve-info="curveCH4" style="width: 100%" />
            </el-col>
            <el-col :span="8">
              <curve-table-h2-s :curve-info="curveH2S" style="width: 100%" />
            </el-col>
            <el-col :span="8">
              <curve-table :curve-info="curveAtmo" 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="312022060007"
                :current-vls="curveCH4.line[0]"
                :config-info="config23"
                @refreshConfig="changeShow"
              />
            </el-col>
            <el-col :span="8">
              <data-table
                name="硫化氢"
                unit="ppm"
                device-type="22"
                :current-vls="curveH2S.line[0]"
                :config-info="config22"
                @refreshConfig="changeShow"
              />
            </el-col>
            <el-col :span="8">
              <data-table
                devcode="89860423192180035458"
                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 curveTable from '../../components/homeComp/curveTable.vue'
import curveTableCH4 from '../../components/homeComp/curveTableCH4.vue'
import curveTableH2S from '../../components/homeComp/curveTableH2S.vue'
import dataTable from '../../components/homeComp/dataTableCH4.vue'

import {
  configWarn,
  getDevInfo,
  gitNewVls
} from '../../api/models'

export default {
  name: 'Dashboard',
  components: {
    VideoBox,
    curveTable,
    dataTable,
    curveTableCH4,
    curveTableH2S
  },
  computed: {
    ...mapGetters([
      'name',
      'roleNames',
      'roleTips',
      'wellTypes',
      'deviceTypes',
      'communications',
      'area'
    ])
  },
  data() {
    return {
      AtmoTotal: 0,
      H2STotal: 0,
      CH4Total: 0,
      config24: {
        thresholdVol: '1',
        collectInterval: 10,
        uploadCycle: '7',
        retryNum: '5',
        IP: '192.0.0.1',
        port: '8081',
        current: 10,
        id: '24'
      },
      config22: {
        thresholdVol: '1',
        collectInterval: 10,
        uploadCycle: '7',
        retryNum: '5',
        IP: '192.0.0.1',
        port: '8081',
        current: 14,
        id: '22'
      },
      config23: {
        thresholdVol: '20',
        collectInterval: 10,
        uploadCycle: '7',
        retryNum: '5',
        IP: '192.0.0.1',
        port: '8081',
        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: 'c',
        title: '甲烷浓度变化曲线(NB-IoT)',
        line: [],
        row: [],
        unit: '压力(MPa)',
        power: 100
      },
      curveH2S: {
        id: 'c',
        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: []
    }
  },
  mounted() {
    // this.fetchVls()
    // 获取表格信息
    getDevInfo({ deviceType: '23', recentNum: '20', devcode: '312022060007' }).then((res) => {
      const temp = {
        id: 'a',
        title: '甲烷浓度变化曲线(NB-IoT)',
        line: [10, 22, 28, 23, 19],
        row: ['08.01', '08.02', '08.03', '08.04', '08.05'],
        unit: '浓度(%LEL)',
        power: 10
      }
      if (res.code === 200 && res.data.length > 0) {
        temp.line = res.data.map(item => item.dataValue)
        temp.row = res.data.map(item => item.uptime)
        temp.power = parseInt(res.data[0].cell)
      }

      this.curveCH4 = temp
      for (let i = 0; i <= this.curveCH4.row.length - 1; i++) {
        this.curveCH4.row[i] = this.curveCH4.row[i].split(' ')[1]
      }
    })
    getDevInfo({ deviceType: '22', recentNum: '20', devcode: '' }).then((res) => {
      const temp = {
        id: 'b',
        title: '硫化氢浓度变化曲线(NB-IoT)',
        line: [], // line: [10, 22, 28, 23, 19],
        row: [], // row: ['08.01', '08.02', '08.03', '08.04', '08.05'],
        unit: '浓度(ppm)',
        power: 0
      }
      if (res.code === 200 && res.data.length > 0) {
        temp.line = res.data.map(item => item.dataValue)
        temp.row = res.data.map(item => item.uptime)
        temp.power = parseInt(res.data[0].cell)
      }
      this.curveH2S = temp
      for (let i = 0; i <= this.curveH2S.row.length - 1; i++) {
        this.curveH2S.row[i] = this.curveH2S.row[i].split(' ')[1]
      }
    })
    getDevInfo({ deviceType: '24', recentNum: '20', devcode: '89860423192180035458' }).then((res) => {
      let temp = {
        id: 'c',
        title: '压力变化曲线(4G)',
        line: [],
        row: [],
        unit: '压力(MPa)',
        power: 90
      }

      if (res.code === 200 && res.data.length > 0) {
        temp.line = res.data.map(item => item.dataValue)
        temp.row = res.data.map(item => item.uptime)
        temp.power = parseInt(res.data[0].cell)
      }

      this.curveAtmo = temp
      for (let i = 0; i <= this.curveAtmo.row.length - 1; i++) {
        this.curveAtmo.row[i] = this.curveAtmo.row[i].split(' ')[1]
      }
    })
  },
  methods: {
    changeinfo(data) {
      this['config' + data.id] = data
      console.log(this['config' + data.id])
      // 得到传来的数据
      console.log(this['config' + data.id])
      const temp = this['config' + data.id]
      // 修改配置
      temp['deviceType'] = temp.id
      configWarn(temp).then(res => {
        // console.log(temp);
        console.log(res, '配置')
        gitNewVls(data.id).then(res => {
          if (res.data.code === 200) {
            console.log(res.data.data, 'woaodeshj')
            this['config' + data.id].thresholdVol = res.data.data
          }
        })
      })
    },
    // 获取阈值
    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>