<template>
  <view class="margin-bottom-20" style="height: 200rpx;">
	  <view class="flex fdc jcsb background-color-fff h100 padding-20 border-radius-10 box-sizing-border-box">
	  	<view class="flex aic">
	  		<view class="border-radius-50" :style="{background:item.bg}">
	  			<view class="iconfont width-70 height-70 font-size-50 font-color-fff flex aic jcc" :class="'icon-'+item.modelIcon"></view>
	  		</view>
	  		<text class="margin-left-10" @click="showChart(item)">
	  			{{item.name}}
	  		</text>
	  	</view>
		
		<basectl :item="item" :device="device" @mqttPublish="mqttPublish"> </basectl>
	  </view>
  </view>
</template>

<script>
	import basectl from './basectl.vue'
export default {
  name: 'ctl',
  mixins: [],
  components: {basectl},
  props: {
	  item:Object,
	  device:Object
  },
  data() {
    return{}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
	  mqttPublish(item){
	  		  this.$emit('mqttPublish',item);
	  },
	  showChart(item){
	  		  this.$emit('showChart',item)
	  }
  },
};
</script>
<style lang="scss" scoped>
</style>