<template>
	<div class="page">
		<div class="jp-table top">
			<vxe-toolbar :refresh="{ query: loadConfig }" custom>
				<template #tools>
					<vxe-button text type="primary" :title="searchVisible ? '收起检索' : '展开检索'" icon="vxe-icon-search"
						class="tool-btn" @click="searchVisible = !searchVisible"></vxe-button>
				</template>
			</vxe-toolbar>
			<div style="padding: 20px;" v-loading="loading">
				<el-form :model="configForm" ref="configForm" label-width="140px" style="max-width: 600px; margin: 0 auto;">
					<el-form-item label="酒店名称" prop="hotelName">
						<el-input v-model="configForm.hotelName" placeholder="请输入酒店名称" clearable></el-input>
					</el-form-item>
					<el-form-item label="主题配色" prop="theme">
						<el-select v-model="configForm.theme" placeholder="请选择主题配色" style="width: 100%">
							<el-option label="商务深蓝" value="blue"></el-option>
							<el-option label="暖金雅致" value="gold"></el-option>
							<el-option label="墨绿清新" value="green"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="配送费（元）" prop="deliveryFee">
						<el-input-number v-model="configForm.deliveryFee" :min="0" :max="999" :precision="2"
							style="width: 100%"></el-input-number>
					</el-form-item>
					<el-form-item label="预计配送时长" prop="estimatedDeliveryMinutes">
						<el-input-number v-model="configForm.estimatedDeliveryMinutes" :min="1" :max="120"
							style="width: 100%"></el-input-number>
						<span style="color: #909399; font-size: 12px; margin-left: 8px;">分钟</span>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="doSave()" icon="el-icon-circle-check" v-noMoreClick>
							保存配置
						</el-button>
						<el-button @click="loadConfig()" icon="el-icon-refresh-right">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import HotelConfigService from '@/api/hotel/HotelConfigService'

/**
 * 酒店配置管理页面
 * 管理酒店基本信息：名称、主题、配送费、预计配送时长
 */
export default {
	data() {
		return {
			searchVisible: true,
			loading: false,
			configForm: {
				hotelName: '',
				theme: 'blue',
				deliveryFee: 0,
				estimatedDeliveryMinutes: 30
			}
		}
	},
	hotelConfigService: null,
	created() {
		this.hotelConfigService = new HotelConfigService()
	},
	mounted() {
		this.loadConfig()
	},
	activated() {
		this.loadConfig()
	},
	methods: {
		/** 加载酒店配置 */
		loadConfig() {
			this.loading = true
			this.hotelConfigService.get().then((data) => {
				const config = data.config || data || {}
				this.configForm = {
					hotelName: config.hotelName || '',
					theme: config.theme || 'blue',
					deliveryFee: config.deliveryFee || 0,
					estimatedDeliveryMinutes: config.estimatedDeliveryMinutes || 30
				}
				this.loading = false
			}).catch(() => {
				this.loading = false
			})
		},
		/** 保存酒店配置 */
		doSave() {
			this.loading = true
			this.hotelConfigService.save(this.configForm).then(() => {
				this.$message.success('配置保存成功')
				this.loading = false
			}).catch(() => {
				this.loading = false
			})
		}
	}
}
</script>
