<template>
    <div>
        <el-card class="flex-1 round-12 mt-20" shadow="hover">
            <div class="flex-items-center justify-between">
                <div class="flex-items-center">
                    <span>👂</span>
                    <span class="fw-600 mr-10">素材数据</span>
                    <el-button type="primary" link size="small" class="mt-2"
                        @click="handleOpen(1, '手动关联素材')">手动关联素材</el-button>
                    <el-button type="primary" link size="small" class="mt-2"
                        @click="handleOpen(2, '素材配对监控')">素材配对监控</el-button>
                    <el-button type="primary" link size="small" class="mt-2"
                        @click="handleOpen(3, '已关联素材')">已关联广告视频素材(4)</el-button>
                    <el-button link size="small" class="mt-2">如何同步: 历史已投放视频/抖音号视频数据<span>👂</span></el-button>
                </div>
                <div class="flex-items-center gap-10">
                    <div class="bg-ts fs-12 round-4 color-main px-10 py-2 h-30 flex-center pointer">手动刷新近3天的数据</div>
                    <div class="flex-items-center gap-10 fs-12 round-4 p-2 bordedr">
                        <el-date-picker type="daterange" range-separator="至" style="width: 240px;"
                            start-placeholder="开始日期" end-placeholder="结束日期" size="small" />
                        <div class="flex-items-center gap-4 line">
                            <div class="px-6 round-4 pointer" :class="dateIndex === 0 ? 'color-fff bg-main' : ''"
                                @click="handleTabDate(0)">近7天</div>
                            <div class="px-6 round-4 pointer" :class="dateIndex === 1 ? 'color-fff bg-main' : ''"
                                @click="handleTabDate(1)">近30天</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex gap-10 mt-10 pt-10" style="border-top: 1px solid #eee;">
                <div v-for="(tab, index) in tabs" :key="index" class="fw-600 fs-12 px-6 py-2 round-4 pointer"
                    :class="tabIndex === index ? 'bg-main color-fff' : ''" @click="tabIndex = index">{{ tab.label }}
                </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>
        </el-card>
        <Dialog v-model="dialog" bg-color="#fff" width="1000">
            <div class="fw-500 px-16 py-10" style="border-bottom: 1px solid #eee;">{{ title }}</div>
            <div v-if="dialogIndex === 1">
                <div class="tishi fs-10 px-16 py-6">
                    <div>手动关联：关联后，平台将自动同步后续产生的广告数据，并会追溯过去30天的广告数据（如果是抖音首页视频/达人抖音主页视频，支持选择【巨量千川-从抖音号关联】选择抖音首页视频进行关联）
                    </div>
                    <div class="zy mt-4">请注意：关联后，数据同步可能需要时间，请隔天再查看数据。</div>
                </div>
                <div class="flex gap-10 mt-10 pt-10 mx-16" style="border-bottom: 1px solid #eee;">
                    <div v-for="(tab, index) in tabs" :key="index" class="fw-500 fs-12 px-6 py-2 pb-10 pointer"
                        :class="tabIndex === index ? 'active color-main' : ''" @click="tabIndex = index">{{ tab.label }}
                    </div>
                </div>
                <div class="p-16 flex gap-10">
                    <div class="round-4 p-10" style="border: 1px solid #eee;">
                        <div class="flex gap-10">
                            <div v-for="(tab, index) in zhOptions" :key="index"
                                class="fw-500 fs-12 px-6 py-2 pb-10 pointer"
                                :class="tabIndex === index ? 'color-main' : ''" @click="tabIndex = index">{{
                                    tab.label }}
                            </div>
                            <el-button type="primary" size="small" link style="margin-top: -4px;">去授权</el-button>
                        </div>
                        <el-input placeholder="账户名称/id" size="small" class="w-200" />
                    </div>
                    <div class="flex-1 round-4 p-10" style="border: 1px solid #eee;">
                        <div class="flex gap-10">
                            <div v-for="(tab, index) in glOptions" :key="index"
                                class="fw-500 fs-12 px-6 py-2 pb-10 pointer"
                                :class="tabIndex === index ? 'color-main' : ''" @click="tabIndex = index">{{
                                    tab.label }}
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <el-input placeholder="账户名称/id" size="small" class="w-200" />
                            <el-button class="fs-12 fw-400" link>如何同步: 历史已投放视频/抖音号视频数据</el-button>
                        </div>
                        <div class="mt-10">
                            <SeTable :dataList="tableData" size="small" :total="2">
                                <el-table-column type="selection" width="55" />
                                <el-table-column prop="name" label="素材名称" />
                                <el-table-column prop="id" label="素材ID" />
                            </SeTable>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="dialogIndex === 2" class="p-16">
                <div>
                    <span>选择要监控的广告账号：</span>
                    <el-button type="primary" link>查看功能说明</el-button>
                </div>
                <div class="flex gap-10 mt-10 pt-10" style="border-bottom: 1px solid #eee;">
                    <div v-for="(tab, index) in tabs" :key="index" class="fw-500 fs-12 px-6 py-2 pb-10 pointer"
                        :class="tabIndex === index ? 'active color-main' : ''" @click="tabIndex = index">{{ tab.label }}
                    </div>
                </div>
                <div class="flex gap-10 mt-10">
                    <div class="round-4 flex-1" style="border: 1px solid #eee;">
                        <div class="flex gap-10 px-10 pt-8 bg-eee">
                            <div v-for="(tab, index) in zhOptions" :key="index"
                                class="fw-500 fs-12 px-6 py-2 pb-10 pointer"
                                :class="tabIndex === index ? 'color-main' : ''" @click="tabIndex = index">{{
                                    tab.label }}
                            </div>
                            <el-button type="primary" size="small" link style="margin-top: -4px;">去授权</el-button>
                        </div>
                        <div class="p-10">
                            <div class="flex gap-10">
                                <el-input placeholder="账户名称/id" size="small" />
                                <el-button type="primary" link size="small">+ 账户分组</el-button>
                            </div>
                            <div class="checkbox-wrapper">
                                <el-checkbox-group v-model="checkedSekects">
                                    <div v-for="(item, index) in checkList" :key="index" class="mt-20">
                                        <el-checkbox class="custom-checkbox" :value="item">
                                            <div>
                                                <div class="fw-500">{{ item.name }}</div>
                                                <div class="fs-12 color-888 fw-500 mt-4">{{ item.id }}</div>
                                            </div>
                                        </el-checkbox>
                                    </div>
                                </el-checkbox-group>
                            </div>
                        </div>
                    </div>
                    <div class="round-4 flex-1" style="border: 1px solid #eee;">
                        <div class="flex gap-10 px-10 pt-8 pb-10 bg-eee">已选账号</div>
                        <div class="px-10">
                            <div v-for="(item, index) in checkedSekects" :key="index"
                                class="mt-10 bg-xz px-10 py-6 round-6 flex-items-center justify-between">
                                <div>
                                    <div class="">{{ item.name }}</div>
                                    <div class="fs-12 color-888">{{ item.id }}</div>
                                </div>
                                <span class="fs-18 pointer del" @click="delzh(item)">×</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="dialogIndex === 3" class="px-16 pb-30">
                <div class="flex gap-10 mt-10 pt-10" style="border-bottom: 1px solid #eee;">
                    <div v-for="(tab, index) in scOptions" :key="index" class="fw-500 fs-12 px-6 py-2 pb-10 pointer"
                        :class="tabIndex === index ? 'active color-main' : ''" @click="tabIndex = index">{{ tab.label }}
                    </div>
                </div>
                <div class="flex justify-between mt-20 mb-20">
                    <div class="flex gap-10">
                        <el-select placeholder="访问权限" style="width: 140px;" class="myselect">
                            <el-option v-for="item in ptOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                        <el-input placeholder="账户名称/id" class="w-140" size="small" />
                        <el-input placeholder="素材id" class="w-140" size="small" />
                    </div>
                    <div>
                        <el-button type="primary">素材配对监控</el-button>
                        <el-button type="primary">导出</el-button>
                    </div>
                </div>
                <el-table :data="scTableData" style="width: 100%" size="small">
                    <el-table-column prop="date" label="广告账户" width="180" />
                    <el-table-column prop="name" label="媒体" width="180" />
                    <el-table-column prop="address" label="素材ID / 创意ID" width="180" />
                    <el-table-column prop="name1" label="点击率" width="180" />
                    <el-table-column prop="name1" label="点赞数" width="180" />
                    <el-table-column prop="name1" label="评论量" width="180" />
                    <el-table-column prop="name1" label="分享量" width="180" />
                    <el-table-column prop="name1" label="关联方式" width="180" />
                    <el-table-column prop="name1" label="关联时间" width="180" />
                    <el-table-column prop="name1" label="更新时间" width="180" />
                    <el-table-column prop="action" label="操作">
                        <template #default="scope">
                            <el-button type="primary" size="small" link>取消关联</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="dialogIndex !== 3" class="flex justify-end gap-10 p-16" style="border-top: 1px solid #eee;">
                <el-button plain>取消</el-button>
                <div class="flex-center pointer fw-500 h-32 px-14 bg-ts color-main">保存</div>
                <el-button type="primary">保存并关闭弹窗</el-button>
            </div>
        </Dialog>
    </div>
</template>

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

const dateIndex = ref(0)
const handleTabDate = (index: number) => {
    dateIndex.value = index
}

const tabIndex = ref(0)
const tabs = ref([
    { label: '汇总数据', value: 0 },
    { label: '巨量广告', value: 1 },
    { label: '巨量千川', value: 2 },
    { label: '巨量本地推', value: 3 },
    { label: '磁力智投', value: 4 },
    { label: '磁力金牛', value: 5 },
    { label: '腾讯ADQ', value: 6 },
    { label: 'TikTok', value: 7 },
    { label: '百度营销', value: 8 },
    { label: '小红书', value: 9 },
    { label: 'Bilibili三连推广', value: 10 },
])
// 弹窗内容
const dialog = ref(false)
const dialogIndex = ref(3)
const title = ref('手动关联素材')
// 手动关联素材
const zhOptions = [
    { label: '全部账户', value: 0 },
    { label: '分类账户', value: 1 },
    { label: '收藏账户', value: 2 },
    { label: '小组账户', value: 3 },
]
const glOptions = [
    { label: '从视频库关联', value: 0 },
    { label: '从抖音号关联', value: 1 },
]
const tableData = [
    {
        id: '184552866885',
        name: '可能是不能出去玩吧',
    },
    {
        id: '184552866485',
        name: '魔道重生之天下无敌（一）',
    },
]
const handleOpen = (type: number, str: string) => {
    title.value = str
    dialogIndex.value = type
    dialog.value = true
}

// 素材配对监控
const checkedSekects = ref<any>([])
const checkList = ref([
    { name: '魔鬼来之天下无敌', id: '1658728122455' },
    { name: '柳如烟是天下最渣的渣女', id: '1658728122854' },
    { name: '三十年喝东西，莫欺少年穷', id: '1658728122009' },
])
const delzh = (record: any) => { // 删除选中的账号
    const index = checkedSekects.value.findIndex((item: any) => item.id === record.id);
    if (index !== -1) {
        checkedSekects.value.splice(index, 1); // 从 index 位置删除 1 个元素
    }
}

// 已关联素材
const scOptions = [
    { label: '素材明细数据', value: 0 },
    { label: '素材汇总数据', value: 1 },
    { label: '账户汇总数据', value: 2 },

]
const ptOptions = ref([
    { label: '全部平台', value: 0 },
    { label: '巨量千川', value: 1 },
    { label: '巨量广告', value: 2 },
    { label: '腾讯ADQ', value: 3 },
    { label: '磁力智投', value: 4 },
])
const scTableData = ref([
    {
        id: '184552866885',
        name: '可能是不能出去玩吧',
    },
    {
        id: '184552866485',
        name: '魔道重生之天下无敌（一）',
    },
])
</script>

<style lang="scss" scoped>
.bordedr {
    box-shadow: 0 0 0 1px rgba(var(--main-color), .1);
}

.bg-ts {
    background-color: rgba(var(--main-color), .04);
}

.line {
    border-left: 1px solid #eee;
    padding-left: 20px;
}

.bg-ef {
    background-color: #f9fcfd;
}

.bg-xz {
    background-color: rgba(var(--main-color), .03);
    border: 1px solid rgba(var(--main-color), .1);
}

.del {
    &:hover {
        color: rgba(var(--main-color), 1);
    }
}

.active {
    border-bottom: 2px solid rgba(var(--main-color), 1);
}

.tishi {
    background-color: rgb(255, 247, 223);
    color: #ff9102;
}

// 多选样式
.checkbox-wrapper {
    :deep(.el-checkbox) {
        align-items: flex-start !important;
    }
}

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