<template>
  <a-alert
    message="设备接入前提"
    type="info"
    show-icon
  >
  <template #description>
    <div>1. 创建了模型，并已经知道模型id,模型中定义的传输协议</div>
    <div>2. 创建了设备，能够查看设备id 、设备密钥"</div>
  </template>
  </a-alert>
  <a-alert
    message="支持数据格式"
    type="info"
    show-icon
    style="margin-top: 10px;"
  >
  <template #description>
    <div>1. JSON</div>
    <div>2. 二进制码流</div>
  </template>
  </a-alert>

  <a-alert
    message="设备接入"
    type="info"
    show-icon
    style="margin-top: 10px;"
  >
  <template #description>
    <div>根据模型中定义的传输协议选择对应的协议接入方式</div>
  </template>
  </a-alert>
  <a-row style="margin-top: 20px;" :gutter="[8, 8]" >
    <a-col :xs="24" :md="24" :xl="24" >
      <a-card
        title="平台支持协议: HTTP 😊"
      >
        <a-row>
          <a-col :span="24" ><h3>上报数据</h3></a-col>
          <a-col :span="24" >
            <a-form :label-col="{ span: 3 }" >
              <a-form-item  label="请求地址" >
                api/device/{deviceId}/attributes
              </a-form-item>
              <a-form-item  label="deviceId" >
                地址栏中的{deviceId} 在使用中用设备id替换
              </a-form-item>
              <a-form-item  label="请求方法" >
                POST
              </a-form-item>
              <a-form-item  label="其他" >
                <div>1. 请求头中添加名称为secret的请求头，对应的值是设备密钥</div>
                <div>2. body 中存放设备数据</div>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
        <a-divider />
        <a-row style="margin-top: 10px;" >
          <a-col><h3>接受数据</h3></a-col>
          <a-col span="24" >暂不支持</a-col>
        </a-row>
      </a-card>
    </a-col>
    <a-col :xs="24" :md="24" :xl="24" >
      <a-card
        title="平台支持协议: MQTT 😊"
      >
      <a-row>
          <a-col span="24" ><h3>连接</h3></a-col>
          <a-form :label-col="{ span: 4 }" >
              <a-form-item label="注意">
                 暂时不支持证书接入
              </a-form-item>
              <a-form-item label="描述"  >
                <a-descriptions  bordered>
                  <a-descriptions-item :span="24" label="clientId(客户端id,客户端标识)">设备id</a-descriptions-item>
                  <a-descriptions-item :span="24" label="username(用户名)">模型id</a-descriptions-item>
                  <a-descriptions-item :span="24" label="password(密码)">设备密钥</a-descriptions-item>
                </a-descriptions>
              </a-form-item>
          </a-form>
      </a-row>
      <a-divider />
        <a-row>
          <a-col span="24" ><h3>发布数据</h3></a-col>
          <a-col span="24" >
            <a-form :label-col="{ span: 3 }" >
              <a-form-item  label="发布主题 " >
                api/{deviceId}/attributes
              </a-form-item>
              <a-form-item  label="说明" >
                deviceId 是设备id,一般情况下与连接的设备id一致，特殊情况是 连接时候使用的设备id 是网关，这里的设备id 是网关的子设备id
              </a-form-item>
              <a-form-item  label="参数" >
                发布数据格式可以是json 以及任意输入
              </a-form-item>
            </a-form>
          </a-col>
          <a-divider />
          <a-col span="24"  >
            <h3>订阅</h3>
          </a-col>
          <a-col span="24" >
            <a-form :label-col="{ span: 3 }" >
              <a-form-item label="订阅">
                当前版本，无论设备是否订阅，平台都会下发消息和命令到设备，所以可以不订阅
              </a-form-item>
              <a-form-item label="主题" >
                 /sub/command
              </a-form-item>
            </a-form>
          </a-col>
          <a-divider />
          <a-col span="24"  >
            <h3>接受数据</h3>
          </a-col>
          <a-col span="24" >
            <a-form :label-col="{ span: 3 }" >
              <a-form-item label="">
                MQTT 连接成功之后
              </a-form-item>
              <a-form-item label="" >
                在设备-云端下发-下发数据/下发命令 界面可以选择下发的数据
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
    <a-col :xs="24" :md="24" :xl="24" >
      <!--
        style="height: 1090px;" -->
      <a-card
        title="平台支持协议: COAP 😊"
      >
        <a-row>
          <a-col :span="24" ><h3>上报数据</h3></a-col>
          <a-col :span="24" >
            <a-form :label-col="{ span: 3 }" >
              <a-form-item  label="地址" >
                api/{deviceId}/attributes
              </a-form-item>
              <a-form-item  label="deviceId" >
                地址栏中的{deviceId} 在使用中用设备id替换
              </a-form-item>
              <a-form-item  label="请求方法" >
                POST
              </a-form-item>
              <a-form-item  label="其他" >
                options 中第一个other options 是设备密钥,也就是请求头的第一项是设备密钥
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
  </a-row>

</template>
<script lang='ts' setup >
</script>
<style lang='less' scoped >
</style>
