<template>
  <div class="goods-action">
    <div v-if="tip" class="goods-action__tip" @click="goSimilar">
      <span>{{ tip }}</span>
      <cr-icon type="arrow" size="0.24rem" color="#fff" />
    </div>

    <cr-goods-action
      :options="leftOptions"
      :button-group="btnGroup"
      :fixed="false"
      :round="true"
      @click="onClickLeft"
      @button-click="onClickRightPopup"
    />
  </div>
</template>
<script>
import homeImg from '@/assets/images/goods/home.png';
import customerImg from '@/assets/images/goods/customer.png';
import cartImg from '@/assets/images/goods/cart.png';
import { mapGetters as ShopCartMapGetters } from '@/views/shopCart/shopCartModules.js';
import { mapGetters as goodsMapGetters, mapActions } from '../store';
import { mapGetters as homeMapGetters } from 'vuex';
import toOrderMixin from '../mixins/toOrder.mixin.js';

export default {
  name: 'GoodsAction',
  mixins: [toOrderMixin],
  computed: {
    ...homeMapGetters(['hasLogin']),
    ...goodsMapGetters(['customerConf']),
    ...ShopCartMapGetters(['cartCount']),
    leftOptions() {
      const defaultOptions = [
        {
          icon: homeImg,
          text: '首页'
        },
        {
          icon: cartImg,
          text: '购物车',
          info: this.cartCount
        }
      ];
      if (this.customerConf) {
        defaultOptions.splice(1, 0, {
          icon: customerImg,
          text: '客服'
        });
      }
      return defaultOptions;
    }
  },
  methods: {
    ...mapActions(['setPopupState']),
    onClickLeft(e) {
      switch (e.index) {
        case 0:
          this.$router.replace({ name: 'Home' });
          break;
        case 1:
          if (this.customerConf.needLogin && !this.hasLogin) {
            this.$router.push({ name: 'Login' });
            return;
          }
          window.location.href = this.customerConf.customerLink;
          break;
        case 2:
          this.$router.push({ path: '/shopCart' });
          break;
        default:
          break;
      }
    },
    onClickRightPopup(e) {
      this.setPopupState({ type: e.index === 0 ? 'cart' : 'buy', title: '' });
    }
  }
};
</script>
<style lang="less" scoped>
.goods-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  z-index: 99;
  background-color: @white;
  .iphonex-fix-padding;
  &__tip {
    background: #ffece6;
    .text-size(13px);
    color: @red;
    padding: @padding-xs @padding-xs + 2;
    display: flex;
    align-items: center;
    .cr-icon {
      margin-left: auto;
      background: linear-gradient(270deg, #ff5d00 0%, #ff1900 100%);
      width: 16px !important;
      height: 16px !important;
      line-height: 16px !important;
      border-radius: 50%;
      text-align: center;
    }
  }
  @{deep} .cr-goods-action {
    &__right-btn {
      background: @white;
      color: @red;
      border-color: @red;
      &:last-child {
        @primary-bg();
        color: @white;
        border: 1 solid transparent;
      }
    }
    &__dot {
      right: 8px;
      top: 5px;
      line-height: 1.2;
      box-sizing: border-box;
      min-width: 0.213333rem;
      border-radius: 0.213333rem;
      padding: 0 0.08rem;
      font-size: 0.32rem;
      background-color: #ec1500;
      color: #fff;
      font-weight: 500;
      text-align: center;
    }
  }
}
</style>
