<template>
  <div>
    <div class="d-padd">
      <div class="top-f">
        <top-title :title="detailData.name"></top-title>
      </div>
      <ul class="img-scroll">
        <template v-for="(item, index) in JSON.parse(detailData.poster_url)">
          <li :key="index"><img :src="item.file_url" alt=""></li>
        </template>
      </ul>
      <div class="content">
        <div class="live-state">
          <div class="time">
            <p>活动开始时间</p>
            <p>{{ getDate(detailData.start_at) }}</p>
          </div>
          <div class="state">
            <p>活动直播间状态</p>
            <p :class="detailData.live_status == 1 ? 'active1' : detailData.live_status == 2 ? 'active2' : 'active3'" @click="joinActivity(detailData.live_status)">
              <span>{{ detailData.live_status == 1 ? '直播未开始' : detailData.live_status == 2 ? '直播进行中' : '直播已结束' }}</span>
              <span v-if="detailData.live_status == 2" class="icon"></span>
            </p>
            <!-- <p
              :class="detailData.live_status == 1 ? 'active1' : detailData.live_status == 2 ? 'active2' : ''"
            >{{ detailData.live_status == 1 ? '直播未开始' : detailData.live_status == 2 ? '直播进行中' : '直播已结束' }}</p> -->
          </div>
        </div>
        <div class="duce">
          <div class="title">活动介绍</div>
          <div class="txt" v-html="detailData.introduce"></div>
        </div>
        <div class="duce" id="setImg">
          <div class="title">活动内容</div>
          <div class="txt" v-html="detailData.content"></div>
        </div>
        <div class="list" v-if="detailData.live_status == 3" @click="goPlayback">
          <div class="title">活动回放记录</div>
          <van-icon name="arrow" class="icon"/>
        </div>
        <div class="join-user">
          <div class="title">参与活动的用户</div>
          <ul>
            <template v-for="(item, index) in userList">
              <li :key="index" v-if="item.user_info">
                <img :src="item.user_info.avatar" alt="">
                <div class="info">
                  <div class="name">{{ item.user_info.nickname }}</div>
                  <div class="time">{{ getDate(item.join_activity_time) }}</div>
                </div>
              </li>
            </template>
          </ul>
        </div>
      </div>
    </div>
    <div class="tabbar-box">
      <tabbar></tabbar>
    </div>
  </div>
</template>
<script>
import tabbar from '../../components/tabbar.vue'
import { Toast } from 'vant'
import action from '@action'
import topTitle from '../../components/topTitle.vue'
export default {
  components: {
    topTitle,
    tabbar
  },
  data() {
    return {
      detailData: {},
      userList: [],
      liveData: {}
    }
  },
  mounted() {
    this.getDetail()
    this.getDetailUser()
  },
  methods: {
    joinActivity(status) {
      if (parseInt(status) === 2) {
        console.log(this.liveData)
        window.location.href = this.liveData.view_url
        // let url = this.liveData.code.viewUrl
        // action.Login.getUserInfo().then((res) => {
        //   if (res.code === 0) {
        //     const user = res.data
        //     url += `&autoLogin=true&viewername=${user.username}&viewertoken=${this.liveData.play_pass}`
        //     window.location.href = url
        //   }
        // })
      }
    },
    getDetail() {
      Toast.loading({
        message: '加载中...',
        duration: 3000
      })
      const id = this.$route.query.id || this.$route.query.activity_id
      action.List.getLiveDetail(id).then((res) => {
        Toast.clear()
        if (res.code === 0) {
          this.detailData = res.data.activity_info
          this.liveData = res.data.live_info
          this.$nextTick(() => {
            const dom = document.getElementById('setImg')
            const domImg = dom.getElementsByTagName('img')
            for (let i = 0; i < domImg.length; i++) {
              domImg[i].style.width = '100%'
            }
          })
        } else {
          this.$router.push({
            path: '/index'
          })
        }
      })
    },
    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
    },
    getDetailUser() {
      Toast.loading({
        message: '加载中...',
        duration: 3000
      })
      const id = this.$route.query.id || this.$route.query.activity_id
      action.List.getDetailUser(id).then((res) => {
        Toast.clear()
        if (res.code === 0) {
          this.userList = res.data.list
        }
      })
    },
    goPlayback() {
      this.$router.push({
        name: 'liveBack',
        params: {
          room_id: this.detailData.live_room_id
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.top-f{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.img-scroll{
  padding-top: 1rem;
  padding-left: .4rem;
  display: flex;
  overflow: scroll;
  li{
    height: 3.35rem;
    margin-right: .2rem;
    img{
      display: block;
      height: 100%;
    }
  }
}
.content{
  padding: 0 .4rem;
  .live-state{
    border-bottom: 0.01rem solid #ccc;
    padding-top: .4rem;
    .time{
      display: flex;
      p{
        font-size: .24rem;
        color: #222;
        line-height: 100%;
        &:nth-child(2){
          margin-left: auto;
          color: #666666;
        }
      }
    }
    .state{
      margin: .4rem 0;
      display: flex;
      p{
        font-size: .24rem;
        color: #222;
        line-height: 100%;
        margin: 0;
        display: flex;
        align-items: center;
        &:nth-child(2){
          margin-left: auto;
        }
        &.active1{
          color: #0075FF;
        }
        &.active2{
          color: #fff;
          display: flex;
          align-items: center;
          width: 1.73rem;
          padding: 0 .2rem;
          height: 0.5rem;
          background: #5AD252;
          border-radius: 0.08rem;
        }
        &.active3{
          color: #C7385C;
        }
        .icon{
          display: block;
          width: .33rem;
          height: 0.23rem;
          background: url(../../assets/images/list/list-i1.png);
          background-size: 100% 100%;
          margin-left: auto;
        }
      }
    }
  }
  .duce{
    border-bottom: 0.01rem solid #ccc;
    padding-top: .4rem;
    .title{
      font-size: .3rem;
      color: #222;
      font-weight: bold;
      line-height: 100%;
    }
    .txt{
      font-size: .24rem;
      line-height: .24rem;
      color: #222;
      margin: .4rem 0;
      word-break: break-all;
      img{
        width: 100%;
      }
    }
  }
  .list{
    display: flex;
    height: 1.1rem;
    display: flex;
    align-items: center;
    border-bottom: 0.01rem solid #ccc;
    .title{
      color: #222;
      font-size: .3rem;
    }
    .icon{
      margin-left: auto;
    }
  }
  .join-user{
    .title{
      line-height: 1.1rem;
      font-size: .3rem;
      color: #222;
    }
    ul{
      li{
        margin-bottom: .4rem;
        display: flex;
        img{
          width: .9rem;
          height: .9rem;
          border-radius: 50%;
        }
        .info{
          margin-left: .4rem;
          padding-top: .11rem;
          .name{
            line-height: 100%;
            font-size: .24rem;
            color: #222;
          }
          .time{
            font-size: .24rem;
            color: #222;
            line-height: 100%;
            margin-top: .2rem;
          }
        }
      }
    }
  }
}
.tabbar-box{
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
}
.d-padd{
  padding-bottom: 1rem;
}
</style>
