<template>
    <div class="bgmr vh100 p-20 over-y-auto">
        <div class="flex gap-20">
            <el-card class="flex-1 round-12" shadow="hover">
                <div class="flex gap-60">
                    <div class="flex-1">
                        <div>
                            <div class="font-bold flex justify-between">
                                <span>平台 UI 遮挡排查蒙版</span>
                                <span class="fs-12 color-888 fw-500">预审防遮挡违规</span>
                            </div>
                            <div class="bg-47 flex gap-10 mt-10 round-4 p-4">
                                <div v-for="(item, index) in ptTabs" :key="index" @click="ptIndex = index"
                                    class="round-4 py-4 px-10 pointer"
                                    :class="ptIndex === index ? 'bg-main color-fff' : ''">
                                    <span>{{ item.label }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="mt-40">
                            <div class="font-bold flex justify-between">
                                <span>秒级高光镜头拆解 (点击跳帧)</span>
                                <span class="fs-12 color-888 fw-500">黄金15秒爆款结构</span>
                            </div>
                            <div class="mt-4">
                                <div class="mt-10 round-4">
                                    <div v-for="(item, index) in jtTabs" :key="index" @click="ptIndex = index"
                                        class="round-4 py-4 px-10 pointer flex-item mb-10"
                                        :class="ptIndex === index ? 'active' : ''">
                                        <div class="fs-12 fw-600">{{ item.label }}</div>
                                        <div class="fs-10 mt-4">{{ item.desc }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="phone h-600 bg-000 round-40 p-4">
                        <div class="bg-fff h-full round-38"></div>
                    </div>
                </div>
            </el-card>
            <el-card class="flex-1 round-12" shadow="hover">
                <div class="flex justify-between pb-10" style="border-bottom: 1px solid #eee;">
                    <div class="flex-items-center">
                        <div class="w-36 h-36 bg-main round-6"></div>
                        <div class="ml-10">
                            <div class="fw-600">梦畅AIGC / 默认部门 / 默认分组</div>
                            <div class="fs-12 color-888">
                                <span>发布时间: 2025-04-02 12:06:28</span>
                                <span class="ml-20">剪辑时间: 2025-05-02</span>
                            </div>
                        </div>
                    </div>
                    <el-button type="primary" round>权限监测</el-button>
                </div>
                <div class="bg-47 flex gap-10 mt-20 round-4 p-4">
                    <div v-for="(item, index) in ptTabs" :key="index" @click="ptIndex = index"
                        class="round-4 py-4 px-10 pointer" :class="ptIndex === index ? 'bg-fff color-main fw-500' : ''">
                        <span>{{ item.label }}</span>
                    </div>
                </div>
                <section v-if="ptIndex === 0">
                    <Tab1 />
                </section>
                <section v-if="ptIndex === 1">
                    <Tab2 />
                </section>
                <section v-if="ptIndex === 2">
                    <Tab3 />
                </section>
                <section v-if="ptIndex === 3">
                    <Tab4 />
                </section>
            </el-card>
        </div>
        <MaterialData />
        <CorrelationCard />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Tab1 from './components/Tab1.vue';
import Tab2 from './components/Tab2.vue';
import Tab3 from './components/Tab3.vue';
import Tab4 from './components/Tab4.vue';
import MaterialData from './components/MaterialData.vue';
import CorrelationCard from './components/CorrelationCard.vue';

const ptIndex = ref(3)
const ptTabs = ref([
    { label: '抖音样式', value: 0 },
    { label: '抖音橱窗', value: 1 },
    { label: '视频号样式', value: 2 },
    { label: '隐藏样式', value: 3 },
])
const jtTabs = ref([
    { label: '0~3s 黄金Hook', desc: '复古古法金耳环特写' },
    { label: '3~6s 黄金Hook', desc: '夏日古人打瞌睡宽度' },
    { label: '6-9s 黄金Hook', desc: '微距看看时候来' },
    { label: '9~12s 黄金Hook', desc: '直播间买一赠一' },
    { label: '12~15s 黄金Hook', desc: '点击下方小黄车' },
])
</script>

<style scoped lang="scss">
.flex-item {
    background-color: rgba(var(--main-color), .1);
    color: rgba(var(--main-color), 1);
    // flex: 0 0 calc((100% - 10px * 2) / 3);
}

.active {
    background-color: rgba(var(--main-color), 1);
    color: #fff;
}

.bg-47 {
    background-color: #f0f4f7;
}

.phone {
    width: 320px;
}

:deep(.el-date-editor){
    &.el-input__wrapper {
        box-shadow: none;
    }
}
</style>