<template>
	<div class="page">
		<el-form :inline="true" class="query-form" ref="searchForm" :model="searchForm"
			@keyup.enter.native="refreshList()" @submit.native.prevent>
			<el-form-item label="分类名称" prop="name">
				<el-input v-model="searchForm.name" placeholder="请输入分类名称" clearable></el-input>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 140px">
					<el-option label="启用" value="0"></el-option>
					<el-option label="停用" value="1"></el-option>
				</el-select>
			</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('psi:dishType: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="typeTable"
					show-header-overflow show-overflow highlight-hover-row :menu-config="{}" :data="dataList"
					:tree-config="{ transform: true, rowField: 'id', parentField: 'parentId', expandAll: true }"
					:checkbox-config="{}">
					<vxe-column type="seq" width="60" title="序号"></vxe-column>
					<vxe-column type="checkbox" width="60"></vxe-column>
					<vxe-column title="分类名称" field="name" align="left" tree-node></vxe-column>
					<vxe-column width="100" title="排序" field="sort"></vxe-column>
					<vxe-column width="100" title="状态" field="status" align="center">
						<template #default="scope">
							<el-tag :type="scope.row.status === '0' ? 'success' : 'info'">
								{{ scope.row.status === '0' ? '启用' : '停用' }}
							</el-tag>
						</template>
					</vxe-column>
					<vxe-column min-width="180" title="备注" field="remarks"></vxe-column>
					<vxe-column title="操作" width="280px" fixed="right" align="center">
						<template #default="scope">
							<el-button v-if="hasPermission('psi:dishType:add')" text type="primary"
								@click="addChild(scope.row.id)">添加下级</el-button>
							<el-button v-if="hasPermission('psi:dishType:edit')" text type="primary"
								@click="edit(scope.row.id)">修改</el-button>
							<el-button v-if="hasPermission('psi:dishType:edit')" text type="primary"
								@click="changeStatus(scope.row)">{{ scope.row.status === '0' ? '停用' : '启用' }}</el-button>
							<el-button v-if="hasPermission('psi:dishType:del')" text type="primary"
								@click="del(scope.row.id)">删除</el-button>
						</template>
					</vxe-column>
				</vxe-table>
			</div>
		</div>
		<DishTypeForm ref="dishTypeForm" @refreshList="refreshList"></DishTypeForm>
	</div>
</template>

<script>
import DishTypeService from '@/api/psi/DishTypeService'
import DishTypeForm from './DishTypeForm'
export default {
	data() {
		return {
			searchForm: {
				name: '',
				status: ''
			},
			dataList: [],
			loading: false
		}
	},
	dishTypeService: null,
	created() {
		this.dishTypeService = new DishTypeService()
	},
	components: {
		DishTypeForm
	},
	mounted() {
		this.refreshList()
	},
	activated() {
		this.refreshList()
	},
	methods: {
		add() {
			this.$refs.dishTypeForm.init('add', '')
		},
		addChild(id) {
			this.$refs.dishTypeForm.init('addChild', id)
		},
		edit(id) {
			id = id || this.$refs.typeTable.getCheckboxRecords().map(item => {
				return item.id
			})[0]
			this.$refs.dishTypeForm.init('edit', id)
		},
		refreshList() {
			this.loading = true
			this.dishTypeService.list({ ...this.searchForm }).then((data) => {
				this.dataList = data
				this.loading = false
				this.$nextTick(() => {
					this.$refs.typeTable.setAllTreeExpand(true)
				})
			}).catch(() => {
				this.loading = false
			})
		},
		changeStatus(row) {
			const status = row.status === '0' ? '1' : '0'
			const message = status === '0' ? '确定启用该分类吗？' : '确定停用该分类吗？'
			this.$confirm(message, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.dishTypeService.changeStatus(row.id, status).then((data) => {
					this.$message.success(data)
					this.refreshList()
				})
			})
		},
		del(id) {
			this.$confirm(`确定删除所选项吗？`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.loading = true
				this.dishTypeService.remove(id).then((data) => {
					if (data && (data.indexOf('不能删除') > -1 || data.indexOf('请选择') > -1)) {
						this.$message.error(data)
					} else {
						this.$message.success(data)
					}
					this.refreshList()
					this.loading = false
				}).catch(() => {
					this.loading = false
				})
			})
		},
		resetSearch() {
			this.$refs.searchForm.resetFields()
			this.refreshList()
		}
	}
}
</script>
