<template>
	<view class="device-status">
		<view class="title-wrap">
			<view style="width: 175px;">
				<u-subsection :list="modeList" mode="subsection" :current="current"
					@change="sectionChange"></u-subsection>
			</view>
			<u--text iconStyle="color: #3c9cff; margin-right: 4px; font-size: 26px;" type="primary"
				prefixIcon="file-text" align="right" :text="$tt('status.devDetail')"
				@click="handleGoToDeviceDetail"></u--text>
			<u--text iconStyle="color: #3c9cff; margin-right: 4px; font-size: 26px;" type="primary" prefixIcon="map"
				align="right" :text="$tt('status.map')" @click="Navigation"></u--text>



		</view>
		<view class="running-status" v-show="current==0">
			<base-status :device="device" ref="baseStatus"></base-status>
		</view>
		<view class="deviceVariable" v-show="current==1">
			<device-variable ref="deviceVariable" :device="device"></device-variable>
		</view>
	</view>
</template>

<script>
	import baseStatus from './base.vue';
	import deviceVariable from './variable.vue';

	export default {
		name: 'running-status',
		components: {
			baseStatus,
			deviceVariable
		},
		props: {
			device: {
				type: Object,
				default: null,
				required: true
			}
		},
		watch: {
			// 兼容小程序
			device: function(newVal, oldVal) {
				this.deviceInfo = newVal;
				this.isSubDev = newVal.subDeviceList && newVal.subDeviceList.length > 0;
			}
		},
		data() {
			return {
				modeList: [this.$tt('status.stateModel'), this.$tt('status.dataModel')],
				current: 0,
				isSubDev: false,
				deviceInfo: {} // 设备信息
			};
		},
		created() {
			// 获取设备状态(兼容H5和APP)
			if (this.device.subDeviceList) {
				this.deviceInfo = this.device;
				this.isSubDev = this.device.subDeviceList.length > 0;

			}
		},
		methods: {
			sectionChange(index) {
				this.current = index;
			},
			baseStatusRefresh() {
				this.$refs.baseStatus.deviceStatusRefresh();
			},
			// 调整到设备详情
			handleGoToDeviceDetail() {
				const {
					deviceId
				} = this.deviceInfo;
				uni.navigateTo({
					url: '/pagesA/home/device/detail/index?deviceId=' + deviceId
				});
			},

			Navigation() {
				const {
					longitude,
					latitude,
					deviceName
				} = this.deviceInfo;

				// 打印经纬度信息
				console.log("Longitude:", longitude);
				console.log("Latitude:", latitude);

				// 使用 uni.openLocation 打开导航
				uni.openLocation({
					longitude: parseFloat(longitude), // 经度，确保为浮点数
					latitude: parseFloat(latitude), // 纬度，确保为浮点数
					name: deviceName || "目标位置", // 可选：目标位置的名称
					address: '这是设备的地址', // 可选：具体地址信息
					success: function() {
						console.log('导航启动成功');
					},
					fail: function(err) {
						console.log('导航启动失败:', err);
					}
				});
			}


		}
	};
</script>

<style lang="scss" scoped>
	.device-status {
		.title-wrap {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx;
		}
	}
</style>