<template>
  <el-row :gutter="15" style="width: 100%;margin: 0px;">
    <el-col :xs="24" :sm="24" :lg="24" class="card-panel-col" style="padding-left: 15px;">
      <el-card class="box-card" shadow="never" style="border:  0px;padding: 0px;padding-top: 5px;">
        <div class="card-panel" style="padding-top: 5px;">
          <div slot="header" class="clearfix" style="border-bottom: 1px solid #E6EBF5;text-align: center;padding-bottom: 20px;">
            <span class="role-span" style="text-align: center;font-size: 18px;">设备最新数据显示</span>
          </div>
          <el-row :gutter="10" class="box" style="margin-top: 20px;">
            <el-col v-for="(_item,index) in listP" :key="index" :span="2">
              <ul class="iy">
                <li>{{ _item.unit }}</li>
                <!--<li>{{ _item.value }}</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>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
require('echarts/theme/macarons') // echarts theme
import Bus from '@/utils/Bus.js'
import { selectAll } from '@/api/sItem'
import { loadNowDataByDeviceid } from '@/api/sData'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      chart: null,
      sidebarElm: null,
      listP: [],
      deviceid: '003100493337363416473930',
      items: '',
      chartData: {
        visitsData: [],
        ipData: []
      },
      weekDays: []
    }
  },
  created() {
    this.getParams()
    this.getDevices()
  },
  mounted() {
    this.selectAllForm()
  },
  methods: {
    getDevices() {
      Bus.$on('myFun', (message) => { // 这里最好用箭头函数，不然this指向有问题
        // this.devices = message
        loadNowDataByDeviceid(message.deviceid).then(res => {
          // console.log(res, 'linechart')
          this.getListP(res)
        })
      })
    },
    getParams() {
      Bus.$on('devices', (message) => {
        var mes = message[0]
        loadNowDataByDeviceid(mes.deviceid).then(res => {
          // console.log(res, 'linechart')
          this.getListP(res)
        })
      })
    },
    selectAllForm() {
      selectAll().then(response => {
        this.items = response
      })
    },
    getListP(res) {
      this.listP = []
      var data = res
      for (var i = 0; i < data.length; i++) {
        var item = data[i].item
        for (var j = 0; j < this.items.length; j++) {
          var itemtab = this.items[j].code
          if (item === itemtab) {
            var pdata = data[i].data
            var sub = this.items[j].subject
            var unit = this.items[j].unit
            if (unit === '' || unit === null) {
              unit = item
            }
            var p = {
              unit: unit,
              value: pdata,
              name: sub
            }
            this.listP.push(p)
          }
        }
      }
    }
  }
}
</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>
