<template>
	<div class="app-list-content">
		<x-crud class="liu-crud-wrap" @load="onLoad">
			<template #slot-tabs="{ scope }">
				<el-tabs
					class="liu-tabs"
					type="border-card"
					v-model="tabIndex"
					@tab-click="handleClick"
				>
					<el-tab-pane
						v-for="(item, index) in tabsData"
						:key="index"
						:label="item.text"
						:name="item.key"
					>
					</el-tab-pane>
				</el-tabs>
			</template>

			<template #table-column-avatarUrl="{scope}">
				<cl-avatar
					shape="square"
					:size="32"
					:src="scope.row.smallImgList[0]"
					:style="{ margin: 'auto' }"
				></cl-avatar>
			</template>

			<template #table-column-goodsName="{scope}">
				<span>{{ scope.row.goodsName }}</span>
				<!-- <span>二维码</span> -->
				<!--<span class="short-link" @click="openLinkFn(scope.row)">链接</span> -->
			</template>

			<template #table-column-inTurn="{scope}">
				<span v-if="!sort.status">{{ scope.row.inTurn }}</span>

				<el-input-number
					ref="sort-input"
					focus
					size="mini"
					v-else
					v-model="scope.row.inTurn"
					@blur="changeSort(scope.row)"
				></el-input-number>
			</template>

			<!-- 排序 -->
			<template #table-header-inTurn>
				<div class="set-sort">
					<span>排序</span>
					<el-button
						v-if="!sort.status"
						icon="el-icon-edit-outline"
						size="small"
						type="text"
						@click="showSort"
						class="show"
					></el-button>

					<el-button class="hide" v-else size="mini" @click="hideSort" type="primary"
						>完成</el-button
					>
				</div>
			</template>

			<!-- 添加商品 -->
			<template #slot-add-goods-btn="{scope}">
				<el-button type="primary" size="mini" @click="addFn">添加</el-button>
			</template>

			<!-- 状态 -->
			<template #table-column-status="{scope}">
				<span>{{ scope.row.status == 1 ? '上架' : '下架' }}</span>
			</template>

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

			<!-- 下架 -->
			<template #slot-takeOff="{scope}">
				<el-button type="text" @click="downFn(scope.row)">下架</el-button>
			</template>

			<template #slot-category>
				<el-select
					v-model="selects.cId"
					size="mini"
					style="width: 200px;margin-right: 10px"
					placeholder="请选择分类"
					@change="
						cId => {
							refresh({ cId });
						}
					"
				>
					<el-option label="全部" value="-1"></el-option>
					<el-option
						v-for="(item, index) in category"
						:key="index"
						:label="item.categoryName"
						:value="item.id"
					></el-option>
				</el-select>
			</template>
		</x-crud>
		<!-- 添加商品 -->
		<el-dialog title="商品短链接：" :visible.sync="dialogFormVisible" width="40%">
			<div>
				<el-input v-model="sortLink" :disabled="true"></el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="sendPhoneFn">发到手机</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
	data() {
		return {
			app: null,
			dialogFormVisible: false,
			sortLink: '',
			operateData: {},
			tabIndex: '-1',
			tabsData: [
				{
					text: '全部',
					key: '-1'
				},
				{
					text: '上架',
					key: '1'
				},
				{
					text: '下架',
					key: '0'
				}
			],
			selects: {},
			sort: {
				status: false
			}
		};
	},
	computed: {
		...mapGetters(['category'])
	},
	methods: {
		handleClick(tab, e) {
			this.app.refresh({ type: this.tabIndex });
		},
		// 打开链接
		openLinkFn(item) {
			this.operateData = item;
			this.sortLink = item.shortUrl || '';
			this.dialogFormVisible = true;
		},
		sendPhoneFn() {
			this.$service.goods.sendPhone({ id: this.operateData.id }).then(res => {
				this.$message.success('发送成功！');
				this.dialogFormVisible = false;
			});
		},
		// 添加商品
		addFn(type, data) {
			let query = {};
			if (type === 2) {
				query.id = data.id;
				query.editType = type;
			}
			this.$router.push({ path: `/goods/add/`, query });
		},
		downFn(item) {
			this.$confirm('是否下架该商品?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$service.goods
						.changeStatus({
							id: item.id,
							status: item.status == 0 ? 1 : 0
						})
						.then(res => {
							item.status = item.status == 0 ? 1 : 0;
							this.$message.success('操作成功！');
						})
						.catch(e => {
							this.$message.error(e);
						});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
		},
		// x-crud 组件
		onLoad({ ctx, app }) {
			this.app = app;
			ctx.service(this.$service.goods)
				.set('table', {
					columns: [
						{
							prop: 'id',
							label: 'ID',
							align: 'center'
						},
						{
							prop: 'avatarUrl',
							label: '封面',
							align: 'center'
						},
						{
							prop: 'goodsName',
							label: '标题',
							align: 'center',
							'min-width': 180
						},
						{
							prop: 'price',
							label: '价格',
							align: 'center',
							emptyText: '无',
							'min-width': 150
						},
						{
							prop: 'actualSold',
							label: '销量',
							align: 'center'
						},
						{
							prop: 'viewNum',
							label: '浏览量',
							align: 'center'
						},
						{
							prop: 'inTurn',
							label: '排序',
							align: 'center',
							minWidth: 100
						},
						{
							prop: 'status',
							label: '状态',
							align: 'center'
						},
						{
							prop: 'createDate',
							label: '创建时间',
							align: 'center'
						}
					],
					// 操作列
					op: {
						visible: true, // 是否显示
						// 同 element-ui Table-column Attributes
						props: {
							width: 150,
							align: 'center',
							fixed: 'right',
							label: '操作'
						},
						// 布局，请移步 `layout`
						layout: ['slot-modify', 'slot-takeOff', 'delete']
					}
				})
				.set('dict', {
					search: {
						keyWord: 'goodsName'
					}
				})
				.set('search', {
					key: {
						placeholder: '商品名称'
					}
				})
				.set('layout', [
					['slot-tabs'],
					['slot-category', 'search-key', 'flex1', 'slot-add-goods-btn', 'refresh-btn'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('delete', (selection, { next }) => {
					next({
						id: selection.map(e => e.id).join(',')
					});
				})
				.done();
			app.refresh({ status: this.tabIndex });
		},

		refresh(params) {
			this.app.refresh(params);
		},

		showSort(e) {
			this.sort.status = true;
		},

		hideSort(e) {
			this.sort.status = false;
		},

		changeSort(d) {
			this.$service.goods
				.sort({
					inTurn: d.inTurn,
					id: d.id
				})
				.then(() => {
					this.$message.success('修改成功');
					this.refresh();
				})
				.catch(err => {
					this.$message.error(err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.short-link {
	color: $mainColor;
	margin-left: 10px;
	cursor: pointer;
}

.set-sort {
	display: flex;
	align-items: center;
	justify-content: center;

	.el-button {
		margin-left: 10px;
	}

	.show {
		font-size: 16px;
	}

	.hide {
		padding: 2px 5px;
	}
}
</style>
