<template>
    <div class="bgmr vh100 p-20 over-y-auto">
        <section class="bg-fff round-10 px-16 py-14 flex-between filter-card">
            <div class="flex-items-center gap-30">
                <div v-for="item in taskTabs" :key="item.value" class="pb-8 pointer tab-item"
                    :class="{ active: activeTab === item.value }" @click="activeTab = item.value">
                    <span class="font-bold">{{ item.label }} ({{ item.count }})</span>
                </div>
            </div>
            <div class="flex-items-center gap-10">
                <el-date-picker v-model="publishRange" type="daterange" start-placeholder="发布开始日期"
                    end-placeholder="发布开始日期" range-separator="至" style="width: 240px;" />
                <el-date-picker v-model="outputRange" type="daterange" start-placeholder="出片开始日期"
                    end-placeholder="出片结束日期" range-separator="至" style="width: 240px;" />
            </div>
        </section>
        <section class="bg-fff round-6 p-14 mt-16 filter-card">
            <div class="flex flex-wrap gap-10">
                <div class="flex filter-combo">
                    <el-select v-model="filters.publisherType" class="w-90">
                        <el-option label="发布人" value="publisher" />
                        <el-option label="部门" value="department" />
                    </el-select>
                    <el-select v-model="filters.publisher" filterable clearable class="w-210" placeholder="请选择发布人">
                        <el-option v-for="item in publisherOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>
                <div class="flex filter-combo">
                    <el-select v-model="filters.outputType" class="w-90">
                        <el-option label="出片人" value="output" />
                        <el-option label="小组" value="group" />
                    </el-select>
                    <el-select v-model="filters.outputUser" filterable clearable class="w-210" placeholder="请选择出片人">
                        <el-option v-for="item in outputUserOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>
                <el-select v-model="filters.videoStatus" clearable class="w-280" placeholder="请选择视频状态">
                    <el-option v-for="item in videoStatusOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
                <el-select v-model="filters.scriptStatus" clearable class="w-280" placeholder="请选择脚本状态">
                    <el-option v-for="item in scriptStatusOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
                <el-input v-model="filters.taskId" class="w-280" placeholder="任务ID" clearable />
                <el-input v-model="filters.scriptId" class="w-300" placeholder="脚本ID" clearable />
                <el-input v-model="filters.remark" class="w-300" placeholder="备注" clearable />
                <div>
                    <el-button type="primary">查询</el-button>
                    <el-button>重置</el-button>
                </div>
            </div>
        </section>

        <section class="mt-18 flex-between">
            <div class="flex-items-center">
                <el-button v-for="item in statusTabs" :key="item.value"
                    :type="activeStatus === item.value ? 'primary' : ''" @click="activeStatus = item.value">
                    {{ item.label }}
                </el-button>
                <el-select v-model="sortType" class="w-180 ml-10" size="default">
                    <el-option label="排序: 按发布时间" value="publishTime" />
                    <el-option label="排序: 按出片时间" value="outputTime" />
                    <el-option label="排序: 按消耗金额" value="cost" />
                </el-select>
            </div>
            <div class="flex-items-center gap-8">
                <el-button type="primary" @click="publishTask">发布任务</el-button>
                <el-button type="primary" @click="exportTask">批量导出</el-button>
            </div>
        </section>

        <section class="mt-16 bg-fff round-10 hidden table-card">
            <el-table :data="pageList" size="large" class="task-table" row-key="id">
                <el-table-column prop="publisher" label="发布任务" width="170">
                    <template #default="{ row }">
                        <div>
                            <span class="font-bold color-main">{{ row.publisher }}</span>
                            <span class="ml-4 color-888 fs-12">{{ row.publishDate }}</span>
                        </div>
                        <div class="fs-12 color-888 mt-4">ID: {{ row.taskId }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="outputUser" label="出片任务" width="150">
                    <template #default="{ row }">
                        <div class="fs-12 color-000">{{ row.outputDate }}</div>
                        <div class="font-bold color-000 mt-4">{{ row.outputUser }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="progress" label="出片进度" width="140">
                    <template #default="{ row }">
                        <div class="font-bold" :class="row.finished ? 'color-green' : 'color-red'">
                            <span class="dot mr-6" :class="row.finished ? 'bg-green' : 'bg-red'"></span>
                            {{ row.finished ? '已达标' : '未完成' }}
                        </div>
                        <div class="mt-4 font-bold" :class="row.finished ? 'color-000' : 'color-red'">
                            {{ row.progress }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="operate" label="操作" width="200">
                    <template #default="{ row }">
                        <el-button type="default" link size="small" @click="showAction(row, '详情')">详情</el-button>
                        <el-button link size="small" @click="showAction(row, '复制')">复制</el-button>
                        <el-button type="primary" link size="small" @click="showAction(row, '编辑')">编辑</el-button>
                        <el-button type="danger" link size="small" :disabled="row.finished"
                            @click="showAction(row, '删除')">删除</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="works" width="220">
                    <template #header>
                        <span>关联作品</span>
                    </template>
                    <template #default="{ row }">
                        <div class="flex flex-col gap-4">
                            <el-popover placement="bottom" trigger="click" width="110">
                                <div v-for="item in workMenu" :key="item" class="py-8 px-10 pointer hover-main"
                                    @click="selectWorkMenu(row, item)">
                                    {{ item }}
                                </div>
                                <template #reference>
                                    <div class="color-main gl-btn flex-center minw-24 w-24 h-24 round-6 pointer"
                                        style="user-select: none;">+</div>
                                </template>
                            </el-popover>
                            <div v-if="row.work" class="flex-1 work-tag flex round-4 py-4 pr-4 hidden">
                                <span class="px-6 fs-12 color-main">素</span>
                                <div class="ellipsis fs-12 flex-1">{{ row.work }}</div>
                                <div class="px-4 round-4 fs-10 ml-2 color-fff bg-danger" style="white-space: nowrap;">{{
                                    row.workStatus }}</div>
                            </div>
                            <div v-else class="flex-1"></div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="cost" label="任务关联消耗" width="160" align="center">
                    <template #default="{ row }">
                        <span class="font-bold">¥{{ row.cost }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="script" width="270">
                    <template #header>
                        <span>关联脚本</span>
                    </template>
                    <template #default="{ row }">
                        <div class="flex flex-col gap-4">
                            <div class="flex gap-4">
                                <div class="color-main gl-btn flex-center minw-24 w-24 h-24 round-6 pointer" title=""
                                    style="user-select: none;">+</div>
                                <div class="color-main gl-btn flex-center minw-24 w-24 fs-12 h-24 round-6 pointer"
                                    style="user-select: none;">展</div>
                            </div>
                            <div v-if="row.script" class="flex-items-center gap-4">
                                <div class="flex-1 work-tag flex round-4 p-4 hidden">
                                    <div class="ellipsis flex-1 fs-12">{{ row.script }}</div>
                                    <div v-if="row.workStatus" class="px-4 round-4 fs-10 ml-2 color-fff bg-danger"
                                        style="white-space: nowrap;">{{
                                            row.workStatus }}</div>
                                </div>
                                <div class="fs-12">删</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" min-width="230" show-overflow-tooltip>
                    <template #default="{ row }">
                        <span class="color-666">{{ row.remark }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="product" width="150">
                    <template #header>
                        <span>产品</span>
                    </template>
                </el-table-column>
                <el-table-column prop="scriptType" width="150">
                    <template #header>
                        <span>脚本类型</span>
                    </template>
                </el-table-column>
                <el-table-column prop="splitStatus" label="脚本拆解表" width="140" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" link @click="openBreakdownDialog(row)">{{ row.splitStatus
                            }}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="px-16 py-12 flex-between table-footer">
                <span class="color-000">共 {{ filteredList.length }} 条</span>
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 50, 100]" background layout="sizes, prev, pager, next, jumper"
                    :total="filteredList.length" />
            </div>
        </section>
        <TaskPublishDialog v-model:visible="visiblePublish" @confirm="handlePublishConfirm" />
        <ScriptBreakdownDialog v-model:visible="visibleBreakdown" :breakdown-id="currentBreakdownId"
            @save="handleBreakdownSave" />
    </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import TaskPublishDialog from '@/components/TaskPublishDialog/index.vue';
import ScriptBreakdownDialog from './components/BreakdownDialog.vue';

type TaskItem = {
    id: number;
    publisher: string;
    publishDate: string;
    taskId: string;
    outputDate: string;
    outputUser: string;
    finished: boolean;
    progress: string;
    work: string;
    workStatus: string;
    cost: number;
    script: string;
    scriptStatus: string;
    remark: string;
    product: string;
    scriptType: string;
    splitStatus: string;
};

const activeTab = ref('all');
const activeStatus = ref('all');
const visiblePublish = ref(false);
const visibleBreakdown = ref(false);
const currentBreakdownId = ref('CJB-06131146256-7133');
const sortType = ref('publishTime');
const currentPage = ref(1);
const pageSize = ref(50);
const publishRange = ref<[Date, Date] | ''>('');
const outputRange = ref<[Date, Date] | ''>('');

const filters = reactive({
    publisherType: 'publisher',
    publisher: '',
    outputType: 'output',
    outputUser: '',
    videoStatus: '',
    scriptStatus: '',
    taskId: '',
    scriptId: '',
    remark: '',
});

const taskTabs = [
    { label: '全部任务', value: 'all', count: 10 },
    { label: '给我的任务', value: 'mine', count: 5 },
    { label: '我发布的任务', value: 'published', count: 5 },
];
const statusTabs = [
    { label: '全部', value: 'all' },
    { label: '待完成', value: 'todo' },
    { label: '已达标', value: 'done' },
];
const publisherOptions = [
    { label: '徐振', value: '徐振' },
    { label: '蔡卓良', value: '蔡卓良' },
    { label: '孙剧本', value: '孙剧本' },
];
const outputUserOptions = [
    { label: '梁浩然', value: '梁浩然' },
    { label: '莫钦全', value: '莫钦全' },
    { label: '徐振', value: '徐振' },
];
const videoStatusOptions = [
    { label: '未完成', value: 'todo' },
    { label: '已达标', value: 'done' },
];
const scriptStatusOptions = [
    { label: '可改拍摄', value: 'canShoot' },
    { label: '待审核', value: 'review' },
    { label: '改写', value: 'rewrite' },
];
const workMenu = ['关联视频', '关联图片', '关联音频'];

const taskList = ref<TaskItem[]>([
    {
        id: 1,
        publisher: '徐振',
        publishDate: '2026-06-12',
        taskId: '06131146256',
        outputDate: '2026-06-13',
        outputUser: '梁浩然',
        finished: false,
        progress: '0/8',
        work: '',
        workStatus: '',
        cost: 0,
        script: '【完美记忆】无钢圈内衣...',
        scriptStatus: '可改拍摄',
        remark: '另：复刻可正常提交当前备，合适也会安排',
        product: '6017无钢圈内衣',
        scriptType: '剧情演绎',
        splitStatus: '填写拆解表',
    },
    {
        id: 2,
        publisher: '徐振',
        publishDate: '2026-06-12',
        taskId: '06131146255',
        outputDate: '2026-06-13',
        outputUser: '莫钦全',
        finished: false,
        progress: '3/8',
        work: '250: 奶茶精华实测背号...',
        workStatus: '通过',
        cost: 450,
        script: '【爆款改写】无钢圈内...',
        scriptStatus: '可改拍摄',
        remark: '本周训练二创为主，8条的任务都是二创。另：复刻可正常提交当前备，合适也会安排',
        product: '6017无钢圈内衣',
        scriptType: '痛点对比',
        splitStatus: '填写拆解表',
    },
    {
        id: 3,
        publisher: '蔡卓良',
        publishDate: '2026-06-01',
        taskId: '06061131660',
        outputDate: '2026-06-06',
        outputUser: '徐振',
        finished: true,
        progress: '5/5',
        work: '抗衰精华买测背号...',
        workStatus: '通过',
        cost: 1200,
        script: '【抗衰精华】A醇精油夜...',
        scriptStatus: '可改拍摄',
        remark: '质感要求极高，请使用高清晰度4K灯光源',
        product: '抗衰精华液',
        scriptType: '口播种草',
        splitStatus: '已拆解',
    },
    {
        id: 4,
        publisher: '徐振',
        publishDate: '2026-06-15',
        taskId: '06201148431',
        outputDate: '2026-06-20',
        outputUser: '蔡卓良',
        finished: false,
        progress: '2/8',
        work: '',
        workStatus: '',
        cost: 300,
        script: '【补水面膜】夏季晒后...',
        scriptStatus: '待审核',
        remark: '加急制作，本周首发',
        product: '补水面膜',
        scriptType: '特写展示',
        splitStatus: '填写拆解表',
    },
    {
        id: 5,
        publisher: '蔡卓良',
        publishDate: '2026-06-14',
        taskId: '06201148428',
        outputDate: '2026-06-18',
        outputUser: '徐振',
        finished: true,
        progress: '6/6',
        work: '风衣走秀快切成片...',
        workStatus: '通过',
        cost: 1800,
        script: '【秋装风衣】高级Hook...',
        scriptStatus: '可改拍摄',
        remark: '效果优异，已完成跑量',
        product: '加绒风衣',
        scriptType: '混剪卡点',
        splitStatus: '已拆解',
    },
    {
        id: 6,
        publisher: '梁浩然',
        publishDate: '2026-06-18',
        taskId: '06211055102',
        outputDate: '2026-06-22',
        outputUser: '徐振',
        finished: false,
        progress: '1/4',
        work: '',
        workStatus: '',
        cost: 200,
        script: '【防晒冰袖】户外骑行...',
        scriptStatus: '可改拍摄',
        remark: '突出冰感触感与透气网眼细节',
        product: '防晒冰袖',
        scriptType: '开箱测评',
        splitStatus: '填写拆解表',
    },
    {
        id: 7,
        publisher: '徐振',
        publishDate: '2026-06-19',
        taskId: '06220912301',
        outputDate: '2026-06-24',
        outputUser: '王剪辑',
        finished: true,
        progress: '10/10',
        work: '修护霜对比成片...',
        workStatus: '通过',
        cost: 2500,
        script: '【修护霜】屏障受损肌...',
        scriptStatus: '可改拍摄',
        remark: '投放千川大盘，消耗突破5万',
        product: '修护霜',
        scriptType: '痛点对比',
        splitStatus: '已拆解',
    },
    {
        id: 8,
        publisher: '孙剧本',
        publishDate: '2026-06-20',
        taskId: '06231430099',
        outputDate: '2026-06-25',
        outputUser: '徐振',
        finished: false,
        progress: '0/6',
        work: '',
        workStatus: '',
        cost: 0,
        script: '【星光吊坠】送女友生...',
        scriptStatus: '改写',
        remark: '强调情侣节日赠礼情感价值',
        product: '星光吊坠',
        scriptType: '剧情演绎',
        splitStatus: '填写拆解表',
    },
    {
        id: 9,
        publisher: '徐振',
        publishDate: '2026-06-21',
        taskId: '06241600120',
        outputDate: '2026-06-26',
        outputUser: '周洋',
        finished: false,
        progress: '3/5',
        work: '马丁靴上脚卡点01发大师傅发射点发射点发',
        workStatus: '待审核',
        cost: 800,
        script: '【复古马丁靴】C晚A感到十分赶得上官方的说法烦烦烦',
        scriptStatus: '可改拍摄',
        remark: '注意配合潮流BGM音频节奏',
        product: '复古马丁靴',
        scriptType: '混剪卡点',
        splitStatus: '已拆解',
    },
    {
        id: 10,
        publisher: '莫钦全',
        publishDate: '2026-06-22',
        taskId: '06251820455',
        outputDate: '2026-06-27',
        outputUser: '徐振',
        finished: false,
        progress: '4/8',
        work: '早C晚A抗衰精油...',
        workStatus: '待审核',
        cost: 1000,
        script: '【抗衰精华液】早C晚A感到十分赶得上官方的说法广东省',
        scriptStatus: '可改拍摄',
        remark: '二创卡点素材已同步上传',
        product: '抗衰精华液',
        scriptType: '口播种草',
        splitStatus: '已拆解',
    },
]);

const filteredList = computed(() => {
    return taskList.value.filter((item) => {
        const statusMatched =
            activeStatus.value === 'all' ||
            (activeStatus.value === 'done' && item.finished) ||
            (activeStatus.value === 'todo' && !item.finished);
        const publisherMatched = !filters.publisher || item.publisher === filters.publisher;
        const outputMatched = !filters.outputUser || item.outputUser === filters.outputUser;
        const videoMatched =
            !filters.videoStatus ||
            (filters.videoStatus === 'done' && item.finished) ||
            (filters.videoStatus === 'todo' && !item.finished);
        const scriptMatched =
            !filters.scriptStatus ||
            item.scriptStatus === scriptStatusOptions.find((option) => option.value === filters.scriptStatus)?.label;
        const textMatched =
            !filters.remark ||
            `${item.remark}${item.product}${item.script}${item.publisher}${item.outputUser}`.includes(filters.remark);
        return statusMatched && publisherMatched && outputMatched && videoMatched && scriptMatched && textMatched;
    });
});

const pageList = computed(() => {
    const sortedList = [...filteredList.value].sort((a, b) => {
        if (sortType.value === 'cost') return b.cost - a.cost;
        if (sortType.value === 'outputTime') return b.outputDate.localeCompare(a.outputDate);
        return b.publishDate.localeCompare(a.publishDate);
    });
    const start = (currentPage.value - 1) * pageSize.value;
    return sortedList.slice(start, start + pageSize.value);
});

const selectWorkMenu = (row: TaskItem, menu: string) => {
    ElMessage.success(`${row.publisher} ${menu}`);
};

const showAction = (row: TaskItem, action: string) => {
    ElMessage.success(`${action}: ${row.taskId}`);
};

const openBreakdownDialog = (row: TaskItem) => {
    currentBreakdownId.value = `CJB-${row.taskId}-7133`;
    visibleBreakdown.value = true;
};

const handleBreakdownSave = (form: any) => {
    ElMessage.success(`已保存拆解表：${form.breakdownId}`);
};

const publishTask = () => {
    visiblePublish.value = true;
};
const handlePublishConfirm = (form: any) => {
    ElMessage.success(`已发布任务：${form.relatedScript}`);
};
const exportTask = () => ElMessage.success('批量导出');
</script>

<style scoped lang="scss">
.filter-card,
.table-card {
    border: 1px solid #dfe7f2;
}

.tab-item {
    color: #3c506f;

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

.filter-combo {
    :deep(.el-select:first-child .el-select__wrapper) {
        border-radius: 4px 0 0 4px;
    }

    :deep(.el-select:last-child .el-select__wrapper) {
        border-radius: 0 4px 4px 0;
    }
}

.task-table {
    :deep(.el-table__header th) {
        background-color: #f8fbff;
        color: #48607f;
        font-weight: bold;
    }

    :deep(.el-table__cell) {
        border-bottom: 1px solid #edf0f5;

        .cell {
            line-height: normal;
        }
    }
}

.table-footer {
    border-top: 1px solid #edf0f5;
}

.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.color-green {
    color: #00a86b;
}

.color-red {
    color: #f03b65;
}

.bg-green {
    background-color: #00b779;
}

.bg-red {
    background-color: #f03b65;
}

.bg-danger {
    background-color: #ff4d2d;
}

.bg-orange {
    background-color: #ff8a00;
}

.work-tag,
.soft-btn {
    background-color: rgba(var(--main-color), .08);
}

.gl-btn {
    background-color: rgba(var(--main-color), .08);
    border: 1px solid rgba(var(--main-color), .3);

}

.hover-main {
    &:hover {
        color: rgba(var(--main-color), 1);
        background-color: rgba(var(--main-color), .08);
    }
}
</style>
