<template>
	<view class="c-input-item">
		<!-- 文本、数字框 -->
		<u-form-item v-if="type == 'text'" :label="label" :labelWidth="200" :label-position='"top"'
			:label-style="{whiteSpace:'nowrap',fontSize:'26rpx', color:'#121212'}" :required="required"
			:right-icon="rightIcon ? 'arrow-right' : ''" :prop="name">
			<u-input v-model="getValues" :maxlength="maxlenth" input-align="left" :disabled="disabled" :border="border"
				:placeholder="placeholder ? placeholder : '请输入'" :placeholderStyle="placeholderStyle"
				:customStyle="{fontSize:'36rpx'}" :clearable="clearable" @focus="onFocus"
				@click="handelClick('text')" />
		</u-form-item>
		<u-form-item v-if="type == 'number'" :label="label" :labelWidth="200" :label-position='"top"'
			:label-style="{whiteSpace:'nowrap',fontSize:'26rpx', color:'#121212'}" :required="required"
			:right-icon="rightIcon ? 'arrow-right' : ''" :prop="name">
			<u-input v-model="getValues" :maxlength="maxlenth" type="number" input-align="left" :disabled="disabled"
				:border="border" :placeholder="placeholder ? placeholder : '请输入'" :placeholderStyle="placeholderStyle"
				:clearable="clearable" :customStyle="{fontSize:'36rpx'}" />
		</u-form-item>
		<!-- 单选 -->
		<u-form-item v-if="type == 'radio'" :label="label" :labelWidth="200" :label-position='"top"'
			:label-style="{whiteSpace:'nowrap',fontSize:'26rpx', color:'#121212' }" :required="required"
			:right-icon="rightIcon ? 'arrow-right' : ''" :prop="name">
			<u-radio-group v-model="getValues">
				<u-radio v-for="(item, index) in options" :key="index" :name="item.value" :disabled="item.disabled"
					active-color="#54B4F5">
					{{ item.label }}
				</u-radio>
			</u-radio-group>
		</u-form-item>
		<!-- 时间选择器 -->
		<u-form-item v-if="type == 'date'" :label="label" :labelWidth="200" :label-position='"top"'
			:label-style="{whiteSpace:'nowrap',fontSize:'26rpx', color:'#121212' }" :required="required"
			:right-icon="rightIcon ? 'arrow-right' : ''" :prop="name">
			<u-input v-model="getValues" type="text" input-align="left" :disabled="true" :border="border"
				:clearable="clearable" :placeholder="placeholder ? placeholder : '请选择时间'"
				:placeholderStyle="placeholderStyle" @click="time_visible = true" :customStyle="{fontSize:'36rpx'}" />
			<u-picker @confirm="onConfirmTime" mode="time" v-model="time_visible" :params="{
						year: true,
						month: true,
						day: true,}"></u-picker>
		</u-form-item>
		<!-- 单列模式 -->
		<u-form-item v-if="type == 'select'" :label="label" :labelWidth="200" :label-position='"top"'
			:label-style="{whiteSpace:'nowrap',fontSize:'26rpx', color:'#121212' }" :required="required"
			:right-icon="rightIcon ? 'arrow-right' : ''" :prop="name">
			<u-input v-model="getValues" :maxlength="100" input-align="left" :disabled="true" :border="border"
				:clearable="clearable" :placeholder="placeholder ? placeholder : '请选择'"
				:placeholderStyle="placeholderStyle" :customStyle="{fontSize:'36rpx'}" @click="handelClick('select')" />
			<u-select @confirm="onConfirmSingle" v-model="select_visible" mode="single-column" :list="options"
				:default-value="defs">
			</u-select>
		</u-form-item>
		<!-- 多列联动模式 -->
		<u-form-item v-if="type == 'cascader'" :label="label" :labelWidth="200" :label-position='"top"'
			:label-style="{whiteSpace:'nowrap',fontSize:'26rpx', color:'#121212' }" :required="required"
			:right-icon="rightIcon ? 'arrow-right' : ''" :prop="name">
			<u-input v-model="getValues" input-align="left" :disabled="true" :border="border" :clearable="clearable"
				:placeholder="placeholder ? placeholder : '请选择'" :placeholderStyle="placeholderStyle"
				@click="select_visible = true" />
			<u-select @confirm="onConfirmAutoMutil" v-model="select_visible" mode="mutil-column-auto" :list="options">
			</u-select>
		</u-form-item>
		<!-- 省市区选择 -->
		<u-form-item v-if="type == 'area'" :label="label" :labelWidth="200" :label-position='"top"'
			:label-style="{whiteSpace:'nowrap',fontSize:'26rpx', color:'#121212' }" :required="required"
			:right-icon="rightIcon ? 'arrow-right' : ''" :prop="name">
			<u-input v-model="getValues" input-align="left" :disabled="true" :border="border" :clearable="clearable"
				:placeholder="placeholder ? placeholder : '请选择'" :placeholderStyle="placeholderStyle"
				@click="select_visible = true" :customStyle="{fontSize:'36rpx'}" />
			<u-select @confirm="onConfirmArea" v-model="select_visible" mode="mutil-column-auto" :list="options">
			</u-select>
		</u-form-item>
		<!-- 文本输入框 -->
		<u-form-item v-if="type == 'textarea'" :label="label" :labelWidth="200" :label-position='"top"'
			:label-style="{whiteSpace:'nowrap',fontSize:'26rpx', color:'#121212'}" :border-bottom="borderBottom" :required="required"
			:right-icon="rightIcon ? 'arrow-right' : ''" :prop="name">
			<u-input v-model="getValues" input-align="left" :disabled="disabled" :border="border"
				:placeholder="placeholder ? placeholder : '请输入'" :placeholderStyle="placeholderStyle"
				:clearable="clearable" :customStyle="{fontSize:'36rpx'}" />
		</u-form-item>
	</view>

</template>

<script>
	// import miment from 'miment'
	import {
		getLabel
	} from '../../common/util.js'

	export default {
		name: 'u-input-item',
		props: {
			//title
			label: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: 'text'
			},
			// 是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置
			required: {
				type: Boolean,
				default: false
			},
			rightIcon: {
				type: Boolean,
				default: true
			},
			//表单提交时的key
			name: {
				type: String,
				default: ''
			},
			value: {
				type: Object,
				default () {
					return {}
				}
			},
			clearable: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
			border: {
				type: Boolean,
				default: false
			},
			borderBottom: {
				type: Boolean,
				default: true
			},
			placeholder: {
				type: String,
				default: ''
			},

			maxlenth: {
				type: String,
				default: '100'
			},

			placeholderStyle: {
				type: String,
				default: 'font-size:34rpx;color:rgba(0,0,0,0.5);'
			},
			customStyle: {
				type: Object,
				default () {
					return {};
				}
			},
			//单选框数据列表
			options: {
				type: Array,
				default () {
					return []
				}
			},
			//
			defs: {
				type: Array,
				default () {
					return [0]
				}
			},
		},
		data() {
			return {
				time_visible: false,
				select_visible: false,
				currentValue: '',
			}
		},

		watch: {

		},
		computed: {
			getValues: {
				// getter
				get: function() {
					const defaultValue = this.$parent.model[this.name];
					let finalValue = ''

					if (!defaultValue || defaultValue.length <= 0 || JSON.stringify(defaultValue) == '{}') {
						return ''
					}

					switch (this.type) {

						case 'date':
							return defaultValue > 0 ? this.$u.timeFormat(defaultValue) : ''
							break;

						case 'select':
							const selectValue = this.options.filter((item, index) => {
								return defaultValue == item.value
							})
							return selectValue[0].label
							break;

						case 'cascader':
							const {
								options = []
							} = this;

							return defaultValue
							break;

						case 'area':
							finalValue = defaultValue.province + '/' + defaultValue.city + '/' + defaultValue
								.district
							return finalValue
							break;

						default:
							return defaultValue
							break;

					}

				},
				// setter
				set: function(newValue) {
					console.log(newValue)

					switch (this.type) {

						case 'number':
							this.$emit('input', newValue);
							return newValue
							break;

						case 'text':
						case 'textarea':
						case 'radio':
							this.$emit('input', newValue);
							return newValue
							break;

						case 'date':
						case 'select':
						case 'area':
							return this.currentValue
							break;

					}

				}
			}
		},
		methods: {
			handelClick(type) {
				switch (type) {
					case 'text':
						this.$emit('click', '');
						break;

					case 'select':
						this.select_visible = true;
						try {
							// 收起键盘
							uni.hideKeyboard();
						} catch (e) {}
						break;
				}
			},

			onFocus(value) {
				this.$emit('focus', value);
			},

			onConfirmTime(value) {
				const millisecond = new Date().setFullYear(value.year, Number(value.month) - 1, value.day);
				const timestamp = Math.floor(millisecond / 1000);

				let currentValue = this.$u.timeFormat(timestamp)

				console.log(timestamp, currentValue)

				this.currentValue = currentValue;
				this.$emit('input', timestamp);

			},
			onConfirmSingle(value) {
				this.currentValue = value[0].label;
				this.$emit('input', value[0].value);

			},

			onConfirmAutoMutil(value) {
				let currentValue = '';
				let newValue = [];

				if (value && value.length > 0) {
					value.map((item, index, array) => {

						if (index == array.length - 1) {
							currentValue += item.label
						} else {
							currentValue += (item.label + '/')
						}
						newValue.push(item.label)
					})
				}
				this.currentValue = currentValue;
				this.$emit('input', newValue);

			},
			onConfirmArea(value) {
				console.log(value)
				let currentValue = '';
				let newValue = {};

				if (value && value.length > 0) {
					value.map((item, index, array) => {

						switch (index) {
							case 0:
								currentValue += (item.label + '/')
								newValue.province = item.label;
								newValue.province_code = item.value;
								break;
							case 1:
								currentValue += (item.label + '/')
								newValue.city = item.label;
								newValue.city_code = item.value;
								break;
							case 2:
								currentValue += (item.label)
								newValue.district = item.label;
								newValue.district_code = item.value;
								break;
						}
					})
				}
				this.currentValue = currentValue;
				this.$emit('input', newValue);

			},

		}
	}
</script>

<style lang="scss" scoped>
	.c-input-item {
		u-radio-group {
			text-align: right;
			display: flex;
			flex-direction: row-reverse;
		}
	}
</style>