<template>
  <div class="orders">
    <div
      v-for="(value, key) in getOrderNums"
      :key="key"
      @click="goPage(value.page)"
      class="order-cell"
    >
      <p class="order-num">{{ value.num }}</p>
      <p class="order-text">{{ value.name }}</p>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import { ownType } from "../../../../../constants/order-constants";

const { mapGetters, mapActions } = createNamespacedHelpers("home/mine");

export default {
  name: "order",
  props: {},
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["getOrderNums"])
  },
  mounted() {},
  methods: {
    goPage({ name, status }) {
      this.$router.push({
        name,
        params: {
          owner: ownType.SELL,
          status
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.orders {
  display: flex;
  height: 100px;
  justify-content: space-between;
}

.order-cell {
  flex: 1;
  justify-content: center;
  align-items: center;

  &:not(:last-child) {
    position: relative;

    &:after {
      content: "";
      position: absolute;
      width: 1px;
      height: 80px;
      top: 10px;
      right: 0;
      background: linear-gradient(#fff, #f0f0f0, #fff);
    }
  }
}

.order-num {
  font-family: "Alte DIN 1451 Mittelschrift";
  font-size: 32px;
  text-align: center;
}

.order-text {
  padding-top: 10px;
  font-size: 24;
  color: #444;
  text-align: center;
}
</style>