<template>
	<a-modal
		class="habitSetStyle_modal generalModel"
		v-model:visible="habitSetStyle"
		:footer="null"
		width="50%"
		:maskClosable="false"
		:centered="true"
		:closable="false"
		:mask="habitSetStyleMask"
		:keyboard="false"
		:destroyOnClose="true"
	>
	<div class="generalModel_btn">
		<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
			<i class="fi fi-rr-cross-small"></i>
		</div>
	</div>
	<div class="habitSetStyle_content" v-hoverAnmi>
		<div class="modal_title_text">
			<div>Style</div>
			<div class="modal_title_text_intro"></div>
		</div>
		<div class="habitSetStyle_content_bottom">
			<div class="content_bottom_item" v-for="item in styleList">
				<div class="content_bottom_item_border" :class="{active:item.id == selectStyleId}" @click="setItemSelect(item)">
					{{ item.name}}
				</div>
			</div>
		</div>
		<div class="habitSetStyle_ok started_btn" @click="setOk">
			OK
		</div>
	</div>
	<div class="mark_loading" v-show="isShowMark">
		<a-spin size="large" />
	</div>
</a-modal>
</template>

<script lang="ts">
import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
// import { getCookie } from "@/tool/cookie";
import { Https } from "@/tool/https";
import { getCookie,setCookie } from "@/tool/cookie";
// import domTurnImg from '@/tool/domTurnImg'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal,message } from 'ant-design-vue';
import { downloadIamge } from "@/tool/util";

export default defineComponent({
emits:['setParentData','setWorkspaceStyle'],

setup(props,{emit}) {
	let habitSetStyle: any = ref(false);//弹窗
	let habitSetStyleMask:any = ref(false)//弹窗遮罩
	let habitSetStyleData:any = reactive({
		styleList:[],
		selectStyleId:'',
		isShowMark:false,
	})
	let getStyleList = ()=>{
		habitSetStyleData.isShowMark = true
		Https.axiosPost(Https.httpUrls.getStyleList, {}).then(
			(rv) => {
				habitSetStyleData.isShowMark = false
				rv.forEach((item:any) => {
					let name = item.value
					item.value = item.name
					item.name = name
				});
				habitSetStyleData.styleList = rv
			}
		).catch(res=>{
			habitSetStyleData.isShowMark = false
		});
	}
	let init = ()=>{
		habitSetStyle.value = true
		if(habitSetStyleData.styleList.length == 0){
			getStyleList()
		}
		// habitSetStyleData.selectStyleId = 'feng2'
	}
	let setCover = (item:any)=>{
		habitSetStyleData.subPublishDate.coverId = item.designOutfitId
		habitSetStyleData.selectDate.url = item.url

	}
	let cleardata = ()=>{
		habitSetStyle.value = false
		habitSetStyleData.isShowMark = false
		setParentData()
	
	}
	let setParentData = ()=>{
		emit('setParentData')
	}
	
	let cancelDsign = ()=>{
		cleardata()
	}
	let setOk= ()=>{
		emit('setWorkspaceStyle',habitSetStyleData.selectStyleId)
		cleardata()
	}
	let setItemSelect = (item:any)=>{
		habitSetStyleData.selectStyleId = item.id
	}
	return {
		habitSetStyle,
		habitSetStyleMask,
		...toRefs(habitSetStyleData),
		init,
		setCover,
		cancelDsign,
		setItemSelect,
		setOk,
	};
},
data() {
	return {
		// moodTemplateId: "", //模板id
		
	};
},
directives:{
	hoverAnmi:{
		updated (el) {
			var elements = document.querySelectorAll(".habitSetStyle_modal .content_bottom_item");
			el.addEventListener("mousemove", function (event:any) {
				// 获取鼠标位置
				var mouseX = event.pageX;
				var mouseY = event.pageY;

				// 遍历元素并输出距离鼠标的坐标
				for (var i = 0; i < elements.length; i++) {
					var element:any = elements[i];
					var rect = element.getBoundingClientRect();
					var elementX = rect.left + window.pageXOffset;
					var elementY = rect.top + window.pageYOffset;

					var distanceX = mouseX - elementX;
					var distanceY = mouseY - elementY;
					
					// 将距离值设置到每一个卡片元素上面
					element.style.setProperty('--x', distanceX + 'px');
					element.style.setProperty('--y', distanceY + 'px');
				}
			});
		}
	}
},
mounted() {
	
},
methods: {
},
});
</script>

<style lang="less">
.habitSetStyle_modal {
	.habitSetStyle_content{
		display: flex;
		flex-direction: column;
		height: 100%;
		.habitSetStyle_content_bottom{
			--border-color: #c4c4c4;
			display: flex;
			flex: 1;
			flex-wrap: wrap;
			align-content: flex-start;
			.content_bottom_item{
				width: calc((100% / 4) - (.8 * 1rem));
				// width: calc(100% / 4);
				// padding: 0 1rem;
				border-radius: 2rem;
				margin-right: 1rem;
				margin-bottom: 1rem;
				height: 10rem;
				background: #f3f3f3;
				position: relative;
				cursor: pointer;
				.content_bottom_item_border {
					position: absolute;
					inset: .2rem;
					background: #f3f3f3;
					border-radius: 2rem;
					color: #595959;
					font-weight: 600;
					font-size: 2rem;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			.content_bottom_item:nth-child(4n){
				margin-right: 0rem;
			}
			.content_bottom_item::before {
				content: '';
				position: absolute;
				width: calc(100% + .2rem);
				height: calc(100% + .2rem);
				top: 50%;
				left: 50%;
				border-radius: 2rem;
				transform: translate(-50%, -50%);
				background: radial-gradient(50px circle at var(--x) var(--y),#39215b 0,transparent 100%);;
			}
			.content_bottom_item .active{
				background: #39215b;
				color: #fff;
			}
		}
		.habitSetStyle_ok{
			width: 60%;
			text-align: center;
			margin: 0 auto;
		}
	}
	
}
</style>