<template>
    <div class="p-20">
        <Classify />
        <div class="mt-20">
            <el-button type="primary" @click="openDialog">上传文件</el-button>
        </div>
        <section class="mt-20 p-10 bg-fff round-12">
            <el-table :data="tableData" style="width: 100%" size="large" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="title" label="脚本" width="300">
                    <template #default="{ row }">
                        <div class="font-bold color-000">{{ row.title }}</div>
                        <div class="flex-items-center gap-6 mt-6">
                            <el-tag type="primary" v-for="(tag, index) in row.tags" :key="index">{{ tag }}</el-tag>
                            <span class="color-888 fs-12">{{ row.type }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="content" label="脚本内容" />
                <el-table-column prop="status" label="状态" width="180">
                    <template #default="{ row }">
                        <el-tag type="danger" effect="dark">{{ row.status == 0 ? '驳回-待修改' : '待审核' }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="content" label="分类/标签" width="180">
                    <template #default="{ row }">
                        <div class="flex-items-center gap-6 mt-6">
                            <span class="fs-12">{{ row.tags[0] }}</span>/
                            <span class="fs-12">{{ row.type }}</span>
                        </div>
                        <el-tag type="primary" v-for="(tag, index) in row.tags" :key="index">{{ tag }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="storyboard" label="分镜" width="180" />
                <el-table-column prop="operate" label="操作" width="180" fixed="right">
                    <template #default="scope">
                        <ElButton type="primary" link>查看任务(2)</ElButton>
                        <ElButton type="primary" link>复制</ElButton>
                        <br />
                        <ElButton type="primary" link>发布任务</ElButton>
                        <ElButton type="primary" link>分享链接</ElButton>
                    </template>
                </el-table-column>
            </el-table>
        </section>
        <UploadDialog v-model:visible="dialogVisible" />
    </div>
</template>

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

const tableData = [
    {
        title: '脚本 1 - 口播温和洁面破圈案',
        type: 'AI分镜拆解',
        tags: ['美妆团队A'],
        content: '1: 哪怕是你一周染一次，也不会损伤你的头发，什么干枯毛躁，开叉打结都不会，就这样按一洗，洗出丰富的泡沫，使劲揉，使劲搓啊，它也不沾头皮就这样按一洗，洗出丰富的泡沫，使劲揉，使劲搓啊，它也不沾头皮',
        status: 0,
        storyboard: '6 场分镜',
    },
    {
        title: '脚本 2 - 秋冬穿搭羊绒大衣氛围感种草 ',
        type: 'AI分镜拆解',
        tags: ['美妆团队A'],
        content: '1: 其实我挺感谢咱们家粉丝姐妹推荐我这条鸡蛋裤。其实我夏天吧，愿意穿大衫，拉上一穿上那个下边配芭比裤的时候出一下汗，一脱下来哈，槽的虎的。就这个小裤，你看它就是可薄可薄的了 (运镜特写——参考对标)，而且弹力特别特别好。你看我这个大腿指甲轻了，这么一撑都能看看',
        status: 1,
        storyboard: '4 场分镜',
    },
]
const selectedChecks = ref([])
const handleSelectionChange = (val: any) => {
    console.log(44444, val)
}
// 上传视频的弹窗内容
const dialogVisible  =ref(false)
const openDialog = () => {
  dialogVisible.value = true;
};
</script>

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