<template>
	<view class="addCustomer-content">
		<view class="content-form">
			<u-form :model="form" ref="uForm" label-width="150rpx" :error-type="['toast']">
				<u-form-item label="客户名称" required prop="customerName" ><u-input v-model.trim="form.customerName" placeholder="请输入客户名称(最多30个字符)" input-align="right" :maxlength="60"/></u-form-item>
				<u-form-item label="客户地址" required prop="provinceSn">
					<u-input v-model="areaInfo.label" :disabled="true" input-align="right" placeholder="请选择客户地址" @click="openAddress"/>
					<u-icon name="arrow-right" color="#C0C4CC" slot="right"  @click="openAddress"></u-icon>
				</u-form-item>
				<u-form-item label="详细地址">
					<u-input type="textarea" :auto-height="true" input-align="right" placeholder="请输入详细地址(最多60个字符)" :maxlength="60" v-model="form.customerAddr"/>
				</u-form-item>
				<u-form-item label="联系人">
					<u-input v-model="form.contactName" input-align="right" placeholder="请输入联系人(最多20个字符)" :maxlength="20"/>
				</u-form-item>
				<u-form-item label="联系电话">
					<u-input v-model.trim="form.contactTel" placeholder="请输入联系电话(最多15个字符)" input-align="right" :maxlength="15"/>
				</u-form-item>
				<u-form-item label="联系手机"><u-input v-model.trim="form.contactMobile" placeholder="请输入联系手机(最多11位字符)" input-align="right" :maxlength="11"/>
				</u-form-item>
				<u-form-item label="价格类型" required prop="priceType">
					<v-select ref="priceType" :disabled="true" placeholder="请选择价格类型" @itemChange="chooseType" code="PRICE_TYPE" style="width: 100%"></v-select>
				</u-form-item>
				<u-form-item label="收款方式" required prop="settleStyleSn">
					<u-input v-model="settleStyleName" input-align="right" :disabled="true" placeholder="请选择收款方式" @click="showSettle=true"/>
					<u-icon name="arrow-right" color="#C0C4CC" slot="right"></u-icon>
				</u-form-item>
				<u-form-item label="客户传真">
					<u-input v-model="form.fax" input-align="right" placeholder="请输入客户传真(最多30个字符)" :maxlength="30"/>
				</u-form-item>
				<u-form-item label="客户类型">
					<u-input v-model="custTypeName" input-align="right" :disabled="true" placeholder="请选择客户类型"  @click="showCust=true"/>
					<u-icon name="arrow-right" color="#C0C4CC" slot="right"  @click="showCust=true"></u-icon>
				</u-form-item>
				<u-form-item label="配送方式" >
					<v-select ref="dispatchType" :disabled="true" placeholder="请选择配送方式" @itemChange="choosedispatchType" code="DISPATCH_TYPE" style="width: 100%"></v-select>
				</u-form-item>
			</u-form>
		</view>
		<view class="form-footer-btn">
			<u-button class="handle-btn" size="medium" shape="circle" hover-class="none" @click="customerSubmit" :custom-style="customBtnStyle">保存</u-button>
		</view>
		<!-- 省市区 -->
		<Address ref="applyAddress" :isJrMini="false" @onConfirm="areaConfirm"></Address>
		<!-- 选择收款方式 -->
		<u-picker v-model="showSettle" title="收款方式"  @confirm="settleStyleChange" :range="settleTypeList" range-key="name" mode="selector" :default-selector="JSON.parse(JSON.stringify(defaultSettleIndex))"></u-picker>
		<!-- 客户类型 -->
		<u-picker v-model="showCust" title="客户类型" @confirm="custTypeChange" :range="custTypeList" range-key="name" mode="selector" :default-selector="JSON.parse(JSON.stringify(defaultCustIndex))"></u-picker>
	</view>
</template>

<script>
	import {settleStyleQueryAll} from '@/api/sales.js'
	import {customerDetail,custType,custSave,employeeAllList} from '@/api/customer.js'
	import Address from '@/components/address.vue'
	import vSelect  from  '@/components/select/v-select.vue'
	import { isvalidPhone } from '@/libs/validate.js'
	export default{
		components:{Address,vSelect},
		data(){
			return{
				customerData:null, // 客户信息
				customBtnStyle: {  //  自定义按钮样式
					margin:0
				},
				// 客户form
				form:{
					id: undefined,
					customerName: '', // 客户名称
					contactTel: '', //  联系电话
					contactMobile: '', //  联系手机
					contactName: '', //  联系人
					provinceSn: undefined, //  省
					provinceName: '',
					citySn: undefined, // 市
					cityName: '',
					countySn: undefined, // 区
					countyName: '',
					customerAddr: '', //  详细地址
					fax: '', //  客户传真
					dispatchType: undefined, //  配送方式
					satelliteFlag: 0, //  是否卫星仓客户
					customerTypeSn: undefined, //  客户类型
					priceType: undefined, //  价格类型
					settleStyleSn: undefined //  收款方式
				},
				rules: {
					customerName: [{ required: true, message: '请输入客户名称', trigger: 'change' }],
					provinceSn: [{ required: true, message: '请选择客户地址', trigger: 'change' }],
					priceType: [{ required: true, message: '请选择价格类型', trigger: 'change' }],
					settleStyleSn: [{ required: true, message: '请选择收款方式', trigger: 'change' }],
				},
				showSettle:false,//结算方式初始值
				settleTypeList:[],//收款方式列表
				settleStyleName:'',//收款方式名称
				custTypeList:[] ,// 客户类型数据
				showCust:false, //客户类型下拉弹窗初始值
				custTypeName:'', // 客户类型名称
				areaInfo: {},  //  省市区
				areaIdArr: [],  //  省市区id数组
				defaultSettleIndex:[0] ,//选中收款方式的下标
				defaultCustIndex:[0],//选中客户类型的下标
				backPage: ''
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(option) {
			this.backPage = option.backPage
			this.getSettleStyle()
			this.getCustomerList()
		},
		methods:{
			// 选择价格类型
			chooseType(val){
				this.form.priceType=val
			},
			// 选择配送方式
			choosedispatchType(val){
				this.form.dispatchType=val
			},
			//  选择省区市
			areaConfirm(e) {
				console.log('已选择的省市区', e)
				this.areaInfo = e
				this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
				this.form.provinceSn=e.provinceCode
				this.form.citySn=e.cityCode
				this.form.countySn=e.areaCode
				this.form.provinceName=e.labelArr[0]
				this.form.cityName=e.labelArr[1]
				this.form.countyName=e.labelArr[2]
			},
			openAddress(){
				//  省市区  回显     参数为省市区id数组
				// console.log(this.areaIdArr,'this.areaIdArr')
				this.$refs.applyAddress.open(this.areaIdArr)
			},
			brandClean(){
				this.settleStyleName=''
				this.form.settleStyleSn=undefined
			},
			// 获取客户类型列表
			getCustomerList(){
				custType({}).then(res=>{
					if(res.status==200){
						this.custTypeList=res.data
					}else{
						this.custTypeList=[]
					}
				})
			},
			// 获取结算方式列表
			getSettleStyle(){
				settleStyleQueryAll({}).then(res=>{
					if(res.status==200){
						this.settleTypeList=res.data
					}else{
						this.settleTypeList=null
					}
				})
			},
			// 收款方式change
			settleStyleChange(e){
				console.log(e,'data')
				this.defaultSettleIndex=[e]
				this.settleStyleName=this.settleTypeList[e].name
				this.form.settleStyleSn=this.settleTypeList[e].settleStyleSn
			},
			// 客户类型change
			custTypeChange(e){
				this.defaultCustIndex=[e]
				this.custTypeName=this.custTypeList[e].name
				this.form.customerTypeSn=this.custTypeList[e].customerTypeSn
			},
			// 保存 (新增客户)
			customerSubmit(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						const params=Object.assign({},this.form)
						console.log(params,'params')
						if(this.form.id) {
							params.id = this.form.id
						}
						custSave(params).then(res=>{
							if(res.status == 200) {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
								if(!this.backPage){
									uni.redirectTo({
										url:'/pages/sales/addSales?pageType=add&nowId='+res.data.id
									})
								}
								// 门店审核通过
								if(this.backPage == 'authPass'){
									uni.$emit("addCustome",res.data)
									uni.navigateBack({
										delta: 2
									})
								}
							} 
						})
					} else {
						console.log('验证失败');
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100vh;
	}
	.addCustomer-content{
		width: 100%;
		height: 100%;
		background-color: #fff;
		padding:0 40upx;
		display: flex;
		flex-direction: column;
		.content-form{
			flex:1;
			padding: 0 0.5rem;
			overflow: auto;
		}
		.form-footer-btn{
			background-color: #fff;
			width: 100%;
			padding: 20upx;
			.handle-btn{
				width: 100%;
				background-color: rgb(51, 95, 182);
				color: #fff;
			}
		}
	}
</style>
