<template>
  <div style="background-color: rgb(240, 242, 245)">
    <el-row :gutter="10">
      <el-col v-for="agvObj in agvList" :span="24/agvList.length">
        <div v-if="agvObj.car_no === '' || agvObj.car_no == null" class="grid-content bg-purple" style="height: 190px;background-color: white;border-bottom:3px solid rgb(240, 242, 245)">
          请添加更多AGV设备
        </div>
        <div v-if="agvObj.car_no !== '' && agvObj.car_no != null" class="grid-content bg-purple" style="height: 190px;background-color: white;border-bottom:3px solid rgb(240, 242, 245)">
          <el-row>
            <el-col :span="8">
              <img
                :src="require('../assets/acs/home_agv.png')"
                alt=""
                width="50px"
                height="50px;"
                style="margin-top: 20px;margin-left: 50px; vertical-align:bottom;transform: rotate(0deg);"
              >
            </el-col>
            <el-col :span="16">
              <div class="grid-content bg-purple" style="height: 70px; font-size: 30px; text-align: center;line-height: 70px;">{{ agvObj.car_no }}</div>
            </el-col>
          </el-row>
          <el-row>
            <div class="grid-content bg-purple" style="height: 40px;">
              <el-col :span="8" style="line-height: 40px; text-align: center">
                电量：
              </el-col>
              <el-col :span="16">
                <el-progress v-if="agvObj.electricity<=30" :text-inside="true" :stroke-width="25" :percentage="agvObj.electricity" status="exception" style="margin-top: 7px; margin-right: 5px;" />
                <el-progress v-if="agvObj.electricity>30 && agvObj.electricity<100" :text-inside="true" :stroke-width="25" :percentage="agvObj.electricity" status="warning" style="margin-top: 7px; margin-right: 5px;" />
                <el-progress v-if="agvObj.electricity == 100" :text-inside="true" :stroke-width="25" :percentage="agvObj.electricity" status="success" style="margin-top: 7px; margin-right: 5px;" />
              </el-col>
            </div>
          </el-row>
          <el-row>
            <div class="grid-content bg-purple" style="height: 40px;">
              <el-col :span="8" style="line-height: 40px; text-align: center">
                状态：
              </el-col>
              <el-col :span="16" style="line-height: 40px; text-align: center">
                {{ agvObj.status_name }}
              </el-col>
            </div>
          </el-row>
          <el-row>
            <div class="grid-content bg-purple" style="height: 40px;">
              <el-col :span="8" style="line-height: 40px; text-align: center">
                报警：
              </el-col>
              <el-col :span="2" :offset="6" style="line-height: 40px; text-align: center">
                <div v-if="agvObj.flag==='0'" style="border-radius: 50%;background-color: green;height: 23px; margin-top: 5px;" />
                <div v-if="agvObj.flag==='1'" style="border-radius: 50%;background-color: #ff0000;height: 23px; margin-top: 5px;" />
              </el-col>
            </div>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="6">
        <div class="grid-content bg-purple" style="background-color: white">
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-light" style="height: 190px; border-bottom: 3px solid rgb(240, 242, 245)">
                <el-row>
                  <div class="grid-content bg-purple" style="height: 70px; font-size: 30px; text-align: center;line-height: 70px;">任务统计（当天）</div>
                </el-row>
                <el-row>
                  <div class="grid-content bg-purple" style="height: 40px;">
                    <el-col :span="8" style="line-height: 40px; text-align: center">
                      任务总数：
                    </el-col>
                    <el-col :span="16" style="line-height: 40px; text-align: center">
                      {{ task.total_num }}
                    </el-col>
                  </div>
                </el-row>
                <el-row>
                  <div class="grid-content bg-purple" style="height: 40px;">
                    <el-col :span="8" style="line-height: 40px; text-align: center">
                      完成任务：
                    </el-col>
                    <el-col :span="16" style="line-height: 40px; text-align: center">
                      {{ task.finish_num }}
                    </el-col>
                  </div>
                </el-row>
                <el-row>
                  <div class="grid-content bg-purple" style="height: 40px;">
                    <el-col :span="8" style="line-height: 40px; text-align: center">
                      取消任务：
                    </el-col>
                    <el-col :span="16" style="line-height: 40px; text-align: center">
                      {{ task.cancel_num }}
                    </el-col>
                  </div>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple" style="height: 190px;">
                <el-row>
                  <div class="grid-content bg-purple" style="height: 70px; font-size: 30px; text-align: center;line-height: 70px;">指令统计（当天）</div>
                </el-row>
                <el-row>
                  <div class="grid-content bg-purple" style="height: 40px;">
                    <el-col :span="8" style="line-height: 40px; text-align: center">
                      当前指令：
                    </el-col>
                    <el-col :span="16" style="line-height: 40px; text-align: center">
                      {{ inst.total_num }}
                    </el-col>
                  </div>
                </el-row>
                <el-row>
                  <div class="grid-content bg-purple" style="height: 40px;">
                    <el-col :span="8" style="line-height: 40px; text-align: center">
                      取消指令：
                    </el-col>
                    <el-col :span="16" style="line-height: 40px; text-align: center">
                      {{ inst.cancel_num }}
                    </el-col>
                  </div>
                </el-row>
              </div>
            </el-col>
          </el-row>

        </div>
      </el-col>
      <el-col :span="18" style="background:#fff;">
        <div class="chart-wrapper">
          <bar-chart :chart-data="barChartData" />
        </div>
      </el-col>
    </el-row>

  </div>

</template>

<script>

import BarChart from '@/components/Echarts/BarChart2'

export default {
  name: 'Dashboard',
  components: {
    BarChart
  },
  data() {
    return {
      barChartData: {
        expectedData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        actualData: [10, 52, 200, 334, 500, 330, 220]
      },
      agvList: [
        {
          car_no: 1,
          name: 'agv1',
          electricity: 100,
          status_name: '待机',
          flag: '0'
        },
        {
          car_no: 2,
          name: 'agv2',
          electricity: 50,
          status_name: '有任务',
          flag: '1'
        },
        {
          car_no: 3,
          name: 'agv3',
          electricity: 60,
          status_name: '充电中',
          flag: '1'
        },
        {
          car_no: 4,
          name: 'agv4',
          electricity: 80,
          status_name: '充电中',
          flag: '0'
        }
      ],
      task: {
        total_num: 50,
        finish_num: 40,
        cancel_num: 10
      },
      inst: {
        total_num: 50,
        cancel_num: 10
      },
      url: '/src/assets/acs/home_agv.png'
    }
  },
  created() {
    this.webSocket()
  },
  methods: {
    webSocket() {
      const that = this
      if (typeof (WebSocket) === 'undefined') {
        this.$notify({
          title: '提示',
          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器！',
          type: 'warning',
          duration: 0
        })
      } else {
        const id = 'home_data'
        // 获取token保存到vuex中的用户信息，此处仅适用于本项目，注意删除或修改
        // 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送
        // const wsUri = process.env.VUE_APP_WS_API + '/webSocket/' + id
        const wsUri = window.g.prod.VUE_APP_BASE_API.replace('http', 'ws') + '/webSocket/' + id

        this.socket = new WebSocket(wsUri)
        // 监听socket打开
        this.socket.onopen = function() {
          console.log('浏览器WebSocket已打开')
          // that.socket.send('测试客户端发送消息')
        }

        // 监听socket消息接收
        this.socket.onmessage = function(msg) {
          // debugger
          console.log(msg)
          const data = JSON.parse(msg.data)
          that.agvList = data.msg.agv_rows
          that.task = data.msg.task_jo
          that.inst = data.msg.inst_jo
          that.barChartData = data.msg.bar_jo
        }

        // 监听socket错误
        this.socket.onerror = function() {
          that.$notify({
            title: '错误',
            message: '服务器错误，无法接收实时报警信息',
            type: 'error',
            duration: 0
          })
        }
        // 监听socket关闭
        this.socket.onclose = function() {
          console.log('WebSocket已关闭')
        }
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
