<template>
  <div class="wrap18 flex mx-5 overflow-hidden" @click="goto">
    <div class="flex-shrink-0 block2 outer3" style="width: 44%">
      <div class="flex-col">
        <div class="flex-col">
          <div class="group2 mt-2 ml-2 flex items-center justify-center">
            <img
              class="icon9 mr-1"
              referrerpolicy="no-referrer"
              src="../../assets/img/Living.png"
            />
            <span class="word26">正在直播</span>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-col justify-between items-center mx-2.5 py-5">
      <p class="word18">{{ title }}</p>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import Bridge from "@/utils/jsBridge2";
import { Toast } from "vant";
import { enableLive } from "@/service/StaffService";
import { getCurrentUserAvatarUrl } from "@/utils/userMsg";

export default defineComponent({
  props: {
    title: String,
  },
  methods: {
    goto() {
      const avatarUrl = getCurrentUserAvatarUrl();
      const finalAvatarUrl =
        window.location.protocol + "//" + window.location.host + avatarUrl;
      const USER_MSG = window.localStorage.getItem("USER_MSG");
      if (!USER_MSG) {
        Toast("请先登录");
        return;
      }
      let allow = false;
      let time_section = "";
      enableLive()
        .then((res) => {
          if (res.code === 200) {
            allow = res.data.allow;
            time_section = res.data.time_section;
          }
          new Bridge().bridge_gotoLiveRoom({
            phone: JSON.parse(window.localStorage.getItem("USER_MSG") as string)
              ?.userInfo.phone,
            avatar: finalAvatarUrl,
            allow,
            time_section,
          });
        })
        .catch(() => {
          new Bridge().bridge_gotoLiveRoom({
            phone: JSON.parse(window.localStorage.getItem("USER_MSG") as string)
              ?.userInfo.phone,
            avatar: finalAvatarUrl,
            allow,
            time_section,
          });
        });
    },
  },
});
</script>
<style scoped>
.wrap18 {
  height: 110px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
}

.word18 {
  z-index: 82;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 16px;
  letter-spacing: 0.19200000166893005px;
  font-family: PingFangSC-Medium;
  line-height: 22px;
  text-align: left;
}

.word19 {
  z-index: 94;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  white-space: nowrap;
  line-height: 17px;
  text-align: center;
  align-self: flex-start;
}

.outer3 {
  overflow: hidden;
  background: url(../../assets/img/live-outer3.png) 100% no-repeat;
  background-size: cover;
}

.block2 {
  background: url(../../assets/img/live-block2.png)
    /* background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngb5e34933d0e615000378ebf1491cce32e934e21b7f3de7cddbddd3f05e03ed7a) */
    100% no-repeat;
  background-size: cover;
}

.group2 {
  width: fit-content;
  padding: 0 9px;
  z-index: 86;
  height: 20px;
  border-radius: 10px;
  background-color: rgba(237, 110, 80, 1);
}

.icon9 {
  z-index: 88;
  width: 11px;
  height: 12px;
}

.word26 {
  z-index: 87;
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  white-space: nowrap;
  line-height: 17px;
  text-align: left;
}
</style>
