<template>
	<view class="iots-component-box">
		<view class="attr-item-left">
			<view class="iconfont" :class="icon"></view>
			<view class="attr-name">{{name}}</view>
			<view v-if="logShow" class="iconfont icon-unordered-list" @click="clickLog"></view>
		</view>
		<view class="attr-item-right">
			<view class="attr-value item-select" @click="changeSelect()">
				<text
					:style="{color:value?'#333':'#ccc'}">{{value!=null?getVlaue(value):disabled?'--':'请选择'}}</text>
				<view v-if="!disabled" class="iconfont icon-xiangyou1"></view>
			</view>
		</view>
		<u-select mode="single-column" :disabled="disabled" :default-value="selectDefaultValue" v-model="selectShow" :list="selectList" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	export default{
		name: 'iots-select',
		props:{
			// 选择值或默认值
			value: {
				type: [String, Number],
				default: ''
			},
			// 选择列表（处理后）
			selectList:{
				type: [Array],
				default: [],
			},
			// 图标处理后
			icon: {
				type: [String],
				default: 'icon-xuanze'
			},
			name: {
				type: [String],
				default: ''
			},
			logShow:{
				type: [Boolean],
				default: true
			},
			disabled:{
				type: [Boolean],
				default: true
			}
		},
		data(){
			return {
				selectDefaultValue:[0],
				selectShow: false,
			}
		},
		methods:{
			changeSelect() {
				if(!this.disabled){
					this.selectShow = true;
				}
				
			},
			// 样式转换
			getVlaue(value) {
				console.log("this.selectList[value]",this.selectList,value)
				for(let i=0; i<this.selectList.length;i++){
					if(this.selectList[i].value == value){
						return this.selectList[i].label;
					}
				}
			},
			confirm(e) {
				console.log("当前选择",e,e[0].value)
				this.$emit('input', e[0].value);
				this.$emit('change',e[0].value);
				this.selectDefaultValue = [this.selectList.findIndex(item => item.value === e[0].value)] || [0];
			},
			clickLog(){
				this.$emit('clickLog');
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../common.css';
	.iots-component-box{
		padding: 20rpx 20rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		border-radius: 10rpx;
		
		.attr-item-right{
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: flex-end;
			.attr-value{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				height: 70rpx;
				flex: 1;
				&.item-select {
					padding: 0 20rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					color: #ccc;
					.iconfont{
						margin-left: 10rpx;
					}
				}
			}
		}
	}
</style>