<template>
	<view class="min-page bg-f7 u-font-28 color-333">
		<up-sticky>
			<view class="top u-flex">
				<up-select  :options="statusList" @select="statusListSelect">
					<template #text>
						<text v-if="query.status">{{returnStatusLabel(query.status)}}</text>
						<text v-else>状态</text>
					</template>
				</up-select>
				<view class="u-flex-1 u-p-l-32">
					<up-search placeholder="店铺名称" v-model="query.shopName" @search="search" @clear="search" @custom="search"></up-search>
				</view>
			</view>
		</up-sticky>
		<view class="box">
			<view class="container" v-for="(item,index) in list" :key="index">
				<view>
					<view class="">
						<text class="color-666">商户号：</text>
						<text class="font-bold">{{item.merchantCode}}</text>
					</view>
					<view class="u-m-t-24">
						<text class="color-666">商户简称：</text>
						<text class="font-bold">{{item.shortName}}</text>
					</view>
					<view class="u-m-t-24">
						<text class="color-666">店铺名称：</text>
						<text class="font-bold">{{item.shopName}}</text>
					</view>
					<view class="u-m-t-24 u-flex u-col-center">
						<text class="color-666">商户类型：</text>
						<view class="types font-bold">{{returnType(item.userType)}}</view>
					</view>
					<view class="status">
						<view class="u-flex u-row-between ">
							<text class="font-bold">支付宝进件状态</text>
							<view class="state" :class="returnStatusClass(item.alipayStatus)">
								{{returnStatusLabel(item.alipayStatus)}}
							</view>
						</view>
						<view class="u-m-t-14" v-if="item.alipayErrorMsg">
							<up-alert title="拒绝原因" type="error" :description="item.alipayErrorMsg"></up-alert>
						</view>
					</view>
					<view class="status">
						<view class="u-flex u-row-between">
							<text class="font-bold">微信进件状态</text>
							<view class="state" :class="returnStatusClass(item.wechatStatus)">
								{{returnStatusLabel(item.wechatStatus)}}
							</view>

						</view>
						<view class="u-m-t-14" v-if="item.wechatErrorMsg">
							<up-alert title="拒绝原因" type="error" :description="item.wechatErrorMsg"></up-alert>
						</view>
					</view>

					<view class="u-m-t-24 u-flex u-col-center">
						<text class="color-666">最后提交时间：</text>
						<view class=" font-bold">{{item.updateTime}}</view>
					</view>
					<view class="u-m-t-24 u-flex u-col-center">
						<text class="color-666">创建时间：</text>
						<view class=" font-bold">{{item.createTime}}</view>
					</view>
					
					<view class="u-flex u-m-t-32  u-row-right">
						<view style="min-width: 160rpx;">
							<my-button @click="toEdit(item)" >编辑</my-button>
						</view>
					</view>
				</view>
			</view>

			<template v-if="query.shopName">
				<up-empty v-if="list.length<=0" text="未搜索到相关信息"></up-empty>
				<up-loadmore :status="isEnd?'nomore':'loading'" v-else></up-loadmore>
			</template>
			<template v-else>
				<up-empty v-if="list.length<=0" text="未搜索到相关信息"></up-empty>
				<up-loadmore v-else :status="isEnd?'nomore':'loading'"></up-loadmore>
			</template>
		</view>

		<view style="height: 140rpx;"></view>
		<view class="bottom">
			<my-button @click="showShopSelect=true">添加进件</my-button>
		</view>

		<shopSelect v-model="showShopSelect" @confirm="toAdd"></shopSelect>
	</view>
</template>

<script setup>
	import {
		userTypes
	} from '../data.js'

	function returnType(type) {
		if (userTypes[type]) {
			return userTypes[type]
		}
		return ''
	}
	import {
		reactive,
		ref,
		watch
	} from 'vue';
	import shopSelect from '../components/shop-select.vue'
	import {
		onReachBottom,onShow
	} from '@dcloudio/uni-app'
	import {
		getList
	} from '@/http/api/order/entryManager.js'

	// WAIT 待提交
	// INIT 待处理
	// AUDIT 待审核
	// SIGN 待签约
	// FINISH 已完成
	// REJECTED 失败
	const statusList = [{
			value: 'WAIT',
			name: '待提交',
			class: 'gray'
		},
		{
			value: 'INIT',
			name: '待处理',
			class: 'warning'
		},
		{
			value: 'AUDIT',
			name: '待审核',
			class: 'warning'
		},
		{
			value: 'SIGN',
			name: '待签约',
			class: 'warning'
		},
		{
			value: 'FINISH',
			name: '已完成',
			class: 'success'
		},
		{
			value: 'REJECTED',
			name: '失败',
			class: 'error'
		},
	]
	function statusListSelect(e){
		query.status=e.value
	}
	const statusLabelJson = {
		'REJECTED': '已拒绝'
	}
	const statusClassJson = {
		'REJECTED': 'error'
	}

	function returnStatusLabel(state) {
		const item = statusList.find(v => v.value == state)
		if (item) {
			return item.name
		}
		return ''
	}

	function returnStatusClass(state) {
		const item = statusList.find(v => v.value == state)
		if (item) {
			return item.class
		}
		return ''
	}


	const showShopSelect = ref(false)

	const query = reactive({
		page: 1,
		size: 10,
		shopName: '',
		status: ''
	})
	watch(()=>query.status,(newval)=>{
		search()
	})
	const isEnd = ref(false)
	const list = ref([])

	function search() {
		isEnd.value = false
		query.page = 1
		getData()
	}

	function toAdd(shop) {
		console.log(shop)
		uni.navigateTo({
			url: '/entryManager/add/add?shopId=' + shop.shopId
		})
	}
	
	
	function toEdit(shop){
		console.log(shop)
		uni.navigateTo({
			url: '/entryManager/add/add?shopId=' + shop.shopId+'&licenceNo='+shop.licenceNo
		})
	}

	function getData() {
		getList(query).then(res => {
			isEnd.value = query.page >= res.totalPage * 1
			if (query.page == 1) {
				list.value = res.records
			} else {
				list.value.push(...res.records)
			}
		})
	}
	onReachBottom(() => {
		if (!isEnd.value) {
			query.page++
		}

	})
	onShow(getData)
</script>

<style lang="scss" scoped>
	.min-page {
		.box {
			padding: 32rpx 28rpx;
		}
	}

	.container {
		padding: 32rpx 28rpx;
		border-radius: 16rpx;
		margin-bottom: 32rpx;
		background-color: #fff;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 100;
		padding: 32rpx 28rpx;
		padding-bottom:40rpx;
	}

	.types {}

	.status {
		margin-top: 24rpx;
		background-color: #f7f7f7;
		padding: 24rpx 28rpx;
		border-radius: 4rpx;

		.state {
			padding: 8rpx 18rpx;
			border-radius: 8rpx;
			border: 2rpx solid #333;

			&.success {
				border-color: rgba(123, 209, 54, 1);
				color: rgba(123, 209, 54, 1);
				background: rgba(123, 209, 54, 0.12);
			}

			&.warning {
				border-color: rgba(255, 141, 40, 1);
				color: rgba(255, 141, 40, 1);
				background: rgba(255, 141, 40, 0.12);
			}

			&.error {
				border-color: #FF1C1C;
				color: #FF1C1C;
				background: rgba(255, 28, 28, 0.18);
			}

			&.gray {
				color: #bbb;
				background-color: #f7f7f7;
				border-color: #bbb;
			}
		}
	}

	.top {
		padding: 32rpx 28rpx;
		background-color: #fff;
	}
</style>