<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-09-21 17:24:04
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-10-12 11:02:48
 * @FilePath: \housekeeping-admin\src\views\decorate\component\widgets\category\content.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="category bg-[#F5F5F7]">
        <div class="category-image">
            <decoration-img
                width="100%"
                height="125px"
                :src="item.image"
                fit="contain"
                v-for="(item, index) in showImageList"
                :key="index"
            />
        </div>
        <div
            v-for="(item, index) in showListData"
            :key="'listdata-' + index"
            class="px-[15px] relative pb-[15px]"
        >
            <div class="text-2xl relative z-20 p-2 text-black font-bold">{{ item.name }}</div>
            <!-- <decoration-img width="100%" height="100%" :src="item.listBgimage" fit="cover" class="absolute top-0 left-0 z-10" /> -->
            <ul class="list-ul relative z-20">
                <li class="bg-white p-[10px] flex" v-for="i in 2">
                    <div class="image">
                        <icon name="el-icon-Picture" :size="30" />
                        商品图片
                    </div>
                    <div class="flex-1 flex justify-between flex-col">
                        <div class="name">
                            <div class="text-lg font-bold">商品名称</div>
                            <div class="text-[#8e8b8b]">商品简介</div>
                        </div>
                        <div class="right-bottom">
                            <div class="text-danger">商品价格</div>
                            <el-button type="primary">立即预约</el-button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import { computed } from 'vue'
import type options from './options'
import DecorationImg from '../../decoration-img.vue'
type OptionsType = ReturnType<typeof options>
const props = defineProps({
    content: {
        type: Object as PropType<OptionsType['content']>,
        default: () => ({})
    },
    styles: {
        type: Object as PropType<OptionsType['styles']>,
        default: () => ({})
    }
})

const showListData = computed(() => {
    return props.content?.data.filter(i => i.showList)
})

const showImageList = computed(() => {
    return props.content?.data.filter(i => i.showImage)
})
</script>

<style lang="scss" scoped>
.category-image {
    padding: 0 10px;
    display: grid;
    grid-template-columns: repeat(2, 49%);
    grid-column-gap: 2%;
    grid-row-gap: 2%;
    .category-image {
        .el-image {
            border-radius: 12px !important;
        }
    }
}
.list-ul {
    display: grid;
    grid-template-columns: repeat(1, 100%);
    grid-column-gap: 2%;
    li {
        .image {
            width: 115px;
            height: 88px;
            background-color: #e7e6e6;
            border-radius: 7px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            margin-right: 10px;
        }
        .name {
            font-size: 14px;
            // margin-bottom: 5px;
            // padding-top: 10px;
        }
        .right-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .el-button {
                height: 26px;
                border-radius: 15px;
            }
        }
    }
}
</style>
