<script lang="tsx">
	import { defineComponent } from "vue";
	import store from "@/store"
	import { Dialog } from 'vant';
	import { useRouter } from "vue-router";
	export default defineComponent({
		props: {
			currentSubject: Object as any,
			skillsShow: Boolean,
		},
		emits: {
			subjectAudioPlay: (type: "读题" | "读官方解释" | "读技巧解释" | "读题+答案") => {
				return undefined;
			},
			addCurrentQuestion: () => {
				return undefined;
			},
			"update:skillsShow": (value: boolean) => {
				return value;
			},
		},
		setup(props, { emit }) {
			//该功能就是vip专门使用
	const router = useRouter()
	const vipClick =(index :number)=>{
				let vipButtonList :[any] = [{
					name:"读题+答案"					
				},
				{
					name:"读题"


				},
				{
					name:"读技巧解释"


					
				}]
				if (store.getters.getIsVip||router.currentRoute.value.path=="/exerciseFree") {
					
					switch(index){
						case 0:
							console.log("触发vip")
							emit("subjectAudioPlay", vipButtonList[index].name);
						break;
						case 1:
							emit("subjectAudioPlay", vipButtonList[index].name);
						break;
						case 2:
								emit("subjectAudioPlay", vipButtonList[index].name);
								emit("update:skillsShow", true);
						break;

					}

				}
				else{
					Dialog.confirm({
						 title: '温馨提示',
  						  message: '请购买会员后使用',
							confirmButtonText:"购买"
   
					}).then(()=>{
						router.push("/buyVip")
					})
				}
			}
			return () => {
				return (
					<div class="function-list">
						<div
							class="function-item"
							onClick={() => {
								
								emit("addCurrentQuestion");
							}}>
							<m-icon type={props.currentSubject?.isCollection ? "shoucanghuang" : "shoucanghui"} size="25px" />
							<span>收藏</span>
						</div>
						<div
							class="function-item"
							onClick={()=>{
								// emit("subjectAudioPlay", "读题+答案");
								vipClick(0);
							}}>
							<m-icon type="a-dtda" size="25px" />
							<span>读题+答案</span>
						</div>
						<div
							class="function-item"
							onClick={() => {
								//emit("subjectAudioPlay", "读题");
								vipClick(1);
							}}>
							<m-icon type="duti" size="25px" />
							<span>读题</span>
						</div>
						<div
							class="function-item"
							onClick={() => {
								vipClick(2);
							}}>
							<m-icon type="jqjj" size="25px" />
							<span>技巧讲解</span>
						</div>
					</div>
				);
			};
		},
	});
</script>

<style lang="scss">
.function-list {
	width: 100%;
	font-size: 13px;
	display: flex;
	justify-content: space-around;
	padding: 15px;
	box-sizing: border-box;
	.function-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 13px;
		font-weight: 400;
		color: #8a9099;
		span {
			margin-top: 5px;
		}
	}
}
</style>
