<template>
	<view class="min-page bg-f7 u-font-28 color-333">
		<up-sticky>
			<view class="top u-flex gap-20">
				<!-- <up-select :options="types" @select="typesSelect">
					<template #text>
						<text v-if="query.type!==''">{{returnTypesLabel(query.type)}}</text>
						<text v-else>类型</text>
					</template>
				</up-select> -->
				<up-select :options="statusList" @select="statusListSelect">
					<template #text>
						<text v-if="query.state!==''">{{returnStatusLabel(query.state)}}</text>
						<text v-else>状态</text>
					</template>
				</up-select>
				<view class="u-flex-1">
					<datePickerSelect v-model:start="query.startTime" v-model:end="query.endTime">
					</datePickerSelect>
				</view>


			</view>
		</up-sticky>
		<view class="box">
			<view class="container" v-for="(item,index) in list" :key="index">
				<view class="u-flex u-row-between">
					<view>
						<text class="color-666">创建时间：</text>
						<text class="font-bold">{{item.createTime}}</text>
					</view>
					<view class="status" :class="returnStatusClass(item.status)">{{item.status?'已使用':'未使用'}}</view>
				</view>
				<view class="u-flex u-row-between u-m-t-24">
					<view>
						<text class="color-666">激活时长(月)：</text>
						<text class="font-bold">{{item.periodMonth}}个月</text>
					</view>
				</view>

				<view class="u-flex u-m-t-32" v-if="item.shopName">
					<view>
						<text class="color-666">使用店铺名称：</text>
						<text class="font-bold">{{item.shopName}}</text>
						<text class="u-m-l-10">({{item.registerType=='before'?'快餐版':'餐饮版'}})</text>
					</view>

				</view>
				<view class="u-m-t-32">
					<view class="u-m-t-24 u-flex u-col-center">
						<text class="color-666">激活码：</text>
						<view class="status success u-font-24">{{item.registerCode}}</view>
					</view>

					<view class="u-flex u-m-t-32  u-row-right gap-20">

						<view style="min-width: 160rpx;">
							<my-button @click="oncopy(item.registerCode)">复制激活码</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="toAdd()">添加激活码</my-button>
		</view>

		<up-popup :show="addShow" mode="center" 
		@close="addShow=false" round="16rpx" :close-on-click-overlay="true">
			<view class="add-box">
				<view class="font-bold u-font-32 text-center">生成激活码</view>
				<view class="u-p-l-20 u-p-r-20 u-m-r-32">
					<up-form label-width="auto">
						<up-form-item label="激活时长" required>
							<up-number-box input-width="200rpx" v-model="form.periodMonth" :integer="true" :step="1" ></up-number-box>
						</up-form-item>
					</up-form>
					<up-form label-width="auto">
						<up-form-item label="生产数量" required>
							<up-number-box input-width="200rpx" v-model="form.num" :integer="true" :step="1" ></up-number-box>
						</up-form-item>
					</up-form>
				</view>
				<view class="u-flex gap-20 u-m-t-42">
					<view class="u-flex-1">
						<my-button type="default" @click="addShow=false">取消</my-button>
					</view>
					<view class="u-flex-1">
						<my-button @click="submit">生产激活码</my-button>
					</view>
				</view>
				
			</view>

		</up-popup>


	</view>
</template>

<script setup>

	import {
		reactive,
		ref,
		watch
	} from 'vue';
	import {
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app'
	import * as Api from '@/http/api/account/merchantRegister.js'
	
	import datePickerSelect from '../components/date-picker-select.vue'

	const code = ref('')
	const addShow = ref(false)
	
	const form =reactive({
		periodMonth:1,
		num:1,
	})
	watch(()=>addShow.value,(newval)=>{
		if(!newval){
			form.periodMonth=1;
			form.num=1;
		}
	})
	
	
	const codeType = ref('')

	const datePicker = ref(null)

	function datePickerConfirm(e) {

	}

	function submit(){
		Api.addMerchantRegister(form).then(res=>{
			if(res){
				uni.$u.toast('添加成功')
				addShow.value=false
				search()
			}
		})
	}

	const statusList = [{
			value: 1,
			name: '已激活',
		},
		{
			value: 0,
			name: '待激活',
		},

	]

	const types = [{
			value: 'before',
			name: '快餐版',
		},
		{
			value: 'after',
			name: '餐饮版',
		},

	]


	function oncopy(code) {
		uni.setClipboardData({
			data: code
		})
	}


	function statusListSelect(e) {
		query.state = e.value
	}

	function typesSelect(e) {
		query.type = 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 returnTypesLabel(state) {
		const item = types.find(v => v.value == state)
		if (item) {
			return item.name
		}
		return ''
	}

	function returnStatusClass(state) {
		if (state == 1) {
			return 'success'
		}
		return 'gray'
	}

	function showCode(item, type) {
		if (type == 'wx') {
			code.value = item.wechatSignUrl
		}
		if (type == 'aliPay') {
			code.value = item.alipaySignUrl
		}
		codeType.value = type
		addShow.value = true

	}

	const showShopSelect = ref(false)

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

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

	function toAdd(shop) {
		addShow.value = true
	}


	function toEdit(shop) {
		console.log(shop)
		uni.navigateTo({
			url: '/pagesShops/add/add?id=' + shop.id
		})
	}
	
	let isAjaxIng=ref(false)
	function getData() {
		if(isAjaxIng.value){
			return
		}
		isAjaxIng.value=true
		Api.getMerchantRegister({
			...query,
			startTime:'',
			endTime:'',
			createdAt:query.startTime&&query.endTime?( [query.startTime,query.endTime]):''
		}).then(res => {
			isAjaxIng.value=false
			isEnd.value = query.page >= res.totalPage * 1
			if (query.page == 1) {
				list.value = res.records
			} else {
				list.value.push(...res.records)
			}
		})
	}

	function queryStatus(item) {
		queryEntry({
			licenceNo: item.licenceNo,
			shopId: item.shopId
		}).then(res => {
			isEnd.value = false
			query.page = 1;
			getData()
		})
	}
	onReachBottom(() => {
		if (!isEnd.value) {
			query.page++
			getData()
		}

	})
	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 {
		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;
	}

	.add-box {
		background-color: #fff;
		width: 690rpx;
		background-color: #fff;
		padding: 32rpx 28rpx;
		border-radius: 16rpx;
	}
</style>