<!-- 新建项目弹窗 -->
<style lang="less" scoped>
.Main :deep(.el-dialog) {
    background: rgba(38, 39, 42, 1) !important;
    padding: 0px !important;
}
    .Main :deep(.el-input__inner) {
        color: #FFf;
    }



.LeftBox:hover::-webkit-scrollbar,
.CenterBox:hover::-webkit-scrollbar,
.RightBox:hover::-webkit-scrollbar {
    width: 8px;
}

.LeftBox:hover::-webkit-scrollbar-track,
.CenterBox:hover::-webkit-scrollbar-track,
.RightBox:hover::-webkit-scrollbar-track {
    background: #3a3a3a;
}

.LeftBox:hover::-webkit-scrollbar-thumb,
.CenterBox:hover::-webkit-scrollbar-thumb,
.RightBox:hover::-webkit-scrollbar-thumb {
    background: #666;
}

.LeftBox:hover::-webkit-scrollbar-thumb:hover,
.CenterBox:hover::-webkit-scrollbar-thumb:hover,
.RightBox:hover::-webkit-scrollbar-thumb:hover {
    background: #888;
}

.Main :deep(.el-dialog__body)::-webkit-scrollbar {
    width: 0px;
    transition: width 0.3s ease;
}


.Main :deep(.el-dialog__body)::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.Main:hover :deep(.el-dialog__body)::-webkit-scrollbar-thumb {
    background: #666;
}

.Main:hover :deep(.el-dialog__body)::-webkit-scrollbar-thumb:hover {
    background: #888;
}

.my-header {
    display: flex;
    justify-content: space-between;
    background-color: rgba(30, 30, 30, 30);
    align-items: center;
    padding: 10px;
}

.my-header h4 {
    font-size: 18px;
    font-weight: 500;
    color: #FFf;
    margin: 0;
    padding: 0;
}

.contentBox {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    min-height: 500px;
}
.CenterBox {
    flex: 1;
}
.LeftBox,
.CenterBox,
.RightBox {
    height: 100%;
    margin: 0 5px;
    border-radius: 4px;
    overflow: auto;
}

.LeftBox:first-child {
    margin-left: 0;
}

.RightBox:last-child {
    margin-right: 0;
}

.LeftItem {
    height: 150px;
    width: 300px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-bottom: 10px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 4px;
}

.LeftItem span {
    display: block;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    margin-top: 10px;
    margin-left: 10px;
}

.CenterBox {
    padding: 0px 10px;
}

.CenterBottom {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 10px;
    box-sizing: border-box;
}

.CenterItem {
    width: calc(33.333% - 7px);
    height: 150px;
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgb(30, 30, 30);
    color: #fff;
}
.empty-folders {
    width: 100%;
    height: 120px;
    text-align: center;
    line-height: 120px;
    background: rgb(46, 47, 51);
    margin-bottom: 4px;
    padding-top: 30px;
    box-sizing: border-box;
    color: #ffffff85;
    &.sp {
        height: 180px;
        width: 290px;
        border-radius: 8px;
        padding-top: 50px;
        margin-bottom: 15px;
    }
}

.CenterItem:hover {
    background: #0078d4;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 激活大屏分类 */
.ActiveCenterItem {
    background: #0e6ad3;
}

.CenterItem img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px 4px 0 0;
}

.CenterItem span {
    display: block;
    height: 30px;
    font-size: 14px;
    color: #fff;
    padding-left: 10px;
    box-sizing: border-box;
}

.RightBox {
    width: 290px;
    padding-top: 65px;
    box-sizing: border-box;
    color: #f5f5f5;
}


.RightBox img {
    width: 100%;
    height: 180px;
    border-radius: 8px;
}

.RightBox h2 {
    padding: 0px;
    margin: 0px;
    margin-top: 10px;
    font-size: 16px;
    font-weight: 600;
}

.RightBox p {
    height: 110px;
    padding: 0px;
    margin: 0px;
    margin-top: 10px;
    font-size: 14px;
}

.NameBox h4 {
    padding: 0px;
    margin: 10px 0px;
}

.FootBtn {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    .close-btn {
        background: transparent;
        color: #fff;
        border: 1px solid #ffffff90 !important;
    }
}
.is-select {
    border: 1px solid #0078d4;
    position: relative;
    &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: #0078d420;
    }
}
</style>

<template>
    <div class="Main">
        <el-dialog v-model="open" width="1200px" :show-close="false">
            <template #header="{ close, titleId, titleClass }">
                <div class="my-header">
                    <h4 :id="titleId" :class="titleClass">新建项目</h4>
                </div>
            </template>
            <div class="contentBox">
                <div class="LeftBox">
                    <div class="LeftItem" @click="selectType(value)" :class="value.type == selectTypeValue ? 'is-select' : ''" v-for="value in projectClassList"
                        :style="{ backgroundImage: `url(${value.img})` }">
                        <span>{{ value.name }}</span>
                    </div>
                </div>
                <div class=" CenterBox">
                    <div class="CenterTop">
                        <el-tabs v-model="activeName" class="demo-tabs">
                            <el-tab-pane label="全部" name="ALL">
                                <div class="CenterBottom">
                                    <div class="CenterItem" @click="selectTemplate(value)" :class="value.type == selectTemplateValue.type ? 'is-select' : ''" v-for="value in largeScreenClassList">
                                        <img v-if="value.img" :src="value.img" alt="">
                                        <div class="empty-folders" v-else>
                                            <el-icon :size="50"><Files /></el-icon>
                                        </div>
                                        <span>{{ value.name }}</span>
                                    </div>
                                </div>

                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
                <div class="RightBox">
                    <img v-if="selectTemplateValue.img" :src="selectTemplateValue.img" alt="">
                    <div class="empty-folders sp" v-else>
                        <el-icon :size="50"><Files /></el-icon>
                    </div>
                    <h2>{{ selectTemplateValue.name }}</h2>
                    <p>{{ selectTemplateValue.description }}</p>
                    <div class="FileInfo">项目信息：大小{{ selectTemplateValue.size }}MB</div>
                    <div class="NameBox">
                        <h4>项目名称</h4>
                        <el-input v-model="projectName" id="ai-speech-project-name" placeholder="请输入名称" />
                    </div>
                    <div class="FootBtn">
                        <el-button id="ai-speech-close_buildproject" class="close-btn" @click="handleClose">取消</el-button>
                        <el-button id="ai-speech-buildproject" type="primary" @click="submitFun">创建项目</el-button>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>

</template>
<script setup>
import { ref, watch } from 'vue'
import { useRouter } from "vue-router";
const router = useRouter();
const open = ref(false)
const selectTypeValue = ref(1);
const projectName = ref("");
const selectTemplateValue = ref({
    name: '空白项目',
    img: '',
    url: '/dataScreen',
    type: 1,
    description: '空白模板',
    size: 0
});

// 项目分类
const projectClassList = [
    {
        id: 1,
        name: '大屏看板',
        img: '/src/assets/images/sjdp2.png',
        url: '/dataScreen',
        type: 1
    },
    // {
    //     name: '地图可视化',
    //     img: '/src/assets/images/sjdp2.png',
    //     url: '/dataScreen'
    // },
    {
        id: 3,
        name: '3D数字孪生',
        img: '/src/assets/images/sjdp1.png',
        url: '/dataScreen',
        type: 2
    },
    // {
    //     name: '3D地理信息',
    //     img: '/src/assets/images/sjdp2.png',
    //     url: '/dataScreen'
    // },
    // {
    //     name: 'BI看板',
    //     img: '/src/assets/images/sjdp1.png',
    //     url: '/dataScreen'
    // },
]

// 选中项目
const selectedProject = ref(1)

// 大屏分类

const largeScreenClassList = [
    {
        id: 1,
        name: '空白项目',
        img: '',
        url: '/dataScreen',
        type: 1,
        description: '空白模板',
        size: 0
    },
    {
        id: 2,
        name: '新手入门示列',
        img: '/src/assets/images/sjdp2.png',
        url: '/dataScreen',
        type: 2,
        description: '包含基础元素及新手演示视频',
        size: 3
    },
    {
        id: 3,
        name: '大屏基础示列',
        img: '/src/assets/images/sjdp1.png',
        url: '/dataScreen',
        type: 3,
        description: '包含所有2D基础元素的大屏示列',
        size: 5
    },

]
// tab切换
const activeName = ref('ALL')
// 选中大屏
const selectedLargeScreen = ref(1)

// 项目名称

// 接收父级参数
const props = defineProps({
    open: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['update:open'])

// 监听open变化
watch(() => props.open, (newVal) => {
    console.log("触发事件3", newVal)
    open.value = newVal
})

// 监听内部open变化
watch(open, (newVal) => {
    emit('update:open', newVal)
})

const selectType = (data) => {
    selectTypeValue.value = data.type;
}

const selectTemplate = (data) => {
    selectTemplateValue.value = data;
}



// 关闭弹窗
const handleClose = () => {
    open.value = false
}

const submitFun = () => {
    console.log(projectName.value, "=====> 项目名称");
    router.push('/LargeScreen');

}
</script>