<template>
	<view class="application-record-container">
		<view style="padding: 30upx 20upx;color: #000000;">
			<JHeader width="50" height="50" title="申请记录"></JHeader>
		</view>
		<u-tabs
			:list="[{ name: '商户' }, { name: '分公司/策划师' }]" :current="currentTab" bg-color="#f6f6f6" active-color="#c5aa7b"
			bar-width="100" item-width="50%" @change="handleChangeTab"
		></u-tabs>
		<view v-if="currentTab === 0">
			<view v-if="storeInfo.data && storeInfo.data.length">
				<view v-for="(item, index) in storeInfo.data" :key="index">
					<u-card
						:title="item.type == 1 ? '店铺申请' : item.type == 2 ? '营销策划师申请' : item.type == 3 ? '分公司申请' : '--'"
						:sub-title="`关联用户ID：${item.buyerUserId || '--'}`" padding="20" :foot-style="{ padding: '0' }"
					>
						<template #body>
							<view style="padding: 2upx 4upx;">
								<view>店铺ID：{{ item.shopId || '--' }}</view>
								<view style="display: flex;justify-content: space-between;margin-top: 10upx;">
									<view>店铺名称：{{ item.shopName || '--' }}</view>
									<view>店铺ID：{{ item.shopId || '--' }}</view>
								</view>
								<view>店铺手机号：{{ item.shopPhone || '--' }}</view>
								<view>申请时间：{{ item.createTime || '--' }}</view>
								<view v-if="item.reason">驳回原因：{{ item.reason }}</view>
								<view>
									是否支付：
									<text v-if="item.isPay == 1">待审核</text>
									<text v-else-if="item.isPay == 2">待支付</text>
									<text v-else-if="item.isPay == 3">已支付</text>
									<text v-else-if="item.isPay == 4">已驳回</text>
									<text v-else>--</text>
								</view>
							</view>
						</template>
						<template #foot>
							<view style="display: flex;justify-content: flex-end;padding: 0 20rpx 20rpx;">
								<u-button
									v-if="(item.isPay == 2)" type="warning" style="width: 148upx;height: 64upx;margin: 0 8upx 0 0;"
									shape="circle" @click="handleToPay({ ...item, memberId: item.shopId })"
								>
									去支付
								</u-button>
							</view>
						</template>
					</u-card>
				</view>
			</view>
			<view style="padding-bottom: 45upx;">
				<!-- <NoMore
					:show="!!(!storeInfo.isEmpty && storeInfo.data.length && (storeInfo.data.length >= storeInfo.listTotal))"
					/> -->
				<LoadMore
					:status="!storeInfo.isEmpty && !storeInfo.data.length
						? 'loading' : !storeInfo.isEmpty && storeInfo.data.length && (storeInfo.data.length >= storeInfo.listTotal) ? 'no-more' : ''"
				>
				</LoadMore>
				<!-- <u-empty v-if="storeInfo.isEmpty" text="暂无数据" mode="list" margin-top="60"></u-empty> -->
				<tui-no-data v-if="storeInfo.isEmpty" :fixed="false" style="margin-top: 60upx;">暂无数据</tui-no-data>
			</view>
		</view>
		<view v-else-if="currentTab === 1">
			<view v-if="applyInfo.data && applyInfo.data.length">
				<view v-for="(item, index) in applyInfo.data" :key="index">
					<u-card
						:title="item.authenType == 1 ? '分公司申请' : item.authenType == 2 ? '营销策划师申请' : '--'"
						:sub-title="`账户ID：${item.platformUserId || '--'}`" :thumb="item.avatar || ''" padding="20"
						:foot-style="{ padding: '0' }"
					>
						<template #body>
							<view style="padding: 2upx 4upx;">
								<view>平台登录账号：{{ item.username || '--' }}</view>
								<view style="display: flex;justify-content: space-between;margin-top: 10upx;">
									<view>昵称：{{ item.name || '--' }}</view>
									<view>性别：{{ item.sex || '--' }}</view>
								</view>
								<view>账户手机号：{{ item.phone || '--' }}</view>
								<view>邮箱：{{ item.email || '--' }}</view>
								<view>申请时间：{{ item.createTime || '--' }}</view>
								<view>生效日期：{{ item.effectiveDate || '--' }}</view>
								<view>生效时限：{{ item.effectiveYear ? `${item.effectiveYear}年` : '--' }}</view>
								<view style="display: flex;justify-content: space-between;margin-top: 10upx;">
									<view>
										合同状态：
										<text v-if="item.contractState === 0">无效</text>
										<text v-else-if="item.contractState === 1">有效</text>
										<text v-else>--</text>
									</view>
									<view>
										认证状态：
										<text v-if="item.authenticationState == 1">未认证</text>
										<text v-else-if="item.authenticationState == 2">审核中</text>
										<text v-else-if="item.authenticationState == 3">审核通过</text>
										<text v-else-if="item.authenticationState == 4">审核失败</text>
										<text v-else-if="item.authenticationState == 5">签约成功（使用中）</text>
										<text v-else>--</text>
									</view>
								</view>
								<view>
									入驻处理状态：
									<text v-if="item.checkState == '0'">未处理</text>
									<text v-else-if="item.checkState == '1'">通过</text>
									<text v-else-if="item.checkState == '2'">拒绝</text>
									<text v-else>--</text>
								</view>
								<view style="display: flex;justify-content: space-between;margin-top: 10upx;">
									<view>
										是否支付：
										<text v-if="item.isPay == 1">待审核</text>
										<text v-else-if="item.isPay == 2">待支付</text>
										<text v-else-if="item.isPay == 3">已支付</text>
										<text v-else-if="item.isPay == 4">已驳回</text>
										<text v-else>--</text>
									</view>
									<view>
										金额：
										<text style="font-weight: 700;color: #c80000;">{{ item.amount ? `￥${item.amount}` : '--' }}</text>
									</view>
								</view>
							</view>
						</template>
						<template #foot>
							<view style="display: flex;justify-content: flex-end;padding: 0 20rpx 20rpx;">
								<u-button
									v-if="(item.isPay == 2)" type="warning" style="width: 148upx;height: 64upx;margin: 0 8upx 0 0;"
									shape="circle" @click="handleToPay({ ...item, memberId: item.platformUserId })"
								>
									去支付
								</u-button>
							</view>
						</template>
					</u-card>
				</view>
			</view>
			<view style="padding-bottom: 45upx;">
				<LoadMore
					:status="!applyInfo.isEmpty && !applyInfo.data.length
						? 'loading' : !applyInfo.isEmpty && applyInfo.data.length && (applyInfo.data.length >= applyInfo.listTotal) ? 'no-more' : ''"
				>
				</LoadMore>
				<tui-no-data v-if="applyInfo.isEmpty" :fixed="false" style="margin-top: 60upx;">暂无数据</tui-no-data>
			</view>
		</view>

		<!-- 支付 -->
		<tui-bottom-popup :show="showPayPopup" @close="showPayPopup = false">
			<view v-if="showPayPopup" style="padding: 80upx 0;">
				<CashierList show @change="handleChangePayItem" />
				<tui-button
					type="warning" width="168upx" height="64upx"
					margin="30upx auto 0" shape="circle" @click="handleGoPay"
				>
					确认支付
				</tui-button>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
import { getApplyByUserListApi, getApplyByStoreListApi, paySubmitSettleApi } from '../../../api/user'
import { handleDoPay } from '../../../utils/payUtil'

export default {
	name: 'ApplicationRecord',
	data() {
		return {
			currentTab: 0,
			storeInfo: {
				query: {
					page: 1,
					pageSize: 10
				},
				data: [],
				listTotal: 0,
				isEmpty: false
			},
			applyInfo: {
				query: {
					page: 1,
					pageSize: 10
				},
				data: [],
				listTotal: 0, // 列表数据总数
				isEmpty: false // 列表是否为空
			},

			showPayPopup: false,
			selectedItem: {},
			payInfo: {
				paymentMode: '',
				huabeiPeriod: ''
			}
		}
	},
	onLoad(options) {
		this.getApplyByStoreList()
	},
	methods: {
		handleChangeTab(index) {
			this.currentTab = index
			// 缓存每个tab里的数据
			if (this.currentTab === 0) {
			} else if (this.currentTab === 1) {
				if (!this.applyInfo.isEmpty && !this.applyInfo.data.length) this.getApplyByUserList()
			}
			// 每点一个tab就重新进行对它的请求
			// if (this.currentTab === 0) {
			// 	this.storeInfo.query.page = 1
			// 	this.storeInfo.data = []
			// 	this.storeInfo.listTotal = 0
			// 	this.storeInfo.isEmpty = false
			// 	this.getApplyByStoreList()
			// } else if (this.currentTab === 1) {
			// 	this.applyInfo.query.page = 1
			// 	this.applyInfo.data = []
			// 	this.applyInfo.listTotal = 0
			// 	this.applyInfo.isEmpty = false
			// 	this.getApplyByUserList()
			// }
		},
		getApplyByStoreList(isLoadmore) {
			uni.showLoading({
				title: '加载中'
			})
			getApplyByStoreListApi({ ...this.storeInfo.query })
				.then((res) => {
					this.storeInfo.listTotal = res.data.total
					if (isLoadmore) {
						this.storeInfo.data.push(...res.data.list)
					} else {
						this.storeInfo.data = res.data.list
					}
					if (this.storeInfo.data.length === 0) this.storeInfo.isEmpty = true
					uni.hideLoading()
				})
				.catch(() => {
					uni.hideLoading()
				})
		},
		getApplyByUserList(isLoadmore) {
			uni.showLoading({
				title: '加载中'
			})
			getApplyByUserListApi({ ...this.applyInfo.query })
				.then((res) => {
					this.applyInfo.listTotal = res.data.total
					if (isLoadmore) {
						this.applyInfo.data.push(...res.data.list)
					} else {
						this.applyInfo.data = res.data.list
					}
					if (this.applyInfo.data.length === 0) this.applyInfo.isEmpty = true
					uni.hideLoading()
				})
				.catch(() => {
					uni.hideLoading()
				})
		},
		handleChangePayItem(params) {
			this.payInfo.paymentMode = params.paymentMode
			this.payInfo.huabeiPeriod = params.huabeiPeriod
		},
		handleToPay(item) {
			this.selectedItem = item
			this.payInfo = { paymentMode: '', huabeiPeriod: '' }
			this.showPayPopup = true
		},
		handleGoPay() {
			if (!this.payInfo.paymentMode) this.$showToast('请选择支付方式！')
			paySubmitSettleApi({
				memberId: this.selectedItem.memberId,
				amount: this.selectedItem.amount,
				paymentMethod: [3, 2, 5, 4, 1][this.payInfo.paymentMode - 1],
				packagesId: this.selectedItem.packageId
			}).then(({ data }) => {
				handleDoPay.call(this, { ...data, ...this.payInfo }, 3)
			})
		}
	},
	onReachBottom() {
		if (this.currentTab === 0) {
			if (this.storeInfo.data.length < this.storeInfo.listTotal) {
				++this.storeInfo.query.page
				this.getApplyByStoreList(true)
			}
		} else if (this.currentTab === 1) {
			if (this.applyInfo.data.length < this.applyInfo.listTotal) {
				++this.applyInfo.query.page
				this.getApplyByUserList(true)
			}
		}
	}
}
</script>

<style lang="less" scoped>
.application-record-container {
	box-sizing: border-box;
	min-height: 100vh;
	background-color: #eeeeee;

	/deep/ .tui-popup-class.tui-bottom-popup {
		height: 25vh !important;
	}
}
</style>
