<template>
  <div class="order-status-nav-scroll-wrap">
    <scroll ref="statusScroll" :data="statusList" direction="horizontal">
      <ul class="list-wrapper">
        <li
          :class="
            status === statusInfo.value ? 'list-item active' : 'list-item'
          "
          v-for="(statusInfo, i) in statusList"
          :key="i"
          @click="() => onHandleClick(statusInfo.value)"
        >
          {{ statusInfo.text }}
        </li>
      </ul>
    </scroll>
  </div>
</template>

<script>
import { Scroll } from "cube-ui";

import {
  buyerOrderStatusList,
  sellerOrderStatusList,
  ownType
} from "constants/order-constants";

import { createNamespacedHelpers } from "vuex";

const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
  "order/orderList"
);

export default {
  components: {
    Scroll
  },
  computed: {
    ...mapState(["currentStatus", "routeParamStatus"]),
    statusList: function() {
      const { owner } = this.$route.params;
      return owner === ownType.BUY
        ? buyerOrderStatusList
        : sellerOrderStatusList;
    },
    status() {
      return this.currentStatus || this.routeParamStatus;
    }
  },
  methods: {
    ...mapMutations(["setOrderStatus", "resetPartialData"]),
    ...mapActions(["fetchOrderList"]),
    onHandleClick(status) {
      this.setOrderStatus(status);
      this.resetPartialData();
      const { owner } = this.$route.params;
      this.fetchOrderList({ owner, status });
    }
  }
};
</script>

<style>
.order-status-nav-scroll-wrap .cube-scroll-content {
  display: inline-block;
  min-width: 100%;
}
</style>

<style lang="scss" scoped>
.order-status-nav-scroll-wrap {
  transform: rotate(0deg); // fix 子元素超出边框圆角部分不隐藏的问题
  position: relative;
  z-index: 10;

  .list-wrapper {
    white-space: nowrap;
    font-size: 28px;
    color: #999;
    background: #fff;
    box-shadow: inset 0 -1px 0 0 #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .list-item {
      display: inline-block;
      padding: 20px 0;
      margin-left: 38px;

      &:last-child {
        margin-right: 38px;
      }
    }

    .list-item.active {
      font-size: 40px;
      color: #000;
      font-weight: bold;
      border-bottom: 6px solid #000;
    }
  }
}
</style>