<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import { VueDraggable } from "vue-draggable-plus"

//const props = defineProps({
//})
//const emit = defineEmits([
//])
let data = reactive({
	showDrafts: false,
})
const list = ref([
	{ id: "1" },
	{ id: "2" },
	{ id: "3" },
	{ id: "4" },
	{ id: "5" },
	{ id: "6" },
	{ id: "7" },
	{ id: "8" },
	{ id: "9" },
	{ id: "9" },
	{ id: "9" },
	{ id: "9" },
	{ id: "9" },
	{ id: "9" },
	{ id: "10" }
])
const list2 = ref([
	{ id: "1" },
	{ id: "2" },
	{ id: "3" },
	{ id: "4" },
	{ id: "5" },
	{ id: "6" },
	{ id: "7" },
	{ id: "8" },
	{ id: "9" },
	{ id: "10" }
])
const config = ref({
	"data-container-type": "root",
	"data-parent-id": "null",
	animation: 250,
	handle: ".item", // 可拖动的元素
	"ghost-class": "ghost", // 拖动时的类名
	"chosen-class": "chosen", // 选中时的类名
	"drag-class": "drag", // 拖动时的类名
	"swap-threshold": 0.5,
	"empty-insert-threshold": 5,
	"force-fallback": false,
	"fallback-tolerance": 3,
	"scroll-sensitivity": 100,
	"scroll-speed": 10,
	onEnd: (e) => {}
})
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const { showDrafts } = toRefs(data);
</script>
<template>
	<div class="listings">
		<div class="listingsBox listingsBox1">
			<div class="box">
				<div class="title">
					<div class="left">
						<i class="fi fi-rs-comments"></i>
						<span>Active Listings</span>
					</div>
					<div class="right">

					</div>
				</div>
				<VueDraggable
					v-model="list"
					class="list"
					v-bind="config"
					:group="{
						name: 'sortable',
						pull: false,
						put: true
					}"
				>
					<div class="item" v-for="v in list" :key="v.id" :draging="true">
						{{ v.id }}
					</div>
				</VueDraggable>
			</div>
			<div class="openOrCloseDrafts" :class="{'active': showDrafts}" @click="showDrafts = !showDrafts">
				<span class="icon iconfont icon-xiala"></span>
			</div>
		</div>
		<!-- <div class="listingsBox listingsBox2" :class="{'active': showDrafts}">
			<div class="box">
				<VueDraggable
					v-model="list2"
					class="list"
					v-bind="config"
					:group="{
						name: 'sortable',
						pull: true,
						put: true
					}"
				>
					<div class="item" v-for="v in list" :key="v.id" :draging="true">
						{{ v.id }}
					</div>
				</VueDraggable>
			</div>
		</div> -->
	</div>
</template>
<style lang="less" scoped>
	.listings{
		position: absolute;
		width: 100%;
		height: 100%;
		display: flex;
		gap: 2rem;
		.listingsBox{
			background-color: #f9fafa;
			border-radius: 2rem;
			flex: 1;
			position: relative;
			// overflow: hidden;
			display: flex;
			.box{
				width: 100%;
				padding: 2.4rem 4rem;
				padding-bottom: 0;
				flex-direction: column;
				flex: 1;
				> .title{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 3rem;
					> .left{
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-family: pingfang_heavy;
						font-weight: 400;
						font-size: 1.8rem;
						line-height: 130%;
						letter-spacing: 0%;
						gap: 1.2rem;
						> i{
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 2.4rem;
						}
					}
				}
				.list{
					display: flex;
					flex-wrap: wrap;
					gap: 20px;
					.item{
						width: 197px;
						height: 249px;
						border-radius: 20px;
						border: 1.5px solid #C7C7C7;
						&:hover{
							border: 2px solid #000000;
						}
					}
				}
			}
		}
		.listingsBox1{
			flex: 1;
			.box{
				.list{
					justify-content: center;
				}
			}

		}
		.listingsBox2{
			width: 48.8rem;
			transition: all .3s;
			overflow: hidden;
			&.active{
				width: 0;
			}
			.box{
				width: 48.8rem;
			}
		}
		.openOrCloseDrafts{
			position: absolute;
			width: 3.4rem;
			height: 8rem;
			border-top-right-radius: 2rem;
			border-bottom-right-radius: 2rem;
			border-width: 1.5px, 1.5px, 1.5px, 0px;
			border-style: solid;
			border-color: #000000;
			right: 1.5px;
			top: 50%;
			transform: translate(100%,-50%);
			cursor: pointer;
			transition: all 0.3s ease-in-out;
			border-left: none;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			z-index: 2;
			> span{
				transform: rotate(-90deg);
				transition: all .3s;
			}
			&.active{
				> span{
					transform: rotate(90deg);
				}
			}
			&:hover{
				width: 4.5rem;
			}
		}
	}
</style>