<template>
    <section class="step-three h-full">
        <div v-if="!isReady" class="planning-panel h-full flex-col flex-center text-center">
            <div class="fs-18 fw-700 color-000 lh-30">分镜策划进行中</div>
            <div class="fs-14 color-536 lh-24 mt-8">Agent正在进行分镜策划，请耐心等待...</div>
            <div class="progress-meta flex-between w-400 mt-36 fs-14 color-536">
                <span>当前剧集进度：</span>
                <span>第1集/共1集</span>
            </div>
            <div class="planning-card w-400 p-12 mt-14 round-10 bg-fff">
                <div class="fs-14 fw-700 color-000 lh-24 text-left">第1集 策划解析进度: {{ planningProgress }}%</div>
                <el-progress class="mt-14" :percentage="planningProgress" :show-text="false" :stroke-width="6" />
            </div>
        </div>

        <div v-else class="storyboard-workspace h-full flex gap-12 hidden pr-12">
            <aside class="episode-rail flex-col items-center pt-12">
                <div class="fs-12 color-536 lh-22 mb-8">集数</div>
                <div class="episode-no flex-center w-36 h-36 round-8 color-fff fw-700">1</div>
            </aside>
            <div class="flex-1 flex-col">
                <div class="toolbar flex-between">
                    <div class="flex-items-center gap-8 fw-700 color-000">
                        <el-icon class="color-aaa">
                            <Document />
                        </el-icon>
                        <span>第 1 集 丝袜产品展示</span>
                        <el-icon class="fs-14 color-536">
                            <Notebook />
                        </el-icon>
                        <span class="fs-12 color-536">剧本</span>
                    </div>
                    <div class="flex-items-center gap-12">
                        <el-button class="h-32 px-16 fs-12">
                            <el-icon>
                                <Refresh />
                            </el-icon>
                            重新解析
                        </el-button>
                        <el-button class="h-32 px-16 fs-12">
                            <el-icon>
                                <List />
                            </el-icon>
                            批量生视频
                        </el-button>
                    </div>
                </div>
                <div class="flex-1 flex pb-12 h-full hidden gap-12">
                    <div class="flex-col round-10 bg-fff asset-sidebar">
                        <div class="px-30 py-10">
                            <div class="asset-filter flex-items-center h-34 p-4 round-8">
                                <el-button v-for="item in filters" :key="item.value"
                                    class="filter-btn flex-1 h-26 fs-12 border-none"
                                    :class="{ active: activeFilter === item.value }" text
                                    @click="activeFilter = item.value">
                                    {{ item.label }}
                                </el-button>
                            </div>
                        </div>
                        <div class="flex-1 over-y-auto hide-scroll px-12">
                            <div class="asset-scroll flex-1 over-y-auto hide-scroll">
                                <div v-if="isFilterVisible('role')" class="asset-section">
                                    <div class="flex-between fs-14 fw-700 color-000 lh-24 mb-10">
                                        <span>角色</span>
                                        <el-icon class="color-536 pointer">
                                            <Plus />
                                        </el-icon>
                                    </div>
                                    <div v-if="currentShot.assets.roles.length" class="asset-card-list flex flex-wrap gap-10 mb-18">
                                        <div v-for="item in currentShot.assets.roles" :key="item.id" class="role-card">
                                            <img :src="item.image" :alt="item.name"
                                                class="role-img w-118 h-118 round-8 cover" />
                                            <div class="fs-14 color-000 lh-22 mt-6">{{ item.name }}</div>
                                            <div class="fs-12 color-536 lh-20">{{ item.desc }}</div>
                                            <el-button class="w-118 h-32 mt-8 fs-12">
                                                <el-icon>
                                                    <VideoPlay />
                                                </el-icon>
                                                自定义音色
                                            </el-button>
                                        </div>
                                    </div>
                                    <div v-else class="empty-card flex-col flex-center h-80 round-8 mb-18">
                                        <el-icon class="fs-26 color-ccc mb-8">
                                            <User />
                                        </el-icon>
                                        <span class="fs-12 color-aaa">暂未选择角色</span>
                                    </div>
                                </div>

                                <div v-if="isFilterVisible('scene')" class="asset-section">
                                    <div class="flex-between fs-14 fw-700 color-000 lh-24 mb-10">
                                        <span>场景</span>
                                        <el-icon class="color-536 pointer">
                                            <Plus />
                                        </el-icon>
                                    </div>
                                    <div v-if="currentShot.assets.scenes.length" class="mb-18">
                                        <div v-for="item in currentShot.assets.scenes" :key="item.id" class="scene-card">
                                            <img :src="item.image" :alt="item.name"
                                                class="scene-img w-full h-128 round-8 cover" />
                                            <div class="fs-14 color-000 lh-22 mt-8">{{ item.name }}</div>
                                            <div class="fs-12 color-536 lh-20">{{ item.desc }}</div>
                                        </div>
                                    </div>
                                    <div v-else class="empty-card flex-col flex-center h-186 round-8 mb-18">
                                        <el-icon class="fs-26 color-ccc mb-8">
                                            <Picture />
                                        </el-icon>
                                        <span class="fs-12 color-aaa">暂未选择场景</span>
                                    </div>
                                </div>

                                <div v-if="isFilterVisible('prop')" class="asset-section">
                                    <div class="flex-between fs-14 fw-700 color-000 lh-24 mb-10">
                                        <span>道具</span>
                                        <el-icon class="color-536 pointer">
                                            <Plus />
                                        </el-icon>
                                    </div>
                                    <div v-if="currentShot.assets.props.length" class="asset-card-list flex flex-wrap gap-10 mb-18">
                                        <div v-for="item in currentShot.assets.props" :key="item.id" class="role-card">
                                            <img :src="item.image" :alt="item.name"
                                                class="role-img w-118 h-118 round-8 cover" />
                                            <div class="fs-14 color-000 lh-22 mt-6">{{ item.name }}</div>
                                            <div class="fs-12 color-536 lh-20">{{ item.desc }}</div>
                                        </div>
                                    </div>
                                    <div v-else class="empty-card flex-col flex-center h-80 round-8">
                                        <el-icon class="fs-26 color-ccc mb-8">
                                            <Star />
                                        </el-icon>
                                        <span class="fs-12 color-aaa">暂未选择道具</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="story-editor flex-1 flex-col gap-12">
                        <div class="flex-1 bg-fff round-12 p-10 flex gap-12">
                            <div class="flex-col" style="width: 60%;">
                                <div class="flex-items-center gap-12 mb-8">
                                    <el-icon size="18">
                                        <Film />
                                    </el-icon>
                                    <div class="fw-700 color-000">分镜{{ currentShotIndex + 1 }}</div>
                                    <span class="bg-main px-4 fs-10 round-6 color-fff">ID</span>
                                    <div class="h-30 px-10 fs-12 bg-eee round-8 flex-items-center">
                                        <el-icon size="16">
                                            <Aim />
                                        </el-icon>
                                        <span class="ml-10">3D导演台</span>
                                        <span class="beta fs-10 ml-4 fw-600">Beta</span>
                                    </div>
                                </div>
                                <div class="round-12 border-eee flex-1 flex-col">
                                    <div class="p-10 pt-16">
                                        <div class="mb-10">
                                            <el-button class="h-26 px-12 round-6 color-333" size="small">
                                                <el-icon>
                                                    <FolderOpened />
                                                </el-icon>
                                                <span class="ml-4">项目素材库</span>
                                            </el-button>
                                            <el-button class="h-26 px-12 round-6 color-333" size="small">
                                                <el-icon>
                                                    <Folder />
                                                </el-icon>
                                                <span class="ml-4">资产库</span>
                                            </el-button>
                                        </div>

                                        <div class="flex-items-center gap-10">
                                            <UploadFile :width="36" />
                                            <div class="h-36 w-36 round-6 bg-f5 flex-center"
                                                style="border: 1px dashed #bbb;"></div>
                                            <span class="fs-12 color-999">使用 @ 引用角色、场景、道具、音色及参考素材，编辑更灵活，分镜更精准</span>
                                        </div>
                                    </div>
                                    <div class="flex-1">
                                        <el-input v-model="currentShotPrompt" type="textarea" resize="none"
                                            placeholder="请输入分镜视频提示词" class="textarea" style="height: 100%;" />
                                    </div>
                                    <div class="h-60 flex-between px-10 py-8">
                                        <div class="flex-items-center gap-10">
                                            <el-select v-model="aiVal" placeholder="Select" style="width: 190px"
                                                class="select">
                                                <el-option v-for="item in aiOptions" :key="item.value"
                                                    :label="item.label" :value="item.value" />
                                            </el-select>
                                            <el-popover v-model:visible="specVisible" placement="top-start" :width="214"
                                                trigger="click" popper-class="burst-spec-popper" :teleported="false"
                                                :show-arrow="false" :hide-after="0">
                                                <template #reference>
                                                    <div class="spec-trigger flex-center gap-6 h-32 px-10 round-8 pointer"
                                                        :class="{ active: specVisible }">
                                                        <el-icon class="fs-14 color-536">
                                                            <Clock />
                                                        </el-icon>
                                                        <span class="fs-12 color-000">{{ specSummary }}</span>
                                                    </div>
                                                </template>

                                                <div class="spec-panel bg-fff">
                                                    <div class="spec-section">
                                                        <div class="spec-label">视频时长</div>
                                                        <div class="duration-row flex-items-center gap-10">
                                                            <el-slider v-model="currentVideoDuration"
                                                                class="spec-slider flex-1" :min="1" :max="60"
                                                                :show-tooltip="false" />
                                                            <div class="duration-value flex-center h-34 px-12 round-10">
                                                                {{ currentVideoDuration }}s
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="spec-section">
                                                        <div class="spec-label">视频数量</div>
                                                        <div class="spec-segment grid-4">
                                                            <button v-for="item in videoCountOptions" :key="item"
                                                                type="button" class="spec-option"
                                                                :class="{ active: currentVideoCount === item }"
                                                                @click="currentVideoCount = item">
                                                                {{ item }}个
                                                            </button>
                                                        </div>
                                                    </div>

                                                    <div class="spec-section">
                                                        <div class="spec-label">视频清晰度</div>
                                                        <div class="spec-segment grid-3">
                                                            <button v-for="item in resolutionOptions" :key="item"
                                                                type="button" class="spec-option"
                                                                :class="{ active: currentResolution === item }"
                                                                @click="currentResolution = item">
                                                                {{ item }}
                                                            </button>
                                                        </div>
                                                    </div>

                                                    <div class="spec-section">
                                                        <div class="spec-label">视频格式</div>
                                                        <div class="spec-segment grid-2">
                                                            <button v-for="item in formatOptions" :key="item"
                                                                type="button" class="spec-option"
                                                                :class="{ active: currentFormat === item }"
                                                                @click="currentFormat = item">
                                                                {{ item }}
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </el-popover>
                                            <div class="h-32 w-32 flex-center border-eee round-8 pointer"
                                                style="border: 1px solid #dce6f2;">@</div>
                                        </div>
                                        <el-button type="primary" class="h-30 px-18 round-8 border-none">
                                            <el-icon>
                                                <MagicStick />
                                            </el-icon>
                                            {{ currentShot.points.toLocaleString() }}
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                            <div class="preview-panel round-12 flex-col" style="width: 40%;">
                                <div class="preview-tabs flex-center gap-26 fs-14 mb-8">
                                    <span class="preview-tab pointer" :class="{ active: previewMode === 'generated' }"
                                        @click="previewMode = 'generated'">分镜生成</span>
                                    <span class="preview-tab pointer" :class="{ active: previewMode === 'origin' }"
                                        @click="previewMode = 'origin'">原视频</span>
                                </div>
                                <div v-if="previewMode === 'generated' && currentShot.status === 'pending'"
                                    class="preview-empty flex-1 flex-col flex-center round-8">
                                    <el-icon class="fs-36 color-ccc mb-8">
                                        <VideoCamera />
                                    </el-icon>
                                    <span class="fs-12 color-aaa">请先完成分镜视频生成</span>
                                </div>
                                <div v-else class="origin-preview flex-1 flex-center round-8 hidden relative">
                                    <img :src="currentShot.cover || peopleImg" :alt="`分镜${currentShotIndex + 1}`"
                                        class="origin-img h-full cover" />
                                    <span class="play-btn absolute flex-center wh-64 round pointer">
                                        <el-icon class="fs-40 color-fff">
                                            <VideoPlay />
                                        </el-icon>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <footer class="shot-strip bg-fff round-12 px-14 py-14">
                            <div class="color-000 lh-24 mb-10">{{ shotList.length }} 分镜</div>
                            <div class="shot-list flex-items-center over-x-auto hide-scroll">
                                <template v-for="(shot, index) in shotList" :key="shot.id">
                                    <div class="shot-card flex-col items-center pointer"
                                        :class="{ active: activeShotId === shot.id }" @click="selectShot(shot.id)">
                                        <div class="shot-thumb relative flex-center w-130 h-90 round-6 hidden">
                                            <img v-if="shot.cover" :src="shot.cover" :alt="`分镜${index + 1}`"
                                                class="w-full h-full cover" />
                                            <el-icon v-else class="fs-28 color-ccc">
                                                <VideoCamera />
                                            </el-icon>
                                            <button v-if="shotList.length > 1" type="button"
                                                class="shot-delete absolute flex-center wh-24 round-6 pointer"
                                                @click.stop="deleteShot(shot.id)">
                                                <el-icon>
                                                    <Delete />
                                                </el-icon>
                                            </button>
                                        </div>
                                        <div class="fs-12 color-536 lh-22 mt-6">
                                            分镜 {{ padShotNo(index + 1) }} · {{ shot.status === 'generated' ? `${shot.duration}s` : '待生成' }}
                                        </div>
                                    </div>

                                    <el-tooltip v-if="index < shotList.length - 1" content="新增分镜" placement="top"
                                        :show-after="120">
                                        <button type="button" class="shot-insert flex-center pointer"
                                            @click.stop="insertShotAfter(index)">
                                            <span class="insert-line"></span>
                                            <span class="insert-dot flex-center">+</span>
                                        </button>
                                    </el-tooltip>
                                </template>
                            </div>
                        </footer>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import {
    Aim,
    Clock,
    Document,
    Folder,
    FolderOpened,
    List,
    MagicStick,
    Notebook,
    Picture,
    Plus,
    Refresh,
    Star,
    User,
    Delete,
    VideoCamera,
    VideoPlay,
    Film,
} from '@element-plus/icons-vue';
import peopleImg from '@/static/image/meinv.png';
import UploadFile from '@/components/Upload/index.vue';

type FilterValue = 'all' | 'role' | 'scene' | 'prop';
type AssetFilterValue = Exclude<FilterValue, 'all'>;
type PreviewMode = 'generated' | 'origin';
type ResolutionValue = '480p' | '720p' | '1080p';
type FormatValue = 'mp4' | 'mov';
type ShotStatus = 'generated' | 'pending';

type ShotAsset = {
    id: string;
    name: string;
    desc: string;
    image: string;
};

type ShotItem = {
    id: string;
    status: ShotStatus;
    duration: number;
    count: number;
    resolution: ResolutionValue;
    format: FormatValue;
    points: number;
    prompt: string;
    cover?: string;
    assets: {
        roles: ShotAsset[];
        scenes: ShotAsset[];
        props: ShotAsset[];
    };
};

const filters: { label: string; value: FilterValue }[] = [
    { label: '全部', value: 'all' },
    { label: '角色', value: 'role' },
    { label: '场景', value: 'scene' },
    { label: '道具', value: 'prop' },
];
const aiVal = ref('1')
const aiOptions: any = [
    { label: 'Doubao-Seedance-2.5', value: '1' },
    { label: 'Doubao-Seedance-2-0', value: '2' },
];
const filledShotPrompt = `画风: 写实风格, 细节刻画逼真，参考院线电影，真人电影风格，影视大片，真实透视比例，细节清晰不过度锐化

分镜场景设定在：现代白天·轻奢简约风·居家客厅，室内，白天。

分镜具体动作描述：
整体视觉基调：画面明亮，色彩饱和，质感细腻，景深较浅以突出人物和产品。

镜头1（0-2秒）：【现代白天·轻奢简约风·居家客厅，室内，白天】
【机位】机位与美妆博主胸部齐平，平拍朝向美妆博主，固定不动，美妆博主坐在客厅沙发上。
【动作】中近景，美妆博主面部神态鲜活自然，眉眼灵动，带有自然小幅度肢体微晃，右手持产品，左手对准产品瓶盖用手指将产品瓶盖弹飞，随后左手拿出紫色手套涂抹工具，嘴角上扬，眼神明亮自信。`;

let nextShotId = 7;

const createPendingShot = (id = `shot-${nextShotId++}`): ShotItem => ({
    id,
    status: 'pending',
    duration: 5,
    count: 1,
    resolution: '720p',
    format: 'mov',
    points: 1135,
    prompt: '',
    assets: {
        roles: [],
        scenes: [],
        props: [],
    },
});

const shotList = ref<ShotItem[]>([
    {
        id: 'shot-1',
        status: 'generated',
        duration: 15,
        count: 1,
        resolution: '720p',
        format: 'mp4',
        points: 3405,
        prompt: filledShotPrompt,
        cover: peopleImg,
        assets: {
            roles: [
                { id: 'role-1', name: '美妆博主', desc: '主形象', image: peopleImg },
                { id: 'role-2', name: '路人甲', desc: '变装1', image: peopleImg },
                { id: 'role-3', name: '路人乙', desc: '变装2', image: peopleImg },
            ],
            scenes: [
                { id: 'scene-1', name: 'Modern Living Room Streaming Area', desc: '主形象', image: peopleImg },
            ],
            props: [],
        },
    },
    createPendingShot('shot-2'),
    createPendingShot('shot-3'),
    createPendingShot('shot-4'),
    createPendingShot('shot-5'),
    createPendingShot('shot-6'),
]);

const isReady = ref(false);
const planningProgress = ref(0);
const activeFilter = ref<FilterValue>('all');
const previewMode = ref<PreviewMode>('generated');
const specVisible = ref(false);
const activeShotId = ref(shotList.value[0].id);
const videoCountOptions = [1, 2, 3, 4];
const resolutionOptions: ResolutionValue[] = ['480p', '720p', '1080p'];
const formatOptions: FormatValue[] = ['mp4', 'mov'];
const currentShotIndex = computed(() => Math.max(0, shotList.value.findIndex((item) => item.id === activeShotId.value)));
const currentShot = computed(() => shotList.value[currentShotIndex.value] || shotList.value[0]);
const currentShotPrompt = computed({
    get: () => currentShot.value.prompt,
    set: (value: string) => {
        currentShot.value.prompt = value;
    },
});
const currentVideoDuration = computed({
    get: () => currentShot.value.duration,
    set: (value: number) => {
        currentShot.value.duration = value;
    },
});
const currentVideoCount = computed({
    get: () => currentShot.value.count,
    set: (value: number) => {
        currentShot.value.count = value;
    },
});
const currentResolution = computed({
    get: () => currentShot.value.resolution,
    set: (value: ResolutionValue) => {
        currentShot.value.resolution = value;
    },
});
const currentFormat = computed({
    get: () => currentShot.value.format,
    set: (value: FormatValue) => {
        currentShot.value.format = value;
    },
});
const specSummary = computed(() => `${currentShot.value.duration}s | ${currentShot.value.resolution} | ${currentShot.value.count}个 | ${currentShot.value.format}`);
let timer: number | undefined;

const isFilterVisible = (value: AssetFilterValue) => {
    return activeFilter.value === 'all' || activeFilter.value === value;
};

const padShotNo = (value: number) => String(value).padStart(2, '0');

const selectShot = (id: string) => {
    activeShotId.value = id;
    specVisible.value = false;
};

const insertShotAfter = (index: number) => {
    const shot = createPendingShot();
    shotList.value.splice(index + 1, 0, shot);
    selectShot(shot.id);
};

const deleteShot = (id: string) => {
    if (shotList.value.length <= 1) {
        return;
    }

    const index = shotList.value.findIndex((item) => item.id === id);
    if (index === -1) {
        return;
    }

    shotList.value.splice(index, 1);
    if (activeShotId.value === id) {
        const nextIndex = Math.min(index, shotList.value.length - 1);
        selectShot(shotList.value[nextIndex].id);
    }
};

const runPlanning = () => {
    timer = window.setInterval(() => {
        planningProgress.value = Math.min(100, planningProgress.value + 20);

        if (planningProgress.value >= 100) {
            window.clearInterval(timer);
            timer = undefined;
            window.setTimeout(() => {
                isReady.value = true;
            }, 400);
        }
    }, 420);
};

onMounted(() => {
    runPlanning();
});

onBeforeUnmount(() => {
    if (timer) {
        window.clearInterval(timer);
    }
});
</script>

<style scoped lang="scss">
.step-three {
    background: #f8f9fa;
}

.planning-panel {
    min-height: calc(100vh - 60px);
}

.color-536 {
    color: #536883;
}

.planning-card {
    border: 1px solid #e2e8f3;
}

.episode-rail {
    flex: 0 0 60px;
    background: #f3f4fa;
}

.episode-no {
    background: rgba(var(--main-color), 1);
}

.asset-sidebar {
    flex: 0 0 270px;
    min-height: 0;
}

.asset-filter {
    background: #f4f7fb;
}

.filter-btn.active {
    background: #fff;
    box-shadow: 0 1px 4px rgba(17, 36, 62, .12);
}

.asset-scroll,
.script-scroll,
.story-main {
    min-height: 0;
}

.role-img,
.scene-img,
.empty-card,
.preview-empty,
.shot-thumb {
    background: #f3f5f9;
}

.role-card {
    width: 118px;
}

.scene-card {
    width: 100%;
}

.story-content {
    min-height: 0;
}

.story-editor {
    min-width: 0;
}

.toolbar {
    flex: 0 0 54px;
}

.script-scroll {
    border-top: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
}

.beta {
    color: #6a44ff;
}

.preview-panel {
    min-width: 420px;
}

.preview-tab {
    position: relative;
    height: 28px;
    line-height: 28px;
    color: #536883;

    &.active {
        color: #000;

        &::after {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 2px;
            background: rgba(var(--main-color), 1);
            content: '';
        }
    }
}

.origin-preview {
    background: #000;
}

.origin-img {
    max-width: 74%;
}

.play-btn {
    top: 50%;
    left: 50%;
    background: rgba(0, 0, 0, .38);
    transform: translate(-50%, -50%);
}

.shot-strip {
    flex: 0 0 164px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #edf2f7;
}

.shot-list {
    width: 100%;
    min-width: 0;
    overflow-y: hidden;
    gap: 2px;
}

.shot-card {
    flex: 0 0 130px;

    &.active {
        .shot-thumb {
            border-color: #4c45ff;
        }
    }
}

.shot-thumb {
    border: 2px solid transparent;
    transition: border-color .18s ease;
}

.shot-delete {
    top: 6px;
    right: 6px;
    border: 0;
    color: #fff;
    background: rgba(85, 92, 106, .72);
    opacity: 0;
    transition: opacity .18s ease;
}

.shot-card:hover {
    .shot-delete {
        opacity: 1;
    }
}

.shot-insert {
    position: relative;
    flex: 0 0 16px;
    align-self: flex-start;
    width: 16px;
    height: 90px;
    margin-top: 0;
    border: 0;
    background: transparent;

    .insert-line {
        width: 2px;
        height: 90px;
        border-radius: 2px;
        background: transparent;
    }

    .insert-dot {
        position: absolute;
        top: 39px;
        left: 50%;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        color: #fff;
        background: #4c45ff;
        font-size: 14px;
        line-height: 18px;
        opacity: 0;
        transform: translateX(-50%);
        transition: opacity .18s ease;
    }

    &:hover {
        .insert-line {
            background: #4c45ff;
        }

        .insert-dot {
            opacity: 1;
        }
    }
}

:deep(.planning-card .el-progress-bar__outer) {
    background: #eef1f8;
}

:deep(.planning-card .el-progress-bar__inner) {
    background: rgba(var(--main-color), 1);
}

.textarea {
    :deep(.el-textarea__inner) {
        height: 100%;
        box-shadow: none;
    }
}

.select {
    :deep(.el-select__wrapper) {
        border-radius: 8px;
    }
}

:deep(.burst-spec-popper) {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 34px rgba(19, 35, 64, .14) !important;
}

.spec-trigger {
    min-width: 168px;
    border: 1px solid #dce6f2;
    background: #fff;
    white-space: nowrap;

    &.active,
    &:hover {
        border-color: #cdd7e6;
        background: #f8fafc;
    }
}

.spec-panel {
    padding: 14px 12px 10px;
}

.spec-section+.spec-section {
    margin-top: 12px;
}

.spec-label {
    margin-bottom: 8px;
    color: #8b97aa;
    font-size: 12px;
    line-height: 18px;
}

.duration-row {
    height: 34px;
}

.duration-value {
    min-width: 44px;
    border: 1px solid #dbe4f0;
    background: #fff;
    color: #111827;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(37, 56, 88, .08);
}

.spec-slider {
    :deep(.el-slider__runway) {
        height: 2px;
        margin: 16px 0;
        background: #121212;
    }

    :deep(.el-slider__bar) {
        height: 2px;
        background: #121212;
    }

    :deep(.el-slider__button) {
        width: 13px;
        height: 13px;
        border: 1px solid #d7dfeb;
        background: #fff;
        box-shadow: 0 2px 7px rgba(25, 43, 72, .2);
    }
}

.spec-segment {
    display: grid;
    height: 34px;
    padding: 3px;
    border-radius: 10px;
    background: #f1f3f8;
    gap: 2px;
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.spec-option {
    min-width: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #68758a;
    font-size: 12px;
    font-weight: 600;
    line-height: 28px;
    cursor: pointer;

    &.active {
        background: #fff;
        color: #111827;
        font-weight: 800;
        box-shadow: 0 3px 10px rgba(31, 46, 76, .1);
    }
}
</style>
