<template>
  <div class="component-shop-head">
    <view class="header">
      <view class="bg">
        <image
          v-if="shopInfo.mobileBackgroundPic"
          style="width: 100%; height: 100%;"
          :src="util.addDomain(shopInfo.mobileBackgroundPic)"
          @error="shopInfo.mobileBackgroundPic = ''"
        />
        <image
          v-else
          style="width: 100%; height: 100%;"
          src="@/package-shop/static/images/default-shop-bg.png"
        />
      </view>
      <view class="bg-mask" />
      <view class="search">
        <view class="icon">
          <image
            style="width: 100%; height: 100%;"
            src="@/static/images/search-w.png"
          />
        </view>
        <view
          class="text"
          @tap="toShopSearch"
        >
          {{ searchKey ? searchKey : '搜索您想要的商品' }}
        </view>
        <view
          v-if="searchKey"
          class="clear-key"
          @tap="clearSearchKey"
        >
          ×
        </view>
      </view>
      <view class="shop-info">
        <view class="logo">
          <image
            v-if="shopInfo.shopLogo"
            style="width: 100%; height: 100%;"
            :src="util.addDomain(shopInfo.shopLogo)"
            @error="shopInfo.shopLogo=''"
          />
          <image
            v-else
            style="width: 100%; height: 100%;"
            src="@/package-shop/static/images/default-shop-logo.png"
          />
        </view>
        <view class="text-box">
          <view class="name">
            {{ shopInfo.shopName }}
          </view>
          <view class="focus-box">
            <view
              v-if="shopInfo.type === 1"
              class="self"
            >
              自营
            </view>
            <view class="focus">
              关注人数：{{ wxs.parseCollectionNumber(shopInfo.collectionNum) }}
            </view>
          </view>
        </view>
        <view
          class="collect"
          @tap="addOrCancelOfCollection"
        >
          <view
            v-if="!isCollected"
            class="img"
          >
            <image
              style="width: 100%; height: 100%;"
              src="@/package-shop/static/images/focus.png"
            />
          </view>
          <view class="text">
            {{ isCollected ? '已关注' : '关注' }}
          </view>
        </view>
      </view>
      <view
        v-if="isProductsPage"
        class="sortbar"
      >
        <view
          :class="['item', nav === 12 ? 'active' : '']"
          @tap="changeNav(12)"
        >
          默认
        </view>
        <view
          :class="['item', nav === 1 ? 'active' : '']"
          @tap="changeNav(1)"
        >
          销量
          <text :class="['arrow', nav === 1 && sorting === 3 ? 'cur' : '']" />
        </view>
        <view
          :class="['item', nav === 2 ? 'active' : '']"
          @tap="changeNav(2)"
        >
          价格
          <text :class="['arrow', nav === 2 && sorting === 5 ? 'cur' : '']" />
        </view>
        <view
          :class="['item', nav === 3 ? 'active' : '']"
          @tap="changeNav(3)"
        >
          每日上新
        </view>
        <view
          class="list-style"
          @tap="changeListStyle"
        >
          <image
            v-if="isLineProds"
            style="width: 100%; height: 100%;"
            src="@/package-shop/static/images/list-line-w.png"
          />
          <image
            v-else
            style="width: 100%; height: 100%;"
            src="@/package-shop/static/images/list-row-w.png"
          />
        </view>
      </view>
    </view>
  </div>
</template>

<script setup>
import number from '@/wxs/number'
import util from '@/utils/util.js'

const wxs = number()

const props = defineProps({
  shopId: {
    type: [Number, String],
    default: () => {
      return 0
    }
  },
  searchKey: {
    type: String,
    default: () => {
      return ''
    }
  },
  isProductsPage: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  isLineProds: { // 列表格式，默认横排展示
    type: Boolean,
    default: () => {
      return true
    }
  },
  isSales: { // 列表格式，默认横排展示
    type: Boolean,
    default: () => {
      return true
    }
  },
  navStatus: {
    type: Number,
    default: () => {
      return 12
    }
  },
  sort: {
    type: Number,
    default: () => {
      return 0 // 2-销量倒序,3-销量正序
    }
  }
})

const emit = defineEmits(['changeListStyle', 'changeNav', 'clearSearchKey'])

const shopInfo = ref({})
const isCollected = ref(false) // 收藏
const nav = ref(props.navStatus)
const sorting = ref(props.sort)

onMounted(() => {
  nav.value = props.navStatus
  queryShopInfo() // 获取店铺头部信息
  queryCollectedStatus() // 获取店铺是否在收藏夹中
})

/**
 * 获取店铺头部信息
 */
const queryShopInfo = () => {
  http.request({
    url: '/mall4cloud_admin/ua/shop_detail/head_info',
    method: 'GET',
    data: {
      shopId: props.shopId
    }
  }).then((res) => {
    shopInfo.value = res
    uni.setStorageSync('cloudShopInfo', res) // 将店铺信息存起来
  }).catch((err) => {
    // 如果不存在店铺或其他错误
    uni.showModal({
      title: '提示',
      content: err.msg,
      showCancel: false,
      success (res) {
        if (res.confirm) {
          // 点击确定,返回上一页
          uni.navigateBack()
        }
      }
    })
  })
}

/**
 * 切换列表样式
 */
const changeListStyle = () => {
  emit('changeListStyle', !props.isLineProds)
}

/**
 * 根据店铺id获取该店铺是否在收藏夹中
 */
const queryCollectedStatus = () => {
  if (!uni.getStorageSync('cloudToken') || !props.shopId) {
    return
  }
  http.request({
    url: '/mall4cloud_admin/user_collection_shop/ma/is_collection',
    method: 'get',
    data: {
      shopId: props.shopId
    }
  }).then((res) => {
    isCollected.value = res
  })
}

/**
 * 添加收藏/取消收藏
 */
const addOrCancelOfCollection = () => {
  const shopId = props.shopId
  http.request({
    url: '/mall4cloud_admin/user_collection_shop/add_or_cancel',
    method: 'post',
    data: shopId
  }).then((res) => {
    isCollected.value = res
    queryShopInfo()
  })
}

/**
 * 切换nav
 * sort排序：1-新品,2-销量倒序,3-销量正序,4-商品价格倒序,5-商品价格正序,6-评论(暂无评论)
 */
const changeNav = (navPar) => {
  nav.value = navPar
  if (navPar === 12) {
    sorting.value = 12
  } else if (navPar === 1) {
    sorting.value === 3 ? sorting.value = 2 : sorting.value = 3
  } else if (navPar === 2) {
    sorting.value === 5 ? sorting.value = 4 : sorting.value = 5
  } else if (navPar === 3) {
    sorting.value = 1
  }
  emit('changeNav', nav.value, sorting.value)
}

/**
 * 清除搜索关键字
 */
const clearSearchKey = () => {
  if (props.searchKey) {
    emit('clearSearchKey')
  }
}

/**
 * 跳转到搜索页
 */
const toShopSearch = () => {
  const pages = getCurrentPages() // 获取加载的页面
  const currentPage = pages[pages.length - 1] // 获取当前页面的对象
  const url = currentPage.route // 当前页面url
  if (url === 'package-shop/shop-page/shop-prods/shop-prods') {
    // 商品页与搜索页跳转频繁使用redirectTo
    uni.redirectTo({
      url: '/package-shop/shop-page/shop-search/shop-search?shopId=' + props.shopId
    })
  } else {
    uni.navigateTo({
      url: '/package-shop/shop-page/shop-search/shop-search?shopId=' + props.shopId
    })
  }
}

</script>

<style lang="scss" scoped>
@use "index";
</style>
