<template>
  <div>
    <van-cell-group class="cell-group" :border="false">
      <van-cell center style="border-radius: 0.1rem !important">
        <template #title>
          <div class="title">
            <img src="../images/icon_video.png" alt="" />
            <p class="van-ellipsis" style="width: 2.8rem">
              {{ item.roomTitle }}
            </p>
          </div>
        </template>
        <template #label>
          <div style="word-break: break-all; word-wrap: break-word">直播内容：{{ item.liveRemark }}</div>
          <br />
          <template v-if="item.liveState != 1"> 直播时间：{{ item.liveStartTime }} </template>
        </template>
      </van-cell>
      <van-cell center class="userInfo" style="border-radius: 0.1rem !important">
        <template #title>
          <div class="username">
            <img src="../images/icon_person.png" />
            <span>主讲人：{{ item.speakerName }}</span>

            <div class="tag" v-if="item.liveState != 2">
              <img v-if="item.os == 'mobile'" src="../images/icon_mobli.png" />
              <img v-if="item.os == 'pc'" src="../images/icon_mobli.png" />
              <img v-if="item.os == 'client'" src="../images/icon_client.png" />
              {{ item.os == "client" ? "电脑直播" : "" }}
              {{ item.os == "pc" ? "web直播" : "" }}
              {{ item.os == "mobile" ? "手机直播" : "" }}
            </div>
          </div>
        </template>

        <van-button round size="small" color="#FF806F" v-if="item.liveState == 1" @click="onDetail">
          <img class="svg" src="../images/audio.svg" alt="" />
          开始直播
        </van-button>

        <van-button round size="small" type="info" style="min-width: 68px" v-if="item.liveState == 2" @click="onDetail"> 查看回放 </van-button>
      </van-cell>
    </van-cell-group>
    <van-popup v-model="videoStatus" round style="width: 90%" closeable>
      <preview-video v-if="videoStatus" :videoList="videoList" />
    </van-popup>
  </div>
</template>

<script>
import { postMessage } from "@/helpers/native-message";
import previewVideo from "./previewVideo";
export default {
  components: { previewVideo },
  props: ["item"],
  data() {
    return {
      videoStatus: false,
      videoList: [],
      src: "",
    };
  },
  methods: {
    async onDetail() {
      const item = this.item;
      if (item.liveState == 1) {
        if (item.os !== "mobile") {
          this.$toast("请在相关客户端进行直播");
        } else {
          postMessage({
            api: "enterLiveRoom",
            content: { roomId: item.roomUid, serviceProvider: item.serviceProvider },
          });
        }
      } else if (item.liveState == 2) {
        this.$router.push("/previewVideo?roomUid=" + item.roomUid);

        this.videoStatus = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.cell-group {
  margin: 0.12rem 0.14rem;
  overflow: hidden !important;
  border-radius: 0.1rem !important;
  /deep/.van-cell__label {
    // line-height: 1.5;
  }
}
.title {
  display: flex;
  align-items: center;
  font-size: 0.16rem;
  font-weight: 500;
  color: #000000;
  line-height: 1.2;
  padding-top: 0.1rem;
  padding-bottom: 0.05rem;
  img {
    width: 0.22rem;
    height: 0.22rem;
    margin-right: 0.08rem;
  }
}
.svg {
  width: 0.12rem;
  height: 0.09rem;
}
.username {
  display: flex;
  align-items: center;
  font-size: 0.13rem;
  color: #ff806f;
  img {
    width: 0.12rem;
    height: 0.15rem;
    margin-right: 0.05rem;
  }
}
.userInfo {
  /deep/.van-cell__title {
    flex: 45%;
  }
}
.tag {
  margin-left: 0.1rem;
  padding: 0 0.04rem;
  display: flex;
  align-items: center;
  justify-items: center;
  font-size: 0.12rem;
  color: #ff806f;
  background: rgba(255, 128, 111, 0.08);
  border-radius: 3px;
  border: 1px solid rgba(255, 128, 111, 0.25);
  height: 0.2rem;
  img {
    width: 0.14rem;
    height: 0.14rem;
    margin-right: 0.02rem;
  }
}
</style>
