<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 videoInfoTabs" :key="index" @click="viIndex = index"
                        class="round-4 py-4 px-10 pointer" :class="viIndex === index ? 'bg-fff color-main fw-500' : ''">
                        <span>{{ item.label }}</span>
                    </div>
                </div>
                <section v-if="viIndex === 0">
                    <Tab1 />
                </section>
                <section v-if="viIndex === 1">
                    <Tab2 />
                </section>
            </el-card>
        </div>
        <el-card class="round-12 mt-20" shadow="hover">
            <div class="flex-items-center justify-between pb-6" style="border-bottom: 1px solid #eee;">
                <div class="color-main fw-600">被引用后出片</div>
                <el-button type="primary" size="small">导出</el-button>
            </div>
            <div class="flex justify-between mt-20">
                <div class="flex flex-1 gap-10">
                    <el-select placeholder="排序" style="width: 140px;" class="myselect">
                        <el-option v-for="item in ascOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                    <el-select placeholder="请选择（支持输入搜索）" style="width: 240px;" class="myselect" filterable>
                        <template #prefix>
                            <span class="pr-4 color-000">作者</span>
                        </template>
                        <el-option v-for="item in ascOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                    <div class="flex-items-center gap-10 fs-12 round-4 p-2 bordedr">
                        <div class="flex-items-center gap-4 pl-10">上传时间</div>
                        <el-date-picker type="daterange" range-separator="至" style="width: 240px;"
                            start-placeholder="开始日期" end-placeholder="结束日期" size="small" />
                    </div>
                    <div class="flex-items-center gap-10 fs-12 round-4 p-2 bordedr">
                        <div class="flex-items-center gap-4 pl-10">消耗时间</div>
                        <el-date-picker type="daterange" range-separator="至" style="width: 240px;"
                            start-placeholder="开始日期" end-placeholder="结束日期" size="small" />
                    </div>
                </div>
            </div>
            <div class="flex gap-10 mt-16 over-x-auto pb-10">
                <div v-for="(card, index) in 20" :key="index"
                    class="round-6 minw-140 h-70 px-10 pt-6 pb-8 bg-eee flex flex-col justify-between fs-12">
                    <div>58556.26</div>
                    <div class="flex justify-between">
                        <span class="fw-600 color-888">消耗</span>
                        <div class="w-20 h-20 round bg-000 flex-center">👂</div>
                    </div>
                </div>
            </div>
            <div style="border-top: 1px solid #eee;" class="pt-10 mt-10">
                <div class="flex-items-center justify-between">
                    <div class="flex gap-6">
                        <span class="color-000 fw-600">引用后所出成片列表</span>
                        <span class="color-main round-10 py-2 px-6 fs-12"
                            style="background-color: rgba(var(--main-color), .06);">3条</span>
                    </div>
                    <span class="color-888 fs-12">衍生视频数据实时同步中</span>
                </div>
                <div class="flex flex-wrap gap-20 w-full mt-10">
                    <div v-for="(item, index) in list" :key="index" class="flex-item1 w-full p-10">
                        <div class="flex gap-10">
                            <div class="bg-000 round-10 minw-70 h-80"></div>
                            <div class="flex flex-col gap-8 ellipsis">
                                <div class="fw-600 color-000 ellipsis">
                                    0730-d复古古法金耳环高级质感种草成片_v1复古古法金耳环高级质感种草成片_v1复古古法金耳环高级质感种草成片_v1复古古法金耳环高级质感种草成片_v1.mp4
                                </div>
                                <div class="flex-items-center gap-4">
                                    <div class="w-20 h-20 bg-000 round"></div>
                                    <span class="color-000">张玲静</span>
                                    <span class="px-4 color-888">·</span>
                                    <span class="fs-12 color-888">2026-07-19</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="py-2 px-10 round-4 fs-12 tfz">投放中</span>
                                    <el-button type="primary" link size="small">查看成片数据</el-button>
                                </div>
                            </div>
                        </div>
                        <div class="content bg-xx mt-10 round-10 p-10 flex justify-between">
                            <div class="flex-center flex-col">
                                <span class="fs-12 color-888">消耗</span>
                                <span class="fw-600 color-000">￥2485</span>
                            </div>
                            <div class="flex-center flex-col">
                                <span class="fs-12 color-888">ROI</span>
                                <span class="fw-600 color-000">6.82</span>
                            </div>
                            <div class="flex-center flex-col">
                                <span class="fs-12 color-888">转化数</span>
                                <span class="fw-600 color-000">485</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Tab1 from './components/Tab1.vue';
import Tab2 from './components/Tab2.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: '点击下方小黄车' },
])
const viIndex = ref(0)
const videoInfoTabs = ref([
    { label: '视频信息', value: 0 },
    { label: '视频审核', value: 1 },
])

const list = ref([{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }, { id: '5' }]);
const ascOptions = [
    { label: '按关联时间排序', value: 0 },
    { label: '按消耗金额排序', value: 1 },
    { label: '按ROI高到底排序', value: 2 },
    { label: '按转化数', value: 3 },
]
</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;
    }
}

.tfz {
    color: rgb(5, 133, 54);
    background-color: rgb(194, 255, 217);
}

.bg-xx {
    background-color: #f2f5f7;
}

.flex-item1 {
    flex: 0 0 calc((100% - 20px * 3) / 4);
    min-width: calc((100% - 20px * 3) / 4);
    border-radius: 8px;
    box-sizing: border-box;
    // aspect-ratio: 1 / 1.5;
    box-shadow: 0 0 0 1px #eee;
}

:deep(.myselect) {
    .el-select__wrapper {
        border-radius: 12px;
    }
}

/* 1600px 以下：一行 5 个 */
@media (max-width: 1500px) {
    .flex-item1 {
        flex: 0 0 calc((100% - 20px * 2) / 3);
    }
}

/* 1200px 以下：一行 4 个 */
@media (max-width: 1200px) {
    .flex-item1 {
        flex: 0 0 calc((100% - 20px * 1) / 2);
    }
}
</style>