<template>
    <div class="vh100" style="padding: 0 20%">
        <div class="mb-30" style="margin-top: 20%;">
            <div class="text-center fs-18 fw-600">创意复刻，让创意焕发新生</div>
            <div class="text-center color-888 fs-12 mt-20">上传您需要转换风格、语言或人物角色的视频片断，通过 AI 大模型极速复刻整个故事片断。</div>
        </div>
        <div class="w-full">
            <div class="bg-fff p-20 round-12">
                <UploadFile listType="drap" bgClass="xxxx">
                    <template #trigger>
                        <div class="flex-center flex-col">
                            <div class="w-40 h-40 round bg-eee flex-center color-888">
                                <el-icon size="20">
                                    <Upload />
                                </el-icon>
                            </div>
                            <div class="color-333 fs-12 fw-600 mt-10">点击上传 或 拖拽视频文件到此区域</div>
                            <div class="color-888 fs-12 mt-10">视频格式支持mp4/mov，大小不超过500M，时长不超过3分钟</div>
                        </div>
                    </template>
                </UploadFile>
            </div>
        </div>
        <div class="setting-card w-full flex-between gap-18 px-20 py-14 mt-24 round-14 bg-fff">
            <div class="setting-left flex-items-center">
                <el-select v-model="language" class="language-select" size="large">
                    <template #prefix>
                        <el-icon>
                            <Monitor />
                        </el-icon>
                        <span class="fs-12 color-666 ml-4">目标语种</span>
                    </template>
                    <el-option v-for="item in languageOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </div>

            <div class="setting-right flex-items-center gap-8">
                <el-popover v-model:visible="ratioVisible" placement="bottom" :width="158" trigger="click"
                    popper-class="burst-setting-popper" :hide-after="0">
                    <template #reference>
                        <div class="setting-trigger flex-center gap-8 h-34 px-12 round-8 pointer"
                            :class="{ active: ratioVisible }">
                            <span class="ratio-icon" :class="selectedRatio.iconClass"></span>
                            <span class="fs-12 fw-700 color-000">{{ selectedRatio.value }}</span>
                            <el-icon class="fs-12 color-666">
                                <ArrowUp v-if="ratioVisible" />
                                <ArrowDown v-else />
                            </el-icon>
                        </div>
                    </template>
                    <div class="select-panel p-6">
                        <div class="fs-12 color-888 px-8 py-6">比例</div>
                        <div v-for="item in ratioOptions" :key="item.value"
                            class="select-option flex-items-center gap-10 h-34 px-8 round-4 pointer"
                            :class="{ active: ratio === item.value }" @click="selectRatio(item.value)">
                            <span class="ratio-icon" :class="item.iconClass"></span>
                            <span class="fs-12 fw-700 color-000">{{ item.value }}</span>
                        </div>
                    </div>
                </el-popover>

                <el-popover v-model:visible="resolutionVisible" placement="bottom" :width="158" trigger="click"
                    popper-class="burst-setting-popper" :hide-after="0">
                    <template #reference>
                        <div class="setting-trigger flex-between gap-12 h-34 px-12 round-8 pointer w-80"
                            :class="{ active: resolutionVisible }">
                            <span class="fs-12 fw-700 color-000">{{ resolution }}</span>
                            <el-icon class="fs-12 color-666">
                                <ArrowUp v-if="resolutionVisible" />
                                <ArrowDown v-else />
                            </el-icon>
                        </div>
                    </template>
                    <div class="select-panel p-6">
                        <div class="fs-12 color-888 px-8 py-6">分辨率</div>
                        <div v-for="item in resolutionOptions" :key="item.value"
                            class="select-option h-34 lh-34 px-8 round-4 fs-12 fw-700 pointer"
                            :class="{ active: resolution === item.value }" @click="selectResolution(item.value)">
                            {{ item.value }}
                        </div>
                    </div>
                </el-popover>

                <el-popover v-model:visible="styleVisible" placement="bottom-end" :width="600" trigger="click"
                    popper-class="burst-style-popper" :hide-after="0">
                    <template #reference>
                        <div class="style-trigger flex-items-center gap-8 h-34 px-8 round-8 pointer"
                            :class="{ active: styleVisible }">
                            <img :src="selectedStyle.image" :alt="selectedStyle.name"
                                class="style-thumb wh-28 round-6 cover" />
                            <span class="fs-12 fw-700 color-000">{{ selectedStyle.name }}</span>
                            <el-icon class="fs-12 color-666">
                                <ArrowUp v-if="styleVisible" />
                                <ArrowDown v-else />
                            </el-icon>
                        </div>
                    </template>
                    <div class="style-panel p-24 hide-scroll">
                        <div class="fs-16 fw-700 color-000 mb-18">风格库</div>
                        <div class="flex-between mb-20">
                            <div class="style-tabs flex-items-center h-34 p-4 round-8">
                                <span v-for="item in styleTabs" :key="item.value"
                                    class="style-tab h-26 lh-26 px-14 round-6 fs-12 pointer"
                                    :class="{ active: activeStyleTab === item.value }"
                                    @click="activeStyleTab = item.value">
                                    {{ item.label }}
                                    <span class="color-888">{{ item.count }}</span>
                                </span>
                            </div>
                            <el-input v-model="styleKeyword" class="style-search" placeholder="搜索">
                                <template #prefix>
                                    <el-icon>
                                        <Search />
                                    </el-icon>
                                </template>
                            </el-input>
                        </div>
                        <div class="style-list flex flex-wrap gap-10">
                            <div class="style-card custom-style flex-col flex-center round-12 pointer"
                                :class="{ active: style === 'custom' }" @click="selectStyle('custom')">
                                <el-icon class="fs-24 color-666 mb-10">
                                    <Picture />
                                </el-icon>
                                <span class="fs-12 color-666">自定义风格</span>
                            </div>
                            <div v-for="item in filteredStyles" :key="item.value"
                                class="style-card relative round-12 hidden pointer"
                                :class="{ active: style === item.value }" @click="selectStyle(item.value)">
                                <img :src="item.image" :alt="item.name" class="w-full h-full cover" />
                                <div
                                    class="style-name absolute left-0 right-0 bottom-0 h-32 lh-32 text-center fs-12 fw-700 color-fff">
                                    {{ item.name }}
                                </div>
                                <span v-if="style === item.value"
                                    class="style-check absolute flex-center wh-18 round color-fff">
                                    <el-icon class="fs-12">
                                        <Check />
                                    </el-icon>
                                </span>
                            </div>
                        </div>
                    </div>
                </el-popover>
            </div>
        </div>

        <div class="flex-center">
            <el-button type="primary" class="start-btn h-48 px-88 round-14 border-none fs-16 fw-700 mt-24"
                @click="goReplica">
                <el-icon>
                    <MagicStick />
                </el-icon>
                <span>开始智能复刻</span>
                <el-icon>
                    <ArrowRight />
                </el-icon>
            </el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import {
    ArrowDown,
    ArrowRight,
    ArrowUp,
    Check,
    MagicStick,
    Monitor,
    Picture,
    Search,
    Upload,
} from '@element-plus/icons-vue';
import UploadFile from '@/components/Upload/index.vue'
import productImg from '@/static/image/huaban.png';
import peopleImg from '@/static/image/meinv.png';

const router = useRouter();
const language = ref('zh');
const ratio = ref('16:9');
const resolution = ref('4k');
const style = ref('anime');
const ratioVisible = ref(false);
const resolutionVisible = ref(false);
const styleVisible = ref(false);
const activeStyleTab = ref('all');
const styleKeyword = ref('');

const languageOptions = [
    { label: '中文', value: 'zh' },
    { label: 'English', value: 'en' },
];

const ratioOptions = [
    { value: '16:9', iconClass: 'wide' },
    { value: '4:3', iconClass: 'wide' },
    { value: '3:4', iconClass: 'vertical' },
    { value: '9:16', iconClass: 'vertical' },
    { value: '21:9', iconClass: 'cinema' },
];

const resolutionOptions = [
    { value: '480p' },
    { value: '720p' },
    { value: '1080p' },
    { value: '4k' },
];

const styleTabs = [
    { label: '全部', value: 'all', count: 21 },
    { label: '真人', value: 'real', count: 10 },
    { label: '3D', value: '3d', count: 5 },
    { label: '2D', value: '2d', count: 6 },
    { label: '自定义', value: 'custom', count: 0 },
];

const styleOptions = [
    { value: 'modern', name: '现代都市通用', type: 'real', image: peopleImg },
    { value: 'film', name: '电影感', type: 'real', image: productImg },
    { value: 'anime', name: '2D日漫', type: '2d', image: peopleImg },
    { value: 'korean-city', name: '2D韩漫都市', type: '2d', image: productImg },
    { value: 'chinese', name: '3D国风', type: '3d', image: peopleImg },
    { value: 'xianxia', name: '3D仙侠', type: '3d', image: productImg },
    { value: 'korean', name: '2D韩漫', type: '2d', image: peopleImg },
    { value: 'girl', name: '2D乙女', type: '2d', image: productImg },
    { value: 'dream', name: '2D国漫', type: '2d', image: peopleImg },
    { value: 'cg', name: 'CG风格', type: '3d', image: productImg },
    { value: 'cartoon', name: '3D卡通', type: '3d', image: peopleImg },
    { value: 'dark', name: 'CG赛博朋克', type: '3d', image: productImg },
    { value: 'ink', name: '工笔画', type: '2d', image: peopleImg },
    { value: 'ancient', name: '古韵写实雅致风', type: 'real', image: productImg },
];

const selectedRatio = computed(() => ratioOptions.find((item) => item.value === ratio.value) || ratioOptions[0]);
const selectedStyle = computed(() => styleOptions.find((item) => item.value === style.value) || styleOptions[2]);
const filteredStyles = computed(() => {
    const keyword = styleKeyword.value.trim();
    return styleOptions.filter((item) => {
        const isMatchedTab = activeStyleTab.value === 'all' || item.type === activeStyleTab.value;
        const isMatchedKeyword = !keyword || item.name.includes(keyword);
        return isMatchedTab && isMatchedKeyword;
    });
});

const selectRatio = (value: string) => {
    ratio.value = value;
    ratioVisible.value = false;
};

const selectResolution = (value: string) => {
    resolution.value = value;
    resolutionVisible.value = false;
};

const selectStyle = (value: string) => {
    style.value = value;
    if (value === 'custom') {
        return;
    }
    styleVisible.value = false;
};

const goReplica = () => {
    router.push({ name: 'BurstReplica' });
};
</script>

<style scoped lang="scss">
.setting-card {
    box-shadow: 0 8px 22px rgba(20, 38, 70, .08);
}

.language-select {
    width: 160px;
}

.setting-trigger,
.style-trigger {
    border: 1px solid #dce6f2;
    background: #f5f7fb;

    &.active {
        border-color: rgba(var(--main-color), 1);
        box-shadow: 0 0 0 1px rgba(var(--main-color), .45);
    }
}

.ratio-icon {
    display: inline-block;
    width: 18px;
    height: 12px;
    border: 2px solid #56657a;
    border-radius: 2px;

    &.vertical {
        width: 12px;
        height: 18px;
    }

    &.cinema {
        width: 22px;
        height: 8px;
    }
}

.start-btn {
    min-width: 400px;
    background: linear-gradient(135deg, #b212ff 0%, #573cff 100%);
    box-shadow: 0 14px 28px rgba(125, 40, 255, .28);
}

:deep(.el-select__wrapper) {
    min-height: 34px;
    border-radius: 10px;
    background: #f5f7fb;
    box-shadow: 0 0 0 1px #edf2f7 inset;
}

.select-option {

    &:hover,
    &.active {
        background: #f5f7fb;
    }
}

.style-panel {
    max-height: 500px;
    overflow-y: auto;
}

.style-tabs {
    background: #f5f7fb;
}

.style-tab {
    color: #334b68;

    &.active {
        background: #fff;
        color: #111827;
        box-shadow: 0 2px 8px rgba(20, 38, 70, .06);
    }
}

.style-search {
    width: 156px;
}

.style-card {
    width: 102px;
    height: 102px;
    border: 2px solid transparent;
    background: #f5f7fb;

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

.custom-style {
    border: 1px solid #dce6f2;
}

.style-name {
    background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
}

.style-check {
    top: 6px;
    right: 6px;
    background: rgba(var(--main-color), 1);
    border: 2px solid #fff;
}
</style>

<style lang="scss">
.burst-setting-popper,
.burst-style-popper {
    padding: 0 !important;
    border-radius: 12px !important;
}
</style>
