<template>
    <div>
        <el-card class="flex-1 round-12 mt-20" shadow="hover">
            <div class="flex-items-center justify-between" style="border-bottom: 1px solid #eee;">
                <div class="flex gap-10">
                    <div v-for="(tab, index) in tabs" :key="index" class="fw-500 pt-2 pb-10 pointer"
                        :class="tabIndex === index ? 'active color-main' : ''" @click="tabIndex = index">{{
                            tab.label }}
                    </div>
                </div>
                <el-button type="primary" link size="small">编辑关联视频</el-button>
            </div>
            <div v-if="tabIndex === 0 || tabIndex === 2" class="flex gap-10 mt-20 over-x-auto pb-20">
                <CorrelationCardEchart />
                <div class="flex-1 flex gap-10">
                    <div class="pt-36 pb-26 pointer">
                        <div class="bg-000 h-full w-180 round-16 flex-center flex-col guanl">
                            <div>⬆️</div>
                            <div class="fw-600 tt">关联梦畅AIGC视频</div>
                            <div class="fs-12 color-main">支持成片、素材与第三方</div>
                        </div>
                    </div>
                    <div v-for="(item, index) in 10" :key="index" class="">
                        <div class="flex-center bg-eee py-4 fs-12 color-main round-4">使用时长 16.5s</div>
                        <div class="round-10 hidden mt-10 item-li pointer">
                            <div class="w-180 h-200">
                                <img src="../../../../static//image/huaban.png" width="100%" height="100%" class="cover"
                                    alt="">
                            </div>
                            <div class="p-10">
                                <div>张玲静 | 口播（实拍素材</div>
                                <div class="fs-12 color-888 mt-2">张玲静 | 口播（实拍素材）</div>
                            </div>
                            <div style="border-top: 1px solid #eee;" class="p-10 flex-items-center justify-between">
                                <div class="flex-items-center gap-4">
                                    <div class="w-20 h-20 bg-000 round"></div>
                                    <div class="fs-12 gw-500">叶红鱼</div>
                                </div>
                                <span class="fs-12 color-888">2026-06-26</span>
                            </div>
                        </div>
                        <div class="flex-center fs-12 color-888 mt-10">2026-06-26 14:25</div>
                    </div>
                </div>
            </div>
            <div v-if="tabIndex === 1">
                <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>
                    <el-button type="primary" size="small">导出</el-button>
                </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-item 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>
            </div>
        </el-card>
        <Dialog v-model="visible" bg-color="#fff" width="700">
            <div class="fw-500 px-16 py-10" style="border-bottom: 1px solid #eee;">关联梦畅AIGC视频</div>
            <div class="p-20">
                <div class="flex gap-10">
                    <div v-for="(tab, index) in tabs2" :key="index" class="fw-500 py-2 px-10 pointer fs-12 round-20"
                        :class="tabIndex2 === index ? 'bg-main color-fff' : ''" @click="tabIndex2 = index">{{
                            tab.label }}
                    </div>
                </div>
                <div class="flex gap-10 mt-10">
                    <el-input placeholder="搜索成片名称或编号"></el-input>
                    <el-button type="primary">搜索</el-button>
                </div>
                <div class="mt-20">
                    <SeTable :dataList="tableData" size="small" :total="2">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="id" label="成片ID" />
                        <el-table-column prop="id" label="成片">
                            <template #default="scope">
                                <div class="w-60 bg-000 h-40 round-6"></div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="成片名称" />
                        <el-table-column prop="name" label="成片时长" />
                    </SeTable>
                </div>
            </div>
            <div class="flex justify-end gap-10 p-16" style="border-top: 1px solid #eee;">
                <el-button plain size="small">取消</el-button>
                <el-button type="primary" size="small">确认关联</el-button>
            </div>
        </Dialog>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import CorrelationCardEchart from './CorrelationCardEchart.vue';

const tabIndex = ref(1)
const tabs = ref([
    { label: '引用视频镜头', value: 0 },
    { label: '被引用后出片', value: 1 },
    { label: '衍生视频', value: 2 },
])
const ascOptions = [
    { label: '按关联时间排序', value: 0 },
    { label: '按消耗金额排序', value: 1 },
    { label: '按ROI高到底排序', value: 2 },
    { label: '按转化数', value: 3 },
]
const list = ref([{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }, { id: '5' }]);


// 弹窗
const visible = ref(false)
const tabIndex2 = ref(0)
const tabs2 = ref([
    { label: '关联成片', value: 0 },
    { label: '关联素材', value: 1 },
    { label: '关联第三方', value: 2 },
])
const tableData = [
    {
        id: '184552866885',
        name: '可能是不能出去玩吧',
    },
    {
        id: '184552866485',
        name: '魔道重生之天下无敌（一）',
    },
]
</script>

<style scoped lang="scss">
.item-li {
    box-shadow: 0 0 0 1px #eee;
}

.guanl {
    border: 2px dashed rgba(var(--main-color), 1);
    background-color: rgba(var(--main-color), .08);

    .tt {
        color: #6200b3;
    }
}

.bordedr {
    box-shadow: 0 0 0 1px rgba(var(--main-color), .1);
}

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

.flex-item {
    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;
}

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

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