<template>
  <el-row :gutter="15" style="width: 100%;height: 440px;margin: 0px;">
    <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="17" style="margin-bottom: 10px;width: 100%;">
      <el-card class="box-card" shadow="never" style="margin: -10px;border:  0px;">
        <div slot="header" class="clearfix">
          <span class="role-span">设备信息</span>
        </div>
        <div :class="className" :style="{height:height,width:width}">
          <el-form ref="form" :model="form" size="small" label-width="120px">
            <el-form-item label="设备名称" >
              <span>{{ form.name }}</span>
            </el-form-item>
            <el-form-item label="设备ID" >
              <span>{{ form.deviceid }}</span>
            </el-form-item>
            <el-form-item label="地址" >
              <span>{{ form.address }}</span>
            </el-form-item>
            <el-form-item label="采集频率(分钟)" >
              <span>{{ form.timetrack }}</span>
            </el-form-item>
            <el-form-item label="上传频率(分钟)" >
              <span>{{ form.timetrack2 }}</span>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
require('echarts/theme/macarons') // echarts theme
import Bus from '@/utils/Bus.js'
import { findProjectByUserid } from '@/api/sProject'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      devices: [],
      player: '',
      rtmp_url: '',
      valueProjectName: '',
      projectFormUser: '',
      videos: [],
      http_url: '',
      message: '加载中...',
      chart: null,
      form: {
        id: '',
        jd: '',
        wd: '',
        qrcode: '',
        name: '',
        nt: ''
      }
    }
  },
  created() {
    // this.laodProject()
    this.getParams()
    this.getParam()
  },
  methods: {
    getParams() {
      Bus.$on('devices', (message) => {
        var mes = message[0]
        this.form.name = mes.name
        this.form.deviceid = mes.deviceid
        this.form.address = mes.address
        this.form.timetrack = mes.timetrack / (1000 * 60)
        this.form.timetrack2 = mes.timetrack2 / (1000 * 60)
      })
    },
    getParam() {
      Bus.$on('myFun', (message) => { // 这里最好用箭头函数，不然this指向有问题
        // var a = message
        this.form.name = message.name
        this.form.deviceid = message.deviceid
        this.form.address = message.address
        this.form.timetrack = message.timetrack / (1000 * 60)
        this.form.timetrack2 = message.timetrack2 / (1000 * 60)
      })
    },
    laodProject() {
      findProjectByUserid().then(response => {
        this.projectFormUser = response
        this.valueProjectName = this.projectFormUser[0].videoadr
        /* this.videos.push(this.projectFormUser[0].videoadr)
        setTimeout(function() {
          this.player = new EZUIPlayer('myPlayer')
        }, 2000)*/
      })
    }
  }
}
</script>
