<template>
<div style="background-color: #f6f8f9;">
    <div class="main">
        <div class="border title-panel">
            <img :src="activity.poster_photo"/>
            <div class="text">
                <p class="title">{{ activity.title }}</p>
                <p class="subtitle">{{ activity.subtitle }}</p>
            </div>
        </div>
        <div class="org-info border">
            <div class="logo">
                <img :src="org.logo" />
            </div>
            <div class="info">
                <p class="name">{{ org.name }}</p>
                <p class="address">{{ activity.address }}</p>
            </div>
            <div class="arrow">
                <img src="@/assets/img/sa_52.png" />
            </div>
        </div>
        <div class="simple-cell border">
            <div class="icon">
                <img src="@/assets/img/sa_21.png" />
            </div>
            <div class="text">
                <p>{{ parseTime(activity.start_time, "{y}-{m}-{d} {h}:{i}") }}</p>
            </div>
            <div class="arrow-panel">
                <img src="@/assets/img/sa_52.png" />
            </div>
        </div>
        <div class="simple-cell border" v-if="activity.phone_number.length > 0">
            <div class="icon">
                <img src="@/assets/img/sa_24.png" />
            </div>
            <div class="text">
                <p>{{ activity.phone_number }}</p>
            </div>
            <div class="arrow-panel">
                <img src="@/assets/img/sa_52.png" />
            </div>
        </div>
        <div class="simple-cell border" v-if="activity.limit_num > 0">
            <div class="title">
                <p>活动名额</p>
            </div>
            <div class="detail">
                <p>{{ activity.limit_num + "人" }}</p>
            </div>
        </div>

        <div class="large-text-cell border" v-if="sign_up_notice.length > 0">
            <div class="title">
                <img src="@/assets/img/sa_25.png" />
                <span>报名须知</span>
            </div>
            <p class="content" v-html="sign_up_notice">
            </p>
        </div>

        <div class="large-text-cell border" v-if="activity_paragraph.title.length > 0">
            <div class="title">
                <img src="@/assets/img/sa_26.png" />
                <span>{{ activity_paragraph.title }}</span>
            </div>
            <p class="content" v-html="activity_paragraph.content">
            </p>
        </div>

        <div class="signup-fake-btn">
            立即报名
        </div>
    </div>
</div> 
</template>

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

export default {
    name: "ActivityPreview",
    data() {
        return {
            activity_id: 0,

            activity: {
                id: 0,
                poster_photo: "",
                title: "",
                subtitle: "",
                address: "",
                limit_num: 0,
                sign_up_deadline: 0,
                start_time: 0,
                phone_number: "",
                sign_up_notice: "",
            },
            activity_paragraph: {
                title: "",
                content: "",
            },
            org: {
                name: "",
                logo: "",
            }
        }
    },
    computed: {
        sign_up_notice: function() {
            return this.activity.sign_up_notice.replace(/\n/g, "<br/>")
        }
    },
    mounted() {
        this.activity_id = this.$route.query.id

        fetchActivity(this.activity_id).then(rs => {
            var resp = rs.data
            if (resp.state == 1) {
                // console.log(resp.data)
                var activity = resp.data.activity
                this.activity.id = activity.id
                this.activity.poster_photo = activity.poster_photo
                this.activity.title = activity.title
                this.activity.subtitle = activity.subtitle
                this.activity.address = activity.address
                this.activity.limit_num = activity.limit_num
                this.activity.sign_up_deadline = activity.sign_up_deadline * 1000
                this.activity.start_time = activity.start_time * 1000
                this.activity.phone_number = activity.phone_number
                this.activity.sign_up_notice = activity.sign_up_notice

                var paragraph = resp.data.paragraph
                this.activity_paragraph.title = paragraph.title
                this.activity_paragraph.content = paragraph.content

                this.org.name = resp.data.org.name
                this.org.logo = resp.data.org.logo

            } else {
                this.$message.error(resp.msg)
            }

        }).catch(err => {
            this.$message.error(err)
        })
    },
    methods: {
        parseTime,
    }
}
</script>

<style lang="scss" scoped>
.main {
    width: 750px;
    margin: 0 auto;
    padding: 14px 30px 0 30px;

    .title-panel {
        background-color: white;

        img {
            width: 100%;
            height: auto;
        }
        .text {
            padding: 12px 15px 16px 20px;

            .title {
                font-size: 18px;
                color: #485b6d;
                font-weight: bold;
                line-height: 32px;
            }
            .subtitle {
                margin-top: 4px;
                color: #a6a6a6;
                font-size: 14px;
            }
        }
    }

    .org-info {
        padding: 26px 20px;
        position: relative;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        margin-top: 15px;
        background-color: white;

        .logo {
            img {
                width: 40px;
                height: 40px;
                border-radius: 20px;
                object-fit: cover;
                object-position: center;
            }
        }

        .info {
            flex: 1;
            padding-left: 23px;
            color: #485b6d;

            .name {
                font-size: 16px;
                line-height: 22px;
            }
            .address {
                font-size: 14px;
                line-height: 20px;
            }
        }
        
        .arrow {
            width: 20px;
            position: relative;
            img {
                width: 8px;
                float: right;
            }
        }
    }

    .simple-cell {
        background-color: white;
        padding: 20px 20px;
        margin-top: 15px;
        position: relative;
        display: flex;
        -webkit-box-align: center;
        align-items: center;

        .icon {
            img {
                width: 20px;
                height: auto;//20px;
                vertical-align: middle;
            }
        }
        .text {
            flex: 1;
            padding-left: 17px;
            color: #485b6d;
            line-height: 20px;
        }
        .arrow-panel {
            width: 20px;
            position: relative;

            img {
                width: 8px;
                float: right;
                vertical-align: middle;
            }
        }

        .title {
            p {
                color: #485b6d;
            }
        }
        .detail {
            flex: 1;
            padding-left: 23px;
            color: #485b6d;

            p {
                color: #485b6d;
                float: right;
                text-align: right;
            }
        }
    }

    .large-text-cell {
        background-color: white;
        padding: 20px 20px;
        position: relative;
        -webkit-box-align: center;
        align-items: center;
        margin-top: 15px;

        .title {
            color: #485b6d;
            line-height: 18px;
            height: 18px;

            img {
                margin-right: 11px;
                float: left;
            }
        }
        .content {
            color: #a8b3ba;
            margin: 10px 0 0 0;
            font-size: 14px;
            line-height: 20px;
        }
    }

    .signup-fake-btn {
        background: #58a1ed;
        color: #fff;
        height: 50px;
        line-height: 50px;
        text-align: center;
        width: 100%;
        margin-top: 100px;
        font-size: 16px;
    }
}
</style>

<style scoped>
.border {
    border: solid 1px #dee2e5;
    border-radius: 4px;
}
</style>