<template>
  <div class="display-content">
    <el-row :gutter="10" class="panel-group" style="margin-right: 0;margin-left: 0">
      <el-col :xs="24" :sm="24" :lg="24" class="card-panel-col" style="padding: 15px 15px 0 15px">
        <!--<img src="../../assets/display/title.png" alt="" width="100%" height="45px">-->
        <h1 class="title"><span>物联网监控大屏</span></h1>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="24" class="card-panel-col" style="padding: 0 15px">
        <div class="card-panel">
          <div class="map_top">
            <img class="one_box1" src="../../assets/display/ksh42.png" >
            <img class="one_box2" src="../../assets/display/ksh42.png" >
            <img class="one_box3" src="../../assets/display/ksh42.png" >
            <img class="one_box4" src="../../assets/display/ksh42.png" >
            <div class="map" style="color: red">
              <baidu-map :center="center" :zoom="zoom" :scroll-wheel-zoom="true" style="height: 100%" @ready="handler">
                <bm-geolocation :show-address-bar="true" :auto-location="true" anchor="BMAP_ANCHOR_BOTTOM_RIGHT" zoom="10"/>
              </baidu-map>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="7" class="card-panel-col" style="padding-left: 15px">
        <div class="card-panel">
          <h4>设备实时数据显示</h4>
          <el-carousel :interval="2500" class="list_item">
            <el-carousel-item v-for="(item,eq) in listLength" :key="eq">
              <el-row :gutter="10" class="box">
                <el-col v-for="(_item,index) in listP" v-if="index>=eq*9" :key="index" :span="8">
                  <ul class="iy">
                    <li>{{ _item.unit }}</li>
                    <li v-if="_item.name !== '风向'">{{ _item.value }}</li>
                    <li v-if="_item.name === '风向' && '0' === _item.value">北风</li>
                    <li v-if="_item.name === '风向' && '1' === _item.value">东北风</li>
                    <li v-if="_item.name === '风向' && '2' === _item.value">东风</li>
                    <li v-if="_item.name === '风向' && '3' === _item.value">东南风</li>
                    <li v-if="_item.name === '风向' && '4' === _item.value">南风</li>
                    <li v-if="_item.name === '风向' && '5' === _item.value">西南风</li>
                    <li v-if="_item.name === '风向' && '6' === _item.value">西风</li>
                    <li v-if="_item.name === '风向' && '7' === _item.value">西北风</li>
                    <li>{{ _item.name }}</li>
                  </ul>
                </el-col>
              </el-row>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="10" class="card-panel-col" style="padding: 0 15px">
        <div class="card-panel" style="position: relative">
          <div class="el-icon-arrow-left" style="position: absolute;left: 0;top: 50%;font-size: 50px;color: #fff" @click="clickleft"/>
          <div v-for="(_item) in videos" :key="_item" class="center_bottom">
            <!--          <div class="center_bottom"/>-->
            <video id="myPlayer" controls playsinline webkit-playsinline autoplay style="height: 100%;width: 100%">
              <!--<source :src="http_url" type="application/x-mpegURL">-->
              <source :src="_item" type="rtmp/flv">
            </video>
          </div>
          <div class="el-icon-arrow-right" style="position: absolute;right: 0;top: 50%;font-size: 50px;color: #fff" @click="clickright"/>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="7" class="card-panel-col" style="padding-right: 15px">
        <div class="card-panel">
          <h4>24小时数据监测</h4>
          <div class="list_item">
            <div id="myChart" ref="chart" :style="{width: '100%', height: '100%'}"/>
          </div>
        </div>
      </el-col>

    </el-row>
  </div>

</template>

<script>
// import echarts from 'echarts'
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
import Screenfull from '../../components/Screenfull/index'
import { loadCDataByDeviceid } from '@/api/sData'
import { queryAllByUseridNoPage } from '@/api/sDevice'
import { findProjectByUserid } from '@/api/sProject'
import { selectAll } from '@/api/sItem'
import EZUIPlayer from 'ezuikit/ezuikit'
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'GIpUncIwoaK7BjBZdrpOs0ytywLippwu'
})
export default {
  components: { Screenfull },
  data() {
    return {
      player: '',
      rtmp_url: '',
      items: '',
      videos: [],
      http_url: '',
      message: '加载中...',
      deviceid: '',
      data24: '',
      lengendData: [],
      dtime: '',
      loadFlag: '',
      seriesData: [],
      devices: '',
      projects: '',
      showflag: 0,
      listP: [],
      listLength: 0,
      BMap: '',
      map: '',
      center: { lng: 0, lat: 0 },
      zoom: 10,
      chart: null
    }
  },
  computed: {

  },
  mounted() {
    // this.drawLine()
    this.loadMapDevice()
    this.selectAllForm()
    // this.loadVideo()
  },
  created() {
    this.loadData()
    this.findProjectByUserid()
    // this.GetLiveUrl()
  },
  methods: {
    clickleft() {
      // console.log('pre')
      var size = this.projects.length
      this.showflag = this.showflag - 1
      if (this.showflag >= 0) {
        this.loadVideo(this.showflag)
      } else {
        this.showflag = size - 1
        this.loadVideo(this.showflag)
      }
    },
    clickright() {
      // console.log('next2')
      var size = this.projects.length
      this.showflag = this.showflag + 1
      if (this.showflag < size) {
        this.loadVideo(this.showflag)
      } else {
        this.showflag = 0
        this.loadVideo(this.showflag)
      }
    },
    GetLiveUrl() {
      // 异步获取直播地址，并赋值给rtmp_url,http_url
      this.videos.push('rtmp://rtmp01open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.hd')
      // this.http_url = 'http://hls01open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.hd.m3u8'
      setTimeout(function() {
        this.player = new EZUIPlayer('myPlayer')
      }, 2000)
    },
    findProjectByUserid() {
      findProjectByUserid().then(res => {
        this.projects = res
        this.loadVideo(this.showflag)
      })
    },
    loadMapDevice() {
      queryAllByUseridNoPage().then(res => {
        this.devices = res
        // console.log(this.devices)
        if (this.map !== '') {
          this.map.clearOverlays()
        } else {
          console.log('等了1秒')
          setTimeout(this.loadMapDevice(), 1000)
          return
        }
        // 循环加入设备
        for (var i = 0; i < this.devices.length; i++) {
          var marker = new this.BMap.Marker(new this.BMap.Point(this.devices[i].jd, this.devices[i].wd)) // 创建点
          var label = new this.BMap.Label(this.devices[i].name, {
            offset: new this.BMap.Size(20, -10)
          })
          label.setStyle({
            // color: '#892B31',
            color: 'grey',
            backgroundColor: '0.05',
            border: '0'
          })
          marker.setTitle(this.devices[i].deviceid)
          marker.setLabel(label)
          var _this = this
          marker.addEventListener('click', function(val) {
            _this.deviceid = this.z.title
            _this.loadData()
          })
          this.map.addOverlay(marker)
          this.center = { lng: this.devices[i].jd, lat: this.devices[i].wd }
        }
        // console.log(res)
      })
    },
    loadVideo(showflag) {
      // var sproject = res
      // this.rtmp_url = sproject.videoadr
      // console.log(this.projects, showflag, this.projects[showflag])
      if (this.videos[0] !== this.projects[showflag].videoadr) {
        this.videos = []
        this.showflag = showflag
        this.videos.push(this.projects[showflag].videoadr)
        // console.log(this.rtmp_url, sproject, '121212121212')
        setTimeout(function() {
          this.player = new EZUIPlayer('myPlayer')
        }, 2000)
      }
    },
    loadData() {
      loadCDataByDeviceid(this.deviceid).then(res => {
        var response = res.dataMap
        var sDevice = res.sDeviceDTO
        this.getListP(res)
        var subject = sDevice.subject.split(',')
        var code = sDevice.code.split(',')
        var lengend = ''
        this.data24 = response
        this.dtime = ''
        this.lengendData = []
        this.seriesData = []
        for (var key in response) {
          this.dtime = response[key].map(function(cdata) { return cdata.dtime })
          var serData = response[key].map(function(cdata) { return cdata.data })
          for (var j = 0; j < code.length; j++) {
            if (key === code[j]) {
              lengend = subject[j]
            }
          }
          var temp = {
            name: lengend,
            type: 'line',
            smooth: true,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              normal: {
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            data: serData
          }
          this.seriesData.push(temp)
          this.lengendData.push(lengend)
        }
        this.drawLine(this.lengendData, this.dtime, this.seriesData)
      })
    },
    selectAllForm() {
      selectAll().then(response => {
        this.items = response
      })
    },
    getListP(res) {
      this.listP = []
      var response = res.dataMap
      var sDevice = res.sDeviceDTO
      var subject = sDevice.subject.split(',')
      var code = sDevice.code.split(',')
      for (var key in response) {
        this.dtime = response[key].map(function(cdata) {
          return cdata.dtime
        })
        var serData = response[key].map(function(cdata) {
          return cdata.data
        })
        var pdata = serData[serData.length - 1]
        var sub = null
        var unit = null
        for (var j = 0; j < code.length; j++) {
          if (key === code[j]) {
            sub = subject[j]
            for (var l = 0; l < this.items.length; l++) {
              var itemtab = this.items[l].code
              if (code[j] === itemtab) {
                unit = this.items[l].unit
                if (unit === '' || unit === null) {
                  unit = itemtab
                }
              }
            }
          }
        }
        var p = {
          unit: unit,
          value: pdata,
          name: sub
        }
        this.listP.push(p)
      }
      if (this.listP.length <= 9) {
        this.listLength = 1
      } else {
        this.listLength = Math.ceil(this.listP.length / 9)
      }
      // this.InitTabScroll()
    },
    handler({ BMap, map }) {
      this.map = map
      this.BMap = BMap
      const _this = this
      /* const mapStyle = { style: 'midnight' }
      map.setMapStyle(mapStyle)*/
      /* if (this.isAdd) {*/
      const geolocation = new BMap.Geolocation()
      geolocation.getCurrentPosition(function getinfo(position) {
        if (_this.center === '') {
          _this.center = { lng: position.longitude, lat: position.latitude }
        }
      }, function(e) {
      }, { provider: 'baidu' })
      /* } else {
        map.clearOverlays()
        var marker = new BMap.Marker(new BMap.Point(this.form.jd, this.form.wd)) // 创建点
        map.addOverlay(marker)
        // _this.autoLocationPoint = { lng: this.form.jd, lat: this.form.wd }
      _this.center = { lng: this.form.jd, lat: this.form.wd }
    }*/
    },
    // 24小时数据监测
    drawLine(lengendData, dtime, seriesData) {
      if (this.chart !== null) {
        this.chart.clear()
      }
      this.chart = this.$echarts.init(this.$refs.chart)
      this.chart.setOption({
        tooltip: { // 鼠标指上时的标线
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#fff'
            }
          }
        },
        legend: {
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          // data: ['PH', '溶解氧', '温度', '信号强度'],
          data: lengendData,
          right: '10px',
          top: '0px',
          textStyle: {
            fontSize: 12,
            color: '#fff'
          }
        },
        grid: {
          x: 45,
          y: 25,
          x2: 8,
          y2: 25
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          data: dtime
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
              color: '#fff'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }],
        series: seriesData
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .panel-group {
    .card-panel-col{
      margin-bottom: 15px;
    }
    .card-panel {
      height: calc((100vh - 110px) / 2);
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);
      .icon-people {
        color: #40c9c6;
      }
      .icon-message {
        color: #36a3f7;
      }
      .icon-money {
        color: #f4516c;
      }
      .icon-shopping {
        color: #34bfa3
      }
      .card-panel-icon-wrapper {
        float: left;
        margin: 14px 0 0 14px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }
      .card-panel-icon {
        float: left;
        font-size: 48px;
      }
      .card-panel-description {
        float: right;
        font-weight: bold;
        margin: 26px;
        margin-left: 0px;
        .card-panel-text {
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 12px;
        }
        .card-panel-num {
          font-size: 20px;
        }
      }
    }
  }
  .small{
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    color: #fff;
  }
  .temp{
    width: 100%;
    height: 100%;
    padding-left: 0;
    background: url("../../assets/display/dianli2.png") no-repeat center;
    background-size: 100% 100%;
  }
  .list_item{
    padding: 20px 40px;
  }
  .el-col{
    height: 100%;
  }
  .title{
      height: 45px;
      width: 100%;
      text-align: center;
      /*color: #fff;*/
      margin: 0;
      line-height: 45px;
      font-weight: 400;
      background: url("../../assets/display/title.png") no-repeat;
      background-size: 100% 100%;
      span{
          display: inline-block;
          width: 100%;
          height: 100%;
          /*background: -webkit-linear-gradient(left,#ed3577,#E6D205 25%,#f40 50%,#F75A82 75%,#00CD66);*/
          background: -webkit-linear-gradient(left,#AEEEEE,#8DEEEE 25%,#7FFFD4 50%,#63B8FF 75%,#40E0D0);
          color: transparent;
          -webkit-background-clip: text;
          background-size: 200% 100%;
          animation: masked-animation 3s infinite linear;
      }
  }
</style>
