<template>
    <Dialog v-model="dialogVisible" bg-color="#fff" width="768">
        <div class="product-info-dialog 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 px-20 py-20">
                <div class="fs-12 fw-700 color-333 mb-8">抖音商品链接或商品 ID</div>
                <div class="flex gap-10">
                    <el-input v-model="productKeyword" class="flex-1" size="small" placeholder="粘贴抖音商品链接或输入商品 ID" />
                    <el-button :disabled="productKeyword === ''" type="primary" class="search-btn fs-12 h-34 px-16">搜索</el-button>
                </div>
                <div v-for="item in productOptions" :key="item.id"
                    class="product-card flex-items-center gap-12 mt-16 p-12 round-6 pointer"
                    :class="{ active: selectedProductId === item.id }" @click="selectedProductId = item.id">
                    <img :src="item.image" :alt="item.name" class="product-cover wh-60 round-4 cover" />
                    <div class="flex-1">
                        <div class="fs-14 fw-700 color-000 lh-22">{{ item.name }}</div>
                        <div class="fs-12 color-666 lh-20">商品 ID：{{ item.id }}</div>
                    </div>
                    <span v-if="selectedProductId === item.id" class="checked-icon flex-center wh-18 round">
                        <el-icon class="fs-12">
                            <Check />
                        </el-icon>
                    </span>
                </div>
            </section>

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

<script setup lang="ts">
import { computed, ref } from 'vue';
import { Check } from '@element-plus/icons-vue';
import Dialog from '@/components/Dialog/index.vue';
import productImg from '@/static/image/huaban.png';

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

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

const productKeyword = ref('');
const selectedProductId = ref('');

const productOptions = [
    {
        id: '353829104771',
        name: 'Bestore 负离子高速吹风机',
        image: productImg,
    },
    {
        id: '353829104772',
        name: '负离子高速吹风机卡卡的撒',
        image: productImg,
    },
];

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

const confirmProductInfo = () => {
    emit('confirm', selectedProductId.value || productKeyword.value);
    dialogVisible.value = false;
};
</script>

<style scoped lang="scss">
.dialog-header,
.dialog-footer {
    border-bottom: 1px solid #edf2f7;
}

.dialog-footer {
    border-top: 1px solid #edf2f7;
    border-bottom: 0;
}

:deep(.el-input__wrapper) {
    // height: 40px;
    // border-radius: 6px;
    box-shadow: 0 0 0 1px #dce6f2 inset;
}

:deep(.el-input__inner) {
    font-size: 12px;
}

.product-card {
    border: 1px solid #dce6f2;
    background: #fff;
    transition: border-color .2s, background .2s;

    &.active {
        border-color: #9b6cff;
        background: #f4f0ff;
    }
}

.product-cover {
    background: #f3f6fb;
}

.checked-icon {
    color: #7d28ff;
    border: 1px solid #7d28ff;
}
</style>
