<template>
	<view>
		<!-- type:text -->
		<view class="input_container" v-if="'text'===define.type">
			<view class="name_">{{define.title}}</view>
			<view class="input_out" :class="[{'isrequired':define.required}]">
				<input :disabled="!define.disabled" class="input_" :class="{'input_disabled' : !define.disabled}" type="text" :placeholder="define.placeholder" v-model="fieldSource[define.fieldName]" >
			</view>
		</view>
		<!-- type:number -->
		<view class="input_container" v-if="'number'===define.type">
			<view class="name_">{{define.title}}</view>
			<view class="input_out" :class="[{'isrequired':define.required}]">
				<input :disabled="!define.disabled" class="input_" :class="{'input_disabled' : !define.disabled}" type="number" :placeholder="define.placeholder" v-model.number="fieldSource[define.fieldName]" >
			</view>
		</view>
		<!-- type:date -->
		<view class="input_container" v-else-if="'date'===define.type">
			<view class="name_">{{define.title}}</view>
			<view class="input_out" :class="[{'isrequired':define.required}]">
				<view class="uni-list-cell-db">
					<picker class="picker_" mode="date" :value="date" :disabled="!define.disabled" :start="define.start" :end="define.end" :fields="define.fields" @change="bindDateChange">
						<input class="input_" :class="{'input_disabled' : !define.disabled}" disabled="false" type="text" v-model="fieldSource[define.fieldName]">
					</picker>
					<uni-icons type="arrowdown" class="icon_dowm" color="#333" size="16"></uni-icons>
				</view>
			</view>
		</view>
		<!-- type:time -->
		<view class="input_container" v-else-if="'time'===define.type">
			<view class="name_">{{define.title}}</view>
			<view class="input_out" :class="[{'isrequired':define.required}]">
				<view class="uni-list-cell-db">
					<picker class="picker_" mode="time" :value="time" :disabled="!define.disabled" start="00:00" end="23:59" @change="bindTimeChange">
						<input class="input_" :class="{'input_disabled' : !define.disabled}" type="text" disabled="false" v-model="fieldSource[define.fieldName]">
					</picker>
					<uni-icons type="arrowdown" class="icon_dowm" color="#333" size="16"></uni-icons>
				</view>
			</view>
		</view>
		<!-- type:textarea -->
		<view class="textarea_container" v-else-if="'textarea'===define.type">
			<view class="name_">{{define.title}}</view>
			<view class="textarea_out" :class="[{'isrequired':define.required}]">
				<textarea class="textarea_" :class="{'input_disabled' : !define.disabled}" :disabled="!define.disabled" :placeholder="define.placeholder" v-model="fieldSource[define.fieldName]"></textarea>
			</view>
		</view>
		<!-- type:selector -->
		<view class="input_container" v-else-if="'selector'===define.type">
			<view class="name_">{{define.title}}</view>
			<view class="input_out" :class="[{'isrequired':define.required}]">
				<view class="uni-list-cell-db">
					<picker class="picker_" mode="selector" :disabled="!define.disabled" :value="selectorValue" :range="define.dataSource" @change="bindPickerChange">
						<input class="input_" :class="{'input_disabled' : !define.disabled}" type="text" disabled="false" v-model="fieldSource[define.fieldName]">
					</picker>
					<uni-icons type="arrowdown" class="icon_dowm" color="#333" size="16"></uni-icons>
				</view>
			</view>
		</view>
		<!-- type:id-selector -->
		<view class="input_container" v-else-if="'id-selector'===define.type">
			<view class="name_">{{define.title}}</view>
			<view class="input_out" :class="[{'isrequired':define.required}]">
				<view class="uni-list-cell-db">
					<picker class="picker_" mode="selector" :disabled="!define.disabled" :value="idSelectValue" :range="define.dataSource" :range-key="define.displayFieldName" @change="bindIdPickerChange">
						<input class="input_" :class="{'input_disabled' : !define.disabled}" type="text" disabled="false" :value="idSelectText">
					</picker>
					<uni-icons type="arrowdown" class="icon_dowm" color="#333" size="16"></uni-icons>
				</view>
			</view>
		</view>
		<!-- type:multi-selector  ps：暂时不用 --> 
		<view class="input_container" v-else-if="'multi-selector'===define.type">
			<view class="name_">{{define.title}}</view>
			<view class="input_out" :class="[{'isrequired':define.required}]">
				<view class="uni-list-cell-db">
					<picker class="picker_" mode="multiSelector" :disabled="!define.disabled" :value="mutilSelectValue" :range="define.dataSource" @change="bindPickerChangeMulti">
						<input class="input_" :class="{'input_disabled' : !define.disabled}" type="text" disabled="false" v-model="fieldSource[define.fieldName]">
					</picker>
					<uni-icons type="arrowdown" class="icon_dowm" color="#333" size="16"></uni-icons>
				</view>
			</view>
		</view>
		<!-- type:kd-vlookup-edit -->
		<view class="input_container" v-else-if="'kd-vlookup-edit'===define.type">
			<view class="name_">{{define.title}}</view>
			<view class="input_out" :class="[{'isrequired':define.required}]">
				<view  @click="kdVlookupEdit_show_search(define.disabled)">
					<input class="input_" :class="{'input_disabled' : !define.disabled}" disabled="false" type="text" v-model="fieldSource[define.fieldName]" style="padding-right: 64px;" :placeholder="define.placeholder">
					<view class="input_search" >
						<uni-icons type="search" color="#bbb" size="20" style="display: block;"></uni-icons>
					</view>
				</view>
				<uni-icons type="clear"  color="#bbb" size="20" class="clearinput" v-if="fieldSource[define.fieldName]!=''&&define.disabled&&define.canClear" @click="clear_input()"></uni-icons>
			</view>
		</view>
		<!-- type:kd-vlookup-scan -->
		<view class="input_container" v-else-if="'kd-vlookup-scan'===define.type">
			<view class="name_">{{define.title}}</view>
			<view class="input_out" :class="[{'isrequired':define.required}]">
				<view  @click="kdVlookupEdit_show_scan(define.disabled)">
					<input class="input_" :class="{'input_disabled' : !define.disabled}" disabled="false" type="text" v-model="fieldSource[define.fieldName]" style="padding-right: 64px;" :placeholder="define.placeholder">
					<view class="input_search" >
						<uni-icons type="scan" color="#bbb" size="20" style="display: block;"></uni-icons>
					</view>
				</view>
				<uni-icons type="clear" color="#bbb" size="20" class="clearinput" v-if="fieldSource[define.fieldName]!=''&&define.disabled&&define.canClear" @click="clear_input()"></uni-icons>
			</view>
		</view>
		<!-- type:kd-vlookup-scan-edit -->
		<view class="input_container" v-else-if="'kd-vlookup-scan-edit'===define.type">
			<view class="name_">{{define.title}}</view>
			<view class="input_out" :class="[{'isrequired':define.required}]">
				<view >
					<input class="input_" :class="{'input_disabled' : !define.disabled}" disabled="false" type="text" v-model="fieldSource[define.fieldName]" style="padding-right: 64px;" :placeholder="define.placeholder">
					<view class="input_search1" @click="kdVlookupEdit_show_search(define.disabled)">
						<uni-icons type="search" color="#bbb" size="20" style="display: block;"></uni-icons>
					</view>
					<view class="input_search" @click="kdVlookupEdit_show_scan(define.disabled)">
						<uni-icons type="scan" color="#bbb" size="20" style="display: block;"></uni-icons>
					</view>
				</view>
				<uni-icons type="clear" color="#bbb" size="20" class="clearinput" v-if="fieldSource[define.fieldName]!=''&&define.disabled&&define.canClear" @click="clear_input()"></uni-icons>
			</view>
		</view>
		<!-- <view class="mysearchlist" style="z-index: 10000;">
			<xinsoft-search-list ref="mysearchlist" 
				:singleRow="define.singleRow"
				:url_="define.url" 
				:form_id="define.formId" 
				:fieldName="define.showFields"
				:orderStr="define.orderStr"
				:showsearch.sync="kdVlookupEditShowSearch"
				:itemInfo_.sync="kdVlookupEditValue">
			</xinsoft-search-list>
		</view> -->
	</view>
</template>

<script>
	// import xinsoftSearchList from '@/components/xinsoft-search-list/xinsoft-search-list.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	export default {
		name: 'xinsoft-form-input',
		components: {
			// xinsoftSearchList,
			uniIcons
		},
		props: {
			itemDefine: {
				type: Object,
				required: true
			},
			bindSource: {
				type: Object,
				required: true
			}
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
					
			return {
				define: this.itemDefine,
				fieldSource: this.bindSource,
				date: currentDate,
				time: '00:00',
				selectorValue:'',
				idSelectValue:this.bindSource[this.itemDefine.fieldName],
				idSelectText:this.bindSource[this.itemDefine.fieldText],
				mutilSelectValue:[],
				// kdVlookupEditValue:[],
				// kdVlookupEditText:"",
				// kdVlookupEditShowSearch:false
			}
		},
		mounted() {
			//如果为日期类型，则默认赋值当天日期
			if(this.define.type === 'date') {
				this.fieldSource[this.define.fieldName] = this.date
			}
		},
		watch: {
			fieldSource: {
				handler: function(newVal, oldVal) {
					this.$emit('update:bindSource', newVal)
				},
				deep: true
			},
			// kdVlookupEditValue: {
			// 	handler: function(newVal, oldVal) {
			// 		this.fieldSource[this.define.fieldName] = newVal[this.define.fieldIndex[0]]
			// 		this.fieldSource[this.define.fieldText] = newVal[this.define.fieldIndex[1]]
			// 		this.kdVlookupEditText = newVal[newVal[this.define.fieldIndex[1]]]
			// 	},
			// 	deep: true
			// },
			bindSource: {
				handler: function(newVal, oldVal) {
					this.fieldSource = newVal
					if(this.define.type === 'id-selector') {
						this.idSelectValue = newVal[this.define.fieldName]
						this.idSelectText = newVal[this.define.fieldText]
					}
					
					if(this.define.type === 'kd-vlookup-edit') {
						// this.kdVlookupEditText = newVal[this.define.fieldText]
					}
					
					if(this.define.type === 'date') {
						this.fieldSource[this.define.fieldName] = this.date
					}
				},
				deep: true
			}
		},
		methods: {
			bindDateChange(e) {
				this.fieldSource[this.define.fieldName] = this.date = e.target.value
			},
			bindTimeChange(e) {
				this.fieldSource[this.define.fieldName] = this.time = e.target.value
			},
			bindPickerChange(e) {
				this.selectorValue = e.target.value
				this.fieldSource[this.define.fieldName] = this.define.dataSource[e.target.value]
			},
			bindIdPickerChange(e) {
				this.idSelectText = this.define.dataSource[e.target.value][this.define.displayFieldName]
				this.idSelectValue = e.target.value
				this.fieldSource[this.define.fieldName] = this.define.dataSource[e.target.value][this.define.valueFieldName]
				this.fieldSource[this.define.fieldText] = this.define.dataSource[e.target.value][this.define.displayFieldName]
			},
			bindPickerChangeMulti(e) {
				this.mutilSelectValue = e.target.value
				let selectArray = []
				e.target.value.forEach((x) => {
					selectArray.push(this.define.dataSource[x])
				})
				this.fieldSource[this.define.fieldName] = selectArray
			},
			//点击搜索
			kdVlookupEdit_show_search(isDisabled) {
				uni.hideKeyboard()
				if(!isDisabled){//不可编辑
					return
				}
				this.$emit('toSearch')
				// this.kdVlookupEditShowSearch = true;
				// this.$refs.mysearchlist.set_request('');
			},
			//点击扫码
			kdVlookupEdit_show_scan(isDisabled) {
				uni.hideKeyboard()
				if(!isDisabled){//不可编辑
					return
				}
				this.$emit('toScan')
				// this.kdVlookupEditShowSearch = true;
				// this.$refs.mysearchlist.set_request('');
			},
			changeSearch() {
				this.$nextTick(function() {
					this.$emit("update:value_", this.search_value)
				})
			},
			clear_input() {
				// this.kdVlookupEditText = '';
				this.fieldSource[this.define.fieldName] = ''
				// this.fieldSource[this.define.fieldText] = ''
			},
			//获取当前日期，格式yyyy-mm-dd
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style scoped>
	.mysearchlist {
		z-index: 1;
	}

	.input_container,
	.textarea_container {
		z-index: 0;
		position: relative;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		min-height: 46px;
		padding: 0 4%;
		box-sizing: border-box;
	}

	.textarea_container {
		min-height: 100px;

	}

	.input_container:after,
	.textarea_container:after {
		position: absolute;
		width: 100%;
		height: 1px;
		content: '';
		left: 0;
		bottom: 0;
		background-color: #e6e6e6;
	}

	.name_ {
		display: flex;
		top: 0;
		width: 30%;
		line-height: 20px;
		padding: 13px 0;
		font-size: 15px;
		text-align: left;
	}

	.input_out,
	.textarea_out {
		position: relative;
		width: 70%;
		display: flex;
		height:36px;
		border: 1px solid #ccc;
		border-radius: 1px;
		box-sizing: border-box;
	}

	.input_,
	.textarea_ {
		position: absolute;
		font-size: 15px;
		width: 100%;
		display: flex;
		height: 34px;
		box-sizing: border-box;
		padding: 4px;
		background-color: #fff;
		border-radius: 2px;
	}
	
	.input_disabled{
		background-color: #f5f5f5;
	}
	
	.textarea_,
	.textarea_out {
		height: 88px;
	}
	.textarea_{
			height: 86px;
		
	}
	.input_search {
		position: absolute;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-around;
		align-items: center;
		width: 40px;
		height: 35px;
		right: 0;
		top: 0;
		border-left: 1px solid #ccc;
	}
	.input_search1 {
		position: absolute;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-around;
		align-items: center;
		width: 40px;
		height: 35px;
		right: 18%;
		top: 0;
		border-left: 1px solid #ccc;
	}

	.clearinput {
		position: absolute;
		right: 42px;
		height: 40px;
		top: 0;
		display: flex;
		align-items: center;

	}

	.uni-list-cell-db {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}

	.isrequired:before {
		position: absolute;
		content: "*";
		font-size: 15px;
		left: -10px;
		top: 6px;
		color: red;
	}

	.icon_dowm {
		position: absolute;
		display: block;
		right: 8px;
		bottom: 10px;
		line-height: 16px;

	}
</style>
