<template>
  <view>
	  <view class="background-color-fff border-radius-10 margin-bottom-20 padding-20 box-sizing-border-box" >
	  	<view class="flex aic jcsb " @click="show=!show">
			<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">
					{{item.name}}
				</text>
			</view>
			<u-icon  :name="show?'arrow-up':'arrow-down'" ></u-icon>
	  	</view>
		<view v-show="show" class="">
			<view class="flex aic margin-top-20 " v-for="(param,index) in item.dataType.params" :key="index">
				<view class="w30 font-size-30 font-color-l2" @click="showChart(param)">
					{{param.name}}
				</view>
				<basectl class="w70" :item="param" :device="device" @mqttPublish="mqttPublish"> </basectl>
			</view>
		</view>
	  </view>
  </view>
</template>

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