<template>
	<div class="page">
		<!-- 搜索栏 -->
		<el-form :inline="true" v-if="searchVisible" class="query-form m-b-10" ref="searchForm" :model="searchForm"
			@keyup.enter.native="refreshList()" @submit.native.prevent>
			<el-form-item label="菜品名称" prop="dishName">
				<el-input v-model="searchForm.dishName" placeholder="请输入菜品名称" clearable></el-input>
			</el-form-item>
			<el-form-item label="规格组名称" prop="groupName">
				<el-input v-model="searchForm.groupName" placeholder="请输入规格组名称" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="refreshList()" icon="el-icon-search">查询</el-button>
				<el-button @click="resetSearch()" icon="el-icon-refresh-right">重置</el-button>
			</el-form-item>
		</el-form>

		<div class="jp-table top">
			<vxe-toolbar :refresh="{ query: refreshList }" custom>
				<template #buttons>
					<el-button v-if="hasPermission('hotel:admin:dishSpec:add')" type="primary" icon="el-icon-plus"
						@click="addGroup()">新增规格组</el-button>
				</template>
				<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="height: calc(100% - 90px)">
				<vxe-table border="inner" auto-resize resizable height="auto" :loading="loading" ref="dataTable"
					show-header-overflow show-overflow highlight-hover-row :menu-config="{}" :data="dataList"
					:checkbox-config="{}">
					<vxe-column type="seq" width="60" title="序号"></vxe-column>
					<vxe-column title="菜品名称" field="dishName" min-width="150" align="center"></vxe-column>
					<vxe-column title="规格组名称" field="groupName" min-width="150" align="center"></vxe-column>
					<vxe-column title="是否必选" field="required" width="100" align="center">
						<template #default="scope">
							<el-tag :type="scope.row.required === 1 ? 'danger' : 'info'" effect="plain" size="small">
								{{ scope.row.required === 1 ? '必选' : '可选' }}
							</el-tag>
						</template>
					</vxe-column>
					<vxe-column title="选项数量" width="100" align="center">
						<template #default="scope">
							<el-button text type="primary" size="small" @click="showOptions(scope.row)">
								{{ (scope.row.options || []).length }} 个选项
							</el-button>
						</template>
					</vxe-column>
					<vxe-column title="排序号" field="sortOrder" width="100" align="center"></vxe-column>
					<vxe-column title="操作" width="200" fixed="right" align="center">
						<template #default="scope">
							<el-button v-if="hasPermission('hotel:admin:dishSpec:edit')" text type="primary" size="small"
								@click="editGroup(scope.row.id)">编辑</el-button>
							<el-button text type="primary" size="small" @click="showOptions(scope.row)">管理选项</el-button>
							<el-button v-if="hasPermission('hotel:admin:dishSpec:delete')" text type="danger" size="small"
								@click="doDeleteGroup(scope.row.id)">删除</el-button>
						</template>
					</vxe-column>
				</vxe-table>
				<vxe-pager background :current-page="tablePage.currentPage" :page-size="tablePage.pageSize"
					:total="tablePage.total" :page-sizes="[10, 20, 100, 1000, { label: '全量数据', value: 1000000 }]"
					:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
					@page-change="currentChangeHandle">
				</vxe-pager>
			</div>
		</div>

		<!-- 规格组表单弹窗 -->
		<DishSpecForm ref="dishSpecForm" @refreshList="refreshList"></DishSpecForm>

		<!-- 规格选项管理弹窗 -->
		<el-dialog title="规格选项管理" :close-on-click-modal="false" draggable width="600px" v-model="optionsVisible">
			<div v-if="currentGroup">
				<p style="margin-bottom: 12px; color: #606266;">
					规格组：<strong>{{ currentGroup.groupName }}</strong>
					（{{ currentGroup.required === 1 ? '必选' : '可选' }}）
				</p>
				<el-button type="primary" size="small" icon="el-icon-plus" @click="addOption()" style="margin-bottom: 12px;">
					新增选项
				</el-button>
				<vxe-table border="inner" auto-resize resizable height="300" :data="optionList"
					show-header-overflow show-overflow>
					<vxe-column type="seq" width="60" title="序号"></vxe-column>
					<vxe-column title="选项名称" field="optionName" min-width="150" align="center"></vxe-column>
					<vxe-column title="加价金额" field="priceExtra" width="120" align="center">
						<template #default="scope">
							{{ scope.row.priceExtra > 0 ? '+¥' + scope.row.priceExtra : '-' }}
						</template>
					</vxe-column>
					<vxe-column title="排序号" field="sortOrder" width="100" align="center"></vxe-column>
					<vxe-column title="操作" width="150" fixed="right" align="center">
						<template #default="scope">
							<el-button text type="primary" size="small" @click="editOption(scope.row.id)">编辑</el-button>
							<el-button text type="danger" size="small" @click="doDeleteOption(scope.row.id)">删除</el-button>
						</template>
					</vxe-column>
				</vxe-table>
			</div>
		</el-dialog>

		<!-- 规格选项表单弹窗 -->
		<DishSpecOptionForm ref="dishSpecOptionForm" @refreshOptions="loadOptions"></DishSpecOptionForm>
	</div>
</template>

<script>
import HotelDishSpecService from '@/api/hotel/HotelDishSpecService'
import DishSpecForm from './DishSpecForm'
import DishSpecOptionForm from './DishSpecOptionForm'

export default {
	data() {
		return {
			searchVisible: true,
			searchForm: {
				dishName: '',
				groupName: ''
			},
			dataList: [],
			tablePage: {
				total: 0,
				currentPage: 1,
				pageSize: 10,
				orders: []
			},
			loading: false,
			// 选项管理
			optionsVisible: false,
			currentGroup: null,
			optionList: []
		}
	},
	hotelDishSpecService: null,
	created() {
		this.hotelDishSpecService = new HotelDishSpecService()
	},
	components: {
		DishSpecForm,
		DishSpecOptionForm
	},
	mounted() {
		this.refreshList()
	},
	activated() {
		this.refreshList()
	},
	methods: {
		/** 刷新规格组列表 */
		refreshList() {
			this.loading = true
			this.hotelDishSpecService.groupPage({
				'current': this.tablePage.currentPage,
				'size': this.tablePage.pageSize,
				'orders': this.tablePage.orders,
				...this.searchForm
			}).then((data) => {
				this.dataList = data.records || []
				this.tablePage.total = data.total || 0
				this.tablePage.currentPage = data.current || 1
				this.loading = false
			}).catch(() => {
				this.loading = false
			})
		},
		currentChangeHandle({ currentPage, pageSize }) {
			this.tablePage.currentPage = currentPage
			this.tablePage.pageSize = pageSize
			this.refreshList()
		},
		resetSearch() {
			this.$refs.searchForm.resetFields()
			this.tablePage.currentPage = 1
			this.refreshList()
		},
		/** 新增规格组 */
		addGroup() {
			this.$refs.dishSpecForm.init('add', '')
		},
		/** 编辑规格组 */
		editGroup(id) {
			this.$refs.dishSpecForm.init('edit', id)
		},
		/** 删除规格组 */
		doDeleteGroup(id) {
			this.$confirm('确定删除该规格组吗？（将同时删除其下所有选项）', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.loading = true
				this.hotelDishSpecService.deleteGroup(id).then(() => {
					this.$message.success('删除成功')
					this.refreshList()
					this.loading = false
				}).catch(() => {
					this.loading = false
				})
			})
		},
		/** 显示规格选项管理弹窗 */
		showOptions(group) {
			this.currentGroup = group
			this.optionsVisible = true
			this.loadOptions()
		},
		/** 加载规格选项列表 */
		loadOptions() {
			if (!this.currentGroup) return
			this.hotelDishSpecService.findOptionsByGroupId(this.currentGroup.id).then((data) => {
				this.optionList = Array.isArray(data) ? data : []
			})
		},
		/** 新增选项 */
		addOption() {
			this.$refs.dishSpecOptionForm.init('add', '', this.currentGroup.id)
		},
		/** 编辑选项 */
		editOption(id) {
			this.$refs.dishSpecOptionForm.init('edit', id, this.currentGroup.id)
		},
		/** 删除选项 */
		doDeleteOption(id) {
			this.$confirm('确定删除该规格选项吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.hotelDishSpecService.deleteOption(id).then(() => {
					this.$message.success('删除成功')
					this.loadOptions()
				})
			})
		}
	}
}
</script>
