<template>
  <div class="list-bg">
    <div class="content">
      <div class="title">活动</div>
      <div class="list-scroll">
        <ul>
          <template v-for="(item, index) in listData">
            <li :key="index" @click="goDetail(item.id)">
              <img :src="getImg(item.poster_url)" alt="">
              <div class="info">
                <div class="card-tit">{{ item.name }}</div>
                <div class="state">
                  <div :class="item.live_status == 1 ? 'active1 live' : item.live_status == 2 ? 'zlive' : 'active2 live'">
                    <span>{{ item.live_status == 1 ? '直播未开始' : item.live_status == 2 ? '直播进行中' : '直播已结束' }}</span>
                    <div class="icon"></div>
                  </div>
                  <div class="time">{{getDate(item.published_time)}}</div>
                </div>
              </div>
            </li>
          </template>
          <!-- <li>
            <img src="https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/build/kelley/fef53983e698fff6f877726b634d5d34.jpg" alt="">
            <div class="info">
              <div class="card-tit">乐分享直播活动</div>
              <div class="state">
                <div class="live active1">直播未开始</div>
                <div class="time">2020-09-21 21:21:21</div>
              </div>
            </div>
          </li>
          <li>
            <img src="https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/build/kelley/fef53983e698fff6f877726b634d5d34.jpg" alt="">
            <div class="info">
              <div class="card-tit">乐分享直播活动</div>
              <div class="state">
                <div class="zlive">
                  <span>直播未开始</span>
                  <div class="icon"></div>
                </div>
                <div class="time">2020-09-21 21:21:21</div>
              </div>
            </div>
          </li> -->
        </ul>
      </div>
    </div>
    <div class="tabbar-box">
      <tabbar type='1'></tabbar>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import action from '@action'
import tabbar from '../../components/tabbar.vue'
export default {
  components: {
    tabbar
  },
  data() {
    return {
      listData: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      Toast.loading({
        message: '加载中...',
        duration: 3000
      })
      action.List.getLiveList().then((res) => {
        Toast.clear()
        if (res.code === 0) {
          this.listData = res.data.list
        }
      })
    },
    getDate(timestamp) {
      const time = new Date(parseInt(timestamp * 1000))
      const year = time.getFullYear()
      const month = (time.getMonth() + 1).toString().padStart(2, '0')
      const date = (time.getDate()).toString().padStart(2, '0')
      const hours = (time.getHours()).toString().padStart(2, '0')
      const minute = (time.getMinutes()).toString().padStart(2, '0')
      const second = (time.getSeconds()).toString().padStart(2, '0')
      return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
    },
    goDetail(id) {
      this.$router.push({
        path: 'details',
        query: {
          id: id
        }
      })
    },
    getImg(data) {
      const img = JSON.parse(data).length === 0 ? '' : JSON.parse(data)[0].file_url
      return img
    }
  }
}
</script>

<style lang="scss" scoped>
.list-bg{
  background: #F1F1F1;
}
.title{
  color: #222;
  font-size: .3rem;
  line-height: 1.1rem;
}
.tabbar-box{
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
}
.content{
  padding: 0 .4rem;
}
.list-scroll{
  padding-bottom: 2rem;
  ul{
    li{
      background: #fff;
      width: 100%;
      border-radius: 0.16rem;
      overflow: hidden;
      margin-bottom: .4rem;
      img{
        width: 100%;
        display: block;
      }
      .info{
        padding: 0.4rem;
        .card-tit{
          line-height: 100%;
          color: #222;
          font-size: .3rem;
        }
        .state{
          display: flex;
          margin-top: .2rem;
          .live{
            font-size: .24rem;
            &.active1{
              color: #0075FF;
            }
            &.active2{
              color: #C7385C;
            }
          }
          .zlive{
            display: flex;
            align-items: center;
            width: 1.73rem;
            padding: 0 .2rem;
            height: 0.5rem;
            background: #5AD252;
            border-radius: 0.08rem;
            span{
              color: #fff;
              font-size: .24rem;
            }
            .icon{
              width: .33rem;
              height: 0.23rem;
              background: url(../../assets/images/list/list-i1.png);
              background-size: 100% 100%;
              margin-left: auto;
            }
          }
          .time{
            color: #666;
            font-size: .24rem;
            margin-left: auto;
          }
        }
      }
    }
  }
}
</style>
