<template>
    <div>
        <div class="flex flex-col gap-20 mt-20">
            <div class="flex-items-center">
                <div class="w-100 color-666">成片区</div>
                <div class="flex-1 color-000">
                    <span>女士内衣</span>
                    <el-button type="primary" text>修改</el-button>
                </div>
            </div>
            <div class="flex-items-center">
                <div class="w-100 color-666">视频标题</div>
                <div class="flex-1 color-000">
                    <span>0730-8835-鲁月园-复古耳环动态奢感视频.mp4</span>
                    <el-button type="primary" text>修改</el-button>
                </div>
            </div>
            <div class="flex-items-center">
                <div class="w-100 color-666">公共标签</div>
                <div class="flex-1 color-000 flex gap-10">
                    <el-tag type="success">仙侠穿越</el-tag>
                    <el-tag type="success">视频卡</el-tag>
                    <el-tag type="success">隐式陪叫</el-tag>
                    <el-button type="primary" text size="small">+ 添加公共标签</el-button>
                </div>
            </div>
            <div class="flex-items-center">
                <div class="w-100 color-666">个人标签</div>
                <div class="flex-1 flex color-000 gap-10">
                    <el-tag type="success">仙侠穿越</el-tag>
                    <el-tag type="success">视频卡</el-tag>
                    <el-tag type="success">隐式</el-tag>
                    <el-button type="primary" text @click="visible = true" size="small">+ 添加个人标签</el-button>
                </div>
            </div>
            <div class="flex-items-center">
                <div class="w-100 color-666">关联脚本</div>
                <div class="flex-1 color-000">
                    <el-button type="primary" text size="small">查看脚本(1)</el-button>
                </div>
            </div>
            <div class="flex-items-center">
                <div class="w-100 color-666">视频状态</div>
                <div class="flex-1 color-000">
                    <el-tag type="warning">待审核</el-tag>
                    <el-button type="primary" text size="small">修改</el-button>
                </div>
            </div>
            <div class="flex-items-center">
                <div class="w-100 color-666">视频备注</div>
                <div class="flex-1 color-000">
                    <el-input type="textarea" rows="2" />
                </div>
            </div>
            <div class="flex-items-center">
                <div class="w-100 color-666">附件</div>
                <div class="flex-1 color-000">
                    <el-button type="primary" text>+ 添加附件</el-button>
                </div>
            </div>
        </div>
        <div style="border-top: 1px solid #eee;" class="pt-16 mt-10">
            <el-button type="primary" plain>分享</el-button>
            <el-button type="primary" plain>操作记录</el-button>
            <el-button type="primary" plain>下载源码视频</el-button>
            <el-button type="primary" plain>更多</el-button>
        </div>
    </div>
    <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 pb-10" style="border-bottom: 1px solid #eee;">
                <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="mt-20">
                <el-checkbox-group v-model="checkedCities">
                    <el-checkbox v-for="(item, index) in cities" :key="index" :label="item.label" :value="item.value">
                        {{ item.label }}
                    </el-checkbox>
                </el-checkbox-group>
                <div class="mt-20">
                    <el-button type="primary" size="small" @click="visible = false">添加子标签</el-button>
                </div>
            </div>
        </div>
        <div class="flex justify-end gap-10 p-16" style="border-top: 1px solid #eee;">
            <el-button plain size="small" @click="visible = false">取消</el-button>
            <el-button type="primary" size="small" @click="visible = false">确认关联</el-button>
        </div>
    </Dialog>
</template>

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

// 弹窗
const visible = ref(false)
const tabIndex2 = ref(0)
const tabs2 = ref([
    { label: '模特', value: 0 },
    { label: '场景', value: 1 },
    { label: '合作达人', value: 2 },
    { label: '脚本类型', value: 3 },
    { label: '创新点', value: 4 },
    { label: '编导姓名', value: 5 },
])
const checkedCities = ref([])
const cities = ref([
    { label: '室内展厅', value: 0 },
    { label: '户外公园', value: 1 },
    { label: '直播间', value: 2 },
    { label: '办公室', value: 3 },
    { label: '家庭生活', value: 4 },
    { label: '街拍', value: 5 }
])

</script>

<style scoped lang="scss"></style>