<template>
    <Dialog v-model="dialogVisible" bg-color="#fff" width="800">
        <div class="script-dialog flex-col bg-fff round-8 hidden">
            <header class="dialog-header flex-items-center h-56 px-20">
                <h3 class="fs-14 fw-700 color-000">添加脚本</h3>
            </header>

            <section class="dialog-body flex-1 flex-col px-20 pt-18">
                <div class="tab-row flex-items-center mb-20">
                    <div v-for="item in tabs" :key="item.value" class="tab-item h-34 lh-34 px-16 fs-12 fw-700 pointer"
                        :class="{ active: activeTab === item.value }" @click="activeTab = item.value">
                        {{ item.label }}
                    </div>
                </div>

                <div v-if="activeTab === 'input'" class="script-input-wrap flex-1">
                    <el-input v-model="scriptContent" type="textarea" resize="none" :maxlength="1000"
                        show-word-limit placeholder="请输入脚本内容" class="script-textarea h-full" />
                </div>

                <div v-else class="script-manage flex-1 flex-col hidden">
                    <div class="filter-row flex-items-center gap-8 mb-16">
                        <el-input v-model="keyword" class="script-search flex-1" placeholder="搜索脚本名称或 ID">
                            <template #prefix>
                                <el-icon>
                                    <Search />
                                </el-icon>
                            </template>
                        </el-input>
                        <el-select v-model="categoryValue" class="filter-select" placeholder="全部分类">
                            <el-option v-for="item in categories" :key="item" :label="item" :value="item" />
                        </el-select>
                        <el-select v-model="statusValue" class="filter-select" placeholder="全部状态">
                            <el-option v-for="item in statuses" :key="item" :label="item" :value="item" />
                        </el-select>
                    </div>

                    <SeTable class="script-table flex-1" :data-list="currentPageScripts" size="small"
                        :total="filteredScripts.length" :default-page-size="pageSize" :page-sizes="[3, 5, 10]"
                        :height="tableHeight" row-key="id" psize="small" @update:page="handleScriptPageChange">
                        <el-table-column width="52">
                            <template #default="{ row }">
                                <el-radio :model-value="selectedScriptId" :value="row.id"
                                    @change="selectedScriptId = row.id" />
                            </template>
                        </el-table-column>
                        <el-table-column label="脚本名称 / ID" min-width="230">
                            <template #default="{ row }">
                                <div class="flex-col">
                                    <span class="fs-12 fw-700 color-333 ellipsis">{{ row.name }}</span>
                                    <span class="fs-10 color-999">{{ row.id }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="category" label="分类" min-width="180" />
                        <el-table-column label="状态" width="110">
                            <template #default="{ row }">
                                <span class="status-tag h-22 lh-22 px-10 round-4 fs-10">{{ row.status }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="uploader" label="上传人" width="110" />
                        <el-table-column prop="updatedAt" label="更新时间" width="150" />
                    </SeTable>
                </div>
            </section>

            <footer class="dialog-footer flex justify-end gap-8 px-20 py-12">
                <el-button class="h-34 px-18" @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" class="confirm-btn h-34 px-20 border-none" @click="confirmScript">
                    确认
                </el-button>
            </footer>
        </div>
    </Dialog>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { Search } from '@element-plus/icons-vue';
import Dialog from '@/components/Dialog/index.vue';

type TabValue = 'input' | 'manage';

type ScriptRow = {
    id: string;
    name: string;
    category: string;
    status: string;
    uploader: string;
    updatedAt: string;
};

const props = defineProps<{
    modelValue: boolean;
}>();

const emit = defineEmits<{
    'update:modelValue': [value: boolean];
    confirm: [value: string];
}>();

const tabs: { label: string; value: TabValue }[] = [
    { label: '输入脚本', value: 'input' },
    { label: '脚本管理', value: 'manage' },
];

const categories = ['全部分类', '个护家清 / 洗发护发', '汽车用品 / 清洁养护', '服饰内衣 / 女士内衣'];
const statuses = ['全部状态', '待审核', '审核通过', '审核驳回'];
const scriptRows: ScriptRow[] = [
    {
        id: 'S-10291',
        name: '脚本 1 - 口播温和洁面破圈案',
        category: '个护家清 / 洗发护发',
        status: '待审核',
        uploader: '致上编导',
        updatedAt: '2026-08-04 14:20',
    },
    {
        id: 'S-10292',
        name: '玻璃油膜擦雨天实测分镜',
        category: '汽车用品 / 清洁养护',
        status: '审核通过',
        uploader: '徐振',
        updatedAt: '2026-08-18 10:32',
    },
    {
        id: 'S-10293',
        name: '高腰塑身裤痛点反转脚本',
        category: '服饰内衣 / 女士内衣',
        status: '审核通过',
        uploader: '汤小真',
        updatedAt: '2026-08-20 16:08',
    },
    {
        id: 'S-10294',
        name: '防晒喷雾户外实测脚本',
        category: '个护家清 / 洗发护发',
        status: '待审核',
        uploader: '致上编导',
        updatedAt: '2026-08-21 09:26',
    },
    {
        id: 'S-10295',
        name: '汽车玻璃水卖点拆解脚本',
        category: '汽车用品 / 清洁养护',
        status: '审核通过',
        uploader: '徐振',
        updatedAt: '2026-08-22 11:18',
    },
    {
        id: 'S-10296',
        name: '无痕内衣场景种草脚本',
        category: '服饰内衣 / 女士内衣',
        status: '审核驳回',
        uploader: '汤小真',
        updatedAt: '2026-08-23 17:42',
    },
];

const activeTab = ref<TabValue>('input');
const scriptContent = ref('');
const keyword = ref('');
const categoryValue = ref('全部分类');
const statusValue = ref('全部状态');
const selectedScriptId = ref('');
const currentPage = ref(1);
const pageSize = ref(3);
const tableHeight = 370;

const dialogVisible = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value),
});

const filteredScripts = computed(() => {
    const searchValue = keyword.value.trim();
    return scriptRows.filter((item) => {
        const matchKeyword = !searchValue || item.name.includes(searchValue) || item.id.includes(searchValue);
        const matchCategory = categoryValue.value === '全部分类' || item.category === categoryValue.value;
        const matchStatus = statusValue.value === '全部状态' || item.status === statusValue.value;
        return matchKeyword && matchCategory && matchStatus;
    });
});

const currentPageScripts = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    return filteredScripts.value.slice(start, start + pageSize.value);
});

const handleScriptPageChange = (page: number, size: number) => {
    currentPage.value = page;
    pageSize.value = size;
};

watch([keyword, categoryValue, statusValue], () => {
    currentPage.value = 1;
});

const confirmScript = () => {
    emit('confirm', activeTab.value === 'input' ? scriptContent.value : selectedScriptId.value);
    dialogVisible.value = false;
};
</script>

<style scoped lang="scss">
.script-dialog {
    height: 668px;
}

.dialog-header {
    flex: 0 0 56px;
    border-bottom: 1px solid #edf2f7;
}

.dialog-body,
.script-manage,
.script-table {
    min-height: 0;
}

.dialog-footer {
    flex: 0 0 58px;
    border-top: 1px solid #edf2f7;
    background: #f8fafc;
}

.tab-row {
    border-bottom: 1px solid #dfe7f2;
}

.tab-item {
    color: #536883;
    border-bottom: 2px solid transparent;

    &.active {
        color: #7d28ff;
        border-bottom-color: #7d28ff;
    }
}

.script-input-wrap {
    min-height: 0;
}

.filter-select {
    width: 160px;
}

.status-tag {
    color: #00a870;
    background: #e8fff4;
}

.confirm-btn {
    background: #b78cff;
}

:deep(.script-textarea .el-textarea__inner) {
    height: 100%;
    min-height: 0 !important;
    padding: 18px;
    border-radius: 6px;
    box-shadow: 0 0 0 1px #dce6f2 inset;
}

:deep(.script-textarea .el-input__count) {
    right: 12px;
    bottom: 8px;
    color: #8aa0bf;
    background: transparent;
}

:deep(.script-search .el-input__wrapper),
:deep(.filter-select .el-select__wrapper) {
    height: 36px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #dce6f2 inset;
}

:deep(.el-radio__label) {
    display: none;
}

:deep(.el-radio__input.is-checked .el-radio__inner) {
    border-color: #7d28ff;
    background: #7d28ff;
}
</style>
