<template>
    <div style="display: flex; justify-content: space-between; flex-wrap: wrap">
        <div class="crowdnum" v-for="(item, key) of signlist" :key="key">
            <div style="display: flex; justify-content: space-between; margin: 0 35px 0 28px; align-items: center">
                <div>
                    <p style="margin: 0">{{ item.trainClassName }}</p>
                </div>
                <div v-if="item.status == 1" class="sign_sataus">未开始</div>
                <div v-if="item.status == 2" class="sign_sataus">报名中</div>
                <div v-if="item.status == 3" class="sign_sataus">未开课</div>
                <div v-if="item.status == 4" class="sign_sataus" style="background: #fba02a">开课中</div>
                <div v-if="item.status == 5" class="sign_sataus" style="background: #fc5c1d">已结束</div>
            </div>
            <div style="width: 100%; height: 1px; background-color: #ebebeb; margin: 15px 0"></div>
            <div
                style="
                    display: flex;
                    justify-content: space-between;
                    font-size: 14px;
                    margin: 0 35px 0 28px;
                    align-items: center;
                "
            >
                <p style="color: #666666">报名时间：{{ dateFormat(new Date(item.registrationTime)) }}</p>
                <p style="color: #333333">开课时间：{{ dateFormat(new Date(item.trainStartTime), 'yyyy-MM-dd') }}</p>
            </div>
            <div class="unloadFire" v-if="item.attachment" @click="downLoad(item)">资料下载</div>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getmySignUpList } from '@/api/train/index.js'
import { dateFormat } from '@/util/util'
export default {
    data() {
        return {
            signlist: [],
            base: process.env.VUE_APP_BASE_TARGET
        }
    },
    mounted() {
        // console.log('this.userinform',this.userinform)'15802995503'
        getmySignUpList().then((res) => {
            console.log('resresresres', res.rows)
            this.signlist = res.rows
            // this.total = res.total;
        })
    },
    computed: {
        ...mapGetters(['userinform']),
    },

    methods: {
        dateFormat,
        downLoad(row) {
            if (row.attachment) {
                window.open(this.base + row.attachment)
            }
        },
    },
}
</script>
<style scoped>
.crowdnum {
    width: 49%;
    background: #ffffff;
    box-shadow: 0px 1px 12px 0px rgba(17, 19, 21, 0.06);
    padding: 25px 0 30px 0;
    margin-bottom: 20px;
    position: relative;
}
.sign_sataus {
    width: 75px;
    height: 28px;
    background: #a8aeb6;
    border-radius: 13px;
    font-size: 14px;
    color: #ffffff;
    line-height: 28px;
    text-align: center;
}
.unloadFire {
    position: absolute;
    bottom: 12px;
    right: 37px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    color: #0066eb;
}
</style>