<template>
	<el-dialog :title="!dataForm.id ? '新建客户信息' : isDetail ? '客户信息详情' : '编辑客户信息'" :close-on-click-modal="false"
		:visible.sync="visible" class="NCC-dialog NCC-dialog_center customer-form-dialog" lock-scroll width="1200px">
		<el-row :gutter="20" class="compact-form">
			<el-form ref="elForm" :model="dataForm" size="mini" label-width="100px" label-position="right"
				:disabled="!!isDetail" :rules="rules">
				<el-col :span="24">
					<div class="form-section-title">基本信息</div>
				</el-col>
				<el-col :span="6">
					<el-form-item label="客户名称" prop="khmc" required>
						<el-input v-model="dataForm.khmc" placeholder="请输入客户姓名" clearable :style='{ "width": "100%" }'>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="手机号" prop="sjh" required>
						<el-input v-model="dataForm.sjh" placeholder="请输入手机号" clearable :style='{ "width": "100%" }'>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="档案号" prop="dah">
						<el-input v-model="dataForm.dah" placeholder="请输入档案号" clearable :style='{ "width": "100%" }'>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="性别" prop="xb">
						<el-select v-model="dataForm.xb" placeholder="请选择性别" clearable :style='{ "width": "100%" }'>
							<el-option v-for="(item, index) in xbOptions" :key="index" :label="item.fullName"
								:value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<div class="form-section-title">生日信息</div>
				</el-col>
				<el-col :span="6" class="birthday-field">
					<el-form-item label="阳历生日" prop="yanglsr">
						<el-date-picker v-model="dataForm.yanglsr" placeholder="请选择阳历生日" clearable
							:style='{ "width": "100%" }' type='date' format="yyyy-MM-dd" value-format="timestamp"
							@change="onYanglsrChange">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="birthday-field">
					<el-form-item label="阴历生日" prop="yinlsr" class="yinlsr-form-item">
						<div class="yinlsr-selects">
							<el-select v-model="yinlsrMonth" placeholder="月" clearable
								@change="onYinlsrSelectChange">
								<el-option v-for="item in lunarMonthOptions" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
							<el-select v-model="yinlsrDay" placeholder="日" clearable
								@change="onYinlsrSelectChange">
								<el-option v-for="item in lunarDayOptions" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</div>
						<div v-if="dataForm.yanglsr" class="form-tip">选阳历可自动填入</div>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="birthday-field">
					<el-form-item label="过生日类型" prop="birthdayType">
						<el-select v-model="dataForm.birthdayType" placeholder="请选择" :style='{ "width": "100%" }'>
							<el-option label="阳历生日" :value="0" />
							<el-option label="农历生日" :value="1" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<div class="form-section-title">门店与顾问</div>
				</el-col>
				<el-col :span="6">
					<el-form-item label="归属门店" prop="gsmd">
						<el-select v-model="dataForm.gsmd" placeholder="请选择" clearable :style='{"width":"100%"}' filterable >
							<el-option v-for="(item, index) in gsmdOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="客户类型" prop="khlx">
						<el-select disabled v-model="dataForm.khlx" placeholder="请选择客户类型" clearable :style='{ "width": "100%" }'>
							<el-option v-for="(item, index) in khlxOptions" :key="index" :label="item.fullName"
								:value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="健康师" prop="mainHealthUser">
						<el-select v-model="dataForm.mainHealthUser" placeholder="请选择" clearable :style='{"width":"100%"}' filterable >
							<el-option v-for="(item, index) in mrsOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="负责顾问" prop="subHealthUser">
						<el-select v-model="dataForm.subHealthUser" placeholder="请选择" clearable :style='{"width":"100%"}' filterable >
							<el-option v-for="(item, index) in fzgwOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="进店渠道" prop="jdqd">
						<el-select v-model="dataForm.jdqd" placeholder="请选择" clearable :style='{"width":"100%"}' filterable >
							<el-option v-for="(item, index) in jdqdOptions" :key="index" :label="item.fullName" :value="item.id" :disabled="item.disabled" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="推荐人" prop="tjr">
						<!-- <el-input v-model="dataForm.tjr" placeholder="请输入推荐人" clearable :style='{ "width": "100%" }'>
						</el-input> -->
						<el-select
							:style='{"width":"100%"}'
							v-model="dataForm.tjr"
							filterable
							remote
							reserve-keyword
							placeholder="请输入关键词"
							:remote-method="remoteMethod"
							:loading="kdhyLoading">
							<el-option
							v-for="item in kdhyOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<div class="form-section-title">其他信息</div>
				</el-col>
				<el-col :span="6" v-if="dataForm.id">
					<el-form-item label="拓客人员" prop="expandUserName">
						<el-input  v-model="dataForm.expandUserName" placeholder="无拓客人员" clearable :style='{ "width": "100%" }' readonly>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="注册时间" prop="zcsj">
						<el-date-picker v-model="dataForm.zcsj" placeholder="请选择注册时间" clearable
							:style='{ "width": "100%" }' type='date' format="yyyy-MM-dd" value-format="timestamp">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="联系地址" prop="lxdz">
						<el-input v-model="dataForm.lxdz" placeholder="请输入详细联系地址" clearable
							:style='{ "width": "100%" }'>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="备注" prop="bz">
						<el-input v-model="dataForm.bz" placeholder="请输入备注信息" show-word-limit
							:style='{ "width": "100%" }' type='textarea' :autosize='{ "minRows": 3, "maxRows": 6 }'>
						</el-input>
					</el-form-item>
				</el-col>

			</el-form>
		</el-row>
		<span slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取 消</el-button>
			<el-button @click="resetForm" v-if="!isDetail">重 置</el-button>
			<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
		</span>
	</el-dialog>
</template>
<script>
import request from '@/utils/request'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import { previewDataInterface } from '@/api/systemData/dataInterface'
export default {
	components: {},
	props: [],
	data() {
		return {
			loading: false,
			kdhyLoading: false,
			visible: false,
			isDetail: false,
			dataForm: {
				id: undefined,
				khmc: undefined,
				sjh: undefined,
				dah: undefined,
				xb: undefined,
				gzhzt: undefined,
				wxnc: undefined,
				wxxcxzt: undefined,
				zjdlsj: undefined,
				khmqgs: undefined,
				gsmd: undefined,
				zcsj: undefined,
				khlx: '1',
				khjd: undefined,
				khxf: [],
				xfpc: undefined,
				tjr: undefined,
				subHealthUser: undefined,
				mainHealthUser: undefined,
				jdqd: undefined,
				lxdz: undefined,
				bz: undefined,
				yanglsr: undefined,
				yinlsr: undefined,
				birthdayType: 0,
				ml: undefined,
				expandUser: undefined,
				expandUserName: undefined,
			},
			rules: {
				khmc: [
					{ required: true, message: '请输入客户名称', trigger: 'blur' }
				],
				sjh: [
					{ required: true, message: '请输入手机号', trigger: 'blur' },
					{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
				],
				gsmd: [
					{ required: true, message: '请选择归属门店', trigger: 'change' }
				],
				khlx: [
					{ required: true, message: '请选择客户类型', trigger: 'change' }
				],
				jdqd: [
					{ required: true, message: '请选择进店渠道', trigger: 'change' }
				],
				tjr: [
					{ required: true, message: '请选择推荐人', trigger: 'change' }
				]
			},
			xbOptions: [{ "fullName": "男", "id": "男" }, { "fullName": "女", "id": "女" }],
			gzhztOptions: [{ "fullName": "已绑定", "id": "已绑定" }, { "fullName": "未绑定", "id": "未绑定" }],
			wxxcxztOptions: [{ "fullName": "已绑定", "id": "已绑定" }, { "fullName": "未绑定", "id": "未绑定" }],
			khmqgsOptions: [{ "fullName": "会员", "id": "会员" }, { "fullName": "线索池", "id": "线索池" }, { "fullName": "会员-归档", "id": "会员-归档" }],
			khlxOptions: [],
			khjdOptions: [{ "fullName": "体验", "id": "体验" }, { "fullName": "有效", "id": "有效" }, { "fullName": "沉睡", "id": "沉睡" }, { "fullName": "流失", "id": "流失" }],
			khxfOptions: [{ "fullName": "D客", "id": "D客" }, { "fullName": "有效", "id": "有效" }],
			xfpcOptions: [{ "fullName": "高频", "id": "高频" }, { "fullName": "低频", "id": "低频" }],
			jdqdOptions:[{ "fullName": "19.9卡", "id": "19.9卡","disabled": true }, { "fullName": "自然到店", "id": "自然到店" },{ "fullName": "嘉宾", "id": "嘉宾" },{ "fullName": "售后", "id": "售后" },{ "fullName": "直播间", "id": "直播间" },{ "fullName": "转店顾客", "id": "转店顾客" },{ "fullName": "联联", "id": "联联" },{ "fullName": "美团", "id": "美团" },{ "fullName": "三方拓客", "id": "三方拓客" },{ "fullName": "其他", "id": "其他" }],
			gsmdOptions: [],
			fzgwOptions: [],
			mrsOptions: [],
			kdhyOptions: [],
			yinlsrMonth: '',
			yinlsrDay: '',
			lunarMonthOptions: [
				{ label: '正月', value: '正月' }, { label: '二月', value: '二月' }, { label: '三月', value: '三月' },
				{ label: '四月', value: '四月' }, { label: '五月', value: '五月' }, { label: '六月', value: '六月' },
				{ label: '七月', value: '七月' }, { label: '八月', value: '八月' }, { label: '九月', value: '九月' },
				{ label: '十月', value: '十月' }, { label: '冬月', value: '冬月' }, { label: '腊月', value: '腊月' },
				{ label: '闰正月', value: '闰正月' }, { label: '闰二月', value: '闰二月' }, { label: '闰三月', value: '闰三月' },
				{ label: '闰四月', value: '闰四月' }, { label: '闰五月', value: '闰五月' }, { label: '闰六月', value: '闰六月' },
				{ label: '闰七月', value: '闰七月' }, { label: '闰八月', value: '闰八月' }, { label: '闰九月', value: '闰九月' },
				{ label: '闰十月', value: '闰十月' }, { label: '闰冬月', value: '闰冬月' }, { label: '闰腊月', value: '闰腊月' }
			],
			lunarDayOptions: [
				{ label: '初一', value: '初一' }, { label: '初二', value: '初二' }, { label: '初三', value: '初三' },
				{ label: '初四', value: '初四' }, { label: '初五', value: '初五' }, { label: '初六', value: '初六' },
				{ label: '初七', value: '初七' }, { label: '初八', value: '初八' }, { label: '初九', value: '初九' },
				{ label: '初十', value: '初十' }, { label: '十一', value: '十一' }, { label: '十二', value: '十二' },
				{ label: '十三', value: '十三' }, { label: '十四', value: '十四' }, { label: '十五', value: '十五' },
				{ label: '十六', value: '十六' }, { label: '十七', value: '十七' }, { label: '十八', value: '十八' },
				{ label: '十九', value: '十九' }, { label: '二十', value: '二十' }, { label: '廿一', value: '廿一' },
				{ label: '廿二', value: '廿二' }, { label: '廿三', value: '廿三' }, { label: '廿四', value: '廿四' },
				{ label: '廿五', value: '廿五' }, { label: '廿六', value: '廿六' }, { label: '廿七', value: '廿七' },
				{ label: '廿八', value: '廿八' }, { label: '廿九', value: '廿九' }, { label: '三十', value: '三十' }
			]
		}
	},
	computed: {},
	watch: {
		'dataForm.gsmd': {
			handler(newVal) {
				// 当归属门店改变时，重新获取负责顾问和美容师列表
				if (newVal) {
					this.getfzgwOptions();
					this.getmrsOptions();
				} else {
					// 如果清空门店，也清空相关选项
					this.fzgwOptions = [];
					this.mrsOptions = [];
					this.dataForm.subHealthUser = '';
					this.dataForm.mainHealthUser = '';
				}
			}
		},
		'dataForm.jdqd': {
			handler(newVal) {
				// 当进店渠道改变时，检查是否需要设置推荐人为必填
				this.updateTjrRules(newVal);
			}
		}
	},
	created() {
		this.getgsmdOptions();
		this.getkhlxOptions();
		
	},
	mounted() {
	},
	methods: {
		// 更新推荐人验证规则
		onYanglsrChange(val) {
			if (val) {
				const d = new Date(val)
				const dateStr = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
				request({
					url: `/api/Extend/LqKhxx/solar-to-lunar`,
					method: 'GET',
					params: { date: dateStr }
				}).then(res => {
					const inner = res.data && res.data.data
					if (res.code === 200 && inner && inner.yinlsr) {
						this.dataForm.yinlsr = inner.yinlsr
						this.parseYinlsrToSelect(inner.yinlsr)
					}
				})
			} else {
				this.dataForm.yinlsr = undefined
				this.yinlsrMonth = ''
				this.yinlsrDay = ''
			}
		},
		onYinlsrSelectChange() {
			if (this.yinlsrMonth && this.yinlsrDay) {
				this.dataForm.yinlsr = this.yinlsrMonth + this.yinlsrDay
			} else {
				this.dataForm.yinlsr = undefined
			}
		},
		parseYinlsrToSelect(yinlsr) {
			if (!yinlsr || typeof yinlsr !== 'string') {
				this.yinlsrMonth = ''
				this.yinlsrDay = ''
				return
			}
			const months = ['正月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '冬月', '腊月',
				'闰正月', '闰二月', '闰三月', '闰四月', '闰五月', '闰六月', '闰七月', '闰八月', '闰九月', '闰十月', '闰冬月', '闰腊月']
			const days = ['初一', '初二', '初三', '初四', '初五', '初六', '初七', '初八', '初九', '初十',
				'十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十',
				'廿一', '廿二', '廿三', '廿四', '廿五', '廿六', '廿七', '廿八', '廿九', '三十']
			let month = ''
			let day = ''
			for (const m of months) {
				if (yinlsr.startsWith(m)) {
					month = m
					const rest = yinlsr.slice(m.length)
					for (const d of days) {
						if (rest === d || rest.startsWith(d)) {
							day = d
							break
						}
					}
					break
				}
			}
			this.yinlsrMonth = month
			this.yinlsrDay = day
		},
		updateTjrRules(jdqd) {
			console.log(jdqd)
			// 移除现有的推荐人验证规则
			delete this.rules.tjr;
			
			// 如果进店渠道是"嘉宾"，则推荐人为必填
			if (jdqd === '嘉宾') {
				this.rules.tjr = [
					{ required: true, message: '进店渠道为嘉宾时，推荐人必须选择', trigger: 'change' }
				];
			}
			this.$forceUpdate();
		},
		getkdhyOptions(tjr) {
			request({
				url: '/api/Extend/LqKhxx?page=1&pageSize=20&id='+(tjr ? tjr : ''),
				method: 'GET',
			}).then((res) => {
				if (res.code == 200 && res.data.list.length > 0) {
					this.kdhyOptions = res.data.list.map(item => ({
						value: item.id,
						label: `${item.khmc}`+'('+item.sjh+')',
					}));
				} else {
					this.kdhyOptions = [];
				}
				console.error(this.kdhyOptions)
			})
		},
		async remoteMethod(query){
			if (query !== '') {
				this.kdhyLoading = true;
				await request({
					url: '/api/Extend/LqKhxx?page=1&pageSize=20&keyword='+query,
					method: 'GET',
				}).then((res) => {
					this.kdhyLoading = false;
					if (res.code == 200 && res.data.list.length > 0) {
						this.kdhyOptions = res.data.list.map(item => ({
							value: item.id,
							label: `${item.khmc}`+'('+item.sjh+')',
						}));
					} else {
						this.kdhyOptions = [];
					}
					console.error(this.kdhyOptions)
				})
			
			} else {
				// this.kdhyOptions = [];
			}
		},
		getgsmdOptions() {
			previewDataInterface('730960205902251269').then(res => {
				this.gsmdOptions = res.data
			});
		},
		getkhlxOptions() {
			request({
				url: '/api/Extend/lqkhxx/deduct-types',
				method: 'GET',
			}).then((res) => {
				if (res.code == 200 && res.data) {
					this.khlxOptions = res.data.map(item => ({
						fullName: item.Name,
						id: item.Value +'',
						value: item.Value+'',
						label: item.Name,
					}));
				} else {
					this.khlxOptions = [];
				}
			}).catch((err) => {
				console.error('获取客户类型失败:', err);
				this.khlxOptions = [];
			});
		},
		getfzgwOptions() {
			// 如果没有选择归属门店，不获取数据
			if (!this.dataForm.gsmd) {
				this.fzgwOptions = [];
				return;
			}
			
			request({
				url: `/api/Extend/user?page=1&pageSize=1000&mdid=${this.dataForm.gsmd}&gw=健康师`,
				method: 'GET',
			}).then((res) => {
				if (res.code == 200 && res.data.list.length > 0) {
					this.fzgwOptions = res.data.list.map(item => ({
						fullName: item.realName || item.name || item.userName,
						id: item.id,
						value: item.id,
						label: item.realName || item.name || item.userName,
					}));
				} else {
					this.fzgwOptions = [];
				}
			})
		},
		getmrsOptions() {
			// 如果没有选择归属门店，不获取数据
			if (!this.dataForm.gsmd) {
				this.mrsOptions = [];
				return;
			}
			
			request({
				url: `/api/Extend/user?page=1&pageSize=1000&mdid=${this.dataForm.gsmd}&gw=健康师`,
				method: 'GET',
			}).then((res) => {
				if (res.code == 200 && res.data.list.length > 0) {
					this.mrsOptions = res.data.list.map(item => ({
						fullName: item.realName || item.name || item.userName,
						id: item.id,
						value: item.id,
						label: item.realName || item.name || item.userName,
					}));
				} else {
					this.mrsOptions = [];
				}
			})
		},
		goBack() {
			this.$emit('refresh')
		},
		init(id, isDetail) {
			this.dataForm.id = id || 0;
			this.visible = true;
			this.isDetail = isDetail || false;
			this.$nextTick(() => {
				this.$refs['elForm'].resetFields();
				if (this.dataForm.id) {
					request({
						url: '/api/Extend/LqKhxx/' + this.dataForm.id,
						method: 'get'
					}).then(res => {
						this.dataForm = res.data;
						this.dataForm.khxf = this.dataForm.khxf?this.dataForm.khxf.split(','):[];
						this.parseYinlsrToSelect(this.dataForm.yinlsr);
						// 编辑时，根据归属门店加载负责顾问和美容师选项
						if (this.dataForm.gsmd) {
							this.getfzgwOptions();
							this.getmrsOptions();
						}
						
						// 编辑时，检查进店渠道并设置推荐人验证规则
						if (this.dataForm.jdqd) {
							this.updateTjrRules(this.dataForm.jdqd);
						}
						this.getkdhyOptions(this.dataForm.tjr);
					})
				} else{
					this.getkdhyOptions();
					this.dataForm = {
						id: undefined,
						khmc: undefined,
						sjh: undefined,
						dah: undefined,
						xb: undefined,
						gzhzt: undefined,
						wxnc: undefined,
						wxxcxzt: undefined,
						zjdlsj: undefined,
						khmqgs: undefined,
						gsmd: undefined,
						zcsj: undefined,
						khlx: '1',
						khjd: undefined,
						khxf: [],
						xfpc: undefined,
						tjr: undefined,
						subHealthUser: undefined,
						mainHealthUser: undefined,
						jdqd: undefined,
						lxdz: undefined,
						bz: undefined,
						yanglsr: undefined,
						yinlsr: undefined,
						birthdayType: 0,
						ml: undefined,
						expandUser: undefined,
						expandUserName: undefined,
					}
					this.yinlsrMonth = '';
					this.yinlsrDay = '';
				}
			})
		},
		resetForm() {
			this.$confirm('确定要重置表单吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$refs['elForm'].resetFields();
				this.yinlsrMonth = '';
				this.yinlsrDay = '';
				this.$message.success('表单已重置');
			}).catch(() => {
				// 用户取消
			});
		},
		formatNumber(field) {
			// 移除千分位分隔符，只保留数字和小数点
			let value = this.dataForm[field].toString().replace(/,/g, '');
			// 确保是有效的数字格式
			if (!/^\d*\.?\d*$/.test(value)) {
				value = value.replace(/[^\d.]/g, '');
			}
			// 更新原始值
			this.dataForm[field] = value;
		},
		dataFormSubmit() {
			this.$refs['elForm'].validate((valid) => {
				if (valid) {
					this.dataForm.khxf = this.dataForm.khxf?this.dataForm.khxf.join(','):'';
					if (!this.dataForm.id) {
						request({
							url: `/api/Extend/LqKhxx`,
							method: 'post',
							data: this.dataForm,
						}).then((res) => {
							this.$message({
								message: res.msg,
								type: 'success',
								duration: 1000,
								onClose: () => {
									this.visible = false,
										this.$emit('refresh', true)
								}
							})
						})
					} else {
						request({
							url: '/api/Extend/LqKhxx/' + this.dataForm.id,
							method: 'PUT',
							data: this.dataForm
						}).then((res) => {
							this.$message({
								message: res.msg,
								type: 'success',
								duration: 1000,
								onClose: () => {
									this.visible = false
									this.$emit('refresh', true)
								}
							})
						})
					}
				}
			})
		},
	}
}
</script>

<style scoped>
/* 现代化弹窗：圆角、柔和阴影、过渡 */
.customer-form-dialog >>> .el-dialog {
	border-radius: 12px;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.customer-form-dialog >>> .el-dialog__header {
	padding: 18px 20px;
	border-bottom: 1px solid #f0f2f5;
	background: #fafbfc;
}

.customer-form-dialog >>> .el-dialog__body {
	padding: 20px 24px;
	background: #fff;
}

.customer-form-dialog >>> .el-dialog__footer {
	padding: 16px 24px;
	border-top: 1px solid #f0f2f5;
	background: #fafbfc;
}

/* 分组标题：柔和现代风格，保持主色 */
.form-section-title {
	display: flex;
	align-items: center;
	margin: 20px 0 12px 0;
	padding: 10px 14px;
	background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
	color: white;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.3px;
	box-shadow: 0 2px 8px rgba(64, 158, 255, 0.25);
	transition: box-shadow 0.2s ease;
}

.form-section-title:first-of-type {
	margin-top: 0;
}

.form-section-title i {
	margin-right: 8px;
	font-size: 18px;
}

.el-form-item {
	margin-bottom: 12px;
	transition: opacity 0.15s ease;
}

.compact-form .el-form-item {
	margin-bottom: 10px;
}

/* 输入框 focus 过渡 */
.compact-form .el-input__inner,
.compact-form .el-textarea__inner {
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-tip {
	font-size: 12px;
	color: #909399;
	margin-top: 4px;
	line-height: 1.2;
}

/* 生日信息行：阳历/阴历顶部对齐（内容可能多行），过生日类型居中对齐 */
.birthday-field .el-form-item {
	align-items: flex-start;
}

.birthday-field .el-form-item__label {
	white-space: nowrap;
}

/* 阴历生日：月日并排不换行 */
.yinlsr-selects {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	width: 100%;
}

.yinlsr-selects .el-select {
	flex: 1;
	min-width: 0;
}

.el-input-group__append {
	background: #f5f7fa;
	border-color: #dcdfe6;
	color: #606266;
}

/* 底部按钮区：现代化间距与过渡 */
.dialog-footer {
	text-align: right;
	padding: 16px 0 0;
}

.dialog-footer .el-button {
	margin-left: 10px;
	transition: all 0.2s ease;
}

.dialog-footer .el-button--primary {
	box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
}

.dialog-footer .el-button--primary:hover {
	box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}

/* 必填字段标识 */
.el-form-item.is-required .el-form-item__label::before {
	content: '*';
	color: #f56c6c;
	margin-right: 4px;
}

.el-col {
	margin-bottom: 10px;
}

/* 响应式 */
@media (max-width: 768px) {
	.el-col {
		margin-bottom: 10px;
	}

	.form-section-title {
		font-size: 14px;
		padding: 8px 12px;
	}
}
</style>