<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">
            <SeTable :data-list="tableData" size="large" :total="tableData.length"
                @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 @click="visibleLook = true">查看任务(2)</ElButton>
                        <ElButton type="primary" link>复制</ElButton>
                        <br />
                        <ElButton type="primary" link @click="visiblePublish = true">发布任务</ElButton>
                        <ElButton type="primary" link>分享链接</ElButton>
                    </template>
                </el-table-column>
            </SeTable>
        </section>
        <UploadDialog v-model:visible="dialogVisible" />
        <Dialog v-model="visibleLook" bg-color="#fff" width="800">
            <div class="fw-500 px-16 py-10 color-000" style="border-bottom: 1px solid #eee;">查看任务</div>
            <div class="p-20">
                <SeTable size="small" :dataList="tableData">
                    <el-table-column prop="content" label="任务名称" />
                    <el-table-column prop="content" label="负责人" />
                    <el-table-column prop="content" label="部门" />
                    <el-table-column prop="content" label="截止时间" />
                    <el-table-column prop="content" label="进度状态" />
                    <el-table-column prop="operate" label="操作" width="80" fixed="right">
                        <template #default="scope">
                            <ElButton type="primary" link>查看</ElButton>
                        </template>
                    </el-table-column>
                </SeTable>
            </div>
        </Dialog>
        <TaskPublishDialog
            v-model:visible="visiblePublish"
            related-script="脚本 1 - 口播温和洁面破圈案"
            auto-related
            @confirm="handlePublishConfirm"
        />
    </div>
</template>

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

const tableData = [
    {
        title: '脚本 1 - 口播温和洁面破圈案',
        type: 'AI分镜拆解',
        tags: ['美妆团队A'],
        content: '哪怕是你一周染一',
        status: 0,
        storyboard: '6 场分镜',
    },
    {
        title: '脚本 2 - 秋冬穿搭羊绒大衣氛围感种草 ',
        type: 'AI分镜拆解',
        tags: ['美妆团队A'],
        content: '其实我挺感',
        status: 1,
        storyboard: '4 场分镜',
    },
]
const selectedChecks = ref([])
const handleSelectionChange = (val: any) => {
    console.log(44444, val)
}
// 上传视频的弹窗内容
const dialogVisible = ref(false)
const openDialog = () => {
    dialogVisible.value = true;
};

// 查看任务的弹唱
const visibleLook = ref(false)

// 发布任务
const visiblePublish = ref(false)
const handlePublishConfirm = (form: any) => {
    console.log('publish task', form)
}
</script>

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