<template>
	<view class="container">
		<u-toast ref="uToast" />
		<u-modal :show-cancel-button="true" confirm-color="#FF9447" @confirm="opinionConfirm" title="审核意见" :mask-close-able="true"
			v-model="opinionShow">
			<view class="slot-content" style="margin: 20rpx;">
				<u-form label-width="150" ref="uForm">
					<u-form-item :border-bottom="false">
						<u-input height="150" placeholder="请输入审核意见(选填)" v-model="opinion" />
					</u-form-item>
				</u-form>
			</view>
		</u-modal>

		<view class="tabs flex flex-direction">
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==current?'text-base cur text-xl text-bold ':'text-lg'"
						v-for="(item,index) in tabs" :key="index" @tap="tabChange(index)">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view style="height: 100%;">
			<swiper style="height: 100%;" :current="current" @change="swiperChange" @animationfinish="animationfinish">
				<swiper-item v-for="(item, index) in tabs" :key="index">
					<scroll-view scroll-y style="height: 100%;">
						<item @showOpinion="showOpinion" ref="mescrollItem" :i="index" :item="item"
							:type="current"></item>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
	import item from "./comps/item.vue"
	export default {
		components: {
			item
		},
		data() {
			return {
				// 审核不通过的审核意见
				opinion: '',
				// 显示审核不通过对话框
				opinionShow: false,
				// 审核不通过的对象
				failItem: {},
				
				current: 0,
				swiperCurrent: 0,
				tabs: [
					{
						name: '待审核',
						value: 'WAITING'
					},
					{
						name: '已通过',
						value: 'PASS'
					},
					{
						name: '已拒绝',
						value: 'FAIL'
					},
					{
						name: '已停用',
						value: 'STOP'
					}
				],
			}
		},
		onShow() {
			let pages = getCurrentPages(); //获取所有页面栈实例列表
			let currPage = pages[pages.length - 1]; //当前页页面实例
			if (currPage.data.flag == true) {
				this.refreshMescroll()
			}
		},
		onLoad() {

		},
		methods: {
			showOpinion(item) {
				this.opinionShow = true
				this.failItem = item
			},
			/**
			 * 审核不通过
			 */
			opinionConfirm() {
				let item = this.$u.deepClone(this.failItem)
				let that = this
				item.auditStatus = 2
				item.auditAdvice = that.opinion
				that.$api.shop.submit(item).then(res => {
					if (res.success == true) {
						this.$u.toast(res.msg)
						that.$nextTick(() => {
							that.refreshMescroll()
						})
					}
				})
			},
			/**
			 * 刷新列表
			 */
			refreshMescroll() {
				let curMescroll = this.getMescroll(this.current)
				curMescroll && curMescroll.resetUpScroll()
			},
			/**
			 * 获取Mescroll对象
			 * @param {Object} i
			 */
			getMescroll(i) {
				let mescrollItems = this.$refs.mescrollItem;
				if (mescrollItems) {
					let item = mescrollItems[i]
					if (item) return item.mescroll
				}
				return null
			},
			tabChange(index) {
				this.current = index
			},
			swiperChange(e) {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				this.current = e.detail.current
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.swiperCurrent = current;
				this.current = current;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.text-blue {
		color: $base-color;
	}

	.text-xl {
		font-size: 34rpx;
	}

	.container {
		height: calc(100vh);
		background-color: #F6F6F6;
		padding: 78rpx 0rpx 0rpx;

		.tabs {
			position: fixed;
			top: -10rpx;
			left: 0;
			width: 100%;
			background-color: #FFFFFF;
			box-sizing: border-box;
			z-index: 3;
		}
	}
</style>
