<template>
	<div class="page">
		<div class="jp-table top">
			<vxe-toolbar :refresh="{ query: refreshList }" custom>
				<template #buttons>
					<el-button v-if="hasPermission('hotel:admin:category:add')" type="primary" icon="el-icon-plus"
						@click="add()">新建分类</el-button>
				</template>
			</vxe-toolbar>
			<div style="height: calc(100% - 50px)">
				<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="name" align="left" min-width="150"></vxe-column>
					<vxe-column title="排序号" field="sortOrder" width="100" align="center"></vxe-column>
					<vxe-column title="菜品数量" field="dishCount" width="100" align="center"></vxe-column>
					<vxe-column title="状态" field="status" width="100" align="center">
						<template #default="scope">
							<el-tag :type="scope.row.status === 'ENABLED' ? 'success' : 'info'" size="small">
								{{ scope.row.status === 'ENABLED' ? '启用' : '禁用' }}
							</el-tag>
						</template>
					</vxe-column>
					<vxe-column title="操作" width="200px" fixed="right" align="center">
						<template #default="scope">
							<el-button v-if="hasPermission('hotel:admin:category:edit')" text type="primary"
								@click="edit(scope.row.id)">编辑</el-button>
							<el-button v-if="hasPermission('hotel:admin:category:edit')" text type="primary"
								@click="doToggleStatus(scope.row.id)">
								{{ scope.row.status === 'ENABLED' ? '禁用' : '启用' }}
							</el-button>
							<el-button v-if="hasPermission('hotel:admin:category:delete')" text type="danger"
								@click="doDelete(scope.row.id)">删除</el-button>
						</template>
					</vxe-column>
				</vxe-table>
			</div>
		</div>
		<CategoryForm ref="categoryForm" @refreshDataList="refreshList"></CategoryForm>
	</div>
</template>

<script>
import HotelDishService from '@/api/hotel/HotelDishService'
import CategoryForm from './CategoryForm'
export default {
	data() {
		return {
			dataList: [],
			tablePage: {
				total: 0,
				currentPage: 1,
				pageSize: 10
			},
			loading: false
		}
	},
	hotelDishService: null,
	created() {
		this.hotelDishService = new HotelDishService()
	},
	components: {
		CategoryForm
	},
	mounted() {
		this.refreshList()
	},
	activated() {
		this.refreshList()
	},
	methods: {
		add() {
			this.$refs.categoryForm.init('add', '')
		},
		edit(id) {
			this.$refs.categoryForm.init('edit', id)
		},
		refreshList() {
			this.loading = true
			const params = {
				current: this.tablePage.currentPage,
				size: this.tablePage.pageSize
			}
			this.hotelDishService.categoryPage(params).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
			})
		},
		handlePageChange({ currentPage, pageSize }) {
			this.tablePage.currentPage = currentPage
			this.tablePage.pageSize = pageSize
			this.refreshList()
		},
		doToggleStatus(id) {
			this.loading = true
			this.hotelDishService.categoryToggleStatus(id).then((data) => {
				this.$message.success(data)
				this.refreshList()
				this.loading = false
			}).catch(() => {
				this.loading = false
			})
		},
		doDelete(id) {
			this.$confirm('确定删除该分类吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.loading = true
				this.hotelDishService.categoryDelete(id).then((data) => {
					this.$message.success(data)
					this.refreshList()
					this.loading = false
				}).catch(() => {
					this.loading = false
				})
			})
		}
	}
}
</script>
