<template>
		<a-modal
            class="publish_modal"
            v-model:visible="publish"
            :footer="null"
            width="50%"
            :maskClosable="false"
            :centered="true"
            :closable="false"
            :mask="publishMask"
			:keyboard="false"
			:destroyOnClose="true"
        >
		<div class="publish_btn">
			<div class="collection_closeIcon" @click.stop="cancelDsign()">
				<i class="fi fi-rr-cross-small"></i>
			</div>
		</div>
		<div class="publish_content">
			<div class="modal_title_text">
				<div>Publish</div>
				<div class="modal_title_text_intro"></div>
			</div>
			<div class="publish_content_bottom">
				<div class="publidh_left">
					<div class="publidh_content_item">
						<div class="publidh_content_item_title">Cover Picture</div>
						<div class="publish_content_shrink publish_content_item">
							<img v-lazy="'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542'" alt="">
						</div>
					</div>
					<div class="publidh_left_thubnai publidh_content_item">
						<div class="publidh_content_item_title">Select Cover Picture</div>
						<div class="publidh_left_thubnail_list publish_content_item">
							<img v-lazy="'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center'" alt="">
							<img v-lazy="'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542'" alt="">
							<img v-lazy="'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542'" alt="">
							<img v-lazy="'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542'" alt="">
							<img v-lazy="'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542'" alt="">
							<img v-lazy="'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center'" alt="">
							<img v-lazy="'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center'" alt="">
						</div>
					</div>
				</div>
				<div class="publidh_right">
					<div class="publidh_right_name publidh_content_item">
						<div class="publidh_content_item_title">Name</div>
						<input type="text">
					</div>
					<div class="publidh_right_name publidh_content_item">
						<div class="publidh_content_item_title">Description</div>
						<textarea ref="textarea"></textarea>
					</div>
					<!-- <div class="publidh_right_name publidh_content_item">
						<div class="publidh_content_item_title">Thumbnail preview</div>
						<input type="text">
					</div> -->
					<div class="publidh_right_name publidh_content_item">
						<div class="publidh_content_item_intro">
							<span class="icon iconfont icon-zhuyi"></span>This will publish your work to the square for all users to see.
						</div>
					</div>
					<div class="publidh_right_btn">
						<div class="started_btn" @click="setClose">Close</div>
						<div class="started_btn">Save as draft</div>
						<div class="started_btn" @click="setPublish">Publish</div>
					</div>
				</div>
			</div>
		
		</div>
	</a-modal>

</template>

<script lang="ts">
import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
// import { Https } from "@/tool/https";
// import { getCookie } 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({
    setup() {
        let publish: any = ref(false);//弹窗
		let publishMask:any = ref(false)//弹窗遮罩
		let publishDate:any = reactive({
			publishName:'123123',
			loadingShow:false,
			publishMarginTop:0,
			publishList:[],
			publishIndex:0,//当前图片索引
		})
		// let textarea: any = ref(null)
		// let setCopy = ()=>{
		// 	textarea.value.select()
		// 	document.execCommand("copy");
		// }
		let init = ()=>{
			console.log(213123);
			publish.value = true
			// publishDate.publishList = list
			// publishDate.publishIndex = index
			// let publishList = this.store.state.UploadFilesModule.moodboard
		}
		// let download = ()=>{
		// 	downloadIamge(publishDate.publishList[publishDate.publishIndex].imgUrl)
		// }
		// let setScaleImageIndex = (index:any)=>{
		// 	publishDate.publishIndex = index
		// }
		// let LikeFile = (item:any,str:string)=>{
		// 	const currentInstance = getCurrentInstance();
		// 	let parent:any = currentInstance?.parent
		// 	console.log(parent);
			
		// 	parent.likeFile(item,str)
		// }
	
		// LikeFile(item:any,str:string){
		// 	let parent:any = this.$parent
		// 	parent.likeFile(item,str)
		// },
		let confrimRename = ()=>{
		    
		}
		let cleardate = ()=>{
		    publish.value = false
		}
		let cancelDsign = ()=>{
			Modal.confirm({
                title: 'Your changes will be lost if you navigate away from this page. Are you sure you want to leave this page?',
                icon: createVNode(ExclamationCircleOutlined),
                okText: 'Yes',
                cancelText: 'No',
				mask:false,
                centered:true,
                onOk() {
					cleardate()
                }
            });
		}
		let setPublish= ()=>{
			let _this = this
			Modal.confirm({
                title: 'This will publish your work to the square for all users to see. Please confirm whether to publish?',
                icon: createVNode(ExclamationCircleOutlined),
                okText: 'Yes',
                cancelText: 'No',
				mask:false,
                centered:true,
                onOk() {
                }
            });
		}

        return {
            publish,
			publishMask,
			...toRefs(publishDate),
			// textarea,
			// setCopy,
			init,
			// download,
			// setScaleImageIndex,
			// LikeFile,
			confrimRename,
			cancelDsign,
			setPublish,
        };
    },
    data() {
        return {
            // moodTemplateId: "", //模板id
			
        };
    },
    mounted() {
    },
    methods: {
		// init(list:any,index:any,dialogueIndex:any){
			
		// },
		// cancelDsign(){
		// 	this.publish = false
		// 	// this.publishList = []
		// 	// this.publishIndex = 0
		// },
		// download(){
		// 	// downloadIamge(this.publishList[this.publishIndex].imgUrl)
		// },
		// setScaleImageIndex(index:any){
		// 	// this.publishIndex = index
		// 	// console.log(this.publishIndex);
			
		// },
		// LikeFile(item:any,str:string){
		// 	let parent:any = this.$parent
		// 	parent.likeFile(item,str)
		// },
    },
});
</script>

<style lang="less">
.publish_modal {
	-moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
	.ant-modal-body {
        padding: 0;
		// height: calc(65vh - 6.4rem);
		height: calc(65rem*1.2);
		// background-color: #181818;
    }
	.ant-modal-btn{
		
	}
	.ant-modal-body{
		padding: calc(4rem*1.2) calc(5rem*1.2);
		
	}
	.publish_page{
		overflow-y: auto;
		height: 100%;
		&.publish_page::-webkit-scrollbar{display: none;}
	}

	.fi-rr-down-to-line,.fi-rr-arrow-small-right,.fi-rr-arrow-small-left{
		font-size: 2rem;
	}
    .publish_btn {
		.collection_closeIcon{
			position: absolute;
			top: calc(2rem*1.2);
			right: calc(2rem*1.2);
			cursor: pointer;
			width: calc(4rem*1.2);
			height: calc(4rem*1.2);
			display: flex;
			align-items: center;
			justify-content: center;
			&.left{
				left: calc(2rem*1.2);
			}
			.fi-rr-cross-small::before{
				padding: calc(.2rem*1.2);
				border-radius: 5px;
				border: solid 2px rgba(0, 0, 0, 0.22);
				transition: .3s all;
				color: rgba(0, 0, 0, 0.7);
			}
			&.collection_closeIcon:hover .fi-rr-cross-small::before{
				border: solid 2px rgba(0, 0, 0, 5);
				color: rgba(0, 0, 0, 1);
			}
			.fi-rr-down-to-line{
				transition: .3s all;
				color: rgba(0, 0, 0, .5);
			}
			.fi-rr-down-to-line:hover{
				color: rgba(0, 0, 0, 1);
			}
		}
	}
	.publish_content{
		display: flex;
	    flex-direction: column;
		height: 100%;
	}
	.publish_content_bottom{
		--border-color: #c4c4c4;
		display: flex;
		justify-content: space-between;
		flex: 1;
		.publidh_left,.publidh_right{
			display: flex;
			flex-direction: column;
		}
		.publidh_content_item{
			margin-bottom: 2rem;
			.publidh_content_item_title{
				font-weight: 600;
				font-size: 1.8rem;
				margin-bottom: 1rem;
			}
			.publidh_content_item_intro{
				font-size: 1.4rem;
			}
			input{
				width: 100%;
				border-radius: 1rem;
				height: 4rem;
				padding-left: 2rem;
				font-size: 2rem;
				border: .2rem solid var(--border-color);
			}
			textarea{
				flex: 1;
				margin-top: var(--padding);
				width: 100% !important;
				height: 10rem !important;
				border-radius: 1rem;
				border: .2rem solid var(--border-color);
				font-size: 1.8rem;
				padding: 1rem;
				color: #575757;
				outline: none; /* 清除默认焦点样式 */
			}
			textarea:focus{
				border: .2rem solid var(--border-color);
				outline: none; /* 清除默认焦点样式 */
			}
		}
		.publidh_content_item:last-child{
			margin-bottom: 0;
		}
		.publidh_left{
			width: 45%;
			
			.publish_content_shrink{
				width: 100%;
				img{
					width: 100%;
					height: 100%;
					object-fit: contain;
					max-height: 30rem;
				}
			}
			.publidh_left_thubnai{
				flex: 1;
				.publidh_left_thubnail_list{
					display: flex;
					overflow-x: auto;
					height: 24rem;
					img{
						height: 100%;
						margin-right: 1rem;
					}
					img:last-child{
					    margin-right: 0;
					}
				}
			}
		}
		.publidh_right{
			width: 45%;
			.publidh_right_btn{
				margin-top: auto;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				>div:nth-child(1){
					margin-right: auto;
				}
				>div:nth-child(2){
					margin-right: 1rem;
				}
			}
		}
	
	}
}
</style>