<!-- Created by henian.xu on 2020/4/15. -->

<template>
    <div :class="classes">
        <div class="inner">
            <div class="info">
                <div
                    v-if="type_!==7"
                    class="img-wrap"
                >
                    <div
                        v-for="(item,index) in imageList"
                        :key="index"
                        class="img-obj"
                    >
                        <div
                            class="inner"
                            :style="`background-image: url('${$options.filters.imgCropping(item||$defaultImg,{width:140})}');`"
                        ></div>
                    </div>
                </div>
                <div class="content">
                    <div class="header">
                        <div class="label">{{data.title}}</div>
                        <XIcon
                            v-if="type_===7"
                            content="f012"
                            size="small"
                            theme="g5"></XIcon>
                    </div>
                    <div
                        v-if="type_===2||type_===4"
                        class="body"
                    >
                        <div class="sub-label">{{data.subtitle}}</div>
                        <div class="digest">{{data.digest}}</div>
                    </div>
                </div>
            </div>
            <div
                v-if="type_!==7"
                class="footer"
            >
                <div class="item">{{data.source}}</div>
                <div class="item">{{data.releaseTime | moment}}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CmsItem',
    data() {
        return {};
    },
    props: {
        data: {
            type: Object,
            default: () => ({}),
        },
        // 1:大图;2:右图;3:列图;4:左图;5:双列;6:季度之星(未实现);7:列表
        type: {
            type: [Number, String],
            default: 2,
        },
    },
    computed: {
        type_() {
            return +this.type || 1;
        },
        classes() {
            const { type_: type } = this;

            return [
                'cms-item',
                { double: type === 5 || type === 6 },
                { customize: type === 6 },
                { 'img-top': type === 1 },
                { 'img-right': type === 2 },
                { 'img-bottom': type === 3 },
                { 'img-left': type === 4 },
                { 'img-none': type === 7 },
                // add
            ];
        },
        imageList() {
            const { data, type_: type } = this;
            let res = [data.titleImageUrl];
            if (type === 3) {
                res = [...data.imageList];
            }
            return res.splice(0, 3);
        },
    },
};
</script>

<style lang="scss">
.cms-item {
    width: 100%;
    + .cms-item {
        margin-top: $margin;
    }
    > .inner {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: $padding;
        background-color: #fff;
        > .info {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            > .img-wrap {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                > .img-obj {
                    width: 100%;
                    > .inner {
                        height: 0;
                        padding-top: 9/16 * 100%;
                        background: center no-repeat;
                        background-size: cover;
                    }
                }
            }

            > .content {
                > .header {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                    > .label {
                        flex: 1;
                        font-size: $big * 100%;
                        @include text-line(2);
                    }
                }
            }
        }
        > .footer {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-top: $margin;
        }
    }

    &.img-right,
    &.img-left {
        > .inner {
            > .info {
                flex-direction: row;
                > .content {
                    order: 0;
                    flex: 1;
                }
                > .img-wrap {
                    order: 2;
                    flex: 0 0 auto;
                    width: 30%;
                    margin-left: $margin-small;
                    > .img-obj {
                        > .inner {
                            padding-top: 100%;
                        }
                    }
                }
            }
        }
    }
    &.img-left {
        > .inner {
            > .info {
                > .content {
                    order: 2;
                }
                > .img-wrap {
                    order: 0;
                    flex: 0 0 auto;
                    width: 30%;
                    margin-left: 0;
                    margin-right: $margin-small;
                    > .img-obj {
                        > .inner {
                            padding-top: 100%;
                        }
                    }
                }
            }
        }
    }
    &.img-bottom {
        > .inner {
            > .info {
                > .content {
                    order: 0;
                }
                > .img-wrap {
                    order: 2;
                    > .img-obj {
                        width: (100% / 3);
                        > .inner {
                            padding-top: 100%;
                        }
                    }
                }
            }
        }
    }

    &.double {
        width: 50%;
        padding: $padding-small;
        margin-top: 0;
        > .inner {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: stretch;
            height: 100%;
            > .info {
                > .content {
                    > .header {
                        > .label {
                            $lh: $body-font-size * $line-height * $big;
                            height: $lh * 2;
                        }
                    }
                }
                > .img-wrap {
                    > .img-obj {
                        > .inner {
                            padding-top: 100%;
                        }
                    }
                }
            }
            > .footer {
                flex-direction: column;
                align-items: stretch;
            }
        }
        /*&.customize {
            > .inner {
                > .header {
                    > .label {
                        $lh: $body-font-size * $line-height * $big;
                        height: $lh;
                        @include text-line(1);
                    }
                }
            }
        }*/
    }

    &.img-none {
        margin-top: 0;
        + .cms-item {
            border-top: 1px solid $color-border;
        }
        > .inner {
            > .info {
                > .img-wrap {
                }
            }
        }
    }
}
</style>
