<template>
	<div class="app-content" @click="dropdownShow = false">
		<!-- bar -->
		<div class="bar-wrap">
			<dropdown-list :show="dropdownShow" :top="80" :width="750" :height="400">
				<template v-slot:selectionbox>
					<div class="sel-open-btn" @click.stop="dropdownShow = dropdownShow ? false : true">
						<span>{{ categoryName }}</span>
						<i class="iconfont iconsanjiao_xia"></i>
					</div>
				</template>
				<template v-slot:dropdownbox>
					<div class="sel-list-wrap">
						<scroll-view scroll-y class="tui-dropdown-scroll">
							<div class="sel-list" v-for="(item, index) in categoryData" :key="index" @click.stop="selCategory(item)">{{ item.categoryName }}</div>
						</scroll-view>
					</div>
				</template>
			</dropdown-list>
			<div class="share-wrap" @click.stop="$msg('开发中！')">
				<i class="iconfont iconfenxiang1"></i>
				<span>分享</span>
			</div>
		</div>
		<!-- list -->
		<div class="list-wrap">
			<block v-if="!$util.isEmpty(list.data)">
				<div class="list" v-for="(item, index) in list.data" :key="index">
					<div class="list-img">
						<img :src="item.imgUrl" alt="商品图片" mode="widthFix" />
					</div>
					<div class="list-det">
						<div class="app-size-28">{{ item.name }}</div>
						<div class="flex-center-between">
							<div v-if="index == 4" class="app-price">￥{{ item.price }}</div>
							<div v-else class="app-color-3">暂无</div>
							<div class="operate-icon-wrap" @click="operateFn(item, index)">
								<div class="operate-icon">
									<i class="iconfont" :class="[ operateIndex == index ? 'iconcaozuojihuo' : 'iconcaozuo']"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 操作 -->
				<operate-module v-show="operateShow" :top="operateTop" :right="operateRight" :btnData="btnData" />
			</block>
			<block v-else>
				<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
			</block>
		</div>
		<app-uploader :multiple="false" ref="appUploader" :uploadPicApi="picAdd" @resultData="chooseImage" :imgList.sync="form.picIdList">
			<span></span>
		</app-uploader>
		<!-- button -->
		<div class="app-footer">
			<button class="admin-button-com middle default" @click="pageTo('/admin/goodsManage/category')">查看分类</button>
			<button class="admin-button-com middle blue" @click="$refs.appUploader.chooseImage()">新增</button>
		</div>
		<!-- 图片上传成功弹窗！ -->
		<modal-module :show="settingModal" :custom="true" width="92%" @cancel="modalCancel" @click="modalClick" padding="30rpx 30rpx">
			<template>
				<div class="upload-confirm-wrap">
					<!--  -->
					<div class="modal-tit">
						<i class="iconfont iconxuanzhong"></i>
						<span>图片上传成功！</span>
					</div>
					<!-- 选择分类 -->
					<div class="sel-wrap">
						<div class="sel-tit">选择分类(可多选)</div>
						<div class="sel-btn">
							<block v-for="(item, index) in categoryData" :key="index">
								<button class="admin-button-com" :class="[form.categoryIdList.includes(item.id) ? '' : 'default']" @click="selCategoryFn(item)">{{ item.categoryName || '暂无' }}</button>
							</block>
						</div>
					</div>
					<!-- 输入框 -->
					<div class="app-modal-input-wrap">
						<div class="inp-list-line">
							<div class="line-label">售价</div>
							<div class="line-input">
								<input type="text" v-model="form.price" class="inp-input" placeholder="填价格，图片可当商品卖(选填)" />
								<div class="inp-prompt">元</div>
							</div>
						</div>
						<div class="inp-list-line">
							<div class="line-label">名称</div>
							<div class="line-input">
								<input type="text" v-model="form.name" class="inp-input" placeholder="选填" />
							</div>
						</div>
					</div>
					<!-- button -->
					<div class="redeem-btn">
						<button class="admin-button-com default big" @click="modalCancel">取消</button>
						<button class="admin-button-com blue big" @click="saveFn">确定</button>
					</div>
				</div>
			</template>
		</modal-module>
		<!-- 删除提示 -->
		<modal-module :show="delModal" @cancel="modalCancel" @click="delModalClick" content="确定删除该广告吗？" color="#333" :size="32" padding="30rpx 30rpx"></modal-module>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import ModalModule from '@/components/plugin/modal'
import DropdownList from '@/components/plugin/dropdown-list'
import AppWrapperEmpty from '@/components/app-wrapper-empty'
import AppUploader from '@/components/app-uploader'
import OperateModule from '@/admin/home/components/module/operate'
import { list } from '@/mixins'
// api
import { getCategory } from '@/utils/config'
import { getListB, picRemark, picAdd, picDel, picTop } from '@/api/img-store'
export default {
	name: 'image-store',
	components: {
		ModalModule,
		DropdownList,
		AppWrapperEmpty,
		AppUploader,
		OperateModule
	},
	mixins: [list],
	data() {
		return {
			picAdd: picAdd,
			listHei: 76,
			categoryName: '全部',
			categoryId: -1,
			// modal
			imgList: [],
			form: {
				picIdList: [],
				price: '',
				name: '',
				categoryIdList: []
			},
			dropdownShow: false,
			settingModal: false,
			// ==
			delModal: false,
			// operate
			operateIndex: null,
			operateShow: false,
			operateData: {},
			operateTop: 0,
			operateRight: 30,
			btnData: [
				{
					text: '编辑',
					icon: 'iconbianji',
					click: () => {
						this.modalCancel()
						this.form.picIdList = [this.operateData.id]
						this.settingModal = true
					}
				},
				{
					text: '置顶',
					icon: 'iconxiajia',
					click: () => {
						picTop({ id: this.operateData.id }).then(res => {
							this.operateCloseFn()
							this.$msg('置顶成功!')
							setTimeout(() => {
								this.resetList()
								this._list()
							}, 1000)
						})
					}
				},
				{
					text: '删除',
					icon: 'iconshanchu1',
					click: () => {
						this.delModal = true
					}
				},
				{
					text: '分享',
					icon: 'iconfenxiang1',
					click: () => {
						this.delModal = true
					}
				}
			]
		}
	},
	computed: {
		...mapGetters({ categoryData: 'getCategory' })
	},
	onLoad() {
		// this.init()
	},
	methods: {
		// 获取高度
		getListHei(dom) {
			let listDom = uni.createSelectorQuery().select(dom)
			listDom
				.boundingClientRect(data => {
					this.listHei = data.height
				})
				.exec()
		},
		async init() {
			getCategory()
			this._list()
		},
		_list() {
			return getListB({
				categoryId: this.categoryId,
				page: this.list.page
			}).then(res => {
				this.completes(res)
				if (!this.$util.isEmpty(list.data)) {
					setTimeout(() => {
						this.getListHei('.list')
					}, 100)
				}
			})
		},
		saveFn() {
			picRemark(this.form).then(res => {
				this.$msg('操作成功！')
				this.modalCancel()
				this.operateCancle()
				setTimeout(() => {
					this.resetList()
					this._list()
				}, 1000)
			})
		},
		// 操作
		selCategory(item) {
			this.categoryName = item.categoryName
			this.categoryId = item.id
			this.dropdownShow = false
			this.resetList()
			this._list()
		},
		selCategoryFn(item) {
			let index = this.form.categoryIdList.findIndex(e => e == item.id)
			if (index == -1) {
				this.form.categoryIdList.push(item.id)
			} else {
				this.form.categoryIdList.splice(index, 1)
			}
		},
		// 图片上传成功
		chooseImage(e) {
			console.log('图片上传成功', e)
			this.form.picIdList = [e.id]
			this.settingModal = true
		},
		modalCancel() {
			this.delModal = false
			this.settingModal = false
			this.form = {
				picIdList: [],
				price: '',
				name: '',
				categoryIdList: []
			}
		},
		delModalClick(e) {
			if (e.index === 0) {
				this.modalCancel()
			} else {
				picDel({ id: this.operateData.id }).then(res => {
					this.modalCancel()
					this.operateCancle()
					this.$msg('删除成功!')
					setTimeout(() => {
						this.resetList()
						this._list()
					}, 1000)
				})
			}
		},
		// operate
		operateFn(item, index) {
			if (this.operateIndex == index) {
				this.operateCancle()
			} else {
				this.operateData = item
				this.operateIndex = index
				this.operateShow = true
				this.operateTop = (index + 1) * (this.listHei + 10)
				let rightIndex = (index + 1) % 3
				this.operateRight = rightIndex == 0 ? 20 : rightIndex == 1 ? 348 : 160
			}
		},
		operateCancle() {
			this.operateData = {}
			this.operateIndex = null
			this.operateShow = false
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		min-height: calc(100vh - 100px);
		// padding-top: 100px;
		padding-bottom: 100px;
	}
	// bar
	.bar-wrap {
		// position: fixed;
		// top: 0;
		width: 100%;
		height: 80px;
		background-color: #fff;
		@include disFlex(center, space-between);
		font-size: 28px;
		color: $fontColor2;
		& > div {
			padding: 0 30px;
		}
		.share-wrap {
			position: absolute;
			right: 0;
		}
		.iconfont {
			color: $fontColor2;
		}
		.iconsanjiao_xia {
			font-size: 24px;
			margin-left: 10px;
		}
		.iconfenxiang1 {
			font-size: 36px;
			margin-right: 10px;
		}
		// 下拉框
		.sel-open-btn {
			width: 30%;
			height: 80px;
			line-height: 80px;
			padding-left: 30px;
		}
		.sel-list-wrap {
			background-color: #fff;
			box-shadow: 6px 6px 10px #cccccc;
			.sel-list {
				padding: 20px 30px;
				// border-top: 1px solid $borderColor;
			}
		}
		.tui-dropdown-scroll {
			height: 400px;
		}
	}
	// list
	.list-wrap {
		height: calc(100vh - 220px);
		@include disFlex(flex-start, flex-start);
		flex-wrap: wrap;
		position: relative;
		padding-top: 20px;
		.list {
			width: 30%;
			margin-left: 2.5%;
			margin-bottom: 20px;
			background-color: #fff;
			.list-img {
				min-width: 224px;
			}
			.list-det {
				padding: 10px;
				& > div {
					margin-top: 10px;
				}
				.iconfont {
					color: $fontColor3;
				}
			}
		}
	}
	// 按钮
	.app-footer {
		justify-content: space-evenly;
		.admin-button-com {
			width: 46%;
		}
	}
	// 弹窗
	.upload-confirm-wrap {
		.modal-tit {
			@include disFlex(center, center);
			font-size: 40px;
			margin-top: 30px;
			margin-bottom: 50px;
			.iconfont {
				color: #09bb07;
				margin-right: 20px;
				font-size: 50px;
			}
		}
		//  分类
		.sel-wrap {
			color: $fontColor2;
			font-size: 32px;
			.sel-btn {
				@include disFlex(center, flex-start);
				flex-wrap: wrap;
				padding: 10px 0 40px;
				.admin-button-com {
					// width: 170px;
					margin-right: 20px;
					margin-top: 20px;
					padding-top: 16px;
					padding-bottom: 16px;
					border-radius: 4px;
					// &:nth-child(3n + 1) {
					// 	margin-left: 0;
					// }
				}
			}
		}
		.redeem-btn {
			@include disFlex(center, space-between);
			margin-top: 40px;
			width: 100%;
			.admin-button-com {
				width: 48%;
			}
		}
	}
</style>
