<template>
	<div class="app-content">
		<!-- operate -->
		<div class="flex-center-between">
			<div class="operate-left flex-center">
				<el-select
					v-model="form.categoryId"
					placeholder="选择分类"
					size="mini"
					:clearable="true"
					@change="selChangeFn"
				>
					<el-option
						v-for="(item, index) in categoryData"
						:key="index"
						:label="item.categoryName"
						:value="item.id"
					></el-option>
				</el-select>
				<el-button
					type="primary"
					@click="selSubmitFn"
					size="mini"
					class="app-margin-left-10"
					>查询</el-button
				>
			</div>
			<div class="operate-right flex-center">
				<el-button
					class="view-category"
					size="mini"
					@click="$router.push('/goods/category')"
					>查看分类</el-button
				>
				<!-- upload-img -->
				<cl-upload v-model="addForm.picIdList" :props="{ 'on-success': addImgFn }">
					<template slot="content">
						<el-button type="primary" size="mini">新增</el-button>
					</template>
				</cl-upload>
			</div>
		</div>
		<!-- list -->
		<div class="list-wrap">
			<div class="list" v-for="(item, index) in list.data" :key="index">
				<div class="list-img">
					<img :src="item.imgUrl" alt="商品图片" />
				</div>
				<div class="flex-center-between">
					<div>{{ item.name }}</div>
					<div class="app-price">￥{{ item.price }}</div>
				</div>
				<!--  -->
				<div class="operate-btn-wrap">
					<operate-module :btnData="btnData" :item="item" @show="operateChangeFn" />
				</div>
			</div>
		</div>
		<!-- module -->
		<el-dialog
			title="图片上传成功！"
			:visible.sync="addImageModal"
			width="600px"
			:close-on-click-modal="false"
		>
			<div class="add-image-modal-content">
				<el-form :model="addForm" :rules="rules" ref="addForm" label-width="120px">
					<el-form-item label="选择分类(可多选)">
						<el-checkbox-group v-model="addForm.categoryIdList" size="small">
							<el-checkbox
								border
								v-for="(item, index) in categoryData"
								:label="item.id"
								:key="index"
								size="small"
								@change="selChangeDialogFn($event, item)"
								>{{ item.categoryName }}</el-checkbox
							>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="售价">
						<el-input
							v-model="addForm.price"
							placeholder="填价格，图片可当商品卖(选填)"
						>
							<i slot="suffix" class="iconfont iconqian"></i>
						</el-input>
					</el-form-item>
					<el-form-item label="名称">
						<el-input v-model="addForm.name" placeholder="选填"></el-input>
					</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="addOrModifyFn">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import operateModule from '@/components/module/operate';
import { list } from '@/mixins';
export default {
	name: 'img-store',
	components: {
		operateModule
	},
	mixins: [list],
	data() {
		return {
			form: {
				categoryId: ''
			},
			// operate
			operateData: {},
			btnData: [
				{
					text: '编辑',
					icon: 'iconbianji',
					click: () => {
						this.addForm.picIdList = [this.operateData.id];
						this.addImageModal = true;
					}
				},
				{
					text: '置顶',
					icon: 'iconzhiding',
					click: () => {
						this.$service.imgStore.top({ id: this.operateData.id }).then(res => {
							this.resetList();
							this._list();
						});
					}
				},
				{
					text: '删除',
					icon: 'iconshanchu1',
					click: () => {
						this.$confirm('是否删除该图库?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						})
							.then(() => {
								this.$service.imgStore
									.delete({ id: this.operateData.id })
									.then(res => {
										this.resetList();
										this._list();
										this.$message({
											type: 'success',
											message: '删除成功!'
										});
									});
							})
							.catch(() => {});
					}
				}
			],
			// 图片上传成功
			addImageModal: false,
			addForm: {
				picIdList: '',
				price: 0,
				name: '',
				categoryIdList: []
			},
			rules: {}
		};
	},
	computed: {
		...mapGetters({ categoryData: 'category' }),
		...mapGetters({ festData: 'festival' })
	},
	created() {
		this.$store.dispatch('getCategory');
		this.$store.dispatch('getFestival');
		this._list();
	},
	mounted() {
		setTimeout(() => {
			console.log(this.categoryData);
		}, 2000);
	},
	methods: {
		_list() {
			return this.$service.imgStore
				.list({
					page: this.list.page,
					...this.form
				})
				.then(res => {
					this.completes(res);
				});
		},
		selChangeFn(e) {
			this.form.categoryId = e;
		},
		selSubmitFn() {
			this.resetList();
			this._list();
		},
		// 新增图片
		addImgFn() {
			this.addImageModal = true;
		},
		selChangeDialogFn(status, item) {
			console.log(status, item);
		},
		// type == 1 新增，type == 2 修改
		addOrModifyFn(type) {
			let form = JSON.parse(JSON.stringify(this.addForm));
			form.picIdList = [form.picIdList];
			this.$service.imgStore.remark(form).then(res => {
				this.$message.success('操作成功！');
				this.resetForm();
				this.resetList();
				this._list();
			});
			console.log('submit!');
		},
		resetForm() {
			this.$refs['addForm'].resetFields();
			this.addImageModal = false;
		},
		// operate
		operateChangeFn(item) {
			this.operateData = item;
		}
	}
};
</script>

<style lang="scss" scoped>
.view-category {
	margin-right: 10px;
}
.list-wrap {
	margin-top: 20px;
	@include disFlex(center, flex-start);
	flex-wrap: wrap;
	.list {
		position: relative;
		margin-right: 20px;
		margin-bottom: 20px;
		box-shadow: 0 0 10px #eee;
		.list-img {
			width: 200px;
			height: 200px;
			margin-bottom: 6px;
		}
		.flex-center-between {
			padding: 0 4px;
			margin-bottom: 6px;
		}
		.operate-btn-wrap {
			position: absolute;
			top: 0;
			right: 10px;
		}
	}
}
// mode
.add-image-modal-content {
	.el-checkbox.is-bordered.el-checkbox--small {
		margin-left: 0;
		margin-right: 10px;
		// &:nth-child(4n + 4) {
		// 	margin-right: 0;
		// }
	}
}
</style>
