<template>
	<div class="article-manager">
		<Card :bordered="false" dis-hover class="ivu-mt">
			<Form ref="artFrom" :model="artFrom" :label-width="75" label-position="right" @submit.native.prevent>
				<Row type="flex" :gutter="24">
					<Col v-bind="grid">
					<FormItem label="商品分类：" prop="pid" label-for="pid">
						<Select v-model="artFrom.pid" placeholder="请选择商品分类" @on-change="userSearchs" clearable>
							<Option v-for="item in treeSelect" :value="item.id" :key="item.id">{{ item.cate_name }}
							</Option>
						</Select>
					</FormItem>
					</Col>
					<Col v-bind="grid">
					<FormItem label="分类状态：" label-for="is_show">
						<Select v-model="artFrom.is_show" placeholder="请选择分类状态" clearable @on-change="userSearchs">
							<Option value="1">显示</Option>
							<Option value="0">隐藏</Option>
						</Select>
					</FormItem>
					</Col>
					<Col v-bind="grid">
					<FormItem label="分类名称：" label-for="status2">
						<Input search enter-button placeholder="请输入分类名称" v-model="artFrom.cate_name"
							@on-search="userSearchs" />
					</FormItem>
					</Col>
				</Row>
				<Row type="flex">
					<Col v-bind="grid">
					<Button v-auth="['product-save-cate']" type="primary" class="bnt" icon="md-add"
						@click="addClass">添加分类</Button>
					</Col>
				</Row>
			</Form>
			<vxe-table class="mt25" highlight-hover-row :loading="loading" header-row-class-name="false"
				:tree-config="{ children: 'children' }" :data="tableData">
				<vxe-table-column field="id" title="ID" tooltip width="80"></vxe-table-column>
				<vxe-table-column field="cate_name" tree-node title="分类名称" min-width="250"></vxe-table-column>
				<vxe-table-column field="pic" title="分类图标" min-width="100">
					<template v-slot="{ row }">
						<div class="tabBox_img" v-viewer v-if="row.pic">
							<img v-lazy="row.pic" />
						</div>
					</template>
				</vxe-table-column>
				<vxe-table-column field="sort" title="排序" min-width="100" tooltip="true"></vxe-table-column>
				<vxe-table-column field="is_show" title="状态" min-width="120">
					<template v-slot="{ row }">
						<i-switch v-model="row.is_show" :value="row.is_show" :true-value="1" :false-value="0"
							@on-change="onchangeIsShow(row)" size="large">
							<span slot="open">显示</span>
							<span slot="close">隐藏</span>
						</i-switch>
					</template>
				</vxe-table-column>
				<vxe-table-column field="date" title="操作" width="250" fixed="right" align="center">
					<template v-slot="{ row, index }">
						<a @click="edit(row)">编辑</a>
						<Divider type="vertical" />
						<a @click="del(row, '删除商品分类', index)">删除</a>
					</template>
				</vxe-table-column>
			</vxe-table>
			<!--            <div class="acea-row row-right page">-->
			<!--                <Page :total="total" :current="artFrom.page" show-elevator show-total @on-change="pageChange"-->
			<!--                      :page-size="artFrom.limit"/>-->
			<!--            </div>-->
		</Card>
		<!-- 添加 编辑表单-->
		<edit-from ref="edits" :FromData="FromData" @submitFail="userSearchs"></edit-from>
		<Modal v-model="modals" @on-cancel="onCancel" scrollable footer-hide closable :title="`${modelTit}分类`"
			:mask-closable="false" width="700">
			<Form ref="formInline" :model="formInline" :rules="ruleValidate" :label-width="150"
				:label-position="labelPosition2" @submit.native.prevent>
				<FormItem label="上级分类" label-for="pid" prop="pid">
					<el-cascader v-model="formInline.pid" size="small" :options="classtable"
						:props="{ emitPath: false }" clearable></el-cascader>
				</FormItem>
				<FormItem label="分类名称：" label-for="cate_name" prop="cate_name">
					<Input placeholder="请输入分类名称" v-model="formInline.cate_name" />
				</FormItem>
				<FormItem label="分类图标(180*180)" prop="pic">
					<div class="acea-row">
						<div class="upLoad acea-row row-center-wrapper" @click="modalPicTap('pic')">
							<Icon v-if="!formInline.pic" type="ios-camera-outline" size="26" />
							<img style="width: 100px;height: 100px;" v-else v-lazy="formInline.pic" />
						</div>
						<Input v-model="formInline.pic" style="display: none"></Input>
					</div>
				</FormItem>
				<FormItem label="分类大图(468*340)" prop="big_pic">
					<div class="acea-row">
						<div class="upLoad acea-row row-center-wrapper" @click="modalPicTap('big_pic')">
							<Icon v-if="!formInline.big_pic" type="ios-camera-outline" size="26" />
							<img style="width: 100px;height: 100px;" v-else v-lazy="formInline.big_pic" />
						</div>
						<Input v-model="formInline.big_pic" style="display: none"></Input>
					</div>
				</FormItem>
				<FormItem label="排序" label-for="sort" prop="sort">
					<Input placeholder="" v-model="formInline.sort" type="number" />
				</FormItem>

				<Button type="primary" size="large" long @click="handleSubmit('formInline')">提交</Button>

			</Form>
		</Modal>
		<Modal v-model="modalPic" width="1024px" scrollable footer-hide closable title="上传商品图" :mask-closable="false"
			:z-index="1">
			<shopuploadPictures :isChoice="isChoice" @getPic="getPic" :gridBtn="gridBtn" :gridPic="gridPic"
				v-if="modalPic"></shopuploadPictures>
		</Modal>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import shopuploadPictures from '@/components/uploadPictures2';
	import {
		productListApi,
		productCreateApi,
		productCreate,
		productEditApi,
		productEdit,
		setShowApi,
		treeListApi
	} from '@/api/shop_product';
	import editFrom from '../../../components/from/from';
	export default {
		name: 'product_productClassify',
		components: {
			editFrom,
			shopuploadPictures
		},
		data() {
			return {
				treeSelect: [],
				FromData: null,
				modalPic: false,
				grid: {
					xl: 7,
					lg: 7,
					md: 12,
					sm: 24,
					xs: 24,
				},
				gridBtn: {
					xl: 4,
					lg: 8,
					md: 8,
					sm: 8,
					xs: 8,
				},
				gridPic: {
					xl: 6,
					lg: 8,
					md: 12,
					sm: 12,
					xs: 12,
				},
				modals: false,
				loading: false,
				artFrom: {
					pid: 0,
					is_show: '',
					page: 1,
					cate_name: '',
					limit: 15,
				},
				modelTit: '',
				isChoice: '单选',
				id: '',
				total: 0,
				tableData: [],
				formInline: {
					big_pic: '',
					cate_name: '',
					is_show: '1',
					pic: '',
					pid: '',
					sort: '0'
				},
				classtable: [],
				ruleValidate: {
					cate_name: [{
						required: true,
						message: '请填写分类名称',
						trigger: 'blur'
					}],
				},
			};
		},
		computed: {
			...mapState('admin/userLevel', ['categoryId']),
			labelPosition2() {
				return this.isMobile ? 'top' : 'right';
			},
		},
		mounted() {
			this.goodsCategory();
			this.getList();
		},
		methods: {
			modalPicTap(picTit) {
				this.modalPic = true;
				this.modals = false;
				this.picTit = picTit;
			},
			// 商品分类；
			goodsCategory() {
				treeListApi(0)
					.then((res) => {
						this.treeSelect = res.data;
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			onCancel() {
				this.$refs['formInline'].resetFields();
			},
			// 列表
			getList() {
				this.loading = true;
				this.artFrom.is_show = this.artFrom.is_show || '';
				this.artFrom.pid = this.artFrom.pid || '';
				productListApi(this.artFrom)
					.then(async (res) => {
						let data = res.data;
						this.tableData = data.list;
						this.total = data.count;
						this.loading = false;
					})
					.catch((res) => {
						this.loading = false;
						this.$Message.error(res.msg);
					});
			},
			pageChange(index) {
				this.artFrom.page = index;
				this.getList();
			},
			// 添加
			addClass() {
				this.modelTit = '添加'
				const obj = this
				productCreateApi().then((res) => {
					res.data.rules.forEach(e => {
						if (e.field == 'pid') {
							obj.classtable = e.options
						}
					})
					obj.modals = true
				})
				// this.$modalForm(productCreateApi()).then(() => this.getList());
			},
			// 编辑
			edit(row) {
				this.modelTit = '编辑'
				this.id = row.id
				const obj = this
				productEditApi(row.id).then((res) => {
					res.data.rules.forEach(e => {
						obj.formInline[e.field] = e.value
						if (e.field == 'pid') {
							obj.classtable = e.options
						}
					})
					obj.modals = true
				})
			},
			// 修改状态
			onchangeIsShow(row) {
				let data = {
					id: row.id,
					is_show: row.is_show,
				};
				setShowApi(data)
					.then(async (res) => {
						this.$Message.success(res.msg);
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			handleSubmit(name) {
				this.$refs[name].validate((valid) => {
					if (valid) {
						if (this.modelTit == '添加') {
							productCreate(this.formInline)
								.then(async (res) => {
									this.$Message.success(res.msg);
									this.modals = false;
									this.goodsCategory();
									this.getList();
									this.$refs[name].resetFields();
								})
								.catch((res) => {
									this.$Message.error(res.msg);
								});
						} else {
							productEdit(this.formInline, this.id)
								.then(async (res) => {
									this.$Message.success(res.msg);
									this.modals = false;
									this.goodsCategory();
									this.getList();
									this.$refs[name].resetFields();
								})
								.catch((res) => {
									this.$Message.error(res.msg);
								});
						}

					} else {
						return false;
					}
				});
			},
			// 下拉树
			handleCheckChange(data) {
				let value = '';
				let title = '';
				this.list = [];
				this.artFrom.pid = 0;
				data.forEach((item, index) => {
					value += `${item.id},`;
					title += `${item.title},`;
				});
				value = value.substring(0, value.length - 1);
				title = title.substring(0, title.length - 1);
				this.list.push({
					value,
					title,
				});
				this.artFrom.pid = value;
				this.getList();
			},
			// 获取单张图片信息
			getPic(pc) {
				console.log(pc, 'info');
				switch (this.picTit) {
					case 'pic':
						this.formInline.pic = pc.att_dir;
						break;
					case 'big_pic':
						this.formInline.big_pic = pc.att_dir;
						break;
					default:
				}
				console.log(this.formInline, '');
				this.modalPic = false;
				this.modals = true;
			},
			// 删除
			del(row, tit, num) {
				let delfromData = {
					title: tit,
					num: num,
					url: `mer/category/${row.id}`,
					method: 'DELETE',
					ids: '',
				};
				this.$modalSure(delfromData)
					.then((res) => {
						this.$Message.success(res.msg);
						this.getList();
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 表格搜索
			userSearchs() {
				this.artFrom.page = 1;
				this.getList();
			},
		},
	};
</script>
<style scoped lang="stylus">
	.treeSel>>>.ivu-select-dropdown-list {
		padding: 0 10px !important;
		box-sizing: border-box;
	}

	.tabBox_img {
		width: 36px;
		height: 36px;
		border-radius: 4px;
		cursor: pointer;

		img {
			width: 100%;
			height: 100%;
		}
	}
</style>