<template>
	<view class="controller">
		<view class="flex fwr jcsb">
			<control :style="{width: ['txt','ctl'].includes(controlType(item))?'48%':'100%'}" :item="item" :device="device" @mqttPublish="mqttPublish" @showChart="showChart" v-if="functionList && functionList.length>0" v-for="(item,index) in functionList" :key="index"></control>
		</view>

		<view v-if="functionList && functionList.length==0"
			style="width:100%;display:flex;justify-content: center;align-items: center;">
			<u-empty mode="data" />
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import control from './controls/index.vue'
	import {controlType} from './controls/util.js'
	export default {
		name: "controller",
		props: {
			device: {
				type: Object,
				default: null
			}
		},
		components: {
			control
		},
		data() {
			return {
				functionList: null,
				shadowUnEnable: false
			};
		},
		watch: {
			device: {
				handler: function(n, o) {
					if (n.thingsModels && n.thingsModels.length > 0) {
						//过滤出property
						this.functionList = this.device.thingsModels.filter(item => item.type == 2).map((item,
							index) => {
								return {
									...item,
									bg: this.$colorList[index % 7]
								}
							});
					}
				},
				immediate: true
			},
		},
		methods: {
			mqttPublish(item){
				this.$emit('mqttPublish',item)
			},
			showChart(item){
				this.$emit('showChart',item);
			},
			controlType(item){
				return controlType(item)
			},
		}
	}
</script>