<template>
  <view class="shop-head-container" :style="{ height: headHeight + 'px', paddingTop: headTop + 'px' }">
    <!-- 返回按鈕 -->
    <view v-if="pagesNum > 1" class="text-xl text-bold" @tap="handleBack">
      <text class="wlIcon wlIcon-fanhui1"></text>
    </view>
    <!-- 首頁按鈕 -->
    <view v-else class="text-xl text-bold" @tap="handleHome">
      <text class="wlIcon wlIcon-zhuye"></text>
    </view>
    <view class="content">
      <!-- 首頁導航 -->
      <view v-if="tabbarId === 'home'" class="home">
        <view :class="{ active: headTabbarId === 'page' }" @tap="$emit('headId', 'page')">
          <text>{{ $t('mall.recommend') }}</text>
        </view>
        <view :class="{ active: headTabbarId === 'news' }" @tap="$emit('headId', 'news')">
          <text>{{ $t('mall.sort.new') }}</text>
        </view>
      </view>
      <!-- 搜索框 -->
      <view v-else class="search round" @tap="handleSearch">
        <text class="wlIcon wlIcon-sousuo1 text-bold margin-left-bj margin-right-xs"></text>
        <text>{{ $t('mall.searchShopGoodsInternal') }}</text>
      </view>
    </view>
    <!-- 更多操作按鈕 -->
    <view class="text-xl">
      <text v-if="tabbarId === 'home'" class="wlIcon wlIcon-sousuo1 margin-right" @tap="handleSearch"></text>
      <text class="wlIcon wlIcon-gengduo" @tap="showModal('menu')"></text>
    </view>
    <!-- 功能直連弹窗 -->
    <view class="WANL-MODAL">
      <view class="cu-modal top-modal" :class="{ show: modalName === 'menu' }" @tap="hideModal">
        <view class="wanl-modal-menu cu-dialog" @tap.stop="">
          <view class="wanl-direct">
            <!-- 功能直連標題 -->
            <view class="menu-header" :style="{ paddingTop: headTop + 'px' }">
              <view>{{ $t('mall.featureLink') }}</view>
              <view @tap="hideModal">
                <text class="wlIcon-31guanbi"></text>
              </view>
            </view>
            <!-- 功能直連列表 -->
            <view class="menu-box">
              <!-- 消息 -->
              <view class="menu-item" hover-class="wanl-opcity" @tap="handleNav('/pages/notice/mall-notice/index')">
                <view class="badge-box">
                  <text class="wlIcon-xiaoxizhongxin"></text>
                  <view class="cu-tag badge"
                    v-if="statistics.notice.notice + statistics.notice.order + statistics.notice.chat > 0">{{
                      statistics.notice.notice + statistics.notice.order + statistics.notice.chat }}</view>
                </view>
                <view class="menu-text">{{ $t('mall.message') }}</view>
              </view>
              <!-- 首頁 -->
              <view class="menu-item" hover-class="wanl-opcity" @tap="handleNav('/pages/mall/index')">
                <view class="badge-box">
                  <text class="wlIcon-31shouye"></text>
                </view>
                <view class="menu-text">{{ $t('mall.home') }}</view>
              </view>
              <!-- 我的 -->
              <view class="menu-item" hover-class="wanl-opcity" @tap="handleSwitchTab('/pages/mine/index')">
                <view class="badge-box">
                  <text class="wlIcon-31wode"></text>
                  <view class="cu-tag badge"
                    v-if="statistics.order.pay + statistics.order.delive + statistics.order.receiving + statistics.order.evaluate > 0">
                    {{ statistics.order.pay + statistics.order.delive + statistics.order.receiving +
                      statistics.order.evaluate }}</view>
                </view>
                <view class="menu-text">{{ $t('mall.mine') }}</view>
              </view>
              <!-- 購物車 -->
              <view class="menu-item" hover-class="wanl-opcity" @tap="handleCart">
                <view class="badge-box">
                  <text class="wlIcon-gouwuche"></text>
                  <view class="cu-tag badge" v-if="cart.cartnum > 0">{{ cart.cartnum }}</view>
                </view>
                <view class="menu-text">{{ $t('mall.cart') }}</view>
              </view>
              <!-- 服務 -->
              <view class="menu-item" hover-class="wanl-opcity" @tap="handleNav('/pages/user/service')">
                <view class="badge-box">
                  <text class="wlIcon-unie737"></text>
                </view>
                <view class="menu-text">{{ $t('mine.actionSmartAssistant') }}</view>
              </view>
              <!-- 反饋 -->
              <view class="menu-item" hover-class="wanl-opcity" @tap="handleNav('/pages/account/feedback')">
                <view class="badge-box">
                  <text class="wlIcon-xiugaioryijian"></text>
                </view>
                <view class="menu-text">{{ $t('mall.feedback') }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: {
    headHeight: { type: Number, default: 0 },
    headTop: { type: Number, default: 0 },
    shopId: { type: Number, default: 0 },
    shopDescription: { type: String, default: '' },
    pagesNum: { type: Number, default: 0 },
    tabbarId: { type: String, default: '' },
    headTabbarId: { type: String, default: 'page' }
  },
  data() {
    return { modalName: null }
  },
  computed: {
    ...mapState({
      statistics: state => state.statistics,
      cart: state => state.cart
    })
  },
  methods: {
    // 顯示彈窗
    showModal(name) {
      this.modalName = name
    },
    // 隱藏彈窗
    hideModal() {
      this.modalName = null
    },
    // 返回上頁
    handleBack() {
      uni.navigateBack({ delta: 1 })
    },
    // 首頁
    handleHome() {
      uni.switchTab({ url: '/pages/mall/index' })
    },
    handleSearch() {
      uni.navigateTo({ url: '/pages/page/search' })
    },
    // 导航到指定頁面
    handleNav(url) {
      // 隱藏彈窗
      this.hideModal()
      uni.navigateTo({ url })
    },
    // 切換頁面
    handleSwitchTab(url) {
      this.hideModal()
      uni.switchTab({ url })
    },
    handleCart() {
      this.hideModal()
      uni.navigateTo({ url: '/pages/cart/index' })
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-head-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 22rpx;
  padding-right: 24rpx;

  .content {
    flex: 1;

    .home {
      display: flex;
      align-items: center;
      margin: 0 25rpx;
      font-size: 32rpx;
      color: #555;

      &>view+view {
        margin-left: 40rpx;
      }

      .active {
        color: #333;
        font-size: 38rpx;
        font-weight: 600;
      }
    }

    .search {
      display: flex;
      align-items: center;
      margin: 0 25rpx;
      background-color: #f9f9f9;
      line-height: 68rpx;
      height: 68rpx;
      color: grey;
    }
  }
}

.WANL-MODAL {
  .cu-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;

    &.show {
      opacity: 1;
      visibility: visible;
    }
  }

  .top-modal .cu-dialog {
    width: 100%;
    border-radius: 0 0 25rpx 25rpx;
    background: rgba(60, 60, 60, 0.9);
  }
}

.wanl-direct {
  .menu-header {
    font-size: 34rpx;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 20rpx 30rpx;
  }

  .menu-box {
    color: #fff;
    padding: 40rpx 1rpx 0 1rpx;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    font-size: 26rpx;

    .menu-item {
      width: 22%;
      height: 160rpx;
      border-radius: 24rpx;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      background: rgba(0, 0, 0, 0.4);
      margin-right: 4%;
      margin-bottom: 4%;

      &:nth-of-type(4n) {
        margin-right: 0;
      }

      .badge-box {
        position: relative;
        font-size: 52rpx;

        .cu-tag {
          right: -25rpx;
        }
      }

      .menu-text {
        padding-top: 12rpx;
      }
    }

    .wanl-opcity .menu-text,
    .wanl-opcity .badge-box {
      opacity: 0.5;
      transition: opacity 0.2s ease-in-out;
    }
  }
}
</style>