<template>
	<view class="addCustomer-content">
		<view class="content-form">
			<u-form :model="form" ref="uForm" :rules="rules" label-width="180">
				<u-form-item label="客户名称" required prop="customerName"><u-input v-model.trim="form.customerName" placeholder="请输入客户名称" input-align="right" /></u-form-item>
				<u-form-item label="客户地址" required prop=""><u-input v-model="form.contactName" input-align="right" placeholder="客户地址"/></u-form-item>
				<u-form-item label="联系电话"><u-input v-model.trim="form.contactTel" placeholder="请输入联系电话" input-align="right" /></u-form-item>
				<u-form-item label="联系手机"><u-input v-model.trim="form.contactMobile" placeholder="请输入联系手机" input-align="right" /></u-form-item>
				<u-form-item label="联系人"><u-input v-model="form.contactName" input-align="right" placeholder="请输入联系人"/></u-form-item>
				<u-form-item label="详细地址"><u-input v-model.trim="form.customerAddr" type="textarea" placeholder="请输入详细地址" input-align="right" /></u-form-item>
				<u-form-item label="客户传真"><u-input v-model="form.fax" input-align="right" placeholder="请输入客户传真"/></u-form-item>
				<u-form-item label="配送方式"><v-select ref="dispatchType" :disabled="true" placeholder="请选择配送方式" @itemChange="chooseType" code="DISPATCH_TYPE" style="width: 100%"></v-select></u-form-item>
				<u-form-item label="客户类型"><u-input v-model="priceTypeName" input-align="right" :disabled="true" placeholder="请选择客户类型" @click="showCust=true"/></u-form-item>
				<u-form-item label="价格类型" required prop=""></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-form-item>
			</u-form>
		</view>
		<view class="form-footer-btn">
			<u-button class="handle-btn" size="medium" shape="circle" hover-class="none" @click="handleSubmit" :custom-style="customBtnStyle">保存</u-button>
		</view>
		<!-- 选择收款方式 -->
		<u-picker v-model="showSettle" title="收款方式"  @confirm="settleStyleChange" :range="settleTypeList" range-key="name" mode="selector"></u-picker>
		<!-- 客户类型 -->
		<u-picker v-model="showCust" title="客户类型" @confirm="custTypeChange" :range="custTypeList" range-key="name" mode="selector"></u-picker>
	</view>
</template>

<script>
	import {customerDetail,settleStyleQueryAll,custType} from '@/api/sales.js'
	import vSelect  from  '@/components/select/v-select.vue'
	export default{
		components: { vSelect },
		data(){
			return{
				customerData:null, // 客户信息
				priceTypeName:'', //客户类型名称
				customBtnStyle: {  //  自定义按钮样式
					backgroundColor: this.$config('primaryColor'),
					color: '#fff'
				},
				form:{
					id: null,
					customerName: '', // 客户名称
					contactTel: '', //  联系电话
					contactMobile: '', //  联系手机
					contactName: '', //  联系人
					provinceSn: undefined, //  省
					provinceName: '',
					citySn: undefined, // 市
					cityName: '',
					countySn: undefined, // 区
					countyName: '',
					customerAddr: '', //  详细地址
					fax: '', //  客户传真
					dispatchType: undefined, //  配送方式
					satelliteFlag: 0, //  是否卫星仓客户
					customerTypeSn: undefined, //  客户类型
					priceType: '', //  价格类型
					settleStyleSn: undefined //  收款方式
				},
				rules:{
					customerName: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
					contactMobile: [{ required: false, pattern: /^\d{11}$/, message: '请输入正确的手机号', trigger: 'blur' }],
					provinceSn: [{ required: true, message: '请选择省', trigger: 'change' }],
					citySn: [{ required: true, message: '请选择市', trigger: 'change' }],
					countySn: [{ 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:'', // 客户类型名称
			}
		},
		onLoad(option) {
			this.getSettleStyle()
			this.getCustomerList()
			
		},
		methods:{
			// 选择配送方式
			chooseType(v){
				console.log(v,'---------')
			},
			// 下拉选择
			selete(val){
				if(val==0){
					this.drownType='customer'
				}else{
					this.drownType='settle'
				}
				console.log(val,this.drownType)
				setTimeout(()=>{
					this.showSettle=true
				},300)
				
			},
			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
					}
				})
			},
			settleStyleChange(e){
				console.log(e,'data')
				this.settleStyleName=this.settleTypeList[e].name
				this.form.settleStyleSn=this.settleTypeList[e].settleStyleSn
				
			},
			custTypeChange(e){
				this.priceTypeName=this.custTypeList[e].name
				this.form.customerTypeSn=this.custTypeList[e].customerTypeSn
			},
			// 保存
			handleSubmit(){
				console.log('保存===========')
				this.$refs.uForm.validate().then(res => {
					if(res){
						uni.$u.toast('校验通过')
					}
					console.log(res,'--------------校验')
					
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			// getCustomerData(){
			// 	customerDetail({id:this.itemId}).then(res=>{
			// 		if(res.status==200){
			// 			this.customerData=res.data
			// 		}else{
			// 			this.customerData=null
			// 		}
			// 	})
			// }
		}
	}
</script>

<style lang="scss">
	.addCustomer-content{
		width: 100%;
		height: 100vh;
		background-color: #fff;
		padding:0 40upx;
		display: flex;
		flex-direction: column;
		.content-form{
			flex: 1;
		}
		.content-form:not(:last-child){
			border-bottom: none;
		}
		.form-footer-btn{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 16upx 20upx 12upx;
			.handle-btn{
				width: 100%;
			}
		}
	}
</style>
