<template>
	<view class="apply-page">
		<view class="form-section">
			<view class="form-row" @click="showCityPicker = true">
				<text class="label">城市</text>
				<text class="value" :class="{ placeholder: !cityText }">
					{{ cityText || '选择城市' }}
				</text>
				<text class="chevron">&gt;</text>
			</view>
			<view class="form-row" @click="openCenterPicker">
				<text class="label">运营中心</text>
				<text class="value" :class="{ placeholder: !form.centerName }">
					{{ form.centerName || '选择' }}
				</text>
				<text class="chevron">&gt;</text>
			</view>
			<view class="reason-block">
				<text class="label">申请原因</text>
				<textarea
					class="reason-input"
					v-model="form.reason"
					placeholder="请输入原因"
					maxlength="500"
					@input="onReasonInput"
				/>
				<text class="char-count">{{ form.reason.length }}/500</text>
			</view>
		</view>

		<view class="footer-bar">
			<view class="footer-btn" @click="onSubmit">申请开通</view>
		</view>

		<!-- 省 / 市 二级联动 -->
		<u-picker
			:show="showCityPicker"
			:columns="cityColumns"
			keyName="name"
			@change="onCityColumnChange"
			@confirm="onCityConfirm"
			@cancel="showCityPicker = false"
		></u-picker>

		<!-- 运营中心 -->
		<u-picker
			:show="showCenterPicker"
			:columns="[centerOptions]"
			keyName="name"
			@confirm="onCenterConfirm"
			@cancel="showCenterPicker = false"
		></u-picker>
	</view>
</template>

<script>
import {
	PROVINCE_CITY_TREE,
	getCitiesByProvince,
	getCentersByCity,
} from './mock.js'

export default {
	data() {
		return {
			form: {
				province: '',
				city: '',
				centerId: '',
				centerName: '',
				reason: '',
			},
			showCityPicker: false,
			showCenterPicker: false,
			cityColumns: [],
			centerOptions: [],
			provinceIndex: 0,
		}
	},
	computed: {
		cityText() {
			if (!this.form.province || !this.form.city) return ''
			if (this.form.province === this.form.city) return this.form.city
			return `${this.form.province} ${this.form.city}`
		},
	},
	onLoad() {
		this.initCityPicker()
	},
	methods: {
		initCityPicker() {
			const provinces = PROVINCE_CITY_TREE.map(p => ({ name: p.name }))
			const cities = getCitiesByProvince(provinces[0]?.name || '').map(c => ({ name: c.name }))
			this.cityColumns = [provinces, cities]
		},
		onCityColumnChange(e) {
			const { columnIndex, index } = e
			if (columnIndex !== 0) return
			this.provinceIndex = index
			const provinceName = PROVINCE_CITY_TREE[index]?.name
			const cities = getCitiesByProvince(provinceName).map(c => ({ name: c.name }))
			this.cityColumns = [
				this.cityColumns[0],
				cities,
			]
		},
		onCityConfirm(e) {
			const province = e.value[0]?.name || ''
			const city = e.value[1]?.name || ''
			if (province !== this.form.province || city !== this.form.city) {
				this.form.centerId = ''
				this.form.centerName = ''
				this.centerOptions = []
			}
			this.form.province = province
			this.form.city = city
			this.showCityPicker = false
		},
		openCenterPicker() {
			if (!this.form.province || !this.form.city) {
				uni.showToast({ title: '请先选择城市', icon: 'none' })
				return
			}
			this.centerOptions = getCentersByCity(this.form.province, this.form.city)
			if (!this.centerOptions.length) {
				uni.showToast({ title: '该城市暂无运营中心', icon: 'none' })
				return
			}
			this.showCenterPicker = true
		},
		onCenterConfirm(e) {
			const center = e.value[0]
			this.form.centerId = center.id
			this.form.centerName = center.name
			this.showCenterPicker = false
		},
		onReasonInput(e) {
			const val = (e.detail.value || '').slice(0, 500)
			this.form.reason = val
		},
		onSubmit() {
			if (!this.form.province || !this.form.city) {
				uni.showToast({ title: '请选择城市', icon: 'none' })
				return
			}
			if (!this.form.centerId) {
				uni.showToast({ title: '请选择运营中心', icon: 'none' })
				return
			}
			if (!this.form.reason.trim()) {
				uni.showToast({ title: '请输入申请原因', icon: 'none' })
				return
			}
			// 提交接口待对接
			uni.showToast({ title: '已提交，待审核', icon: 'none' })
			setTimeout(() => uni.navigateBack(), 1000)
		},
	},
}
</script>

<style lang="scss" scoped>
.apply-page {
	min-height: 100vh;
	background: #f5f5f5;
	padding-bottom: 140rpx;
}

.form-section {
	background: #fff;
}

.form-row {
	display: flex;
	align-items: center;
	padding: 28rpx 32rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.label {
	width: 160rpx;
	flex-shrink: 0;
	font-size: 30rpx;
	color: #333;
}

.value {
	flex: 1;
	text-align: right;
	font-size: 28rpx;
	color: #333;

	&.placeholder {
		color: #ccc;
	}
}

.chevron {
	margin-left: 8rpx;
	font-size: 28rpx;
	color: #999;
}

.reason-block {
	padding: 28rpx 32rpx;
}

.reason-input {
	width: 100%;
	min-height: 240rpx;
	margin-top: 16rpx;
	font-size: 28rpx;
	color: #333;
	line-height: 1.6;
	box-sizing: border-box;
}

.char-count {
	display: block;
	text-align: right;
	font-size: 24rpx;
	color: #999;
	margin-top: 12rpx;
}

.footer-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20rpx 32rpx;
	padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
	background: #fff;
	border-top: 1rpx solid #eee;
}

.footer-btn {
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	background: #333;
	color: #fff;
	font-size: 32rpx;
	border-radius: 12rpx;
}
</style>
