<template>
	<div class="app-list-content">
		<cl-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-adImgUrl="{scope}">
				<div>
					<cl-avatar
						shape="square"
						:size="40"
						:src="scope.row.adImgUrl | default_avatar"
						:style="{ margin: 'auto' }"
					></cl-avatar>
				</div>
			</template>

			<template #table-column-endTime="{scope}">
				<div v-if="scope.row.endTime == '4102416000'">永久有效</div>
				<div v-else-if="scope.row.endTime">{{ scope.row.endTime | formatTime }}</div>
				<div v-else>-</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-modify="{scope}">
				<el-button type="text" @click="modifyBtnFn(scope.row)">编辑</el-button>
			</template>
			<!-- 删除 -->
			<template #slot-del="{scope}">
				<el-button type="text" @click="delBtnFn(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="600px"
		>
			<div class="ad-modal-content">
				<el-form
					:model="adForm"
					:rules="adForm"
					ref="adForm"
					label-width="100px"
					class="demo-form"
				>
					<el-form-item label="广告图名称" prop="delivery">
						<el-input
							v-model="adForm.adName"
							placeholder="请输入名称"
							size="small"
						></el-input>
					</el-form-item>
					<el-form-item label="请选择时间" prop="delivery">
						<el-col :span="11">
							<el-date-picker
								type="date"
								placeholder="选择开始日期"
								v-model="adForm.startTime"
								value-format="yyyy-MM-dd"
								style="width: 100%;"
							></el-date-picker>
						</el-col>
						<el-col class="app-center" :span="2">-</el-col>
						<el-col :span="11">
							<el-date-picker
								type="date"
								placeholder="选择结束日期"
								v-model="adForm.endTime"
								value-format="yyyy-MM-dd"
								style="width: 100%;"
							></el-date-picker>
						</el-col>
					</el-form-item>
					<el-form-item label="广告图片" prop="adImg">
						<cl-upload v-model="adForm.adImg"></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-item label="链接方式" prop="type">
						<el-radio-group v-model="adForm.style">
							<el-radio label="0">自定义链接</el-radio>
							<el-radio label="1">链接商品</el-radio>
						</el-radio-group>
						<template v-if="adForm.style == 0">
							<div>
								<el-input
									v-model="adForm.url"
									placeholder="请填写链接，留空点图片不跳转"
									size="small"
								></el-input>
							</div>
						</template>
						<template v-else>
							<div>
								<div class="goods-list-wrap" v-if="!$util.isEmpty(goodsData)">
									<div class="goods-list">
										<div class="list-img">
											<img
												:src="goodsData.imgUrl"
												alt="商品图片"
												mode="center"
											/>
										</div>
										<div class="list-right">
											<div>{{ goodsData.goodsName }}</div>
											<div class="app-price">￥{{ goodsData.price }}</div>
										</div>
									</div>
								</div>
								<div>
									<el-button type="primary" size="small" @click="selGoods"
										>选择商品</el-button
									>
								</div>
							</div>
						</template>
					</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="addFn">确认</el-button>
			</div>
		</el-dialog>
		<!-- 选择商品 -->
		<sel-Search
			:show.sync="selGoodsModal"
			@confirm="selGoodsConfirmFn"
			@cancel="selGoodsModal = false"
		></sel-Search>
	</div>
</template>

<script>
import selSearch from '@/components/module/sel-search';
export default {
	name: 'list-ad',
	components: {
		selSearch
	},
	data() {
		return {
			app: null,
			tabIndex: '1',
			tabsData: [
				{
					text: '门店轮播图',
					key: '1'
				},
				{
					text: '商城首页轮播图',
					key: '0'
				}
			],
			// 修改弹窗
			modifyData: {},
			// 新增弹窗
			addOrModify: 1,
			addDialog: false,
			adForm: {
				adName: '',
				adImg: '',
				status: '1',
				inTurn: 0,
				type: '1',
				style: '0',
				startTime: '',
				url: '',
				endTime: ''
			},
			// 商品列表
			selGoodsModal: false,
			goodsData: {},
			goodsList: []
		};
	},
	methods: {
		// api
		delBtnFn(item) {
			this.$confirm('是否删除该广告?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$service.ad.delete({ id: item.id }).then(res => {
						this.$message.success('删除成功!');
						this.app.refresh({ type: this.tabIndex });
					});
				})
				.catch();
		},
		// operate
		modifyBtnFn(item) {
			this.modifyData = item;
			this.addOrModify = 2;
			this.addDialog = true;
			let data = JSON.parse(JSON.stringify(item));
			data.startTime = this.$util.$formatDate(data.startTime);
			data.endTime = this.$util.$formatDate(data.endTime);
			if (this.$util.isEmpty(data)) return;
			Object.keys(this.adForm).forEach((i, index) => {
				this.adForm[i] = data[i];
			});
		},
		addBtnFn() {
			this.addDialog = true;
			this.addOrModify = 1;
		},
		handleClick(tab, e) {
			this.app.refresh({ type: this.tabIndex });
		},
		changeStatus(item) {
			this.$service.ad.updateStatus({ id: item.id, status: item.status }).then(res => {
				this.$message.success('操作成功!');
			});
		},
		resetForm() {
			this.$refs['adForm'].resetFields();
			this.addDialog = false;
		},
		addFn() {
			let form = JSON.parse(JSON.stringify(this.adForm));
			form.type = this.tabIndex;
			if (form.style == '1') {
				form.url = '';
				form.goodsId = this.goodsData.id;
			}
			let host = null;
			if (this.addOrModify == 1) {
				host = () => {
					return this.$service.ad.add(form);
				};
			} else {
				host = () => {
					return this.$service.ad.update({
						id: this.modifyData.id,
						...form
					});
				};
			}
			host().then(res => {
				this.$message.success('操作成功!');
				this.resetForm();
				this.app.refresh({ type: this.tabIndex });
			});
		},
		// 选择商品
		selGoods() {
			this.selGoodsModal = true;
		},
		selGoodsConfirmFn(item) {
			this.goodsData = item;
			this.selGoodsModal = false;
		},
		// cl-crud 组件ad
		onLoad({ ctx, app }) {
			this.app = app;
			ctx.service(this.$service.ad)
				.set('table', {
					columns: [
						{
							prop: 'id',
							label: 'id',
							align: 'center',
							'min-width': 100
						},
						{
							prop: 'adName',
							label: '广告名称',
							align: 'center'
						},
						{
							prop: 'adImgUrl',
							label: '广告图片',
							align: 'center'
						},
						{
							prop: 'endTime',
							label: '到期时间',
							align: 'center'
						},
						{
							prop: 'status',
							label: '启用状态',
							align: 'center'
						},
						{
							prop: 'viewTimes',
							label: '点击次数',
							align: 'center'
						},
						{
							prop: 'inTurn',
							label: '排序',
							align: 'center'
						}
					],
					// 操作列
					op: {
						visible: true, // 是否显示
						// 同 element-ui Table-column Attributes
						props: {
							width: 100,
							align: 'center',
							fixed: 'right',
							label: '操作'
						},
						// 布局，请移步 `layout`
						layout: ['slot-modify', 'slot-del']
					}
				})
				.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>
// module
.ad-modal-content {
	.goods-list-wrap {
		.goods-list {
			@include disFlex(center, flex-start);
			margin-bottom: 10px;
			.list-img {
				width: 60px;
				height: 60px;
				margin-right: 10px;
				img {
					height: 100%;
				}
			}
			.list-right {
				.app-price {
					margin-top: 5px;
				}
			}
		}
	}
}
</style>
