<template>
	<div class="app-content">
		<block v-if="!$util.isEmpty(list.data)">
			<sel-search-module :list="list.data" @search="searchFn" @change="changeFn">
				<template v-slot:img="{ item }">
					<div class="list-img">
						<app-img :src="item.smallImgList[0] | default_img" alt="商品图片" mode="center" />
					</div>
				</template>
				<template v-slot:detail="{ item }">
					<div class="list-right">
						<div class="list-name">{{ item.goodsName }}</div>
						<div class="app-price">¥{{ item.price }}</div>
					</div>
				</template>
			</sel-search-module>
		</block>
	</div>
</template>

<script>
import AppImg from '@/components/app-img'
import SelSearchModule from '@/admin/home/components/sel-search'
import { list } from '@/mixins'
// api
import { getListB } from '@/api/goods'
export default {
	name: 'sel-goods',
	components: {
		SelSearchModule,
		AppImg
	},
	mixins: [list],
	data() {
		return {
			search: ''
		}
	},
	onPullDownRefresh() {
		this.resetList()
		this._list().then(res => {
			uni.stopPullDownRefresh()
		})
	},
	onReachBottom() {
		if (this.list.data.length < this.list.total) {
			this._list().then(res => {
				uni.stopPullDownRefresh()
			})
		} else {
			uni.stopPullDownRefresh()
		}
	},
	onLoad: function() {
		// this.init()
	},
	methods: {
		async init() {
			this._list()
		},
		_list() {
			let params = {
				page: this.list.page,
				goodsName: this.search
			}
			return getListB(params).then(res => {
				this.completes(res)
			})
		},
		// 搜索
		searchFn(val) {
			if (!val) return false
			this.search = val
			this.resetList()
			this._list()
		},
		// 选择商品
		changeFn(e) {
			console.log(e)
			uni.setStorageSync('adSelGoods', e)
			this.$util.pageTo({
				url: '/admin/ad/add',
				query: {
					...this.option
				},
				type: 2
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.list-img {
		width: 160px;
		height: 160px;
		margin-right: 40px;
	}
	.list-right {
		font-size: 28px;
		.list-name {
			font-size: 30px;
			margin-bottom: 20px;
		}
	}
</style>
