<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?getValue(value):'请选择'}}</text>
				<view v-if="!disabled" class="iconfont icon-xiangyou1"></view>
			</view>
		</view>
		<u-picker mode="time" v-model="selectShow"  :params="params" :disabled="disabled" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	export default{
		name: 'iots-select-time',
		props:{
			// 选择值或默认值
			value: {
				type: [String, Number],
				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,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
			}
		},
		methods:{
			changeSelect() {
				if(!this.disabled){
					this.selectShow = true;
				}
				
			},
			// 样式转换
			getValue(value) {
				let time = '';
				console.log("uni.getSystemInfoSync().platform",uni.getSystemInfoSync().platform)
				if(uni.getSystemInfoSync().platform === 'ios') {
					time = this.$u.timeFormat(value, 'yyyy/mm/dd hh:MM:ss');
				}else{
					time = this.$u.timeFormat(value, 'yyyy-mm-dd hh:MM:ss');
				}
				return time;
			},
			confirm(e) {
				console.log("当前选择",e)
				let time = '';
				if(uni.getSystemInfoSync().platform === 'ios') {
					time = e.year + '/' + e.month + '/' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second;
				}else{
					time = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second;
				}
				this.$emit('input', time);
				this.$emit('change',time);
				// 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>