<template>
	<!-- 购物车列表 -->
	<div class="sc-list" :class="{ mini: isMini, view: isView }">
		<div class="header">
			<div class="title">
				<span class="text">{{ title || $t('ShoppingCart.title') }}</span>
				<span class="close" v-if="isMini && !isView" @click="onClose"
					><svg-icon name="close" size="13"
				/></span>
			</div>
			<div class="options" v-if="!isMini">
				<div class="left">
					<el-checkbox
						:model-value="allSelected"
						:indeterminate="selectedCount === 0 ? false : selectedCount < maxLength"
						@click="handleAllAllClick"
					/>
					<span class="count">{{
						$t('Wardrobe.assets.selectedCount', { count: selectedCount })
					}}</span>
					<div class="hr"></div>
					<div class="btn" @click="handleAllAllClick(true)">
						{{ $t('Wardrobe.assets.selectAll') }}
					</div>
					<div class="btn" @click="handleAllAllClick(false)">
						{{ $t('Wardrobe.assets.deselectAll') }}
					</div>
				</div>
				<div class="right">
					<el-select
						v-model="sortBy"
						:placeholder="$t('Wardrobe.sort.label')"
						:teleported="false"
					>
						<template #label="{ label }">
							<span class="header-label">{{ $t('Wardrobe.sort.label') }}</span>
							<span class="header-value">{{ label }}</span>
						</template>
						<el-option
							v-for="item in sortByOptions"
							:key="item.label"
							:value="item.value"
							:label="$t(item.label)"
						/>
					</el-select>
				</div>
			</div>
		</div>
		<div class="list">
			<sc-list-null
				v-show="list.length === 0"
				:show-button="!isMini"
				:title="$t('ShoppingCart.listNullTitle')"
				:tip="$t('ShoppingCart.listNullTip')"
				@explore="handleExplore"
			/>
			<sc-item
				v-for="v in list"
				:key="v.cartId"
				:info="v"
				:show-tags="!isMini || isView"
				:show-date="!isMini"
				:show-remove="!isView"
				@remove="handleRemoveClick"
				:disabled="v.status !== SCART_STATUS.NORMAL"
			>
				<template #checkbox v-if="!isMini">
					<el-checkbox
						disabled
						v-if="v.status !== SCART_STATUS.NORMAL"
						style="opacity: 0; pointer-events: none"
					/>
					<el-checkbox v-else v-model="v.checked" @change="handleSelectedChange" />
				</template>
			</sc-item>
		</div>
		<div class="footer" v-if="isMini">
			<div class="total" v-show="list.length > 0 || isView">
				<span class="label">{{ $t('ShoppingCart.total') }}</span>
				<span class="value">${{ allAmount }}<span> HKD</span></span>
			</div>

			<div class="tip" v-if="isView">{{ $t('ShoppingCart.digitalAssets') }}</div>
			<button custom="black" v-if="!isView">{{ $t('ShoppingCart.checkout') }}</button>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ElMessageBox } from 'element-plus'
	import { SCART_STATUS } from './index.d'
	import { GetShoppingCartList, RemoveShoppingCartItem } from '@/api/shoppingCart'
	import { computed, ref, onMounted } from 'vue'
	import { FormatBytes, FormatDate } from '@/utils/tools'
	import scItem from './sc-item.vue'
	import scListNull from './sc-list-null.vue'
	import { useRouter } from 'vue-router'
	import { useI18n } from 'vue-i18n'
	const { t } = useI18n()
	const router = useRouter()
	const emit = defineEmits(['close', 'selected-change'])
	const props = defineProps({
		title: { type: String, default: '' },
		isMini: { type: Boolean, default: false },
		isView: { type: Boolean, default: false },
		list: { type: Array }
	})
	const allAmount = computed(() =>
		list.value
			.filter((v) => v.status === SCART_STATUS.NORMAL)
			.reduce((pre, cur) => pre + cur.amount, 0)
			.toFixed(2)
	)
	const selectedCount = computed(() => list.value.filter((v) => v.checked).length)
	const maxLength = computed(() => list.value.filter((v) => v.status === SCART_STATUS.NORMAL).length)
	const allSelected = computed(() =>
		list.value.length === 0
			? false
			: list.value.filter((v) => v.status === SCART_STATUS.NORMAL).every((v) => v.checked)
	)
	const sortBy = ref('DateAdded')
	const sortByOptions = ref([
		{
			label: 'digitalItem.BestSelling',
			value: 'BestSelling'
		},
		{
			label: 'digitalItem.Price',
			value: 'PriceLowToHigh'
		},
		{
			label: 'digitalItem.SelectedFirst',
			value: 'SelectedFirst'
		},
		{
			label: 'digitalItem.DateAdded',
			value: 'DateAdded'
		}
	])

	const list_ = ref([])
	const list = computed(() => {
		if (sortBy.value === 'BestSelling') {
			return list_.value.sort((a, b) => b.salesVolume - a.salesVolume)
		}
		if (sortBy.value === 'PriceLowToHigh') {
			return list_.value.filter(() => true).sort((a, b) => a.amount - b.amount)
		}
		if (sortBy.value === 'SelectedFirst') {
			return list_.value
				.filter(() => true)
				.sort((a, b) => (b.checked ? 1 : 0) - (a.checked ? 1 : 0))
		}
		if (sortBy.value === 'DateAdded') {
			console.log(list_.value)
			return list_.value.filter(() => true).sort((a, b) => b.date - a.date)
		}
		return list_.value.filter(() => true)
	})
	const GetList = () => {
		GetShoppingCartList(true).then((res: any) => {
			const arr = []
			res?.forEach((v, i) => {
				const obj = {
					cartId: v.cartId, //购物车ID
					listingId: v.listingId, //资产ID
					title: v.title, //标题
					brand: v.shopName, //店铺名称
					sellerId: v.sellerId, //店铺ID
					cover: v.cover, //封面
					amount: v.price, //价格
					status: v.status, //状态
					date: new Date(v.addTime).getTime(), //添加时间
					tags: v.productCategory, //标签
					salesVolume: v.salesVolume, //销售量
					checked: false
				}
				arr.push(obj)
			})
			list_.value = arr
			handleSelectedChange()
		})
	}
	if (props.list) {
		list_.value = props.list
	} else {
		GetList()
	}
	const handleAllAllClick = (checked?: boolean) => {
		const checked_ = typeof checked === 'boolean' ? checked : !allSelected.value
		list.value.forEach((v) => (v.checked = v.status === SCART_STATUS.NORMAL ? checked_ : false))
		handleSelectedChange()
	}
	const handleSelectedChange = () => {
		const arr = list.value.filter((v) => v.checked)
		emit('selected-change', arr)
	}
	const onClose = () => {
		emit('close')
	}
	onMounted(() => {
		handleSelectedChange()
	})
	const handleRemoveClick = (value: any) => {
		ElMessageBox.confirm(t('ShoppingCart.removeTip'))
			.then(() => {
				RemoveShoppingCartItem({ listingId: value.listingId }).then(() => {
					GetList()
				})
			})
			.catch(() => {})
	}
	const handleExplore = () => {
		router.push({ name: 'brand' })
	}
</script>

<style lang="less" scoped>
	.sc-list {
		display: flex;
		flex-direction: column;
		&.mini {
			height: 100%;
			overflow: hidden;
			--sc-list-title-font-size: 2rem;
			--sc-list-title-padding-bottom: 3rem;
			--sc-item-padding: 2rem 0;
			--sc-item-img-width: 10.4rem;
			--sc-item-img-height: 13.2rem;
			--sc-item-content-margin: 0 2rem;
			--sc-item-margin-bottom: 0.8rem;
			--sc-item-title-font-size: 1.6rem;
			--sc-item-brand-font-size: 1.4rem;
			--sc-item-amount-font-size: 1.8rem;
			--sc-item-currency-font-size: 1.6rem;
			--sc-item-currency-font-size: 1.6rem;
			--sc-item-content-align-self: baseline;
			--sc-item-right-display: flex;
			--sc-item-right-flex-direction: column;
			--sc-item-right-justify-content: space-between;
			--sc-item-right-align-items: flex-end;
			--sc-item-right-height: var(--sc-item-img-height);
			> .list {
				flex: 1;
				min-height: 30rem;
				overflow-y: auto;
			}
		}
		&.mini.view {
			--sc-list-title-padding-bottom: 2.4rem;
			--sc-item-img-width: 9.6rem;
			--sc-item-img-height: 12.2rem;
			--sc-item-padding: 1.6rem;
			--sc-item-margin-bottom: 0.8rem;
			--sc-item-title-font-size: 2rem;
			--sc-item-right-margin-top: 1.2rem;
			--sc-item-content-margin: 1.2rem 2rem 0;
			--sc-item-tag-min-width: 0;
			--sc-item-tag-height: 2rem;
			--sc-item-tag-radius: 2rem;
			--sc-item-tag-font-size: 1.2rem;
			--sc-item-tag-padding: 0 0.8rem;
			> .header {
				border: none;
			}
			> .footer {
				margin-top: 4.1rem;
				> .total {
					margin-bottom: 1.7rem;
					> .label {
						font-family: KaiseiOpti-Medium;
						font-size: 2rem;
						color: #232323;
					}
					> .value {
						font-family: KaiseiOpti-Medium;
						font-size: 2.2rem;
						> span {
							font-family: KaiseiOpti-Regular;
							font-size: 1.8rem;
						}
					}
				}
				> .tip {
					font-family: KaiseiOpti-Regular;
					font-size: 1.2rem;
					color: #808080;
					margin-top: 2.4rem;
				}
			}
		}
		&:not(.mini) {
			> .header {
				position: sticky;
				top: var(--sc-list-header-top, 0);
				background-color: #fff;
				z-index: 999;
				&:after {
					content: '';
					position: absolute;
					top: 1px;
					left: 0;
					width: 100%;
					height: calc(var(--sc-list-header-top, 0) + 2px);
					transform: translateY(-100%);
					background-color: #fff;
				}
			}
			> .list {
				> .sc-list-null {
					margin-top: 10rem;
				}
			}
		}
		> .header {
			border-bottom: 0.1rem solid #c4c4c4;
			padding-bottom: var(--sc-list-title-padding-bottom, 3rem);
			> .title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 2rem;
				> .text {
					font-family: KaiseiOpti-Bold;
					font-size: var(--sc-list-title-font-size, 4rem);
					color: #121212;
				}
				> .close {
					width: 2.4rem;
					height: 2.4rem;
					cursor: pointer;
				}
			}
			> .options {
				margin-top: 1rem;
				display: flex;
				justify-content: space-between;
				> .left {
					display: flex;
					align-items: center;
					> .count {
						font-family: KaiseiOpti-Regular;
						font-size: 1.8rem;
						color: #232323;
					}
					> .hr {
						width: 0;
						height: 100%;
						border-left: 0.1rem solid #c4c4c4;
						margin: 0 2rem;
					}
					> .btn {
						margin-right: 1.2rem;
						font-family: KaiseiOpti-Regular;
						font-size: 1.8rem;
						color: #979797;
						text-decoration: underline;
						user-select: none;
						cursor: pointer;
					}
				}
			}
		}
		> .list {
		}
		> .footer {
			margin-top: 3rem;
			> .total {
				display: flex;
				justify-content: space-between;
				align-items: center;
				> .label {
					font-family: KaiseiOpti-Bold;
					font-size: 1.6rem;
					color: #121212;
				}
				> .value {
					font-family: KaiseiOpti-Bold;
					font-size: 2rem;
					color: #232323;
					> span {
						font-family: KaiseiOpti-Medium;
						font-size: 1.6rem;
						color: #585858;
						vertical-align: bottom;
					}
				}
			}
			> button {
				width: 100%;
				height: 4.6rem;
				--button-font-size: 1.4rem;
				margin-top: 2rem;
				text-transform: uppercase;
			}
		}
	}
	.sc-list:deep(.el-checkbox) {
		margin-right: 3rem;
		height: auto;
		--el-checkbox-font-size: 1.4rem;
		--el-checkbox-input-width: 2.4rem;
		--el-checkbox-input-height: 2.4rem;
		--el-checkbox-checked-bg-color: #000;
		--el-checkbox-checked-input-border-color: #000;
		--el-checkbox-input-border: 0.1rem solid #232323;
		--el-checkbox-bg-color: #fff;
		--el-checkbox-border-radius: 0;
		.el-checkbox__input.is-indeterminate .el-checkbox__inner:before {
			height: 0.2rem;
			width: 65%;
			top: 50%;
			left: 50%;
			transform: scale(1) translate(-50%, -50%);
			border-radius: 0.1rem;
		}
		.el-checkbox__inner:after {
			width: 0.6rem;
			height: 1.3rem;
			border-width: 0.2rem;
		}
	}
	.sc-list:deep(.el-select) {
		width: 18rem;
		--el-border-radius-base: 0;
		--el-select-input-color: rgba(0, 0, 0, 0.5);
		--el-select-input-font-size: 1rem;
		.el-select__wrapper {
			font-size: 1.07rem;
			padding: 0 0.7rem;
			line-height: 1;
			min-height: 0;
			height: 2.2rem;

			.header-label {
				font-family: KaiseiOpti-Regular;
				color: rgba(0, 0, 0, 0.5);
				margin-right: 0.6rem;
			}
			.header-value {
				font-family: KaiseiOpti-Bold;
				color: #232323;
			}
		}
		.el-select__popper {
			--el-popper-border-radius: 0;
			border: 0.1rem solid #d0d0d0;
			.el-select-dropdown__list {
				padding: 0;
				> .el-select-dropdown__item {
					margin-bottom: 0.89rem;
					color: #232323;
					font-size: 1.069rem;
					height: 2.68rem;
					line-height: 2.68rem;
					padding: 0 1.4rem;
					&:last-child {
						margin-bottom: 0;
					}
					&.is-selected {
						font-family: KaiseiOpti-Bold;
						background-color: #f4f4f4;
					}
				}
			}
		}
	}
</style>