<template>
	<view class="component">
		<!-- <view class="title">地区信息</view> -->

		<u--form labelPosition="left" :model="formData" :rules="rules" ref="districtForm">
			<u-form-item label="地址" :required="!readonly" prop="street" @click="changeCity('street', true)"
				borderBottom>
				<u--textarea :value="nowAddress" autoHeight readonly disabled></u--textarea>
			</u-form-item>
			<u-form-item v-if="!formDataRead.street" label="乡镇" :required="!readonly" prop="street"
				@click="changeCity('street')" borderBottom>
				<u--input :value="formDataText.street" disabled disabledColor="#fff" placeholder="请选择镇"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item v-if="!formDataRead.village" label="村社" :required="!readonly" prop="village"
				@click="changeCity('village')" borderBottom>
				<u--input :value="formDataText.village" type="text" disabled disabledColor="#fff"
					placeholder="请选择村"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item v-if="$store.state.app.userInfo.company.company_type==18" label="小队" :required="!readonly"
				prop="brigade" @click="changeCity('brigade')" borderBottom>
				<u--input :value="formDataText.brigade" style="pointer-events: none;" disabled disabledColor="#fff"
					placeholder="请选择小队"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
		</u--form>
		<u-picker :show="showProvince" :columns="[changeList()]" :keyName="changeType+'_name'" @confirm="confirm"
			@cancel="showProvince = false" @close="showProvince = false"></u-picker>
	</view>
</template>

<script>
	import {
		commonProvince,
		commonCity,
		commonArea,
		commonStreet,
		commonVillage,
		commonBrigade
	} from "@/api/oaPbulic.js"
	import {
		userCompanyBrigade
	} from "@/api/oaUser.js"
	import {
		Toast
	} from "../../libs/uniApi"
	export default {
		name: "districtSelector",
		props: {
			readonly: {
				type: Boolean,
				default: false
			},
			datas: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				showProvince: false,
				formData: {
					province: '',
					city: '',
					area: '',
					street: '',
					village: '',
					brigade: '',
				},
				formDataText: {
					province: '',
					city: '',
					area: '',
					street: '',
					village: '',
					brigade: ''
				},
				formDataRead: {
					province: false,
					city: false,
					area: false,
					street: false,
					village: false,
					brigade: false,
				},
				rules: {
					street: {
						required: true,
						message: '不能为空',
						trigger: ['change', 'blur']
					},
					village: {
						required: true,
						message: '不能为空',
						trigger: ['change', 'blur']
					},
					brigade: {
						required: true,
						message: '不能为空',
						// validator: (rule, value, callback) => {
						// 	value ? callback() : callback('不能为空')
						// },
					},
				},
				streetList: [],
				villageList: [],
				brigadeList: [],
				changeType: '', //当前选择的城市类型
			};
		},
		watch: {
			datas(newValue, oldValue) {
				if (this.$props.readonly && newValue) {
					this.formDataText.street = this.$props.datas.street_name;
					this.formDataText.village = this.$props.datas.village_name;
					this.formDataText.brigade = this.$props.datas.brigade_name;

					this.formData.street = this.$props.datas.street_id;
					this.formData.village = this.$props.datas.village_id;
					this.formData.brigade = this.$props.datas.brigade_id;
				}
			}
		},
		created() {
			if (!this.$props.readonly) {
				this.initProvinceAndCity();
			} else {
				this.rules = {};
			}
			this.commonProvince()
		},
		computed: {
			nowAddress() {
				let address = this.$store.state.app.userInfo;
				let str = '';
				address.province_name ? str += address.province_name : null;
				address.city_name ? str += address.city_name : null;
				address.area_name ? str += address.area_name : null;
				address.street_name ? str += address.street_name : null;
				address.village_name ? str += address.village_name : null;
				return str;
			}
		},
		methods: {
			async validate() {
				return await this.$refs.districtForm.validate();
			},
			// 初始化
			async initProvinceAndCity() {
				let user = this.$store.state.app.userInfo;
				Object.keys(this.formData).forEach(key => {
					this.formData[key] = user[key];
					this.formDataText[key] = user[key + '_name'];
					if (user[key] && key != 'brigade') {
						this.formDataRead[key] = true;
						// 获取选择的列表
						switch (key) {
							case 'street':
								this.loadVillage(this.formData['street']);
								break;
							case 'village':
								this.loadBrigade(this.formData['village']);
								break;
						}
					}
				})
			},
			// 选择城市
			changeCity(type, toast = false) {
				if (toast) return Toast('不可修改该区域')
				if (this.$props.readonly) return;
				if (this[type + 'List'].length == 0) {
					if (type == 'brigade') return Toast('小队已经建立完毕');
					return Toast('请先选择上一级地区');
				}
				this.changeType = type;
				this.showProvince = true;
			},
			// 选择列表
			changeList() {
				return this[this.changeType + 'List'];
			},
			// 选中城市
			async confirm(e) {
				let flag = false; //清空所选标记
				if (this.formData[this.changeType] != e.value[0][this.changeType + '_code']) flag = true;
				if (this.changeType == 'brigade') {
					this.formData.brigade = e.value[0].id;
					this.formDataText.brigade = e.value[0].brigade_name;
					this.showProvince = false;
					await this.$nextTick();
					this.$refs.districtForm.validate();
					return;
				}
				this.formData[this.changeType] = e.value[0][this.changeType + '_code'];
				this.formDataText[this.changeType] = e.value[0][this.changeType + '_name'];
				// 加载下一级城市信息
				switch (this.changeType) {
					case 'area':
						this.loadStreet(this.formData['area']);
						break;
					case 'street':
						this.loadVillage(this.formData['street']);
						break;
					case 'village':
						this.loadBrigade(this.formData['village']);
						break;
				}
				// 清空之前所选信息
				if (flag) switch (this.changeType) {
					case 'area':
						this.formData.street = '';
						this.formDataText.street = ''
					case 'street':
						this.formData.village = '';
						this.formDataText.village = ''
					case 'village':
						this.formData.brigade = '';
						this.formDataText.brigade = ''
				}
				this.showProvince = false;
			},
			loadStreet(code) {
				commonStreet({
					street: code
				}).then(res => {
					this.streetList = res.data;
				})
			},
			loadVillage(code) {
				commonVillage({
					village: code
				}).then(res => {
					this.villageList = res.data;
				})
			},
			loadBrigade(code) {
				commonBrigade({
					brigade: code
				}).then(res => {
					// 过滤掉不能选择的小队,只能选择本公司负责的小队
					let f_arr = this.$store.state.app.userInfo.company?.responsible_area?.split(',') || [];
					this.brigadeList = res.data.filter(item => {
						return f_arr.find(t => item.id == t);
					});
					// 过滤掉公司已经创建的小队
					userCompanyBrigade().then((e) => {
						this.brigadeList = this.brigadeList.filter(item => {
							return !e.data.find(t => t == item.id);
						})
						this.formData.brigade = '';
						this.formDataRead.brigade = '';
						this.formDataText.brigade = '';
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.component {
		.title {
			font-weight: 500;
			font-size: 34rpx;

			&::before {
				width: 8rpx;
				height: 26rpx;
				border-radius: 4rpx;
				background-color: #0122c7;
				content: "";
				display: inline-block;
				margin-right: 8rpx;
			}
		}

		// .checkbox{
		//   margin: 28rpx;
		// }
		.box {
			display: flex;
			flex-wrap: wrap;
		}
	}

	.u-checkbox-group--row[data-v-2ef8bac9] {
		flex: 1;
	}
</style>