<template>
  <a-layout class="flex-display" style="height: 100vh; background-color: white;">
    <div class="height100 width100 flex-column flex-justify-start flex-align-start">
      <a-row class="pt20 pl20" style="height: 45px; width: 100vw" align="middle">
        <a-col :span="1">
          <span style="color: #1fa3f6" class="fz26">
            <SendOutlined rotate="90" />
          </span>
        </a-col>
        <a-col :span="20">
          <span class="fz20 pl5">{{ drone.data.model }}</span>
        </a-col>
        <a-col :span="3">
          <span class="fz16" v-if="drone.data.bound_status" style="color: #737373">Bound</span>
          <a-button type="primary" @click="onBindDevice" v-else>Bind</a-button>
        </a-col>
      </a-row>
    </div>
  </a-layout>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { message } from 'ant-design-vue'
import { SendOutlined } from '@ant-design/icons-vue'
import { BindBody, bindDevice } from '/@/api/manage'
import { getRoot } from '/@/root'
import { ELocalStorageKey } from '/@/types'
import { DeviceStatus } from '/@/types/device'
import { getWorkspaceId } from '/@/utils'

const root = getRoot()

interface DeviceStatusData {
  data: DeviceStatus
}
const drone = reactive<DeviceStatusData>({
  data: JSON.parse(localStorage.getItem(ELocalStorageKey.Device)!)
})

function onBindDevice() {
  const bindParam: BindBody = {
    device_sn: drone.data.sn,
    user_id: localStorage.getItem(ELocalStorageKey.UserId)!,
    workspace_id: getWorkspaceId()
  }
  bindDevice(bindParam).then(bindRes => {
    if (bindRes.code !== 0) {
      message.error('bind failed:' + bindRes.message)
      console.error(bindRes.message)
      return
    }
    drone.data.bound_status = true
    localStorage.setItem(ELocalStorageKey.Device, JSON.stringify(drone.data))
  })
}
</script>

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