<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <z-paging
    ref="pagingRef"
    v-model="liveRoomList"
    :paging-style="{'top': '0'}"
    :empty-view-text="$t('liveBroadcastTips')"
    :empty-view-style="{'padding-top': '186rpx', 'z-index': '999'}"
    bg-color="#f8f8f8"
    @query="onGetLiveList"
  >
    <view class="Mall4j page-live">
      <view class="top-bg" />
      <view class="search-bar">
        <view
          class="select"
          @tap="changeShopOrProd"
        >
          <image
            src="/static/images/switch2.png"
            class="arrow"
          />
          <!-- searchType == 1?i18n.live-broadcast:i18n.commodity -->
          <view class="key">
            {{ ['直播','商品','主播'][searchType-1] }}
          </view>
        </view>
        <view class="search">
          <image
            src="/static/live-broadcast/search.png"
            class="search-icon"
          />
          <input
            type="text"
            class="search-int"
            :value="searchKey"
            confirm-type="search"
            :placeholder="$t('inputBlogger')"
            placeholder-class="inp-palcehoder"
            @input="getInputValue"
            @confirm="search"
          >
        </view>
      </view>

      <!-- 直播列表 -->
      <view class="live-box">
        <view class="live-list">
          <view
            v-for="(liveItem,liveInx) in liveRoomList"
            :key="liveInx"
            class="live-item"
            @tap="onGoLiveRoom(2,liveItem)"
          >
            <view class="live-bg">
              <img-show :src="liveItem.feedsImg" />
              <!-- 直播间状态 0.未开始 1.直播中 2.已结束 -->
              <view
                v-if="liveItem.liveStatus===1"
                class="living"
              >
                <view class="living_icon">
                  <image
                    src="/static/live-broadcast/icon-explain.png"
                    mode=""
                  />
                </view>
                <view class="living_txt">
                  直播中
                </view>
              </view>
            </view>
            <view class="live-info">
              <view class="live-til">
                {{ liveItem.name }}
              </view>
              <view class="live-store">
                {{ liveItem.shopName }}
              </view>
              <view class="prod-list">
                <view
                  v-for="prodItem in liveItem.prodList"
                  :key="prodItem.spuId"
                  class="prod-img"
                >
                  <img-show
                    :src="prodItem.mainImgUrl"
                    mode=""
                  />
                </view>
                <view class="more-prod prod-img">
                  <view class="more-num">
                    +{{ liveItem.spuList.length }}
                  </view>
                  <view class="more-txt">
                    更多
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view
        class="start-live"
        @tap="onGoLiveRoom(1)"
      >
        <text>+</text>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
onShow(() => {
  // 头部导航标题
  uni.setNavigationBarTitle({
    title: '直播列表'
  })
  getCartCount() // 重新计算购物车总数量
  pagingRef.value?.reload()
})

// 获取直播间列表
const liveRoomList = ref([]) // 直播间列表
const pagingRef = ref(null)
const onGetLiveList = (pageNum, pageSize) => {
  http.request({
    url: '/tmerclub_marketing/ua/live_room/page',
    method: 'GET',
    data: {
      pageNum,
      pageSize,
      name: liveName,
      spuName,
      nickName,
      searchType: searchType.value
    }
  }).then(res => {
    res.list.forEach((item) => {
      item.prodList = item.spuList.splice(0, 2)
    })
    pagingRef.value.complete(res.list)
  })
}

// 前往直播间 type 1直播推流(主播直播) 2直播播流
const onGoLiveRoom = (type, item) => {
  const roomId = item?.roomId
  const userId = item?.userId
  const curUserId = uni.getStorageSync('cloudUserDetails')?.userId
  // 主播从直播列表进入直播间进行开播
  if (uni.getStorageSync('cloudToken') && String(curUserId) === String(userId)) {
    type = 1
  }
  // #ifdef H5 || MP-WEIXIN
  if (type === 1) {
    uni.showModal({
      title: '',
      showCancel: false,
      content: '请前往APP进行直播',
      confirmText: $t('confirm')
    })
    return
  }
  // #endif
  if (type === 1) {
    util.checkAuthInfo(() => {
      onCheckLive(type)
    })
  } else {
    util.gotoLiveRoom(type, roomId, userId)
  }
}

// 检查主播是否可开播
const onCheckLive = (type) => {
  http.request({
    url: '/tmerclub_marketing/live/liveRoom/get_user_living_room',
    method: 'GET'
  }).then(res => {
    util.videoInteract()
    uni.navigateTo({
      url: `/package-activities/pages/live-room/live-room?liveType=${type}&roomId=${res.roomId}`
    })
  }).catch(err => {
    uni.showToast({
      title: err.msg,
      duration: 2000,
      icon: 'none'
    })
  })
}

// 搜索类型
const searchType = ref(1) // searchType 搜索类型 1.搜索直播间信息 2.搜索商品名 3.搜索主播昵称
const changeShopOrProd = () => {
  // searchType 搜索类型 1.搜索直播间信息 2.搜索商品名 3.搜索主播昵称
  if (searchType.value === 3) {
    searchType.value = 1
  } else {
    searchType.value = ++searchType.value
  }
  searchKey.value = ''
}

// 搜索输入框
const searchKey = ref('') // 搜索key
let liveName = '' // 直播间名称
let spuName = '' // 商品名称
let nickName = '' // 主播昵称
const getInputValue = (e) => {
  const val = e.detail.value
  searchKey.value = val
  // 1.搜索直播间信息 2.搜索商品名 3.搜索主播昵称
  if (searchType.value === 1) {
    liveName = val
    spuName = ''
    nickName = ''
  } else if (searchType.value === 2) {
    liveName = ''
    spuName = val
    nickName = ''
  } else {
    liveName = ''
    spuName = ''
    nickName = val
  }
}

// 搜索
const search = () => {
  pagingRef.value.reload()
}
</script>

<style lang="scss" scoped>
@use "./live-broadcast.scss";
</style>
