<template>
	<div class="indexPage">
		<div class="indexCon">
			<div class="logo"></div>
			<div class="title_main"></div>
			<div class="cloud_left_1"></div>
			<div class="cloud_right_1"></div>
			<div class="luckybag_left"></div>
			<div class="luckybag_right"></div>
			<div class="icon_left_1"></div>
			<div class="lucky_bag"></div>
			<div class="lucky_bag_2">
				<div class="prize_num">{{ prizeResult }}<span>元</span></div>
			</div>
			<div class="notice">
				<span class="icon"
					><img src="../assets/img/laba.png" alt="" srcset=""
				/></span>
				<span class="num"
					>活动已有{{
						store.state.userAccount.participantNum
					}}人参与</span
				>
			</div>
			<div class="cloud_left_2"></div>
			<div class="icon_left_2"></div>
			<div class="cloud_right_2"></div>
			<!-- 大转盘 -->
			<div class="zhuanpan"></div>
			<div class="icon_right_2"></div>
			<div class="icon_right_3"></div>
			<div class="cloud_left_3"></div>
			<div class="cloud_right_3"></div>
			<div class="icon_right_1"></div>
			<div class="select_box"></div>
			<div class="draw_btn" @click="drawBtn"></div>
			<div class="rule_btn" @click="showRluesBtn"></div>
			<div class="prize_btn" @click="showMyPrizePop"></div>
			<div class="rule_btn_text"></div>
			<div class="prize_btn_text"></div>
			<div class="caidai"></div>
		</div>
		<!-- 活动列表 -->
		<div class="activityCon">
			<div class="activity_box">
				<div class="activity_title">
					<img src="../assets/img/activity_title.png" alt="" />
				</div>
				<div class="activity_list">
					<div
						class="activity_li"
						v-for="(item, index) in activityList"
						:key="index"
						:style="{
							'background-image': 'url(' + item.banner + ')',
						}"
						v-show="item.show"
					>
						<div
							class="btn"
							:style="{
								'background-image': 'url(' + item.btnImg + ')',
							}"
							@click="activityBtn(item)"
						></div>
					</div>
				</div>
			</div>
			<div class="cloud_bottom"></div>
		</div>

		<!-- 活动规则弹窗 -->
		<Rules v-if="showRulesPop" @RulesPop="hideRulesPop" />
		<!-- 我的奖品弹窗 -->
		<MyPrize v-if="showMyPrize" @MyPrize="myPrizePop" />
		<!-- 添加专属服务人员企微弹窗 -->
		<ServiceList v-if="showServicePop" @ServicePop="hideServicePop" />

		<LuckyWheel v-if="true" />
	</div>
</template>

<script setup>
import {
	onBeforeMount,
	onMounted,
	defineEmits,
	defineProps,
	reactive,
	ref,
	toRefs,
	getCurrentInstance,
	computed,
} from "vue";
import gsap from "gsap";
import axios from "axios";
import { Toast, Dialog } from "vant";
import { useStore } from "vuex";
// import { get_authorize, get_jssdk } from '@/api/authorize-api'
import service from "@/api/httpServe";
import qs from "qs";
import h5plugin from "@/utils/plugin";
import Rules from "@/components/Rules";
import MyPrize from "@/components/MyPrize";
import ServiceList from "@/components/ServiceList";
import LuckyWheel from "@/components/LuckyWheel";

// 初始化
const emit = defineEmits(["indexPage"]); // 声明触发事件，对应父组件上面的方法
const props = defineProps({ sendMessage: Object }); // 获取props
const store = useStore(); //初始化vuex
const { proxy } = getCurrentInstance(); //初始化全局方法：plugin工具箱

// 活动信息
const participantNum = ref(store.state.userAccount.participantNum); // 活动参与人数prizeResult
const prizeResult = ref(store.state.userAccount.prizeResult); // 中奖金额

// 页面控制
const showRulesPop = ref(false);
const showMyPrize = ref(false);
const showServicePop = ref(false);

// 活动列表
const activityList = reactive([
	{
		id: 1,
		show: true,
		banner: require("../assets/img/activity_1.png"),
		btnImg: require("../assets/img/li_btn_1.png"),
	},
	{
		id: 2,
		show: true,
		banner: require("../assets/img/activity_2.png"),
		btnImg: require("../assets/img/li_btn_2.png"),
	},
	{
		id: 3,
		show: true,
		banner: require("../assets/img/activity_3.png"),
		btnImg: require("../assets/img/li_btn_3.png"),
	},
	{
		id: 4,
		show: true,
		banner: require("../assets/img/activity_4.png"),
		btnImg: require("../assets/img/li_btn_4.png"),
	},
	{
		id: 5,
		show: true,
		banner: require("../assets/img/activity_5.png"),
		btnImg: require("../assets/img/li_btn_5.png"),
	},
]);

// 页面挂载前
onBeforeMount(() => {
	// 获取企微二维码
	gerCardId(94207);
	getInfo();
	getMyPrizeRecored();
	getBrithday();
	getActivityNum();
});

// 页面挂载后
onMounted(() => {});

const btn = () => {
	// Toast('项目开发中');
	emit("indexPage", "hello");

	Dialog.alert({
		title: "招商证券88司庆活动",
		message: "项目开发中",
		confirmButtonText: "确定",
		showCancelButton: true,
	})
		.then((e) => {
			// 更新openid
			store.commit({ type: "updateOpenid", openid: "openid110" });

			console.log(e, store.state.userAccount);
		})
		.catch((e) => {
			console.log(e);
		});
};

// 抽奖按钮
const drawBtn = () => {
	console.log("抽奖：");
	getluckyBag(1);
};

// 活动点击
const activityBtn = (item) => {
	console.log(item.id);

	if (item.id == 1) {
		showServicePop.value = true;
	}
};

// 活动规则弹窗
const showRluesBtn = () => {
	showRulesPop.value = true;
};
const hideRulesPop = () => {
	showRulesPop.value = false;
};

// 我的奖品页面
const showMyPrizePop = () => {
	showMyPrize.value = true;
};
const myPrizePop = () => {
	showMyPrize.value = false;
};

// 企微弹窗
const hideServicePop = () => {
	showServicePop.value = false;
};

// 招商证券授权
const getAuthorize = (scopeState) => {
	let href = window.location.href;
	let h_idx = window.location.href.indexOf("#");
	let out_href = href.slice(0, h_idx);
	// return `${process.env.VUE_APP_ZS_DOMAIN}/wxauth/official/account/authorize?redirectUrl=${out_href}&scope=${1}"`;
	window.location.href = `${process.env.VUE_APP_ZS_DOMAIN}/wxauth/official/account/authorize?redirectUrl=${out_href}&scope=${scopeState}`;
};

// 查询员工企业微信二维码
const gerCardId = (carid) => {
	service
		.get(
			process.env.VUE_APP_API + "/cms-activity/cms88/card/qrcode/" + carid
		)
		.then((res) => {
			console.log("企微二维码：", res.data.data);
			store.commit({
				type: "updateeEqcodeImg",
				eqcodeImg: res.data.data,
			});
		});
};

// 获取绑定的资金账号
const getInfo = () => {
	service
		.post(process.env.VUE_APP_API + "/cms-activity/cms88/nkh/info", {})
		.then((res) => {
			console.log("资金账号：", res);
		});
};

// 我的红包记录
const getMyPrizeRecored = () => {
	service
		.post(process.env.VUE_APP_API + "/cms-activity/cms88/prize/list", {})
		.then((res) => {
			console.log(res);
		});
};

// 查询是否添加了企微： isInActivityDate 0否 1是
const getIsAddService = () => {
	let isInActivityDate = 0;
	service
		.post(
			process.env.VUE_APP_API +
				"/cms-activity/cms88/qywx/isadded/" +
				isInActivityDate
		)
		.then((res) => {
			console.log(res);
		});
};

// 抽取红包 type为红包类型 1为参与红包 2为加企微
const getluckyBag = (id) => {
	let type = id;
	service
		.post(
			process.env.VUE_APP_API +
				"/cms-activity/cms88/redpacket/draw/" +
				type,
			{}
		)
		.then((res) => {
			console.log(res);
		});
};

// 活动参与人数
const getActivityNum = () => {
	service
		.post(process.env.VUE_APP_API + "/cms-activity/cms88/user/count/")
		.then((res) => {
			console.log(res.data.data);

			store.commit({
				type: "updateParticipantNum",
				participantNum: res.data.data,
			});
		});
};

// 是否在活动期间生日
const getBrithday = () => {
	service
		.post(
			process.env.VUE_APP_API + "/cms-activity/cms88/user/isin/birthday",
			{}
		)
		.then((res) => {
			console.log(res);
		});
};
</script>

<style lang="scss" scoped>
.indexPage {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: hidden;
	overflow-y: scroll;

	.indexCon {
		// @include pos(100%, 1090px, 0, 0);
		width: 100%;
		height: 1090px;
		position: relative;
		top: 0;
		left: 0;
		@include bg_pos("../assets/img/top_bg.jpg");
		// overflow: hidden;

		.logo {
			@include pos(241px, 36px, 31px, 41px);
			@include bg_pos("../assets/img/logo.png");
			pointer-events: none;
		}

		.notice {
			@include pos(350px, 48px, 200px, 592px);
			@include bg_pos("../assets/img/notice_box.png");
			pointer-events: none;
			align-self: center;
			justify-content: center;

			display: flex;
			font-size: 20px;

			.icon {
				width: 26px;
				height: 48px;
				// @include bg_pos('../assets/img/laba.png');

				line-height: 54px;

				img {
					width: 26px;
					height: 25px;
				}
			}

			.num {
				height: 48px;
				line-height: 48px;
			}
		}

		.title_main {
			@include pos(547px, 221px, 107px, 108px);
			@include bg_pos("../assets/img/title_main.png");
			pointer-events: none;
		}

		.caidai {
			@include pos(641px, 503px, 47px, 79px);
			@include bg_pos("../assets/img/caidai.png");
			pointer-events: none;
		}

		.luckybag_left {
			@include pos(144px, 138px, 0px, 551px);
			@include bg_pos("../assets/img/luckybag_left.png");
			pointer-events: none;
		}

		.luckybag_right {
			@include pos(118px, 110px, 615px, 503px);
			@include bg_pos("../assets/img/luckybag_right_2.png");
			pointer-events: none;
		}

		.icon_left_1 {
			@include pos(54px, 52px, 104px, 605px);
			@include bg_pos("../assets/img/icon_left_1.png");
			pointer-events: none;
		}

		.icon_left_2 {
			@include pos(63px, 61px, 11px, 652px);
			@include bg_pos("../assets/img/icon_left_2.png");
			pointer-events: none;
		}

		.icon_right_1 {
			@include pos(81px, 80px, 556px, 400px);
			@include bg_pos("../assets/img/icon_right_1.png");
			pointer-events: none;
		}

		.icon_right_2 {
			@include pos(70px, 65px, 567px, 573px);
			@include bg_pos("../assets/img/icon_right_2.png");
			pointer-events: none;
		}

		.icon_right_3 {
			@include pos(103px, 108px, 633px, 600px);
			@include bg_pos("../assets/img/luckybag_right.png");
			pointer-events: none;
		}

		.cloud_left_1 {
			@include pos(214px, 147px, 0px, 523px);
			@include bg_pos("../assets/img/cloud_left_1.png");
			pointer-events: none;
		}

		.cloud_left_2 {
			@include pos(375px, 176px, 0px, 616px);
			@include bg_pos("../assets/img/cloud_left_2.png");
			pointer-events: none;
		}

		.cloud_left_3 {
			@include pos(151px, 136px, 0px, 645px);
			@include bg_pos("../assets/img/cloud_left_3.png");
			pointer-events: none;
		}

		.cloud_right_1 {
			@include pos(270px, 215px, 480px, 477px);
			@include bg_pos("../assets/img/cloud_right_1.png");
			pointer-events: none;
		}

		.cloud_right_2 {
			@include pos(375px, 202px, 375px, 595px);
			@include bg_pos("../assets/img/cloud_right_2.png");
			pointer-events: none;
		}

		.cloud_right_3 {
			@include pos(113px, 108px, 639px, 686px);
			@include bg_pos("../assets/img/cloud_right_3.png");
			pointer-events: none;
		}

		.lucky_bag {
			@include pos(308px, 355px, 227px, 356px);
			@include bg_pos("../assets/img/luckybag.png");
			pointer-events: none;
			visibility: hidden;
		}

		.lucky_bag_2 {
			@include pos(330px, 345px, 210px, 348px);
			@include bg_pos("../assets/img/luckybag_2.png");
			pointer-events: none;

			// display: flex;

			.prize_num {
				@include pos(330px, 50px, 0px, 79px);
				font-weight: 700;
				font-size: 59px;
				color: #ff480e;
				text-align: center;

				span {
					color: #ca2f0a;
					font-size: 24px;
					font-weight: 700;
				}
			}
		}

		.select_box {
			@include pos(270px, 325px, 239px, 666px);
			@include bg_pos("../assets/img/select_box.png");
			pointer-events: none;
		}

		.draw_btn {
			@include pos(216px, 252px, 273px, 810px);
			@include bg_pos("../assets/img/draw_btn.png");
		}

		.rule_btn {
			@include pos(137px, 153px, 75px, 883px);
			@include bg_pos("../assets/img/rule_btn.png");
		}

		.rule_btn_text {
			@include pos(98px, 26px, 92px, 1035px);
			@include bg_pos("../assets/img/rule_btn_text.png");
		}

		.prize_btn {
			@include pos(137px, 153px, 541px, 883px);
			@include bg_pos("../assets/img/prize_btn.png");
		}

		.prize_btn_text {
			@include pos(98px, 26px, 558px, 1035px);
			@include bg_pos("../assets/img/prize_btn_text.png");
		}

		.zhuanpan {
			@include pos(750px, 465px, 0px, 657px);
			@include bg_pos("../assets/img/zhuanpan.png");
			pointer-events: none;
			overflow: hidden;

			.liwu {
				@include pos(750px, 465px, 0px, 40px);
				display: flex;
				border-radius: 50%;
				// background-color: rgb(255, 0, 0);
				// width: 1146px;
				// height: 812px;

				div {
					border: 2px solid #000;
					width: 20%;
					height: 110px;
					font-size: 36px;
					font-weight: 700;
					color: #fc4638;
					text-align: center;
					line-height: 110px;
					border-radius: 50%;
					transform: rotate(30deg);
				}
			}
		}
	}

	.activityCon {
		width: 750px;
		@include bg_pos("../assets/img/activity_bg.jpg");

		.activity_box {
			width: 700px;
			// height: 100%;
			margin: 0 auto;
			margin-top: 30px;
			@include bg_pos("../assets/img/activity_box.png");
			box-sizing: border-box;

			.activity_title {
				width: 633px;
				height: 120px;
				margin: 0 auto;
				// margin-top: 55px;
				display: flex;
				align-items: center;
				justify-content: center;

				img {
					width: 633px;
					height: 29px;
				}

				// @include bg_pos('../assets/img/activity_title.png');
			}

			.activity_list {
				width: 633px;
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				margin-top: 20px;

				.activity_li {
					width: 633px;
					height: 166px;
					margin-bottom: 30px;
					background-size: 100%;
					position: relative;

					.btn {
						width: 121px;
						height: 121px;
						position: absolute;
						top: 16px;
						left: 479px;
						background-size: 100%;
					}
				}
			}
		}

		.cloud_bottom {
			width: 750px;
			height: 255px;
			margin-top: -160px;
			@include bg_pos("../assets/img/cloud_bottom.png");
		}
	}
}
</style>