<template>
	<div class="settings-index">
		<div>
			<div class="notification">
				<div class="header">{{ $t("Seller.notifications") }}</div>
				<div class="content">
					<div class="left">
						<div class="title">{{ $t("Seller.notificationsTitle") }}</div>
						<div class="tip">{{ $t("Seller.notificationsTip") }}</div>
					</div>
					<div class="right">
						<a-switch v-model:checked="checked" />
					</div>
				</div>
			</div>
			<div class="payout">
				<div class="header">{{ $t("Seller.payout") }}</div>
				<div class="content">
					<div class="header">
						<div class="title">{{ $t("Seller.payoutTitle") }}</div>
						<div class="tip">{{ $t("Seller.payoutTip") }}</div>
					</div>
					<div class="pay-item" v-for="v in payList" :key="v.type">
						<div class="left">
							<img :src="v.icon" />
							<div class="value">{{ v.value || $t("Seller.unbound") }}</div>
						</div>
						<div class="right">
							<button v-if="v.value" class="manage">{{ $t("Seller.manage") }}</button>
							<button v-else class="bind-now">{{ $t("Seller.bindNow") }}</button>
						</div>
					</div>
					<div class="footer">
						<div class="left">
							<div class="title">{{ $t("Seller.paymentCurrency") }}</div>
							<div class="tip">{{ $t("Seller.HKD") }}</div>
						</div>
						<div class="right">
							<button>{{ $t("Seller.fixed") }}</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div>
			<div class="data-privacy">
				<div class="header">{{ $t("Seller.dataPrivacy") }}</div>
				<div class="content">
					<div class="title">{{ $t("Seller.dataPrivacyTitle") }}</div>
					<div class="tip">{{ $t("Seller.dataPrivacyTip1") }}</div>
					<div class="tip">{{ $t("Seller.dataPrivacyTip2") }}</div>
					<div
						class="tip"
						v-html="
							$t('Seller.dataPrivacyTip3', { click: 'onSellerSettingsContactUs' })
						"
					></div>
					<div class="btns">
						<button @click="onDownloadDataPrivacy">
							<span class="icon"><svg-icon name="seller-download" size="14" /></span>
							<span class="label">{{ $t("Seller.downloadToView") }}</span>
						</button>
					</div>
				</div>
			</div>
			<div class="stop">
				<div class="header">{{ $t("Seller.stopSelling") }}</div>
				<div class="content">
					<div class="title">{{ $t("Seller.stopSellingTitle") }}</div>
					<div class="tip">{{ $t("Seller.stopSellingTip") }}</div>
					<div class="btns">
						<button @click="onStopSelling">{{ $t("Seller.deactivate") }}</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref } from "vue"
	import { Modal } from "ant-design-vue"
	import paypal from "@/assets/images/seller/setting/paypal.png"
	import stripe from "@/assets/images/seller/setting/stripe.png"
	import alipayHk from "@/assets/images/seller/setting/alipay-hk.png"
	import alipayChinese from "@/assets/images/seller/setting/alipay-chinese.png"
	import { useI18n } from "vue-i18n"
	const { t } = useI18n()

	const checked = ref(true)
	const payList = ref([
		{
			type: "paypal",
			icon: paypal,
			value: ""
		},
		{
			type: "stripe",
			icon: stripe,
			value: ""
		},
		{
			type: "alipay-hk",
			icon: alipayHk,
			value: "123123"
		},
		{
			type: "alipay-chinese",
			icon: alipayChinese,
			value: "123123"
		}
	])
	window.onSellerSettingsContactUs = () => {
		console.log("contact us")
	}
	const onDownloadDataPrivacy = () => {
		console.log("download data privacy")
	}
	const onStopSelling = () => {
		Modal.confirm({
			title: t("Seller.stopSellingTitle"),
			content: t("Seller.stopSellingTip"),
			okText: t("Seller.confirm"),
			cancelText: t("Seller.cancel"),
			centered: true,
			onOk() {
				console.log("stop selling")
			}
		})
	}
</script>
<style scoped lang="less">
	.settings-index {
		flex: 1;
		overflow-y: auto;
		margin: 0 16rem;
		display: flex;
		gap: 4.2rem;
		> div {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 4.2rem;
			> div {
				border-radius: 1.2rem;
				overflow: hidden;
				border: 0.15rem solid #d1d1d1;
				> .header {
					line-height: 5rem;
					background-color: #f6f6f6;
					padding-left: 2.4rem;
					font-size: 2rem;
					color: #666;
				}
				> .content {
					padding: 2.4rem;
				}
			}
			> .stop {
				border-color: rgba(223, 44, 44, 0.2);
				> .header {
					background-color: rgba(223, 44, 44, 0.2);
				}
			}
			> .notification > .content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 0.8rem;
				> .left {
					> .title {
						font-family: pingfang_medium;
						font-size: 1.6rem;
						color: #000;
					}
					> .tip {
						font-family: pingfang_regular;
						font-size: 1.4rem;
						color: #999;
					}
				}
				> .right {
					.ant-switch {
						width: 4.8rem;
						height: 2.6rem;
					}
				}
			}
			> .payout > .content {
				display: flex;
				flex-direction: column;
				gap: 0.8rem;
				> .header {
					> .title {
						font-family: pingfang_medium;
						font-size: 1.6rem;
						color: #000;
					}
					> .tip {
						font-family: pingfang_regular;
						font-size: 1.4rem;
						color: #999;
					}
				}
				> .pay-item {
					padding: 1.7rem 2.4rem;
					border-radius: 0.8rem;
					border: 0.06rem solid #c4c4c4;
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 0.8rem;
					> .left {
						> img {
							width: auto;
							height: 1.8rem;
							margin-right: 0.8rem;
						}
						> .value {
							font-family: pingfang_regular;
							font-size: 1.2rem;
							color: #585858;
						}
					}
					> .right {
						> button {
							width: 10rem;
							height: 3.8rem;
							border-radius: 2rem;
							font-family: pingfang_heavy;
							font-size: 1.2rem;
							color: #fff;
							background: #000000;
							border: none;
							cursor: pointer;
							&:active {
								opacity: 0.8;
							}
						}
						> .manage {
							background: #fff;
							border: 0.1rem solid #000000;
							color: #000000;
						}
					}
				}
				> .footer {
					margin-top: 2rem;
					border-top: 0.1rem solid #c4c4c4;
					padding: 1.4rem 2.5rem;
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 0.8rem;
					> .left {
						> .title {
							font-family: pingfang_medium;
							font-size: 1.6rem;
							color: #000;
						}
						> .tip {
							font-family: pingfang_regular;
							font-size: 1.2rem;
							color: #999;
						}
					}
					> .right {
						> button {
							width: 10rem;
							height: 3.8rem;
							border-radius: 2rem;
							font-family: pingfang_heavy;
							font-size: 1.2rem;
							color: #bdbdbd;
							background: #f6f6f6;
							border: none;
							// cursor: pointer;
							// &:active {
							// 	opacity: 0.8;
							// }
						}
					}
				}
			}
			> .stop > .content,
			> .data-privacy > .content {
				> .title {
					font-family: pingfang_medium;
					font-size: 1.6rem;
					color: #000;
					margin-bottom: 2.4rem;
				}
				> .tip {
					font-family: pingfang_regular;
					font-size: 1.4rem;
					color: #999;
					margin-bottom: 3rem;
					&:deep(*) {
						cursor: pointer;
						text-decoration: underline;
						color: #0080ed;
					}
				}
				> .btns {
					display: flex;
					justify-content: flex-end;
					gap: 1.2rem;
					> button {
						padding: 0 2.4rem;
						height: 4rem;
						border-radius: 4rem;
						display: flex;
						align-items: center;
						justify-content: center;
						gap: 1rem;
						font-family: pingfang_heavy;
						font-size: 1.2rem;
						color: #fff;
						background: #000000;
						border: none;
						cursor: pointer;
						&:active {
							opacity: 0.8;
						}
					}
				}
			}
			> .stop > .content {
				> .btns {
					> button {
						background: #df2c2c;
					}
				}
			}
		}
	}
</style>
