<template>
  <a-card>
    <div class="subtitle" >
      设备接入服务为每个设备添加“设备影子”，用于访问和控制设备的属性值。它通过可靠的数据存储能力，无论设备在线或者离线，您都能查询和更改设备的属性。

      当设备离线时，“设备影子”将显示设备最近一次上报的属性值；通过下发“期望值”，“设备影子”将存储对设备属性的预期控制，当设备重新连接时，服务将“期望值”更新至设备
    </div>

    <a-row justify="space-between" style="margin-top: 20px;" >
      <a-col>
      </a-col>
      <a-col>
        <a-space>
          <!-- <a-button type="primary" >属性配置</a-button> -->
          <reload-icon-tsx :loading="state.loading" :reload="getDeviceShadow" />
        </a-space>
      </a-col>
    </a-row>

      <a-table
        style="margin-top: 10px;"
        :loading="state.loading"
        :columns="columns"
        :data-source="state.shadowList"
      >
      <template #bodyCell="{column, record}" >
        <template v-if="column.key === 'value'"  >
            {{record[CommonController.dataTypeByKeyMap.get(record.dataType)]}}
        </template>
      </template>
      </a-table>
  </a-card>
</template>

<script lang="ts" setup >
import { CommonController, DeviceContriller } from '@/controller'
import { ReloadIconTsx } from '@/components/MicroComponents/index'
import { onMounted, reactive } from 'vue'
import { useRoute } from 'vue-router'

const columns = [
  {
    title: 'key',
    dataIndex: 'key'
  },
  {
    title: 'keyLabel',
    dataIndex: 'keyLabel'
  },
  {
    title: '数据类型',
    dataIndex: 'dataType'
  },
  {
    title: '单位',
    dataIndex: 'dataUnit'
  },
  {
    title: '值',
    dataIndex: 'value',
    key: 'value',
    ellipsis: true
  }
]

const route = useRoute()
const deviceId = route.query.id as string

const state = reactive({
  loading: false,
  shadowList: []
})

const getDeviceShadow = async () => {
  state.loading = true
  const { data } = await DeviceContriller.getDevicShadow(deviceId)
  state.loading = false
  state.shadowList = data
}

onMounted(() => {
  getDeviceShadow()
})

</script>

<style lang="less" scoped >
@import '~@/styles/theme.less';
.subtitle {
  color: @sublabel-color;
  font-size: 14px;
}
</style>
