<template>
	<view>
		<z-navbar title="处理咨询" back>
			<view slot="right" @click="submit">保存</view>
		</z-navbar>
		<w-picker mode="date" startYear="2000" endYear="2100" v-model="info.callbackDate" :current="true" fields="day"
		 @confirm="onConfirm($event)" @cancel="onCancel" :disabled-after="false" ref="date"></w-picker>
		<z-card class="mt-30 ptb-10">
			<z-form :model="info" :rules="rules" ref="info">
				<z-form-item :bgcolor="switchAlert?'#eee':'white'" :labelStyle="{color:switchAlert?'#999':'#333'}" height="100rpx"
				 label="客户姓名" prop="customName" showline dynamic :required="!switchAlert">
					<z-input v-model="info.customName" placeholder="点击填写" v-if="!switchAlert"></z-input>
					<z-text v-model="info.customName" textColor="#999" v-else placeholder=""></z-text>
				</z-form-item>
				<z-form-item :bgcolor="switchAlert?'#eee':'white'" :labelStyle="{color:switchAlert?'#999':'#333'}" height="100rpx"
				 label="跟进状态" prop="followState" showline dynamic :required="!switchAlert">
					<follow-state v-model="info.followState" placeholder="请选择" v-if="!switchAlert" @change="changeFollowState"></follow-state>
					<z-text v-model="info.followStateText" textColor="#999" v-else placeholder=""></z-text>
				</z-form-item>
				<z-form-item :bgcolor="switchAlert?'#eee':'white'" :labelStyle="{color:switchAlert?'#999':'#333'}" height="100rpx"
				 label="意向场地" prop="wantHouse" showline dynamic :required="!switchAlert">
					<want-house multiple title="选择意向场地" @checkedDetail="checkedWantHouseDetail" v-model="info.wantHouse" placeholder="选择意向场地"
					 v-if="!switchAlert"></want-house>
					<z-text v-model="info.wantHouseText" textColor="#999" v-else placeholder=""></z-text>
				</z-form-item>
				<z-form-item :bgcolor="switchAlert?'#eee':'white'" :labelStyle="{color:switchAlert?'#999':'#333'}" height="100rpx"
				 label="意向度" prop="wantLevelCode" showline dynamic :required="!switchAlert">
					<want-level v-model="info.wantLevelCode" placeholder="请选择意向度" v-if="!switchAlert" @change="changeWantLevelCode"></want-level>
					<z-text v-model="info.wantLevelCodeText" textColor="#999" v-else placeholder=""></z-text>
				</z-form-item>
				<z-form-item height="100rpx" label="关闭提醒" showline>
					<switch :checked="switchAlert" @change="changeSwitchAlert" />
				</z-form-item>
				<z-form-item height="100rpx" v-show="!switchAlert" label="下次提醒日期" dynamic prop="callbackDate" showline arrow
				 :required="!switchAlert">
					<z-text v-model="info.callbackDate" placeholder="请选择下次提醒时间" @click="chooseDate"></z-text>
				</z-form-item>
				<z-form-item :bgcolor="switchAlert?'#eee':'white'" :labelStyle="{color:switchAlert?'#999':'#333'}" label="备注信息"
				 prop="remark" labelPos="top" dynamic :required="!switchAlert">
					<textarea class="textarea" :disabled="switchAlert" v-model="info.remark" placeholder="请输入备注信息" maxlength="512"
					 auto-height></textarea>
				</z-form-item>
			</z-form>
		</z-card>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import wantHouse from '../../component/wantHouse/wantHouse.vue';
	import followState from '../../component/followState/followState.vue';
	import wantLevel from '../../component/wantLevel/wantLevel.vue';
	export default {

		components: {
			wantHouse,
			followState,
			wantLevel
		},

		data() {
			var validateAlertDate = (rule, value, callback) => {
				if (new Date(this.info.callbackDate).getTime() > new Date(this.wantDate).getTime())
					return {
						state: false,
						message: '提醒日期不能大于意向日期' + this.wantDate
					};
				else if (new Date(this.info.callbackDate).getTime() < new Date(this.$Date.getDayDate().date).getTime()) {
					return {
						state: false,
						message: '设置的提醒日期不能小于当前日期'
					}
				} else
					return true;
			};
			return {
				info: {
					customName: '',
					followState: '',
					wantHouse: '',
					callbackDate: '',
					wantLevelCode: '',
					remark: ''
				},
				wantHouseDetail: [],
				rules: {
					customName: [{
						message: ''
					}],
					followState: [{
						message: ''
					}],
					wantHouse: [{
						message: ''
					}],
					wantLevelCode: [{
						message: ''
					}],
					callbackDate: [{
						validator: validateAlertDate
					}],
					remark: [{
						message: ''
					}]
				},
				id: '',
				switchAlert: false,

				callbackDate: '',
				wantDate: ''
			};
		},
		onLoad(option) {
			console.log(option)
			this.wantDate = option.wantDate;
			this.id = option.id;
			this.getData(option.id);
		},
		methods: {
			getData(id) {
				this.$axios.post('app/preUserAskRecord/askHandleById', {
					"userAskId": id
				}).then(res => {
					console.log(res.data)
					var info = res.data.list[0] || {}
					var wantHouse = [],
						wantHouse2 = [];

					for (var i = 0, len = info.wantHouse.length; i < len; i++) {
						if (info.wantHouse[i]) {
							wantHouse.push(info.wantHouse[i].houseId)
							wantHouse2.push({
								houseId: info.wantHouse[i].houseId,
								houseName: info.wantHouse[i].houseName
							})
						}
					}
					this.info = {
						customName: res.data.customName,
						followState: !info.followState||info.followState=='01' ?   '02':info.followState,
						wantLevelCode: info.wantLevelCode ? info.wantLevelCode : '',
						callbackDate: info.callbackDate ? info.callbackDate : '',
						wantHouse: wantHouse,
					}
					console.log(this.info)
					this.callbackDate = info.callbackDate;
					this.wantHouseDetail = wantHouse2;
				}).catch(err => {
					this.$refs.uToast.error(err.msg);
				})
			},
			changeFollowState(data) {
				this.info.followStateText = data.dicName;
			},
			changeWantLevelCode(data) {
				this.info.wantLevelCodeText = data.dicName;
			},
			chooseDate() {
				this.$refs.date.show();
			},
			onConfirm(e) {
				console.log(e)
				this.$set(this.info, 'callbackDate', e.value)
			},
			onCancel() {
				console.log(this.$refs.date.value, this.$refs.date.pickVal)
			},
			changeSwitchAlert(e) {
				this.switchAlert = e.detail.value;
				if (this.switchAlert) {
					this.$set(this.info, 'callbackDate', '')
				} else {
					this.$set(this.info, 'callbackDate', this.callbackDate)
				}
			},
			checkedWantHouseDetail(data) {
				console.log(data)
				var wantHouse = [];
				var wantHouseText = '';
				for (var i = 0, len = data.length; i < len; i++) {
					wantHouse.push({
						houseId: data[i].id,
						houseName: data[i].houseName
					})
					wantHouseText += data[i].houseName + '、';
				}
				if (wantHouseText.length > 0) {
					wantHouseText = wantHouseText.substring(0, wantHouseText.length - 1);
				}
				console.log(wantHouse)
				this.wantHouseDetail = wantHouse;
				this.info.wantHouseText = wantHouseText;
			},
			submit() {
				console.log(this.info)

				this.$refs.info.validate(val => {
					console.log(val)
					if (val) {
						var info = this.info;
						this.$axios.post('app/preUserAskRecord/saveHandle', {
							storeId: uni.getStorageSync('storeId'), //this.$root.getStorage('storeId')
							userAskId: this.id,
							followState: this.switchAlert ? '' : info.followState, //后台未定义
							wantLevelCode: this.switchAlert ? '' : info.wantLevelCode,
							callbackDate: this.switchAlert ? '' : info.callbackDate,
							wantHouse: this.switchAlert ? [] : this.wantHouseDetail,
							remark: this.switchAlert ? '' : info.remark
						}).then(res => {
							// if(this.switchAlert){
							// 	uni.navigateTo({
							// 		delta: 2
							// 	})
							// }else{
							uni.navigateBack({
								delta: 1
							});
							// }

						}).catch(err => {
							this.$refs.uToast.error(err.msg);
						})

					} else {
						this.$refs.uToast.error('表单填写有误');
					}
				})
				var info = this.info;


			}
		}
	}
</script>

<style scoped lang="scss">
	.textarea {
		font-size: 28rpx;
		min-height: 180rpx;
		padding-bottom: 20rpx;
		width: 100%;
	}
</style>
