<template>
    <view :style="customStyle">
        <!-- 上图片下标题文字 -->
        <view v-if="type==1" :style="{ marginLeft: margin + '%', width: 100 - margin * 2 + '%' }" >
            <!-- 判断有无标题 -->
            <view class="row-- fpy--center pb--10" v-if="title">
                <view class="col--12 fw--b fs--12r black">
                    <text :class="titleClass">{{title}}</text>
                </view>
                <view class="col--12 right">
                    <navigator :url="titleUrl" :open-type="titleUrlOpenType" class="row-- fpy--center fpx--right" hover-class="none">
                        <view class="col--12 right">
                            <text class="c666" :class="moreClass">更多</text>
                        </view>
                        <view class="arrow--r8--2"></view>
                    </navigator>
                </view>
            </view>
            <view class="columns-- bgc--white  br--8 my--5" v-for="(data,index) of datas" :key="index" :class="contentClass">
                <navigator :url="data[config.url]" open-type="navigate">
                    <view class="col--24">
                        <image :src="data[config.img]" class="w--100p btr--8" style="height: 110px;" ></image>
                    </view>
                    <view class="col--24 pb--5">
                        <view style="padding:5px;overflow:hidden;text-overflow:ellipsis;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
                            <text 
                                v-if="data[config.key]"
                                class="col fp--center br--3 px--3" style="display:inline-block;" 
                                :style="'border: 1px solid ' + data[config.keyBorderColor] + '; color:' + data[config.keyColor] "
                            >
                                <text>{{data[config.key]}}</text>
                            </text>
                            <text class=" pl--5">
                                <text :class="moreClass" >{{data[config.title]}}</text>
                            </text>
                        </view>
                    </view>
                </navigator>
            </view>
        </view>

        <!-- 左图片,右侧标题、状态、备注竖排 -->
        <view v-else-if="type==2" :style="{ marginLeft: margin + '%', width: 100 - margin * 2 + '%' }">
            <!-- 判断有无标题 -->
            <view class="row-- fpy--center pb--10" v-if="title">
                <view class="col--12 fw--b fs--12r black">
                    <text :class="titleClass">{{title}}</text>
                </view>
                <view class="col--12 right">
                    <navigator :url="titleUrl" class="row-- fpy--center fpx--right" hover-class="none">
                        <view class="col--12 right">
                            <text class="c666" :class="moreClass">更多</text>
                        </view>
                        <view class="arrow--r8--2"></view>
                    </navigator>
                </view>
            </view>
            <!-- 内容 -->
            <navigator :url="data[config.url]" :open-type="titleUrlOpenType" :class="contentClass" class="row-- bgc--white p--5 my--b br--8" v-for="(data,index) of datas" :key="index">
                <view class="bg--cb br--20 m--10 fp--center">
                    <image :src="data[config.img]" class="br--20 h--100 w--100" ></image>
                </view>
                <view class="pt--10 pl--10 fp--center">
                    <view class="column--" :class="moreClass">
                        <view style="overflow:hidden;text-overflow:ellipsis;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
                            <text>{{data[config.title]}}</text>
                        </view>
                        <view class="my--10 fp--center" :style="'width:'+ keyWidth +'px;font-size:'+ keyFontSize +'px; border-radius:60px; background-color: ' + data[config.keyBgColor] + '; color:' + data[config.keyColor] ">
                            <text class="py--2">
                                {{data[config.key]}}
                            </text>
                        </view>
                        <view class="c666" :style="'font-size:'+ remarkFontSize + 'px'">{{data[config.remark]}}</view>
                    </view>
                </view>
            </navigator>
        </view>
        <!-- 背景图片，文字在图片中 -->
        <view v-if="type==3" :style="{ marginLeft: margin + '%', width: 100 - margin * 2 + '%' }" >
            <!-- 判断有无标题 -->
            <view class="row-- fpy--center pb--10" v-if="title">
                <view class="col--12 fw--b fs--12r black">
                    <text :class="titleClass">{{title}}</text>
                </view>
                <view class="col--12 right">
                    <navigator :url="titleUrl" class="row-- fpy--center fpx--right" hover-class="none">
                        <view class="col--12 right">
                            <text class="c666" :class="moreClass">更多</text>
                        </view>
                        <view class="arrow--r8--2"></view>
                    </navigator>
                </view>
            </view>

            <navigator 
                :url="data[config.url]"
                :open-type="titleUrlOpenType"
                class="col--24 br--8 my--5" 
                :class="contentClass"
                v-for="(data,index) of datas" 
                :key="index"  
                :style="'background-image: url(\''+data[config.img]+'\'); background-size: 100% 100%; height: 100px;'"
            >
                <view class="pl--10 fw--b white" style="padding-top: 65px;">
                    <text :class="moreClass">{{data[config.title]}}</text>
                </view>
            </navigator>
        </view>
    </view>
</template>
<script lang="ts" setup>
    interface Props {
        type ?: number | string; //类型
        customStyle?: string | object // 外观自定义样式
        margin ?: number;  //百分比
      	title ?: string;  // 标题
        titleClass ?: string;  //标题样式
        keyWidth ?: number;
        keyFontSize ?: number;
        remarkFontSize ?: number;
        moreClass ?: string;
        titleUrl ?: string;
        titleUrlOpenType ?: string;
        contentClass ?: string;
        datas ?: object[];
        config ?: object;
    };
    const props = withDefaults(defineProps < Props > (), {
        margin: 3,
        contentClass: 'br--8 py--5',
        title: '',
        titleClass:'',
        moreClass :'',
        titleUrl :'',
        titleUrlOpenType :'navigate',
        config: {
            url: 'url',
            title: 'title',
            img: 'img',
            key: 'key', 
            keyBorderColor: 'keyBorderColor',
            keyBgColor: 'keyBgColor',
            keyColor: 'keyColor',
            remark: 'remark'
        },
        datas: () => []
    });
</script>
<style lang="scss">
</style>

