<template>
<div class="clearfix">
    <div class="published-cell">
        <div class="activity-image-panel">
            <span class="status-text">{{ status_text }}</span>
            <img :src="activity.poster_photo" />
        </div>
        <div class="activity-info-panel">
            <h3 class="title">
                <a href="">{{ activity.title }}</a>
            </h3>
            <div class="statistics">
                阅读：{{ activity.read_num }} 丨 评论：{{ activity.comment_num }} 丨 点赞：{{ activity.star_num }}
            </div>
            <div class="progress">
                <div class="progress-bar">
                    <el-progress :percentage="progress_percent" :stroke-width="5" color="#409eff" :show-text="false" ></el-progress>
                </div>
                <span class="progress-text">{{ progress_text }}</span>
            </div>
        </div>
        <div class="activity-time-panel">
            <span class="time">{{ start_time }}</span>
        </div>
    </div>
</div>
</template>

<script>
import { parseTime } from "@/utils"

export default {
    name: "PublishedActivityCell",
    props: {
        activity: {
            type: Object,
            required: true,
        }
    },
    data() {
        return {
            
        }
    },
    computed: {
        status_text: function() {
            if (this.activity.status == 4) {
                return "已结束"
            } else if (this.activity.is_recommend == true) {
                return "已推荐"
            } else {
                return "已发布"
            }
        },
        progress_percent: function() {
            if (this.activity.limit_num > 0) {
                return (this.activity.join_num / this.activity.limit_num) * 100
            } else {
                return 100
            }
        },
        progress_text: function() {
            if (this.activity.limit_num > 0) {
                if (this.activity.join_num >= this.activity.limit_num) {
                    return "已报满"
                } else {
                    return this.activity.join_num + " / " + this.activity.limit_num
                }
            } else {
                return "无限制"
            }
        },
        start_time: function() {
            return parseTime(this.activity.start_time, "{y}-{m}-{d}")
        },
    },
}
</script>

<style scoped rel="stylesheet/scss" lang="scss">
.published-cell {
    padding: 20px 15px;
    border: none;
    border-bottom: 1px solid #e5e8ea;
    float: left;
    margin: 0;
    width: 100%;
    border-radius: 0;
    position: relative;

    .activity-image-panel {
        width: 155px;
        height: 122px;
        border: 1px #dee2e5 solid;
        display: flex;
        justify-content: center;
        position: relative;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        overflow: hidden;
        float: left;

        .status-text {
            position: absolute;
            font-size: 12px;
            color: #fff;
            top: 14px;
            left: 3px;
            -webkit-transform: rotate(316deg);
            transform: rotate(316deg);
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    }
    .activity-image-panel::before {
        border-top: 28px solid #5bd18b;
        border-right: 28px solid transparent;
        border-bottom: 28px solid transparent;
        border-left: 28px solid #5bd18b;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        display: block;
        content: "";
    }

    .activity-info-panel {
        padding: 7px 20px;
        width: 60%;
        float: left;

        .title {
            padding-bottom: 5px;

            a {
                color: #495060;
                font-size: 20px;
                max-width: 100%;
                font-weight: 500;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display: inline-block;
            }
        }

        .statistics {
            color: #a8b3ba;
            font-size: 15px;
            justify-content: space-between;
            line-height: 30px;
        }

        .progress {
            padding: 5px 0;

            .progress-bar {
                width: 60%;
                display: inline-block;
            }
            .progress-text {
                margin-left: 10px;
                font-size: 15px;
                color: #409eff;
            }
        }
    }

    .activity-time-panel {
        float: right;
        padding: 7px 0;

        .time {
            font-size: 15px;
            color: #a8b3ba;
        }
    }
}
</style>

