<template>
  <div>
    <van-sticky :offset-top="0">
      <van-dropdown-menu>
        <van-dropdown-item
          @change="change"
          v-model="robot"
          :options="robotList"
        />
      </van-dropdown-menu>
    </van-sticky>
    <div id="robot" class="app">
      <div class="van-hairline--surround msg"></div>
      <div class="van-hairline--left van-hairline--right van-hairline--bottom">
        <van-field v-model="message" rows="1" autosize type="textarea" />
        <div style="text-align: right; padding: 0.1rem">
          <van-button size="small" type="primary" @click="tomsg"
            >发送</van-button
          >
        </div>
      </div>
      <van-cell title="控制机器人" value="" />
      <van-row>
        <van-col span="12">
          <div class="control">
            <van-button type="default" @click="() => toOperation('head', 'up')">
              上
            </van-button>
            <div class="conBtnGroup">
              <van-button
                type="default"
                @click="() => toOperation('head', 'left')"
              >
                左
              </van-button>
              <van-button
                type="default"
                @click="() => toOperation('head', 'down')"
              >
                下
              </van-button>
              <van-button
                type="default"
                @click="() => toOperation('head', 'right')"
              >
                右
              </van-button>
            </div>
            <div class="text">头部</div>
          </div>
        </van-col>
        <van-col span="12">
          <div class="control">
            <van-button
              type="default"
              @click="() => toOperation('wheel', 'forward')"
            >
              前
            </van-button>
            <div class="conBtnGroup">
              <van-button
                type="default"
                @click="() => toOperation('wheel', 'left')"
              >
                左
              </van-button>
              <van-button
                type="default"
                @click="() => toOperation('wheel', 'backward')"
              >
                后
              </van-button>
              <van-button
                type="default"
                @click="() => toOperation('wheel', 'right')"
              >
                右
              </van-button>
            </div>
            <div class="text">轮子</div>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { getRobotToken, getRobotClient } from "@/api/robot/index.js";
import Config from "@/config/index.js";
import {
  Button as vanButton,
  Cell as vanCell,
  Col as vanCol,
  Row as vanRow,
  Field as vanField,
  DropdownMenu as vanDropdownMenu,
  DropdownItem as vanDropdownItem,
  Sticky as vanSticky,
  Toast
} from "vant";
import "vant/lib/button/style";
import "vant/lib/cell/style";
import "vant/lib/col/style";
import "vant/lib/row/style";
import "vant/lib/field/style";
import "vant/lib/sticky/style";
import "vant/lib/dropdown-menu/style";
import "vant/lib/dropdown-item/style";
export default {
  name: "app",
  robotToken: "",
  scoket: undefined,
  deviceId: "",
  data: function() {
    return {
      robotList: [
        { text: "机器人1", value: 0 },
        { text: "机器人2", value: 1 },
        { text: "机器人3", value: 2 }
      ],
      robot: 0,
      message: ""
    };
  },
  methods: {
    tomsg() {
      this.scoket &&
        this.scoket.send({
          id: "",
          dialog: {
            reply: ""
          }
        });
    },
    toOperation(type, opera) {
      let p = {};
      p[type] = opera;
      this.scoket &&
        this.scoket.send({
          id: "",
          dialog: {
            reply: ""
          },
          controller: p
        });
    },
    createRobotLink() {
      if (!window.WebSocket) return Toast("该版本暂时不支持");
      this.scoket && this.scoket.close();
      this.scoket = new WebSocket(
        Config.robotBaseWss +
          "/ws/app/event?clientId=" +
          Config.clientId +
          "&deviceId=" +
          this.deviceId +
          "&token=" +
          this.robotToken
      );
      this.scoket.onmessage = function(event) {
        var data = event.data;
        console.log(data);
        // 处理数据
      };
    },
    change(e) {
      this.deviceId = e;
      this.createRobotLink();
    }
  },
  mounted() {
    getRobotToken().then(res => {
      if (res.error_code !== 0) return Toast("机器人走丢了");
      this.robotToken = res.token || "";
      getRobotClient({
        clientId: Config.clientId,
        token: this.robotToken
      }).then(r => {
        if (res.error_code !== 0) return Toast("暂时没有上线设备");
        this.robotList = r.result || [];
      });
    });
  },
  beforeDestroy: function() {},
  components: {
    vanButton,
    vanCell,
    vanCol,
    vanRow,
    vanField,
    vanSticky,
    vanDropdownMenu,
    vanDropdownItem
  }
};
</script>
<style lang="scss">
#robot {
  padding: 0.1rem 0.16rem;
  .msg {
    padding: 0.1rem;
    height: 3rem;
  }
  .control {
    display: inline-block;
    margin-top: 0.1rem;
    width: 1.45rem;
    text-align: center;
    .conBtnGroup {
      text-align: center;
    }
    .text {
      padding: 0.1rem;
      font-size: 0.14rem;
    }
  }
}
</style>
