<template>
	<view class="page padding">
		<!-- 有企业信息时显示详情 -->
		<view v-if="hasEnterpriseInfo" class="padding bg-white radius list">
			<view class="flex justify-between">
				<view class="text-bold text-lg">{{ enterpriseInfo.name }}</view>
				<view class="lg text-blue cuIcon-edit over" @click="openEditPopup">编辑</view>
			</view>
			<view class="info-item" v-if="enterpriseInfo.enterpriseTypeName">
				<view class="text-gray">企业类型：</view>
				<view>{{ enterpriseInfo.enterpriseTypeName }}</view>
			</view>
			<view class="info-item" v-if="enterpriseInfo.industryName">
				<view class="text-gray">行业类型：</view>
				<view>{{ enterpriseInfo.industryName }}</view>
			</view>
			<view class="info-item" v-if="enterpriseInfo.creditCode">
				<view class="text-gray">统一社会信用代码：</view>
				<view>{{ enterpriseInfo.creditCode }}</view>
			</view>
			<view class="info-item" v-if="enterpriseInfo.registeredCapital">
				<view class="text-gray">注册资本：</view>
				<view>{{ enterpriseInfo.registeredCapital }}万元</view>
			</view>
			<view class="info-item" v-if="enterpriseInfo.establishDate">
				<view class="text-gray">成立时间：</view>
				<view>{{ enterpriseInfo.establishDate }}</view>
			</view>
			<view class="info-item" v-if="enterpriseInfo.employeeCount">
				<view class="text-gray">员工总数：</view>
				<view>{{ enterpriseInfo.employeeCount }}人</view>
			</view>
			<view class="info-item" v-if="enterpriseInfo.mainBusiness">
				<view class="text-gray">主营行业：</view>
				<view>{{ enterpriseInfo.mainBusiness }}</view>
			</view>
			<view class="info-item" v-if="enterpriseInfo.mainProducts">
				<view class="text-gray">主要产品/服务：</view>
				<view>{{ enterpriseInfo.mainProducts }}</view>
			</view>
			<view class="info-item" v-if="enterpriseInfo.annualOutput">
				<view class="text-gray">年产值：</view>
				<view>{{ enterpriseInfo.annualOutput }}万元</view>
			</view>
			<view class="info-item" v-if="enterpriseInfo.province || enterpriseInfo.city">
				<view class="text-gray">所在地区：</view>
				<view>{{ enterpriseInfo.province }}{{ enterpriseInfo.city }}</view>
			</view>
			<view class="info-item" v-if="enterpriseInfo.address">
				<view class="text-gray">详细地址：</view>
				<view>{{ enterpriseInfo.address }}</view>
			</view>
			<view class="info-item" v-if="enterpriseInfo.phone">
				<view class="text-gray">联系电话：</view>
				<view>{{ enterpriseInfo.phone }}</view>
			</view>
			<view class="info-item" v-if="enterpriseInfo.email">
				<view class="text-gray">电子邮箱：</view>
				<view>{{ enterpriseInfo.email }}</view>
			</view>
			<view class="info-item" v-if="enterpriseInfo.legalPerson">
				<view class="text-gray">法定代表人：</view>
				<view>{{ enterpriseInfo.legalPerson }}</view>
			</view>
			<view class="info-item" v-if="enterpriseInfo.legalPersonPhone">
				<view class="text-gray">法人联系电话：</view>
				<view>{{ enterpriseInfo.legalPersonPhone }}</view>
			</view>
			<view class="info-item" v-if="enterpriseInfo.safetyManager">
				<view class="text-gray">安全负责人：</view>
				<view>{{ enterpriseInfo.safetyManager }}</view>
			</view>
			<view class="info-item" v-if="enterpriseInfo.safetyManagerPhone">
				<view class="text-gray">安全负责人电话：</view>
				<view>{{ enterpriseInfo.safetyManagerPhone }}</view>
			</view>
		</view>
		
		<!-- 没有企业信息时显示新增按钮 -->
		<view v-else class="empty-box">
			<view class="text-gray text-center margin-bottom">暂无企业信息</view>
			<button class="bg-blue round" @click="openAddPopup">新增企业信息</button>
		</view>

		<!-- 新增/编辑弹窗 - 使用 up-modal -->
		<up-modal 
			:show="showPopup" 
			:title="isEdit ? '编辑企业信息' : '新增企业信息'"
			:showConfirmButton="true"
			:showCancelButton="true"
			confirmText="确定"
			cancelText="取消"
			@confirm="handleSubmit"
			@cancel="showPopup = false"
			@close="showPopup = false"
			:closeOnClickOverlay="false"
		>
			<scroll-view class="modal-scroll-body" scroll-y="true">
				<!-- 企业名称 -->
				<view class="form-label">
					<view class="text-gray">企业名称</view>
					<view class="text-red">*</view>
				</view>
				<input class="form-input" v-model="formData.name" placeholder="请输入企业名称" />
				
				<!-- 企业类型 -->
				<view class="form-label margin-top">
					<view class="text-gray">企业类型</view>
					<view class="text-red">*</view>
				</view>
				<view class="select-trigger" @click="openEnterpriseTypePopup">
					<view class="select-value" :class="{ 'placeholder': !selectedEnterpriseTypeName }">
						{{ selectedEnterpriseTypeName || '请选择企业类型' }}
					</view>
					<text class="cuIcon-unfold"></text>
				</view>
				
				<!-- 行业类型 -->
				<view class="form-label margin-top">
					<view class="text-gray">行业类型</view>
					<view class="text-red">*</view>
				</view>
				<view class="select-trigger" @click="openIndustryPopup">
					<view class="select-value" :class="{ 'placeholder': !selectedIndustryName }">
						{{ selectedIndustryName || '请选择行业类型' }}
					</view>
					<text class="cuIcon-unfold"></text>
				</view>
				
				<!-- 统一社会信用代码 -->
				<view class="form-label margin-top">
					<view class="text-gray">统一社会信用代码</view>
				</view>
				<input class="form-input" v-model="formData.creditCode" placeholder="请输入统一社会信用代码" />
				
				<!-- 注册资本 -->
				<view class="form-label margin-top">
					<view class="text-gray">注册资本（万元）</view>
				</view>
				<input class="form-input" v-model="formData.registeredCapital" placeholder="请输入注册资本" type="number" />
				
				<!-- 成立时间 -->
				<view class="form-label margin-top">
					<view class="text-gray">成立时间</view>
				</view>
				<view class="select-trigger" @click="showDatePicker = true">
					<view class="select-value" :class="{ 'placeholder': !formData.establishDate }">
						{{ formData.establishDate || '请选择成立时间' }}
					</view>
					<text class="cuIcon-calendar"></text>
				</view>
				
				<!-- 员工总数 -->
				<view class="form-label margin-top">
					<view class="text-gray">员工总数</view>
				</view>
				<input class="form-input" v-model="formData.employeeCount" placeholder="请输入员工总数" type="number" />
				
				<!-- 主营行业 -->
				<view class="form-label margin-top">
					<view class="text-gray">主营行业</view>
				</view>
				<input class="form-input" v-model="formData.mainBusiness" placeholder="请输入主营行业" />
				
				<!-- 主要产品/服务 -->
				<view class="form-label margin-top">
					<view class="text-gray">主要产品/服务</view>
				</view>
				<textarea class="form-textarea" v-model="formData.mainProducts" placeholder="请输入主要产品/服务"></textarea>
				
				<!-- 年产值 -->
				<view class="form-label margin-top">
					<view class="text-gray">年产值（万元）</view>
				</view>
				<input class="form-input" v-model="formData.annualOutput" placeholder="请输入年产值" type="number" />
				
				<!-- 所在省份 -->
				<view class="form-label margin-top">
					<view class="text-gray">所在省份</view>
				</view>
				<input class="form-input" v-model="formData.province" placeholder="请输入所在省份" />
				
				<!-- 所在城市 -->
				<view class="form-label margin-top">
					<view class="text-gray">所在城市</view>
				</view>
				<input class="form-input" v-model="formData.city" placeholder="请输入所在城市" />
				
				<!-- 详细地址 -->
				<view class="form-label margin-top">
					<view class="text-gray">详细地址</view>
				</view>
				<textarea class="form-textarea" v-model="formData.address" placeholder="请输入详细地址"></textarea>
				
				<!-- 联系电话 -->
				<view class="form-label margin-top">
					<view class="text-gray">联系电话</view>
				</view>
				<input class="form-input" v-model="formData.phone" placeholder="请输入联系电话" />
				
				<!-- 电子邮箱 -->
				<view class="form-label margin-top">
					<view class="text-gray">电子邮箱</view>
				</view>
				<input class="form-input" v-model="formData.email" placeholder="请输入电子邮箱" />
				
				<!-- 法定代表人 -->
				<view class="form-label margin-top">
					<view class="text-gray">法定代表人</view>
				</view>
				<input class="form-input" v-model="formData.legalPerson" placeholder="请输入法定代表人" />
				
				<!-- 法人联系电话 -->
				<view class="form-label margin-top">
					<view class="text-gray">法人联系电话</view>
				</view>
				<input class="form-input" v-model="formData.legalPersonPhone" placeholder="请输入法人联系电话" />
				
				<!-- 安全负责人 -->
				<view class="form-label margin-top">
					<view class="text-gray">安全负责人</view>
				</view>
				<input class="form-input" v-model="formData.safetyManager" placeholder="请输入安全负责人" />
				
				<!-- 安全负责人电话 -->
				<view class="form-label margin-top">
					<view class="text-gray">安全负责人电话</view>
				</view>
				<input class="form-input" v-model="formData.safetyManagerPhone" placeholder="请输入安全负责人电话" />
				
				<!-- 资质证书 -->
				<view class="form-label margin-top">
					<view class="text-gray">资质证书</view>
				</view>
				<up-upload :fileList="certificateFiles" @afterRead="afterRead" @delete="deleteCertificate" name="certificate" multiple :maxCount="10" accept="all"></up-upload>
				<view class="text-gray text-sm margin-bottom">支持上传图片、PDF等文件</view>
			</scroll-view>
		</up-modal>
		
		<!-- 日期选择器单独放在外面 -->
		<u-datetime-picker 
			:show="showDatePicker" 
			v-model="establishDateValue" 
			mode="date" 
			@confirm="onDateConfirm" 
			@cancel="showDatePicker = false"
			@close="showDatePicker = false"
		></u-datetime-picker>
		
		<!-- 企业类型选择弹窗 -->
		<u-popup :show="showEnterpriseTypePopup" mode="bottom" round="20" @close="showEnterpriseTypePopup = false">
			<view class="picker-popup">
				<view class="picker-header">
					<view class="picker-cancel" @click="showEnterpriseTypePopup = false">取消</view>
					<view class="picker-title">选择企业类型</view>
					<view class="picker-confirm" @click="confirmEnterpriseType">确定</view>
				</view>
				<scroll-view class="picker-body" scroll-y>
					<view 
						class="picker-item" 
						v-for="item in enterpriseTypeList" 
						:key="item.id"
						:class="{ 'active': tempEnterpriseTypeId === item.id }"
						@click="tempEnterpriseTypeId = item.id"
					>
						<text>{{ item.name }}</text>
						<text v-if="tempEnterpriseTypeId === item.id" class="cuIcon-check text-blue"></text>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<!-- 行业类型选择弹窗 -->
		<u-popup :show="showIndustryPopup" mode="bottom" round="20" @close="showIndustryPopup = false">
			<view class="picker-popup">
				<view class="picker-header">
					<view class="picker-cancel" @click="showIndustryPopup = false">取消</view>
					<view class="picker-title">选择行业类型</view>
					<view class="picker-confirm" @click="confirmIndustry">确定</view>
				</view>
				<scroll-view class="picker-body" scroll-y>
					<view 
						class="picker-item" 
						v-for="item in industryList" 
						:key="item.id"
						:class="{ 'active': tempIndustryId === item.id }"
						@click="tempIndustryId = item.id"
					>
						<text>{{ item.name }}</text>
						<text v-if="tempIndustryId === item.id" class="cuIcon-check text-blue"></text>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getEnterpriseinfo, addEnterprise, updateEnterprise, getEnterprisetype, getindustry } from '@/request/api.js'
import { baseUrl, getToken } from '@/request/request.js'

// 企业信息
const enterpriseInfo = ref({})
const hasEnterpriseInfo = computed(() => {
	return enterpriseInfo.value && enterpriseInfo.value.name
})

// 弹窗控制
const showPopup = ref(false)
const isEdit = ref(false)
const showDatePicker = ref(false)
const establishDateValue = ref(Date.now())

// 下拉选项
const enterpriseTypeList = ref([])
const industryList = ref([])

// 选择弹窗控制
const showEnterpriseTypePopup = ref(false)
const showIndustryPopup = ref(false)
const tempEnterpriseTypeId = ref('')
const tempIndustryId = ref('')
const selectedEnterpriseTypeName = ref('')
const selectedIndustryName = ref('')

// 表单数据
const formData = reactive({
	deptId: '',
	enterpriseTypeId: '',
	industryId: '',
	name: '',
	creditCode: '',
	registeredCapital: '',
	establishDate: '',
	employeeCount: '',
	mainBusiness: '',
	mainProducts: '',
	annualOutput: '',
	province: '',
	city: '',
	address: '',
	phone: '',
	email: '',
	legalPerson: '',
	legalPersonPhone: '',
	safetyManager: '',
	safetyManagerPhone: '',
	certificates: ''
})

// 资质证书文件列表
const certificateFiles = ref([])

// 获取用户部门ID
const getDeptId = () => {
	try {
		const userInfoStr = uni.getStorageSync('userInfo')
		if (userInfoStr) {
			const userInfo = JSON.parse(userInfoStr)
			return userInfo.deptId || ''
		}
	} catch (error) {
		console.error('获取用户信息失败:', error)
	}
	return ''
}

// 获取企业信息
const fetchEnterpriseInfo = async () => {
	try {
		const res = await getEnterpriseinfo()
		if (res.code === 0 && res.data) {
			enterpriseInfo.value = res.data
			console.log('企业信息:', res.data)
		} else {
			enterpriseInfo.value = {}
		}
	} catch (error) {
		console.error('获取企业信息失败:', error)
		enterpriseInfo.value = {}
	}
}

// 获取企业类型列表
const fetchEnterpriseTypes = async () => {
	try {
		const res = await getEnterprisetype()
		if (res.code === 0 && res.data) {
			enterpriseTypeList.value = res.data.map(item => ({
				id: String(item.id),
				name: item.name
			}))
		}
	} catch (error) {
		console.error('获取企业类型失败:', error)
	}
}

// 获取行业类型列表
const fetchIndustryTypes = async () => {
	try {
		const res = await getindustry({})
		if (res.code === 0 && res.data) {
			industryList.value = res.data.map(item => ({
				id: String(item.id),
				name: item.name
			}))
		}
	} catch (error) {
		console.error('获取行业类型失败:', error)
	}
}

// 打开企业类型选择弹窗
const openEnterpriseTypePopup = () => {
	tempEnterpriseTypeId.value = formData.enterpriseTypeId
	showEnterpriseTypePopup.value = true
}

// 确认企业类型选择
const confirmEnterpriseType = () => {
	if (tempEnterpriseTypeId.value) {
		formData.enterpriseTypeId = tempEnterpriseTypeId.value
		const selected = enterpriseTypeList.value.find(item => item.id === tempEnterpriseTypeId.value)
		selectedEnterpriseTypeName.value = selected ? selected.name : ''
	}
	showEnterpriseTypePopup.value = false
}

// 打开行业类型选择弹窗
const openIndustryPopup = () => {
	tempIndustryId.value = formData.industryId
	showIndustryPopup.value = true
}

// 确认行业类型选择
const confirmIndustry = () => {
	if (tempIndustryId.value) {
		formData.industryId = tempIndustryId.value
		const selected = industryList.value.find(item => item.id === tempIndustryId.value)
		selectedIndustryName.value = selected ? selected.name : ''
	}
	showIndustryPopup.value = false
}

// 日期确认
const onDateConfirm = (e) => {
	const date = new Date(e.value)
	formData.establishDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
	showDatePicker.value = false
}

// 重置表单
const resetForm = () => {
	formData.deptId = getDeptId()
	formData.enterpriseTypeId = ''
	formData.industryId = ''
	formData.name = ''
	formData.creditCode = ''
	formData.registeredCapital = ''
	formData.establishDate = ''
	formData.employeeCount = ''
	formData.mainBusiness = ''
	formData.mainProducts = ''
	formData.annualOutput = ''
	formData.province = ''
	formData.city = ''
	formData.address = ''
	formData.phone = ''
	formData.email = ''
	formData.legalPerson = ''
	formData.legalPersonPhone = ''
	formData.safetyManager = ''
	formData.safetyManagerPhone = ''
	formData.certificates = ''
	certificateFiles.value = []
	selectedEnterpriseTypeName.value = ''
	selectedIndustryName.value = ''
}

// 打开新增弹窗
const openAddPopup = () => {
	isEdit.value = false
	resetForm()
	showPopup.value = true
}

// 打开编辑弹窗
const openEditPopup = () => {
	isEdit.value = true
	// 填充表单数据
	formData.deptId = enterpriseInfo.value.deptId || getDeptId()
	formData.enterpriseTypeId = String(enterpriseInfo.value.enterpriseTypeId || '')
	formData.industryId = String(enterpriseInfo.value.industryId || '')
	formData.name = enterpriseInfo.value.name || ''
	formData.creditCode = enterpriseInfo.value.creditCode || ''
	formData.registeredCapital = enterpriseInfo.value.registeredCapital || ''
	formData.establishDate = enterpriseInfo.value.establishDate || ''
	formData.employeeCount = enterpriseInfo.value.employeeCount || ''
	formData.mainBusiness = enterpriseInfo.value.mainBusiness || ''
	formData.mainProducts = enterpriseInfo.value.mainProducts || ''
	formData.annualOutput = enterpriseInfo.value.annualOutput || ''
	formData.province = enterpriseInfo.value.province || ''
	formData.city = enterpriseInfo.value.city || ''
	formData.address = enterpriseInfo.value.address || ''
	formData.phone = enterpriseInfo.value.phone || ''
	formData.email = enterpriseInfo.value.email || ''
	formData.legalPerson = enterpriseInfo.value.legalPerson || ''
	formData.legalPersonPhone = enterpriseInfo.value.legalPersonPhone || ''
	formData.safetyManager = enterpriseInfo.value.safetyManager || ''
	formData.safetyManagerPhone = enterpriseInfo.value.safetyManagerPhone || ''
	
	// 同步显示已选择的类型名称
	selectedEnterpriseTypeName.value = enterpriseInfo.value.enterpriseTypeName || ''
	selectedIndustryName.value = enterpriseInfo.value.industryName || ''
	
	// 处理资质证书
	if (enterpriseInfo.value.certificates) {
		try {
			const certs = JSON.parse(enterpriseInfo.value.certificates)
			certificateFiles.value = certs.map(cert => ({
				url: cert.filePath || cert.url,
				name: cert.fileName || cert.name,
				status: 'success'
			}))
		} catch (e) {
			certificateFiles.value = []
		}
	} else {
		certificateFiles.value = []
	}
	
	showPopup.value = true
}

// 上传文件
const afterRead = async (event) => {
	let lists = [].concat(event.file)
	let fileListLen = certificateFiles.value.length
	lists.forEach((item) => {
		certificateFiles.value.push({
			...item,
			status: 'uploading',
			message: '上传中'
		})
	})
	for (let i = 0; i < lists.length; i++) {
		const result = await uploadFilePromise(lists[i].url)
		let item = certificateFiles.value[fileListLen]
		certificateFiles.value.splice(fileListLen, 1, {
			...item,
			status: 'success',
			message: '',
			url: result
		})
		fileListLen++
	}
}

// 删除文件
const deleteCertificate = (event) => {
	certificateFiles.value.splice(event.index, 1)
}

// 上传文件Promise
const uploadFilePromise = (filePath) => {
	return new Promise((resolve, reject) => {
		uni.uploadFile({
			url: baseUrl + '/frontend/attachment/upload',
			filePath: filePath,
			name: 'file',
			header: {
				'Authorization': getToken()
			},
			success: (res) => {
				const data = JSON.parse(res.data)
				if (data.code === 0) {
					resolve(data.data)
				} else {
					reject(data.msg || '上传失败')
				}
			},
			fail: (err) => {
				console.error('上传失败:', err)
				reject(err)
			}
		})
	})
}

// 提交表单
const handleSubmit = async () => {
	// 表单验证
	if (!formData.name) {
		uni.showToast({ title: '请输入企业名称', icon: 'none' })
		return
	}
	if (!formData.enterpriseTypeId) {
		uni.showToast({ title: '请选择企业类型', icon: 'none' })
		return
	}
	if (!formData.industryId) {
		uni.showToast({ title: '请选择行业类型', icon: 'none' })
		return
	}
	
	// 构建资质证书JSON
	const certificates = certificateFiles.value.map(file => ({
		fileName: file.name || file.url.split('/').pop(),
		filePath: file.url
	}))
	
	const params = {
		deptId: Number(formData.deptId) || Number(getDeptId()),
		enterpriseTypeId: Number(formData.enterpriseTypeId),
		industryId: Number(formData.industryId),
		name: formData.name,
		creditCode: formData.creditCode || '',
		registeredCapital: Number(formData.registeredCapital) || 0,
		establishDate: formData.establishDate || '',
		employeeCount: Number(formData.employeeCount) || 0,
		mainBusiness: formData.mainBusiness || '',
		mainProducts: formData.mainProducts || '',
		annualOutput: Number(formData.annualOutput) || 0,
		province: formData.province || '',
		city: formData.city || '',
		address: formData.address || '',
		phone: formData.phone || '',
		email: formData.email || '',
		legalPerson: formData.legalPerson || '',
		legalPersonPhone: formData.legalPersonPhone || '',
		safetyManager: formData.safetyManager || '',
		safetyManagerPhone: formData.safetyManagerPhone || '',
		certificates: JSON.stringify(certificates)
	}
	
	// 如果是编辑模式，添加 id 字段
	if (isEdit.value && enterpriseInfo.value.id) {
		params.id = enterpriseInfo.value.id
	}
	
	try {
		let res
		if (isEdit.value) {
			res = await updateEnterprise(params)
		} else {
			res = await addEnterprise(params)
		}
		
		if (res.code === 0) {
			uni.showToast({
				title: isEdit.value ? '修改成功' : '新增成功',
				icon: 'success'
			})
			showPopup.value = false
			// 刷新数据
			fetchEnterpriseInfo()
		} else {
			uni.showToast({
				title: res.msg || '操作失败',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error('提交失败:', error)
		uni.showToast({
			title: '操作失败',
			icon: 'none'
		})
	}
}

// 页面显示时获取数据
onShow(() => {
	fetchEnterpriseInfo()
	fetchEnterpriseTypes()
	fetchIndustryTypes()
})
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background: #EBF2FC;
}

.list {
	background: #FFFFFF;
	box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.08);
	border-left: 5px solid #2667E9;
	border-radius: 20rpx;
	padding: 20rpx;
}

.info-item {
	display: flex;
	margin-top: 16rpx;
	font-size: 28rpx;
	
	.text-gray {
		flex-shrink: 0;
		color: #999;
	}
}

.empty-box {
	padding: 100rpx 40rpx;
	text-align: center;
}

// up-modal 内的滚动区域
.modal-scroll-body {
	height: 60vh;
	padding: 20rpx 0;
	box-sizing: border-box;
}

// 表单输入框样式
.form-input {
	width: 100%;
	height: 80rpx;
	padding: 0 24rpx;
	border: 1rpx solid #dcdfe6;
	border-radius: 8rpx;
	font-size: 28rpx;
	box-sizing: border-box;
	background: #fff;
}

.form-textarea {
	width: 100%;
	min-height: 160rpx;
	padding: 20rpx 24rpx;
	border: 1rpx solid #dcdfe6;
	border-radius: 8rpx;
	font-size: 28rpx;
	box-sizing: border-box;
	background: #fff;
}

.form-label {
	display: flex;
	align-items: center;
	margin-bottom: 12rpx;
	
	.text-red {
		margin-left: 4rpx;
	}
}

// 选择触发器样式
.select-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	border: 1rpx solid #dcdfe6;
	border-radius: 8rpx;
	padding: 20rpx 24rpx;
	
	.select-value {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		
		&.placeholder {
			color: #c0c4cc;
		}
	}
}

// 选择弹窗样式
.picker-popup {
	background: #fff;
	
	.picker-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
		
		.picker-cancel {
			font-size: 28rpx;
			color: #999;
		}
		
		.picker-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		
		.picker-confirm {
			font-size: 28rpx;
			color: #2667E9;
		}
	}
	
	.picker-body {
		max-height: 600rpx;
		padding: 0 30rpx;
	}
	
	.picker-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
		font-size: 30rpx;
		color: #333;
		
		&:last-child {
			border-bottom: none;
		}
		
		&.active {
			color: #2667E9;
		}
	}
}
</style>
