<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 Icon from "../common/Icon.vue";
import Bridge from "@/utils/jsBridge2"
import { Toast } from "vant";
import { enableLive } from "@/service/StaffService";

export default defineComponent({
  components: { Icon },
  props: {
    title: String,
  },
  mounted() {
  },
  methods: {
    goto() {
      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: window.location.host + require('@/assets/icons/avatar.png'),
          allow,
          time_section
        })
      }).catch(() => {
        new Bridge().bridge_gotoLiveRoom({
          phone: JSON.parse(window.localStorage.getItem('USER_MSG') as string)?.userInfo.phone,
          avatar: window.location.host + require('@/assets/icons/avatar.png'),
          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>