<template>
    <Cn-page :loading="loading">
        <view slot="body">
            <view class="about">
                <view class="about-title">{{ deviceInfo.name }}</view>
                <view class="about-text">设备类型：{{ deviceInfo.devTypeName }}</view>
                <view class="about-text">设备型号：{{ deviceInfo.devModelName }}</view>
                <view class="about-text">设备接入方式：{{ deviceInfo.devAccessMethod }}</view>
                <!-- <view class="about-text">设备注册时间：永久使用</view> -->
                <view class="about-text">程序版本：{{ deviceInfo.programVersionName }}</view>
                <view class="about-text">网络设备ID：{{ deviceInfo.ndid }}</view>
            </view>
        </view>
    </Cn-page>
</template>
<script>
import { queryDeivceById } from '@/common/api/device'
import { queryByCode, queryCsDictTree, queryByid, queryEdDataPage } from '@/common/api/dictionary'
export default {
    data() {
        return {
            loading: true,
            deviceInfo: {},
        }
    },
    methods: {},
    onLoad(options) {
        queryDeivceById(options.id).then((res) => {
            this.deviceInfo = res.data[0]
            if (this.deviceInfo.devAccessMethod == 'MQTT') {
                queryByCode('Device_Type').then((res) => {
                    Promise.all([queryCsDictTree(res.data.id), queryByid(res.data.id), queryEdDataPage()]).then(
                        (resp) => {
                            this.deviceInfo.devTypeName = resp[0].data.find(
                                (item) => item.id === this.deviceInfo.devType,
                            )?.name
                            this.deviceInfo.devModelName = resp[1].data.find(
                                (item) => item.id === this.deviceInfo.devModel,
                            )?.name
                            this.loading = false
                        },
                    )
                })
            } else {
                queryByCode('DEV_CLD').then((res) => {
                    this.deviceInfo.devTypeName = res.data.name
                    Promise.all([queryCsDictTree(res.data.id), queryByid(res.data.id), queryEdDataPage()]).then(
                        (resp) => {
                            this.deviceInfo.devModelName = resp[1].data.find(
                                (item) => item.id === this.deviceInfo.devModel,
                            )?.name
                            this.loading = false
                        },
                    )
                })
            }
        })
    },
}
</script>
<style lang="scss">
.about {
    padding: 34rpx;
    .about-title {
        font-size: 34rpx;
        font-weight: bold;
        color: #333333;
        margin-bottom: 34rpx;
    }
    .about-text {
        font-size: 28rpx;
        color: #666666;
        margin-bottom: 34rpx;
    }
}
</style>
