<template>
    <section>
        <div class="fs-18 lh-28 fw-700 mb-16">电商核心创意工具组</div>
        <div class="tool-grid flex gap-16">
            <el-card v-for="item in tools" :key="item.title"
                class="core-card flex-col justify-between flex-1 minh-160 p-16 round-14 bg-fff text-left pointer"
                :style="{ '--accent': item.color, '--soft': item.bgColor }" shadow="never" @click="handleToolClick(item)">
                <div>
                    <span class="core-icon flex-center wh-36 round-10 mb-12 fs-20">
                        <el-icon>
                            <component :is="item.icon" />
                        </el-icon>
                    </span>
                    <div class="core-title lh-22 fw-700">{{ item.title }}</div>
                    <p class="fs-12 lh-20">{{ item.desc }}</p>
                </div>
                <div class="card-action flex-items-center gap-4 fs-12 fw-700">
                    {{ item.action }}
                    <el-icon>
                        <ArrowRight />
                    </el-icon>
                </div>
            </el-card>
        </div>
        <DigitalHumanDialog v-model="digitalHumanVisible" />
        <ModelTryOnDialog v-model="modelTryOnVisible" />
    </section>
</template>

<script setup lang="ts">
import { ref, type Component } from 'vue';
import { useRouter } from 'vue-router';
import { ArrowRight, Edit, Picture, Scissor, User, ZoomIn } from '@element-plus/icons-vue';
import DigitalHumanDialog from './DigitalHumanDialog.vue';
import ModelTryOnDialog from './ModelTryOnDialog.vue';

type ToolItem = {
    title: string;
    desc: string;
    action: string;
    color: string;
    bgColor: string;
    icon: Component;
    path?: string;
    dialog?: 'digitalHuman' | 'modelTryOn';
};

const router = useRouter();
const digitalHumanVisible = ref(false);
const modelTryOnVisible = ref(false);

const tools: ToolItem[] = [
    {
        title: '视频去水印',
        desc: '智能擦除视频水印与遮挡元素',
        action: '立即擦除',
        color: '#ff1f82',
        bgColor: '#fff0f7',
        icon: Edit,
        path: '/quickCreation/remove-watermark',
    },
    {
        title: '字幕擦除',
        desc: '一键去除视频字幕与画面文字',
        action: '立即清除',
        color: '#1877ff',
        bgColor: '#edf5ff',
        icon: Scissor,
        path: '/quickCreation/remove-subtitles'
    },
    {
        title: '画质增强',
        desc: '提升视频清晰度与画作多倍质感',
        action: '立即增强',
        color: '#ff9900',
        bgColor: '#fff8e8',
        icon: ZoomIn,
        path: '/quickCreation/remove-quality',
    },
    {
        title: '数字人分身',
        desc: '高保真克隆音容姿态，输入文本即产出主播视频',
        action: '极速制作',
        color: '#f2187d',
        bgColor: '#fff0f7',
        icon: User,
        dialog: 'digitalHuman',
    },
    {
        title: '模特换衣',
        desc: '上传服装图搭配不同肤色AI模特和逼真场景',
        action: 'AI试穿',
        color: '#1877ff',
        bgColor: '#edf5ff',
        icon: Picture,
        dialog: 'modelTryOn',
    },
];

const handleToolClick = (item: ToolItem) => {
    if (item.dialog === 'digitalHuman') {
        digitalHumanVisible.value = true;
        return;
    }
    if (item.dialog === 'modelTryOn') {
        modelTryOnVisible.value = true;
        return;
    }
    if (item.path) {
        router.push(item.path);
    }
};
</script>

<style lang="scss" scoped>
.core-card {
    height: auto;
    white-space: normal;
    border: 1px solid #e4ebf4;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

:deep(.core-card .el-card__body) {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0;
}

.core-card p,
.card-action {
    color: #86a0bd;
}

.core-title {
    color: #001a3d;
}

.core-icon {
    color: var(--accent);
    background: var(--soft);
}

.core-card:hover {
    border-color: var(--accent);
    box-shadow: 0 10px 24px rgba(22, 37, 67, .1);
    transform: translateY(-2px);
}

.core-card:hover .core-title,
.core-card:hover .card-action {
    color: var(--accent);
}

@media (max-width: 1100px) {
    .tool-grid {
        flex-wrap: wrap;
    }

    .core-card {
        flex: 0 0 calc((100% - 16px) / 2);
    }
}
</style>
