<template>
	<div class="app-list-content">
		<cl-crud class="liu-crud-wrap" @load="onLoad">
			<template #table-column-img="{scope}">
				<div>
					<cl-avatar
						shape="square"
						:size="40"
						:src="scope.row.img | default_avatar"
						:style="{ margin: 'auto' }"
					></cl-avatar>
				</div>
			</template>
			<template #table-column-status="{scope}"
				><el-switch
					v-model="scope.row.status"
					active-value="1"
					inactive-value="0"
					@change="changeStatus(scope.row)"
				></el-switch>
			</template>

			<!-- 编辑 -->
			<template #slot-poster="{scope}">
				<el-button type="text" @click="getPosterBtnFn(scope.row)">获取海报</el-button>
			</template>

			<!-- 删除 -->
			<template #slot-modify="{scope}">
				<el-button type="text" @click="modifyBtnFn(scope.row)">修改</el-button>
			</template>

			<!-- 添加 -->
			<template #slot-add-ad-btn="{scope}">
				<el-button type="primary" size="mini" @click="addBtnFn">添加</el-button>
			</template>
		</cl-crud>
		<el-dialog
			:title="`${addOrModify == 1 ? '添加' : '修改'}分类`"
			:visible.sync="addDialog"
			:close-on-click-modal="false"
			width="400px"
		>
			<div class="ad-modal-content">
				<el-form
					:model="adForm"
					:rules="adForm"
					ref="adForm"
					label-width="100px"
					class="demo-form"
				>
					<el-form-item label="分类名称" prop="categoryName">
						<el-input
							v-model="adForm.categoryName"
							placeholder="请输入名称"
							size="small"
						></el-input>
					</el-form-item>
					<el-form-item label="分类图片" prop="img">
						<cl-upload v-model="adForm.img"></cl-upload>
					</el-form-item>
					<el-form-item label="马上启用" prop="status">
						<el-switch
							v-model="adForm.status"
							active-value="1"
							inactive-value="0"
						></el-switch>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="resetForm">取 消</el-button>
				<el-button type="primary" size="small" @click="confirmFn">确认</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { imgHostUrl } from '@/config/env';
export default {
	name: 'goods-category',
	data() {
		return {
			// 修改弹窗
			modifyData: {},
			// 新增弹窗
			addOrModify: 1,
			addDialog: false,
			adForm: {
				categoryName: '',
				img: '',
				status: '1'
			}
		};
	},
	methods: {
		// operate
		addBtnFn() {
			this.addDialog = true;
			this.addOrModify = 1;
		},
		modifyBtnFn(item) {
			this.modifyData = item;
			this.addOrModify = 2;
			this.addDialog = true;
		},
		changeStatus(item) {
			this.$service.category.updateStatus({ id: item.id, status: item.status }).then(res => {
				this.$message.success('操作成功!');
			});
		},
		addOrModifyFn() {
			let form = {};
			form = JSON.parse(JSON.stringify(this.adForm));
			form.img = this.$util.getShortUrl(form.img);
			let host = null;
			if (this.addOrModify == 1) {
				host = () => {
					return this.$service.category.add(form);
				};
			} else {
				host = () => {
					return this.$service.category.update({
						categoryId: this.modifyData.id,
						form
					});
				};
			}
			host().then(res => {
				this.$message.success('操作成功!');
				this.resetForm();
				this.app.refresh({ type: this.tabIndex });
			});
		},
		confirmFn() {
			this.addOrModifyFn();
		},
		resetForm() {
			this.$refs['adForm'].resetFields();
			this.addDialog = false;
		},
		getPosterBtnFn() {
			this.$message('提示功能开发中!');
		},
		// cl-crud 组件ad
		onLoad({ ctx, app }) {
			this.app = app;
			ctx.service(this.$service.category)
				.set('table', {
					columns: [
						{
							prop: 'id',
							label: 'id',
							align: 'center',
							'min-width': 100
						},
						{
							prop: 'categoryName',
							label: '分类名称',
							align: 'center'
						},
						{
							prop: 'img',
							label: '图片',
							align: 'center'
						},
						{
							prop: 'goodsNum',
							label: '商品数',
							align: 'center'
						},
						{
							prop: 'sold',
							label: '销量',
							align: 'center'
						},
						{
							prop: 'status',
							label: '启用状态',
							align: 'center'
						},
						{
							prop: 'inTurn',
							label: '排序',
							align: 'center'
						}
					],
					// 操作列
					op: {
						visible: false, // 是否显示
						// 同 element-ui Table-column Attributes
						props: {
							width: 100,
							align: 'center',
							fixed: 'right',
							label: '操作'
						},
						// 布局，请移步 `layout`
						layout: []
					}
				})
				.set('layout', [
					['slot-tabs'],
					['flex1', 'refresh-btn', 'slot-add-ad-btn'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();
			app.refresh({ type: this.tabIndex });
		}
	}
};
</script>

<style lang="scss" scoped></style>
