<template>
	<view class="detail-view">
		<u-form label-width="150" :model="add_form" ref="uForm">
			<view class="form-model-view">
				<u-form-item required label="供应商名称">
					<u-input v-model="add_form.title" placeholder="请输入供应商名称" />
				</u-form-item>
				<u-form-item required label="联系人">
					<u-input v-model="add_form.realName" placeholder="请输入联系人" />
				</u-form-item>
				<u-form-item required label="联系电话">
					<u-input v-model="add_form.mobile" placeholder="请输入手机号码" />
				</u-form-item>
				<u-form-item label="联系人职务">
					<u-input v-model="add_form.position" placeholder="请输入职务" />
				</u-form-item>
				<u-form-item label="状态" v-if='$accessCheck($Access.SupplierUpdateEnableStatus)'>
					<view class="form-value">
						<u-switch style="transform: translateY(14rpx);" v-model="switchStatus"
							:active-value="5" :inactive-value="4" size="40" @change='change'></u-switch>
					</view>
				</u-form-item>
			</view>
			<view class="form-model-view">
				<u-form-item required label="所属区域">
					<u-input v-model='area' class="dis-input" @click="region_show = true" disabled placeholder="请选择" />
					<u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
				</u-form-item>
				<u-form-item label-position="top" label="详细地址">
					<u-input v-model="add_form.address" type="textarea" placeholder="请输入" />
				</u-form-item>
			</view>
			<view class="form-model-view">
				<u-form-item label="开户人">
					<u-input v-model="add_form.accountName" placeholder="请输入真实姓名" />
				</u-form-item>
				<u-form-item label="开户银行">
					<u-input v-model="add_form.bankName" placeholder="请输入开户银行" />
				</u-form-item>
				<u-form-item label="银行账号">
					<u-input v-model="add_form.bankCard" placeholder="请输入银行账号" />
				</u-form-item>
			</view>
			<view class="form-model-view">
				<u-form-item label="备注" label-position="top">
					<u-input v-model="add_form.remark" type="textarea" placeholder="请输入备注" />
				</u-form-item>
			</view>
		</u-form>
		<view class="detail-bottom">
			<view class="handel-btn" @click="addSupplier">提交</view>
		</view>
		<RegionSel v-model="region_show" @confirm="confirm" @cancel="region_show = false" />
	</view>
</template>

<script>
	import RegionSel from '@/components/region/RegionSel.vue';
	export default {
		components: {
			RegionSel
		},
		data() {
			return {
				region_show: false,
				add_form: {
					title: '',
					provinceCode: '',
					cityCode: '',
					districtCode: '',
					address: '',
					realName: '',
					mobile: '',
					enableStatus: 5,
					sex: 0,
					phone: '',
					position: '',
					email: '',
					remark: '',
					accountName: '',
					bankName: '',
					bankCard: '',
				},
				area: '',
				customer_id: '',
				switchStatus:true
			};
		},
		onLoad(options) {
			if (options.id) {
				this.customer_id = options.id
				uni.setNavigationBarTitle({
					title: '编辑供应商'
				});
				this.getSupplierInfoById();
			}
		},
		methods: {
			addSupplier() {
				if (!this.add_form.title.trim() || !this.add_form.realName.trim() || !this.add_form.mobile.trim() || !this
					.area.trim()) {
					this.$u.toast('必填项不能为空')
					return
				}
				if (this.customer_id) {
					this.$u.api.editSupplier(this.customer_id, this.add_form).then(res => {
						this.$u.toast('编辑成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					})
				} else {
					this.$u.api.addSupplier(this.add_form).then(res => {
						this.$u.toast('提交成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					})
				}

			},
			confirm(val) {
				this.add_form.provinceCode = val[0].value;
				this.add_form.cityCode = val[1].value;
				this.add_form.districtCode = val[2].value;
				let name = '';
				val.forEach(item => {
					name += item.label;
				});
				this.area = name;
			},
			getSupplierInfoById() {
				this.$u.api.getSupplierInfoById(this.customer_id).then(res => {
					this.add_form = res.data
					this.switchStatus=res.data.enableStatus===5
					this.area = res.data.area.provinceName + "-" + res.data.area.cityName + "-" + res.data.area
						.districtName
				})
			},
			change(val) {
				this.add_form.enableStatus = val
			}
		}
	};
</script>

<style></style>
