<template>
  <div id="index" class="container">
    <van-row>
      <van-row>
        <van-col span="24" class="style">
          <van-col span="24" class="banner">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item class="swipList" v-for="(item, index) in swipList" :key="index">
                <van-image :src="item.url" />
              </van-swipe-item>
            </van-swipe>
          </van-col>
          <van-col span="24" class="click">
            <van-col span="6" class="btn" @click.native="$router.push({ path: '/live/roomlist' })">
              <i class="iconfont iconzhibo icon"></i>
              <p>直播入口</p>
            </van-col>
            <van-col span="6" class="btn" @click.native="$router.push({ path: '/live/roomrecord' })">
              <i class="iconfont icondajiangtang icon"></i>
              <p>往期讲堂</p>
            </van-col>
            <van-col span="6" class="btn" @click.native="$router.push({ path: '/user/index' })">
              <i class="iconfont icongerenzhongxin icon"></i>
              <p>个人中心</p>
            </van-col>
            <van-col span="6" class="btn">
              <i class="iconfont icongerenzhongxin icon"></i>
              <p>测试按钮</p>
            </van-col>
          </van-col>
          <van-col span="24" class="after">
            <h4>往期直播</h4>
            <van-col span="24">
              <van-col span="11" class="videoList" v-for="(item, index) in videoList" :key="index">
                <van-image :src="item.filedir" @click.native="$router.push({ path: '/onlive/videoinfo', query: { id: item.id, fileid: item.file_id } })" />
                <p>{{ item.title }}</p>
              </van-col>
            </van-col>
          </van-col>
          <van-col span="24" class="foot">
            <van-tabbar v-model="active">
              <van-tabbar-item icon="home-o">首页</van-tabbar-item>
              <van-tabbar-item icon="search">直播</van-tabbar-item>
              <van-tabbar-item icon="friends-o">往期</van-tabbar-item>
              <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
            </van-tabbar>
          </van-col>
        </van-col>
      </van-row>
    </van-row>
    <!-- <el-col :span="24" class="title">
          <span>叁多健康管理平台</span>
        </el-col>
        <el-col :span="24" class="main">
          <el-col class="guide-box">
            <el-col class="single-box" @click.native="$router.push({ path: '/live/roomlist' })">
              <el-image class="icon" :src="require('@/assets/multiroom.png')"> </el-image>
              <span class="label">直播入口</span>
              <span class="desc"></span>
            </el-col>
            <el-col class="single-box" @click.native="$router.push({ path: '/live/roomrecord' })">
              <el-image class="icon" :src="require('@/assets/voice.png')"> </el-image>
              <span class="label">往期讲堂</span>
              <span class="desc"></span>
            </el-col>
            <el-col class="single-box" @click.native="$router.push({ path: '/user/index' })">
              <el-image class="icon" :src="require('@/assets/export.png')"> </el-image>
              <span class="label">个人中心</span>
              <span class="desc"></span>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="foot">
          <span>潍坊恒源科技有限公司</span>
        </el-col> -->
  </div>
</template>

<script>
import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
const { mapActions: room } = createNamespacedHelpers('room');
const jwt = require('jsonwebtoken');
export default {
  name: 'index',
  props: {},
  components: {},
  data: () => ({
    // 头部标题
    title: '',
    // meta为true
    isleftarrow: '',
    // 返回
    navShow: true,
    // 轮播图
    swipList: [
      {
        url: require('@/assets/7.png'),
      },
      {
        url: require('@/assets/6.png'),
      },
      {
        url: require('@/assets/1.jpg'),
      },
      {
        url: require('@/assets/2.jpg'),
      },
      {
        url: require('@/assets/3.jpg'),
      },
      {
        url: require('@/assets/4.jpg'),
      },
      {
        url: require('@/assets/5.jpg'),
      },
    ],
    // 往期直播
    videoList: [],
    // 底部标签
    active: 0,
  }),
  created() {
    if (this.token) {
      this.sesstoken();
    }
    this.searchInfo();
  },
  methods: {
    ...mapMutations(['setUser']),
    ...room({ roomQuery: 'query' }),
    async searchInfo() {
      const info = {};
      info.ishis = '1';
      let res = await this.roomQuery(info);
      if (this.$checkRes(res)) {
        this.$set(this, `videoList`, res.data);
      }
    },
    sesstoken() {
      sessionStorage.setItem('token', this.token);
      let user = jwt.decode(this.token);
      this.setUser(user);
    },
    handleEntry(data) {
      if (data === 1) {
      } else if (data === 2) {
      } else if (data === 3) {
      }
    },
  },
  computed: {
    ...mapState(['user']),
    token() {
      return this.$route.query.token;
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.style {
  .banner {
    .swipList {
      width: 100%;
      height: 200px;
      .van-image {
        width: 100%;
        height: 200px;
      }
    }
  }
  .click {
    border-bottom: 1px solid #ccc;
    .btn {
      padding: 10px 0;
      text-align: center;
      .icon {
        font-size: 40px;
      }
      p {
        font-size: 12px;
        padding: 5px 0 0 0;
      }
    }
  }
  .after {
    margin: 0 0 50px 0;
    h4 {
      padding: 0 10px;
    }
    .videoList {
      border: 1px solid #ccc;
      margin: 0 0 10px 10px;
      width: 46%;
      border-radius: 5px;
      .van-image {
        width: 100%;
        height: 140px;
        border-radius: 5px;
      }
      p {
        font-size: 14px;
        padding: 5px;
        color: #333;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
/deep/.van-image__img {
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
</style>
