<template>
    <div class="flex-items-center flex-wrap">
        <el-popover v-model:visible="productPopoverVisible" placement="bottom" :width="150" trigger="hover" :hide-after="0">
            <template #reference>
                <el-button class="m-2 h-30 border-none px-6">
                    <el-icon>
                        <component :is="Box" />
                    </el-icon>
                    <span>商品</span>
                </el-button>
            </template>
            <div>
                <div class="flex-items-center gap-6 h-30 border-none pointer hover" @click="openProductInfoDialog">
                    <el-icon>
                        <component :is="Link" />
                    </el-icon>
                    <span>输入商品信息</span>
                </div>
                <div class="flex-items-center gap-6 h-30 border-none pointer hover" @click="openProductImageDialog('goods')">
                    <el-icon>
                        <component :is="Link" />
                    </el-icon>
                    <span>添加商品图</span>
                </div>
            </div>
        </el-popover>

        <el-popover v-model:visible="referencePopoverVisible" placement="bottom" :width="150" trigger="hover"
            :hide-after="0">
            <template #reference>
                <el-button class="m-2 h-30 border-none px-6">
                    <el-icon>
                        <component :is="VideoCamera" />
                    </el-icon>
                    <span>参考</span>
                </el-button>
            </template>
            <div>
                <div class="flex-items-center gap-6 h-30 border-none pointer hover" @click="openReferenceVideoDialog">
                    <el-icon>
                        <component :is="Clock" />
                    </el-icon>
                    <span>历史投放素材</span>
                </div>
                <div class="flex-items-center gap-6 h-30 border-none pointer hover">
                    <el-icon>
                        <component :is="Upload" />
                    </el-icon>
                    <span>本地上传</span>
                </div>
            </div>
        </el-popover>

        <el-popover v-model:visible="scriptPopoverVisible" placement="bottom" :width="120" trigger="hover"
            popper-class="agent-prompt-tools-popper" :hide-after="0">
            <template #reference>
                <el-button class="m-2 h-30 border-none px-6">
                    <el-icon>
                        <component :is="Document" />
                    </el-icon>
                    <span>脚本/原料</span>
                </el-button>
            </template>
            <div>
                <div class="flex-items-center gap-6 h-30 border-none pointer hover" @click="openScriptDialog">
                    <el-icon>
                        <component :is="Document" />
                    </el-icon>
                    <span>添加脚本</span>
                </div>
                <div class="flex-items-center gap-6 h-30 border-none pointer hover" @click="openProductImageDialog('source')">
                    <el-icon>
                        <component :is="Film" />
                    </el-icon>
                    <span>添加原料</span>
                </div>
            </div>
        </el-popover>

        <el-popover placement="bottom" :width="378" trigger="click" popper-class="agent-param-popper" :hide-after="0">
            <template #reference>
                <el-button class="flex-center gap-6 h-30 border-none px-6">
                    <el-icon>
                        <component :is="Setting" />
                    </el-icon>
                    <span class="mr-6">生成参数</span>
                    <el-icon size="12">
                        <component :is="ArrowDownBold" />
                    </el-icon>
                </el-button>
            </template>

            <div class="param-panel p-12 round-4 bg-fff">
                <div class="switch-row flex h-36 p-4 round-4 mb-8">
                    <el-button v-for="item in mediaTypes" :key="item.value"
                        class="switch-btn flex-1 h-28 round-4 border-none fs-14"
                        :class="{ active: mediaType === item.value }" text @click="setMediaType(item.value)">
                        <el-icon>
                            <component :is="item.icon" />
                        </el-icon>
                        <span>{{ item.label }}</span>
                    </el-button>
                </div>

                <div class="switch-row flex h-36 p-4 round-4">
                    <el-button v-for="item in paramTabs" :key="item.value"
                        class="switch-btn flex-1 h-28 round-4 border-none fs-14"
                        :class="{ active: paramTab === item.value }" text @click="setParamTab(item.value)">
                        {{ item.label }}
                    </el-button>
                </div>

                <template v-if="mediaType === 'image' && paramTab === 'frame'">
                    <div class="flex-between mt-14 mb-10">
                        <span class="fs-12 color-888">比例</span>
                        <span class="fs-12 color-000">{{ imageRatio }}</span>
                    </div>
                    <div class="option-list flex flex-wrap gap-6">
                        <div v-for="item in imageRatios" :key="item.value"
                            class="option-btn flex-center gap-6 h-34 px-12 round-6 pointer fs-12"
                            :class="{ active: imageRatio === item.value }" text @click="imageRatio = item.value">
                            <el-icon v-if="item.icon">
                                <component :is="item.icon" />
                            </el-icon>
                            <span v-else class="ratio-icon round-2" :class="item.iconClass"></span>
                            <span>{{ item.label }}</span>
                        </div>
                    </div>
                    <el-button class="custom-size flex-center gap-8 w-full h-34 mt-8 round-6 bg-fff fs-12">
                        <el-icon>
                            <FullScreen />
                        </el-icon>
                        <span>自定义像素尺寸</span>
                    </el-button>
                </template>

                <template v-if="mediaType === 'image' && paramTab === 'output'">
                    <div class="fs-12 color-888 mt-14 mb-10">画质</div>
                    <div class="option-list flex gap-6">
                        <div v-for="item in qualities" :key="item"
                            class="option-btn flex-center flex-1 fs-12 pointer h-34 round-6 border-none"
                            :class="{ active: imageQuality === item }" text @click="imageQuality = item">
                            {{ item }}
                        </div>
                    </div>
                    <div class="fs-12 color-888 mt-14 mb-10">数量</div>
                    <div class="option-list flex gap-6">
                        <div v-for="item in quantities" :key="item"
                            class="option-btn flex-1 h-34 round-6 flex-center fs-12 pointer"
                            :class="{ active: imageQuantity === item }" text @click="imageQuantity = item">
                            {{ item }}
                        </div>
                    </div>
                </template>

                <template v-if="mediaType === 'video' && paramTab === 'frame'">
                    <div class="fs-12 color-888 mt-14 mb-10">参考方式</div>
                    <div class="option-list flex gap-6">
                        <div v-for="item in referenceModes" :key="item"
                            class="option-btn flex-1 h-34 round-6 flex-center pointer fs-12"
                            :class="{ active: referenceMode === item }" text @click="referenceMode = item">
                            {{ item }}
                        </div>
                    </div>
                    <div class="flex-between mt-14 mb-10">
                        <span class="fs-12 color-888">比例</span>
                        <span class="fs-12 color-888">智能</span>
                    </div>
                    <div class="option-list flex flex-wrap gap-6">
                        <div v-for="item in videoRatios" :key="item.value"
                            class="option-btn flex-center gap-6 h-34 px-12 round-6 flex-center pointer fs-12"
                            :class="{ active: videoRatio === item.value }" text @click="videoRatio = item.value">
                            <el-icon v-if="item.icon">
                                <component :is="item.icon" />
                            </el-icon>
                            <span v-else class="ratio-icon round-2" :class="item.iconClass"></span>
                            <span>{{ item.label }}</span>
                        </div>
                    </div>
                    <el-button class="custom-size flex-center gap-8 w-full h-34 mt-8 round-10 bg-fff">
                        <el-icon>
                            <FullScreen />
                        </el-icon>
                        <span>自定义像素尺寸</span>
                    </el-button>
                </template>

                <template v-if="mediaType === 'video' && paramTab === 'output'">
                    <div class="fs-12 color-888 mt-14 mb-10">清晰度</div>
                    <div class="option-list flex gap-6">
                        <div v-for="item in resolutions" :key="item"
                            class="option-btn flex-1 h-32 round-6 flex-center pointer fs-12"
                            :class="{ active: resolution === item }" text @click="resolution = item">
                            {{ item }}
                        </div>
                    </div>
                    <div class="custom-input flex-between h-32 px-10 mt-6 round-6">
                        <el-input v-model="customResolution" class="param-input flex-1"
                            placeholder="自定义，例如 2160 或 4K" />
                        <span class="fs-12 color-888">建议值可直接选择</span>
                    </div>
                    <div class="fs-12 color-888 mt-14 mb-10">数量</div>
                    <div class="option-list flex gap-6">
                        <div v-for="item in quantities" :key="item"
                            class="option-btn flex-1 h-32 round-4 flex-center pointer fs-12"
                            :class="{ active: videoQuantity === item }" text @click="videoQuantity = item">
                            {{ item }}
                        </div>
                        <el-input v-model="customDuration" class="w-96" placeholder="自定义" />
                    </div>
                    <div class="fs-12 color-888 mt-14 mb-10">时长</div>
                    <div class="option-list flex gap-6">
                        <div v-for="item in durations" :key="item"
                            class="option-btn flex-1 h-32 round-6 flex-center pointer fs-12"
                            :class="{ active: duration === item }" text @click="duration = item">
                            {{ item }}
                        </div>
                        <div class="duration-input flex-items-center h-32 round-6 pl-10">
                            <el-input v-model="customDuration" class="param-input w-96" placeholder="自定义" />
                            <span class="unit flex-center h-full px-10 fs-12">秒</span>
                        </div>
                    </div>
                    <div class="switch-setting flex-between h-44 px-14 mt-16 round-6">
                        <span class="fs-12 color-888">生成声音</span>
                        <el-switch v-model="withVoice" />
                        <span class="fs-12 color-888 ml-18">添加水印</span>
                        <el-switch v-model="withWatermark" />
                    </div>
                </template>
            </div>
        </el-popover>
        <el-popover placement="bottom" :width="232" trigger="click" popper-class="agent-style-popper" :hide-after="0">
            <template #reference>
                <el-button class="flex-center gap-6 h-30 border-none px-6">
                    <el-icon>
                        <component :is="Position" />
                    </el-icon>
                    <span class="mr-6">风格</span>
                    <el-icon size="12">
                        <component :is="ArrowDownBold" />
                    </el-icon>
                </el-button>
            </template>
            <div class="flex bg-fff hidden">
                <div class="style-tabs w-100 py-8">
                    <div v-for="item in styleTabs" :key="item.value" class="flex-between h-38 px-12 fs-14 pointer"
                        :class="{ active: activeStyleTab === item.value }" @click="activeStyleTab = item.value">
                        <span>{{ item.label }}-{{ item.count }}</span>
                        <el-icon v-if="activeStyleTab === item.value" size="12">
                            <ArrowRightBold />
                        </el-icon>
                    </div>
                </div>
                <div class="style-options flex-1 py-8 over-y-auto">
                    <el-checkbox-group v-model="currentStyleChecked" class="flex-col">
                        <el-checkbox v-for="item in currentStyleOptions" :key="item.value" :value="item.value"
                            class="style-check flex-items-center h-42 px-16">
                            {{ item.label }}
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
        </el-popover>
        <AgentProductInfoDialog v-model="productInfoVisible" />
        <AgentProductImageDialog v-model="productImageVisible" :dataType="dataType" />
        <AgentReferenceVideoDialog v-model="referenceVideoVisible" />
        <AgentScriptDialog v-model="scriptVisible" />
    </div>
</template>

<script setup lang="ts">
import { computed, ref, type Component } from 'vue';
import {
    ArrowDownBold,
    ArrowRightBold,
    Box,
    Clock,
    Document,
    Film,
    FullScreen,
    Link,
    MagicStick,
    Picture,
    Position,
    Setting,
    Upload,
    VideoCamera,
} from '@element-plus/icons-vue';
import AgentProductImageDialog from './AgentProductImageDialog.vue';
import AgentProductInfoDialog from './AgentProductInfoDialog.vue';
import AgentReferenceVideoDialog from './AgentReferenceVideoDialog.vue';
import AgentScriptDialog from './AgentScriptDialog.vue';

type MediaType = 'image' | 'video';
type ParamTab = 'frame' | 'output';
type StyleTab = 'style' | 'element';

type SwitchOption<T extends string = string> = {
    label: string;
    value: T;
    icon?: Component;
};

type IconSwitchOption<T extends string = string> = SwitchOption<T> & {
    icon: Component;
};

type RatioOption = SwitchOption & {
    iconClass?: string;
};

const mediaType = ref<MediaType>('image');
const paramTab = ref<ParamTab>('frame');
const imageRatio = ref('smart');
const videoRatio = ref('smart');
const imageQuality = ref('智能');
const imageQuantity = ref('1份');
const videoQuantity = ref('1份');
const referenceMode = ref('智能参考');
const resolution = ref('智能');
const duration = ref('5秒');
const customResolution = ref('');
const customDuration = ref('');
const withVoice = ref(true);
const withWatermark = ref(false);
const productPopoverVisible = ref(false);
const productInfoVisible = ref(false);
const productImageVisible = ref(false);
const referencePopoverVisible = ref(false);
const referenceVideoVisible = ref(false);
const scriptPopoverVisible = ref(false);
const scriptVisible = ref(false);
const activeStyleTab = ref<StyleTab>('style');
const checkedStyleValues = ref(['english', 'revenge']);
const checkedElementValues = ref(['contrast']);
const dataType = ref('')

const setMediaType = (value: MediaType) => {
    mediaType.value = value;
};

const setParamTab = (value: ParamTab) => {
    paramTab.value = value;
};

const openProductInfoDialog = () => {
    productPopoverVisible.value = false;
    productInfoVisible.value = true;
};

const openProductImageDialog = (str: string) => {
    productPopoverVisible.value = false;
    productImageVisible.value = true;
    dataType.value = str
};

const openReferenceVideoDialog = () => {
    referencePopoverVisible.value = false;
    referenceVideoVisible.value = true;
};

const openScriptDialog = () => {
    scriptPopoverVisible.value = false;
    scriptVisible.value = true;
};

const mediaTypes: IconSwitchOption<MediaType>[] = [
    { label: '图片', value: 'image', icon: Picture },
    { label: '视频', value: 'video', icon: VideoCamera },
];

const paramTabs: SwitchOption<ParamTab>[] = [
    { label: '画面', value: 'frame' },
    { label: '输出', value: 'output' },
];

const imageRatios: RatioOption[] = [
    { label: '智能', value: 'smart', icon: MagicStick },
    { label: '1:1', value: '1:1', iconClass: 'square' },
    { label: '16:9', value: '16:9', iconClass: 'wide' },
    { label: '4:3', value: '4:3', iconClass: 'standard' },
    { label: '3:2', value: '3:2', iconClass: 'wide' },
    { label: '2:3', value: '2:3', iconClass: 'portrait' },
    { label: '3:4', value: '3:4', iconClass: 'portrait' },
    { label: '9:16', value: '9:16', iconClass: 'phone' },
];

const videoRatios: RatioOption[] = [
    { label: '智能', value: 'smart', icon: MagicStick },
    { label: '21:9', value: '21:9', iconClass: 'cinema' },
    { label: '16:9', value: '16:9', iconClass: 'wide' },
    { label: '4:3', value: '4:3', iconClass: 'standard' },
    { label: '1:1', value: '1:1', iconClass: 'square' },
    { label: '3:4', value: '3:4', iconClass: 'portrait' },
    { label: '9:16', value: '9:16', iconClass: 'phone' },
];

const qualities = ['智能', '高', '中', '低'];
const quantities = ['1份', '2份', '3份', '4份'];
const referenceModes = ['智能参考', '首帧', '首尾帧'];
const resolutions = ['智能', '480P', '720P', '1080P'];
const durations = ['5s', '10s'];

const styleOptions = [
    { label: '英文虐渣', value: 'english' },
    { label: '打脸复仇', value: 'revenge' },
    { label: '强势碾压', value: 'power' },
    { label: '沙雕搞笑', value: 'funny' },
    { label: '幽默风趣', value: 'humor' },
    { label: '玩梗搞笑', value: 'meme' },
];

const elementOptions = [
    { label: '痛点对比', value: 'contrast' },
    { label: '使用过程', value: 'process' },
    { label: '产品展示', value: 'product' },
];

const styleTabs = computed(() => [
    { label: '风格', value: 'style' as const, count: checkedStyleValues.value.length },
    { label: '元素', value: 'element' as const, count: checkedElementValues.value.length },
]);

const currentStyleOptions = computed(() => activeStyleTab.value === 'style' ? styleOptions : elementOptions);

const currentStyleChecked = computed({
    get: () => activeStyleTab.value === 'style' ? checkedStyleValues.value : checkedElementValues.value,
    set: (value: string[]) => {
        if (activeStyleTab.value === 'style') {
            checkedStyleValues.value = value;
            return;
        }
        checkedElementValues.value = value;
    },
});
</script>

<style scoped lang="scss">
.hover {
    &:hover {
        color: rgba(var(--main-color), 0.8);
    }
}

.param-panel {
    box-shadow: 0 8px 24px rgba(23, 38, 64, .12);
}

.switch-row,
.option-btn,
.switch-setting {
    background: #f1f3f5;
}

.switch-btn {
    color: #1f2f45;
}

.switch-btn.active {
    color: #1f2f45;
    background: #fff;
    box-shadow: 0 1px 6px rgba(12, 24, 44, .14);
}

.option-btn {
    color: #1f2f45;
}

.option-btn.active {
    color: #1f2f45;
    background: #e8f0f4;
}

.option-list .option-btn {
    flex: 1 0 calc((100% - 24px) / 5);
}

.custom-size {
    border: 1px dashed #d9e4f2;
    color: #1f2f45;
}

.ratio-icon {
    display: inline-block;
    border: 1px solid currentColor;
}

.ratio-icon.square {
    width: 12px;
    height: 12px;
}

.ratio-icon.wide {
    width: 16px;
    height: 9px;
}

.ratio-icon.standard {
    width: 14px;
    height: 10px;
}

.ratio-icon.portrait {
    width: 9px;
    height: 14px;
}

.ratio-icon.phone {
    width: 8px;
    height: 16px;
}

.ratio-icon.cinema {
    width: 18px;
    height: 8px;
}

.custom-input,
.duration-input {
    border: 1px solid #dfe7f2;
    background: #fff;
}

:deep(.param-input .el-input__wrapper) {
    padding: 0;
    box-shadow: none;
    background: transparent;
}

:deep(.param-input .el-input__inner) {
    height: 30px;
    font-size: 12px;
}

.unit {
    border-left: 1px solid #dfe7f2;
    color: #1f2f45;
}

.style-tabs {
    border-right: 1px solid #eee;
}

.style-options {
    max-height: 268px;

    &::-webkit-scrollbar {
        width: 6px;
    }

    &::-webkit-scrollbar-thumb {
        background: #6a6a6a;
        border-radius: 6px;
    }
}

.style-check {
    margin-right: 0;

    &:hover {
        background: #eee;
    }
}

:deep(.style-check .el-checkbox__label) {
    font-size: 14px;
}
</style>

<style>
.agent-prompt-tools-popper {
    min-width: 120px !important;
}

.agent-param-popper {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    overflow: hidden;
}

.agent-style-popper {
    padding: 0 !important;
    /* border: 0 !important; */
    border-radius: 6px !important;
    overflow: hidden;
    background: transparent !important;
}
</style>
