<template>
    <div class="train-mgt-container">
        <div class="train-mgt-top">
            <span>活动类型：</span>
            <Select v-model="filter.type" style="width:200px" @on-change="filterByType">
                <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <Input v-model="filter.keyword" suffix="ios-search" placeholder="搜索" style="width: 200px;float:right;margin-top:4px" @on-change="searchTrain" />
        </div>
        <vuescroll>
            <div class="train-block-box">
                <div class="train-item" v-for="(item,index) in trainListShow" :key="index" @click="toDetailPage(index)">
                    <div class="train-img-box">
                        <div class="train-img" :style="{backgroundImage: `url(${item.img})`}"></div>
                    </div>
                    <div class="info-item">
                        <span class="info-label">主讲人：</span>
                        <span>{{item.presenter}}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">主题：</span>
                        <span>{{item.topic}}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">地点：</span>
                        <span>{{item.address}}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">时间：</span>
                        <span>{{item.startTime + ' 至 ' + item.endTime}}</span>
                    </div>
                </div>
            </div>
            <EmptyData textContent="暂无校本研修活动" v-show="!trainListShow.length" :top="100"></EmptyData>
        </vuescroll>
    </div>
</template>
<script>
export default {
    data() {
        return {
            acId:'',
            areaId: sessionStorage.getItem('areaId'),
            trainList: [],
            trainListShow: [],
            filter: {
                type: 0,
                keyword: ''
            },
            typeList: [
                {
                    label: '全部',
                    value: 0
                },
                {
                    label: '信息化教学案例展示与分享',
                    value: 1
                },
                {
                    label: '专家专题培训',
                    value: 2
                },
                {
                    label: '同课同构',
                    value: 3
                },
                {
                    label: '同课异构',
                    value: 4
                },
                {
                    label: '校本2.0培训',
                    value: 5
                },
                {
                    label: '自定义活动',
                    value: 6
                }
            ]
        }
    },
    methods: {
        filterByType() {
            this.trainListShow = this.trainList.filter(item => {
                if (this.filter.type == 0) {
                    return true
                } else {
                    return item.type == this.filter.type
                }
            })
        },
        searchTrain() {
            this.trainListShow = this.trainList.filter(item => {
                return JSON.stringify(item).includes(this.filter.keyword)
            })
        },
        toDetailPage(index) {
            this.$router.push({
                name: 'TrainAreaDetail',
                query: {
                    id: this.trainList[index].id
                }
            })
        },
        dateFormat(timestamp) {
            let date = new Date(timestamp)
            let Y = date.getFullYear()
            let M = date.getMonth()
            let D = date.getDate()
            let H = date.getHours()
            let MIN = date.getMinutes()
            return `${Y}-${M < 9 ? '0' + (M + 1) : M + 1}-${D} ${H < 10 ? '0' + H : H}:${MIN < 10 ? '00' : MIN}`
        },
        findTrainList() {
            let params = {
                id: this.areaId
            }
            this.$api.train.findAreaTrain(params).then(
                res => {
                    console.log(res)
                    this.trainList = res.studies.reverse()
                    console.log('列表', this.trainList)
                    this.trainList.forEach(item => {
                        item.img = item.img || 'https://www.habook.com.cn/data/editor/images/img/20210429%2001/001.png'
                        item.startTime = this.dateFormat(item.startTime)
                        item.endTime = this.dateFormat(item.endTime)
                    })
                    this.trainListShow = this.trainList
                },
                err => {
                }
            )
        }
    },
    created() {
        this.findTrainList()
    }
}
</script>
<style lang="less" scoped>
@import "TrainMgt.less";
</style>