<template>
  <div id="roomInfo">
    <el-row>
      <el-col :span="24" class="style">
        <el-col :span="24" class="top">
          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
        </el-col>
        <el-col :span="24" class="main">
          <van-image :src="roomInfos.filedir" class="image"></van-image>
          <van-count-down v-if="time > 0 && endtime > 0" class="time" :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
          <el-col v-else-if="time <= 0 && endtime > 0" class="time">直播已开始</el-col>
          <el-col v-else-if="endtime <= 0" class="time">直播已结束</el-col>
          <van-tabs v-model="active" line-width="50px" title-active-color="#ee0a24">
            <van-tab title="简介">
              <van-col :span="24" class="title">{{ roomInfos.title }}</van-col>
              <van-col :span="24" class="starttime"><van-icon name="underway-o" />开始时间： {{ roomInfos.starttime }}</van-col>
              <van-col :span="24" class="gap"></van-col>

              <van-col :span="24">
                <van-col :span="24" class="infotop"><span></span><span>活动简介</span> </van-col>
                <van-col class="content">{{ roomInfos.content }}</van-col>
              </van-col>
            </van-tab>
          </van-tabs>
          <!-- <van-col :span="24" class="reserve">立即预约</van-col> -->
          <van-col
            :span="24"
            class="reserve"
            @click.native="$router.push({ path: '/live/roomDetail', query: { id: roomInfos.id, roomname: roomInfos.name } })"
            v-if="roomInfos.type == 0"
          >
            进入房间
          </van-col>
          <van-col :span="24" class="reserve" @click="roomMeetBtn" v-else>进入房间</van-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
import NavBar from '@/layout/common/topInfo.vue';
import footInfo from '@/layout/common/footInfo.vue';
import wx from 'weixin-js-sdk';
const moment = require('moment');
const { mapActions: room } = createNamespacedHelpers('room');
const jwt = require('jsonwebtoken');
export default {
  name: 'roomInfo',
  props: {},
  components: {
    NavBar,
  },
  data: function() {
    return {
      // 头部标题
      title: '',
      // meta为true
      isleftarrow: '',
      // 返回
      navShow: true,
      roomInfos: {},
      time: '',
      active: 1,
      endtime: '',
    };
  },
  created() {
    this.seachInfo();
    if (this.token) {
      this.sesstoken();
    }
  },
  methods: {
    ...room(['fetch']),
    ...mapMutations(['setUser']),
    sesstoken() {
      sessionStorage.setItem('token', this.token);
      let user = jwt.decode(this.token);
      this.setUser(user);
    },
    async seachInfo() {
      let res = await this.fetch(this.id);
      if (this.$checkRes(res)) {
        console.log(res.data);

        this.$set(this, `roomInfos`, res.data);
        const starttime = moment(res.data.starttime).format('x');
        const endtime = moment(res.data.endtime).format('x');
        const now = moment(new Date()).format('x');
        this.$set(this, `time`, starttime - now);
        this.$set(this, `endtime`, endtime - now);
      }
    },
    roomMeetBtn() {
      const url = '/pages/meeting/meeting?uid=' + this.user.uid + '&username=' + this.user.name + '&rid=' + this.id + '&roomname=' + this.roomInfos.name;
      console.log(url);
      wx.miniProgram.navigateTo({ url });
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
    token() {
      return this.$route.query.token;
    },
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
  },
};
</script>

<style lang="less" scoped>
.style {
  width: 100%;
  min-height: 667px;
  position: relative;
  background-color: #f9fafc;
}
.top {
  height: 46px;
  overflow: hidden;
  position: relative;
  z-index: 999;
}
.main {
  min-height: 570px;
}
.image {
  width: 100%;
  height: 220px;
}
.time {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  text-align: center;
  position: absolute;
  top: 226px;
  width: 100%;
}
.title {
  font-size: 20px;
  font-weight: bold;
  padding: 10px;
}
.starttime {
  padding: 10px;
}
/deep/.van-icon::before {
  font-size: 13px;
  margin-right: 5px;
}
.gap {
  background-color: #f2f2f2;
  height: 10px;
}
.infotop {
  margin: 10px 5px;
}
.infotop span:first-child {
  display: inline-block;
  background-color: #ee0a24;
  width: 3px;
  height: 20px;
  margin: 0 10px;
}
.infotop span:last-child {
  font-size: 16px;
  font-weight: bold;
}
.content {
  padding: 10px;
}
.reserve {
  background-color: #2c69fe;
  position: absolute;
  bottom: 0px;
  height: 50px;
  color: #ffffff;
  text-align: center;
  line-height: 50px;
  font-weight: 600;
}
</style>
