<template>
	<div v-if="article" class="article-music">
		<p class="time" v-text="articleTime" @click="isCreatedAt = !isCreatedAt"></p>
		<!-- 光盘 -->
		<div class="disk-box" v-if="article.extendData">
			<div class="cover">
				<img :src="coverUrl" alt="专辑封面" />
			</div>
			<!-- SVG 绘制扇形文字 -->
			<div class="disk">
				<svg viewBox="0 0 100 100">
					<path d="M 0,50 a 50,50 0 1,1 0,1 z" id="circle" />
					<text fill="#F4F4F4">
						<textPath xlink:href="#circle">{{ article.extendData.title }}</textPath>
					</text>
				</svg>
			</div>
		</div>
		<markdown-view class="description" :content="article.data" />
		<div class="content selectable" v-if="article.extendData">
			<section class="list">
				<h4 class="title">曲目：</h4>
				<ul class="items">
					<li class="item" v-for="(item, i) in article.extendData.list" :key="i" :data-i="`${i + 1}.`">
						<div class="value">
							<span v-text="item.title"></span>
							<icon v-if="item.audio" class="icon cur-pointer" name="MUSIC" @click="doActiveMedia(i)" />
							<icon v-if="item.video" class="icon cur-pointer" name="VIDEO" @click="doActiveMedia(i)" />
						</div>
						<div v-if="activeMediaIndex === i" class="media">
							<audio v-if="item.audio" :src="Toolkit.toResURL(item.audio)" controls></audio>
							<video v-if="item.video" :src="Toolkit.toResURL(item.video)" controls></video>
						</div>
					</li>
				</ul>
			</section>
			<section class="info">
				<h4 class="title">信息：</h4>
				<ul class="items">
					<li class="item" v-for="(item, i) in article.extendData.info" :key="i">
						<span class="label diselect" v-text="`${item.key}：`"></span>
						<span class="gray" v-text="item.value"></span>
					</li>
				</ul>
			</section>
		</div>
	</div>
	<comment
		v-if="SettingMapper.is(SettingKey.ENABLE_COMMENT) && article && article.showComment"
		:bizType="CommentBizType.ARTICLE"
		:bizId="article.id!"
		:titleStickyOffset="80"
		:canComment="article.canComment"
	/>
</template>

<script lang="ts" setup>
import {
	ArticleAttachType,
	ArticleMusicExtendData,
	ArticleView,
	CommentBizType,
	CommonAPI,
	Icon,
	MarkdownView,
	SettingKey,
	SettingMapper,
	Time,
	Toolkit
} from "timi-web";
import { Comment } from "timi-tdesign-pc";

const props = defineProps<{
	article?: ArticleView<ArticleMusicExtendData>,
}>();
const { article } = toRefs(props);

const isCreatedAt = ref<boolean>(false);
const articleTime = computed(() => {
	if (article.value) {
		if (isCreatedAt.value || !article.value.updatedAt) {
			return "发布于 " + Time.toPassedDateTime(article.value.createdAt);
		} else {
			return "编辑于 " + Time.toPassedDateTime(article.value.updatedAt);
		}
	}
	return "";
});

// 专辑封面
const coverUrl = computed(() => {
	if (article.value && article.value.attachmentList) {
		for (let i = 0; i < article.value.attachmentList.length; i++) {
			const item = article.value.attachmentList[i];
			const attachType = (<any>ArticleAttachType)[item.attachType!];
			if (attachType === ArticleAttachType.COVER) {
				return CommonAPI.getAttachmentReadAPI(item.mongoId);
			}
		}
	}
	return undefined;
});

// 展开可播放媒体
const activeMediaIndex = ref();
function doActiveMedia(index: number) {
	if (index === activeMediaIndex.value) {
		activeMediaIndex.value = undefined;
	} else {
		activeMediaIndex.value = index;
	}
}
</script>

<style lang="less" scoped>
.article-music {

	.time {
		text-align: center;
	}

	.disk-box {
		width: 628px;
		height: 430px;
		margin: 12px auto;
		display: flex;
		position: relative;
		align-items: center;

		.cover {
			left: 3rem;
			width: 456px;
			height: 428px;
			z-index: 2;
			padding: 2px 0 0 2px;
			position: absolute;
			transition: .3s;

			/* 蒙板 */
			&::after {
				content: '';
				top: 0;
				left: 0;
				width: 458px;
				height: 430px;
				z-index: 3;
				position: absolute;
				background: url('~@/assets/img/disk.png') no-repeat;
			}

			img {
				width: 100%;
				height: 100%;
				border: var(--tui-border);
				box-shadow: var(--tui-shadow);
			}
		}

		.disk {
			top: 50%;
			right: 3rem;
			color: #F4F4F4;
			width: 16rem;
			height: 16rem;
			border: 3px solid #888;
			padding: 40px;
			z-index: 1;
			position: absolute;
			font-size: .5rem;
			transform: rotateZ(50deg);
			transition: .3s;
			margin-top: calc(-43px - 8rem);
			background: #212121;
			border-radius: 50%;

			&::after {
				content: '';
				top: 50%;
				left: 50%;
				width: 30px;
				height: 30px;
				margin: -23px 0 0 -23px;
				border: 8px solid #BBB;
				position: absolute;
				background: #F4F4F4;
				border-radius: 50%;
			}

			svg {
				display: block;
				overflow: visible;

				path {
					fill: none;
				}
			}
		}

		&:hover,
		&:active {

			.cover {
				left: 0;
				transition: 520ms var(--tui-bezier);
			}

			.disk {
				right: 0;
				transform: rotateZ(120deg);
				transition: 520ms var(--tui-bezier);
			}
		}
	}

	.description {
		padding: 1rem;
	}

	.content {
		display: flex;
		padding: 12px 20px;
		flex-wrap: wrap;
		justify-content: space-between;

		.list {
			flex: 10;
			border: 1px solid #CDDEF0;
			min-width: 440px;
			background: #FFF;
			margin-right: 1.5rem;

			.title {
				margin: 0;
				padding: .5rem 1rem;
				background: #CDDEF0;
			}

			.items {
				margin: 0;
				position: relative;
				list-style: none;
				padding-left: 0;

				.item {
					padding: 4px 0;
					display: flex;
					line-height: 1.5;
					flex-direction: column;

					&::before {
						content: attr(data-i);
						color: #525870;
						width: 32px;
						height: 32px;
						position: absolute;
						text-align: right;
						font-weight: bold;
					}

					&:nth-child(2n) {
						background: #F4F4F4;
					}

					.value {
						display: flex;
						align-items: center;
						text-indent: 2.5em;

						.icon {
							margin-left: .5rem;

							&:hover {
								fill: #FF7A9B;
							}
						}
					}

					.media {
						display: flex;
						justify-content: center;

						audio,
						video {
							width: calc(100% - 5em);
							margin: 4px auto;
							border: var(--tui-border);
							box-shadow: var(--tui-shadow);
						}

						audio {
							height: 2.5rem;
							background: #F1F3F4;
						}
					}
				}
			}
		}

		.info {
			color: #666;
			flex: 2;
			min-width: 220px;
			text-align: left;
			line-height: 1.6;
			margin-bottom: 24px;

			.title {
				margin: .5rem 0 0 0;
			}

			.items {
				padding: 4px;
				font-size: 12px;
				margin-top: 0;

				.item {
					padding: 6px 0;
					line-height: 1.5;
					border-bottom: 1px dashed #777;

					.label {
						color: #525870;
						font-weight: bold;
					}
				}
			}
		}
	}
}


@media screen and (max-width: 680px) {
	.article-music {

		.disk-box {
			width: calc(628px * .5);
			height: calc(430px * .5);

			.cover {
				left: 3rem;
				width: calc(456px * .5);
				height: calc(428px * .5);

				&::after {
					width: calc(458px * .5);
					height: calc(430px * .5);
				}
			}

			.disk {
				width: calc(16rem * .4);
				height: calc(16rem * .4);
				margin-top: calc(-43px - 8rem * .4);
			}
		}
	}
}
</style>
