<!-- Created by henian.xu on 2022/9/5. -->

<template>
    <div class='limit-time-buy-activity'>
        <div
            v-if='activity'
            class='header'>
            <div class='label'>{{ $$t('vmf_discount_in_limited_time', '限时折扣') }}</div>
            <Countdown
                :start-time="activityBeginTime"
                :end-time="activityEndTime"
            ></Countdown>
        </div>
        <div :class="goodsListClasses">
            <GoodsItem
                v-for="(item,index) in data"
                :key="item.id"
                :style="index&&goodsItemStyles"
                :data="item"
                :no-border="hasMargin"
                :double-row="isDoubleRow"
                :shadow-prop="shadowProp"
            />
        </div>
        <div class='footer'>
            <span>{{ $$t('vmf_view_more', '查看更多') }}</span>
            <i class='el-icon-d-arrow-right'></i>
        </div>
    </div>
</template>

<script>
import GoodsItem from './_goodsItem';

export default {
    name: 'LimitTimeBuyActivity',
    components: { GoodsItem },
    data() {
        return {
            activityDetail: {},
        };
    },
    props: {
        type: {
            type: [Number, String],
            default: '1',
        },
        gapType: {
            type: [Number, String],
            default: '1',
        },
        gapMargin: {
            type: [Number, String],
            default: '',
        },
        ids: {
            type: Array,
            default() {
                return [];
            },
        },
        data: {
            type: Array,
            default() {
                return [];
            },
        },
        apiQuery: {
            type: Object,
            default: () => ({}),
        },
        activityId: {
            type: [String, Number],
            default: '',
        },
        columns: {
            type: [Number, String],
            default: 1,
        },
        shadowProp: {
            type: [Number, String],
            default: null,
        },
    },
    computed: {
        isRow() {
            return +this.type === 4;
        },
        isDoubleRow() {
            const type = +this.type;
            return [1, 3, 4].includes(type);
        },
        hasMargin() {
            const { isDoubleRow, gapType } = this;
            return !isDoubleRow && `${gapType}` === '2';
        },
        itemMarginTop() {
            const { isDoubleRow, gapType } = this;
            if (isDoubleRow || `${gapType}` !== '2') return '';
            const gapMargin = `${this.gapMargin || ''}`.trim();
            if (!gapMargin) return '';
            let int = parseFloat(gapMargin);
            if (Number.isNaN(int)) return '';
            let unit = gapMargin.replace(/(\d)*/g, '').trim();
            if (!unit) {
                unit = 'px';
                int /= 2;
            }
            return int + unit;
        },
        goodsItemStyles() {
            const { itemMarginTop } = this;
            if (!itemMarginTop) return '';
            return {
                marginTop: itemMarginTop,
            };
        },
        goodsListClasses() {
            const { columns, isRow } = this;
            let columnStr = '';
            if (+columns > 1 || isRow) {
                columnStr = `columns columns-${columns}`;
            }
            return ['goods-list', { row: isRow }, columnStr];
        },
        activity() {
            return this.activityDetail.activity || null;
        },
        activityBeginTime() {
            return this.activity.activityBeginTime;
        },
        activityEndTime() {
            return this.activity.activityEndTime;
        },
    },
    watch: {
        ids: {
            async handler(val) {
                if (!val || !val.length) return;
                const { data } = await this.$http.get(
                    '/gd/goods/selectByPage',
                    {
                        ...(this.apiQuery || {}),
                        ids: val.join(','),
                        paymentMethod: 1,
                    },
                    { isAxiosResponseData: true, isRepeat: true },
                );
                this.data.splice(0, this.data.length);
                this.data.push(...data);
            },
            immediate: true,
        },
        activityId: {
            handler(val) {
                if (!val) return;
                this.$http
                    .get(
                        '/pm/activity/get',
                        { id: val },
                        {
                            isAxiosResponseData: true,
                            isRepeat: true,
                        },
                    )
                    .then(({ data }) => {
                        this.activityDetail = data;
                    });
            },
            immediate: true,
        },
    },
};
</script>

<style lang='scss'>
.limit-time-buy-activity {
    > .header {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: $padding-small $padding;
        > .label {
            font-weight: bold;
            color: $color-red;
            font-size: $big * 100%;
            margin-right: $margin;
        }
    }
    > .footer {
        margin-top: $margin;
        padding: $padding-small $padding;
        text-align: center;
    }
}
</style>
