<template>
	<view class="container" ref="backTop">
		<HeaderCustom title="门店企业列表" :showBack="true"></HeaderCustom>
		<uv-sticky bgColor="#fff" offsetTop="90">
			<div class="tabBox">
				<div class="tabItem" :class="{selected:active==='门店'}" @click="() => active = '门店'">门店</div>
				<div class="tabItem" :class="{selected:active==='企业'}" @click="() => active = '企业'">企业</div>
			</div>
		</uv-sticky>
		<div class="contentBox" v-show="active==='门店'">
			<div class="contentItem" v-for="(item,index) in storeList" :key="item.id" @click="goDetail(item.id)">
				<div class="statusBox" v-if="item.status == 2">
					<uv-icon name="checkmark-circle-fill" color="#6AD307" size="12"></uv-icon>
					已通过
				</div>
				<div class="statusBox reject" v-if="item.status == 3">
					<uv-icon name="close-circle-fill" color="#F40404" size="12"></uv-icon>
					已驳回
				</div>
				<div class="statusBox pedding" v-if="item.status == 1">
					<uv-icon name="clock-fill" color="#F49843" size="12"></uv-icon>
					待审核
				</div>
				<div class="title">{{item.store_name}}</div>
				<div class="infoBox">
					<div class="line">
						<div class="infoItem">地区:{{item.location}}</div>
						<div class="infoItem">地址详情:{{item.address}}</div>
					</div>
					<div class="line">
						<div class="infoItem">电话:{{item.contact_phone}}</div>
						<div class="infoItem">工作时间:{{item.business_hours}}</div>
					</div>
					<div class="line">
						<div class="infoItem">业务类型:{{item.tags}}</div>
					</div>
					<div class="line">
						<div class="infoItem">
							注册日期:{{item.created_at ? dayjs(item.created_at * 1000).format('YYYY-MM-DD HH:mm:ss') : ''}}
						</div>
						<div class="infoItem" v-if="item.status == 3">驳回原因:{{item.review_note}}</div>
					</div>
				</div>
				<div class="buttonBox">
					<uv-button v-if="item.status != 1" size="small" shape="circle" text="删除" @click="delStore(item)"></uv-button>
					<uv-button @click="goAdd(item.id)" customStyle="margin-left:10px" size="small" type="primary" shape="circle" text="修改"
						v-if="item.status != 1"></uv-button>
				</div>
			</div>
			<uv-load-more @loadmore="storeGetMore" :status="storeloadingStatus" />
		</div>

		<div class="contentBox" v-show="active==='企业'">
			<div class="contentItem" v-for="(item,index) in businessList" :key="item.id">
				<div class="statusBox" v-if="item.status == 2">
					<uv-icon name="checkmark-circle-fill" color="#6AD307" size="12"></uv-icon>
					已通过
				</div>
				<div class="statusBox reject" v-if="item.status == 3">
					<uv-icon name="close-circle-fill" color="#F40404" size="12"></uv-icon>
					已驳回
				</div>
				<div class="statusBox pedding" v-if="item.status == 1">
					<uv-icon name="clock-fill" color="#F49843" size="12"></uv-icon>
					待审核
				</div>
				<div class="title">{{item.company_name}}</div>
				<div class="infoBox">
					<div class="line">
						<div class="infoItem">姓名:{{item.contact_person}}</div>
						<div class="infoItem">邮箱:{{item.contact_email}}</div>
					</div>
					<div class="line">
						<div class="infoItem">手机号码:{{item.contact_phone}}</div>
						<div class="infoItem">地址:{{item.address}}</div>
					</div>
					<div class="line">
						<div class="infoItem">更新日期:{{item.updated_at ? dayjs(item.updated_at * 1000).format('YYYY-MM-DD HH:mm:ss') : ''}}</div>
						<div class="infoItem" v-if="item.status == 3">驳回原因:{{item.review_note}}</div>
					</div>
				</div>
				<div class="buttonBox">
					<uv-button size="small" shape="circle" v-if="item.status != 1" text="删除" @click="delStore(item)"></uv-button>
					<uv-button v-if="item.status != 1" customStyle="margin-left:10px" size="small" type="primary" shape="circle"
						text="修改" @click="goEdit(item.id)"></uv-button>
				</div>
			</div>
			<uv-load-more @loadmore="businessGetMore" :status="businessloadingStatus" />
		</div>
		<div class="addBox" @click="goAdd(null)" v-if="active==='门店'"><uv-button iconColor="#fff" iconSize="14" icon="plus" type="primary"
				shape="circle" text="新增"></uv-button></div>
		<uv-modal showCancelButton ref="modal" content='确认删除？' :asyncClose="true" @confirm="confirmDel"></uv-modal>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import dayjs from 'dayjs';
	import {
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	import RPC from "@/utils/request";
	import HeaderCustom from '/components/HeaderCustom/HeaderCustom.vue'
	
	import {
		useAuthStore
	} from "@/store";
	const authStore = useAuthStore()
	// const props = defineProps({
	// 	id: [String]
	// });
	// console.log('props', props.id)
	const goAdd = (id) => {
		uni.$uv.route({
			url: '/pagesA/StoreManage/AddStore',
			params: {
				id: id,
			}
		});
	}
	const goEdit = (id) => {
		uni.$uv.route({
			url: '/pagesA/StoreManage/businessEdit',
			params: {
				id: id,
			}
		});
	}
	
	const goDetail = (id) => {
		uni.$uv.route({
			url: '/pagesA/ProductDetails/ProductDetails',
			params: {
				id: id,
			}
		});
	};
	const active = ref('门店')
	const modal = ref(null)

	const storeList = ref([])
	const storeloadingStatus = ref('loadmore')
	const storePage = ref(1)
	const storeCount = ref(0)
	
	const businessList = ref([])
	const businessloadingStatus = ref('loadmore')
	const businessPage = ref(1)
	const businessCount = ref(0)

	const confirmDel = () => {
		if (active.value === '门店') {
			RPC.post('/store/delete', {
				id: currentItem.value.id
			}).then((res) => {
				storeList.value = storeList.value.filter(item => item.id !== currentItem.value.id)
				uni.showToast({
					icon: 'success',
					title: '删除成功'
				})
				modal.value.close()
			}).catch(() => {
				modal.value.closeLoading()
			})
		}
		if (active.value === '企业') {
			RPC.post('/enterprise/delete', {
				id: currentItem.value.id
			}).then((res) => {
				businessList.value = businessList.value.filter(item => item.id !== currentItem.value.id)
				uni.showToast({
					icon: 'success',
					title: '删除成功'
				})
				modal.value.close()
			}).catch(() => {
				modal.value.closeLoading()
			})
		}
	}

	const currentItem = ref({})
	const delStore = item => {
		currentItem.value = item
		modal.value.open();
	}

	const getStoreList = () => {
		storeloadingStatus.value === 'loading'
		RPC.post('/store/list', {
			page: storePage.value,
			limit: 20
		}).then((res) => {
			storeList.value = [...storeList.value, ...res.rows || []]
			storeCount.value = res.count || 0
			if (storeList.value.length >= storeCount.value) {
				storeloadingStatus.value = 'nomore'
			} else {
				storeloadingStatus.value = 'loadmore'
			}
		}).catch(() => {
			storeloadingStatus.value = 'loadmore'
		})
	}
	const storeGetMore = () => {
		if (storeList.value.length >= storeCount.value || storeloadingStatus.value === 'loading') return
		storeloadingStatus.value = 'loading';
		storePage.value = ++storePage.value;
		getStoreList()
	}
	// getStoreList()
	
	const getBusinessList = () => {
		businessloadingStatus.value === 'loading'
		RPC.post('/enterprise/list', {
			page: businessPage.value,
			limit: 20
		}).then((res) => {
			businessList.value = [...businessList.value, ...res.rows || []]
			businessCount.value = res.count || 0
			if (businessList.value.length >= businessCount.value) {
				businessloadingStatus.value = 'nomore'
			} else {
				businessloadingStatus.value = 'loadmore'
			}
		}).catch(() => {
			businessloadingStatus.value = 'loadmore'
		})
	}
	const businessGetMore = () => {
		if (businessList.value.length >= businessCount.value || businessloadingStatus.value === 'loading') return
		businessloadingStatus.value = 'loading';
		businessPage.value = ++businessPage.value;
		getBusinessList()
	}
	getBusinessList()
	
	onReachBottom(() => {
		console.log('shangladaodi')
		if (active.value === '门店') {
			storeGetMore()
		}
		if (active.value === '企业') {
			businessGetMore()
		}
	})
	
	onShow(() => {
		if (!authStore?.isLoggedIn) {
			uni.switchTab({
				url: `/pages/index/index`,
			});
			uni.showToast({
				title: "请先登录",
				icon: "none",
			})
			return
		}
		storeList.value = []
		storePage.value = 1
		getStoreList()
	})
</script>

<style lang="scss" scoped>
	.container {
		font-size: 14px;
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	.tabBox {
		height: 50px;
		background-color: #fff;
		display: flex;

		.tabItem {
			height: 100%;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;

			&.selected {
				color: #5479ED;
				border-bottom: 1px solid #5479ED;
			}
		}
	}

	.contentBox {
		padding: 10px 14px 54px;

		.contentItem {
			position: relative;
			background-color: #fff;
			padding: 8px 16px;
			border-radius: 8px;
			margin-bottom: 10px;
			box-shadow: 0px 2px 23px 0px rgba(217, 217, 217, 0.5);

			.statusBox {
				display: flex;
				align-items: center;
				font-size: 12px;
				justify-content: space-between;
				padding: 4px 8px 4px 12px;
				width: 56px;
				color: #6AD307;
				background-color: #E4FBE9;
				position: absolute;
				top: 0;
				right: 0;
				border-radius: 0 0 0 20px;

				&.reject {
					color: #F40404;
					background-color: #FAE6E3;
				}

				&.pedding {
					color: #F49843;
					background-color: #FBF3E5;
				}
			}

			.title {
				font-weight: 700;
				margin-bottom: 10px;
			}

			.infoBox {
				.line {
					display: flex;
					margin-bottom: 6px;

					.infoItem {
						flex: 1;
						font-size: 12px;
						color: #A7A7A7;
					}
				}
			}

			.buttonBox {
				display: flex;
				justify-content: flex-end;
			}
		}
	}

	.addBox {
		position: fixed;
		width: calc(100% - 28px);
		left: 14px;
		bottom: 14px;
	}
</style>