<template>
  <div class="order001">
    <div class="header">
      <!-- <img
        class="img"
        src="../../assets/img/order-return.png"
        @click="$router.go(-1)"
      /> -->
      <div class="phone">{{ phone | formatPhone }}</div>
    </div>
    <div class="group" v-for="(group, i) of orderList" :key="i">
      <div class="month">{{ group.time }}</div>
      <div class="order" v-for="(order, j) in group.orders" :key="j">
        <div class="inner">
          <div class="title-box">
            <div class="title">{{ order.SPNAME }}</div>
            <div class="price">{{ `${order.PRICE}元/月` }}</div>
          </div>
          <div class="time">{{ "订购时间：" + order.orderTime }}</div>
          <div class="time" v-if="order.CANCELTIME">
            {{ "退订时间：" + order.endTime }}
          </div>
        </div>
      </div>
    </div>
    <div class="hint">显示您的订购记录</div>
  </div>
</template>
<script>
import { orderList, postBuy } from "../../api";
export default {
  data() {
    return {
      orderList: [],
      item: {},
    };
  },
  filters: {
    formatPhone: (phone) => {
      phone = phone.toString();
      return phone.substr(0, 3) + "****" + phone.substr(7, 11);
    },
  },
  computed: {
    user() {
      return localStorage.getItem("userid");
    },
    phone() {
      return localStorage.getItem("phone");
    },
  },
  activated() {
    document.title = "订购记录";
    if (this.user) {
      this.getData();
    } else {
      this.$toast({
        type: "fail",
        message: "非法进入",
        forbidClick: true,
        duration: 4000,
      });
      setTimeout(() => {
        window.opener = null;
        window.open("about:blank", "_top").close();
      }, 4001);
    }
  },
  created() {
    document.title = "订购记录";
    this.item.cpid = this.$route.query.cpid;
    this.item.spid = this.$route.query.spid;
  },
  methods: {
    getData() {
      let { cpid, spid } = this.item;
      orderList({ userid: this.user, cpid, spid })
        .then((res) => {
          if (res.code == 10000) {
            let list = res.data
              .reduce((r, i) => {
                let { ORDERTIME, CANCELTIME } = i;
                let orderTime = this.timeFomt(ORDERTIME);
                i.orderTime = orderTime;
                if (CANCELTIME) {
                  let endTime = this.timeFomt(CANCELTIME);
                  i.endTime = endTime;
                }
                orderTime = orderTime.split("-");
                let time = orderTime[0] + "年" + parseInt(orderTime[1]) + "月";
                let group = r.find((j) => j.time == time);
                if (!group) {
                  group = { time, orders: [] };
                  r.push(group);
                }
                group.orders.push(i);
                return r;
              }, [])
              .sort((a, b) => (a.time >= b.time ? 1 : -1));
            this.orderList = list;
          }
        })
        .catch((res) => {
          console.warn(res);
        });
    },
    timeFomt(ORDERTIME) {
      let orderTime = "";
      for (let i = 0; i < ORDERTIME.length; i++) {
        if (i === 3 || i === 5) {
          orderTime = orderTime + ORDERTIME[i] + "-";
        } else if (i === 7) {
          orderTime = orderTime + ORDERTIME[i] + " ";
        } else if (i === 9 || i === 11) {
          orderTime = orderTime + ORDERTIME[i] + ":";
        } else {
          orderTime = orderTime + ORDERTIME[i];
        }
      }
      return orderTime;
    },
  },
  beforeRouteLeave(to, from, next) {
    // 销毁组件，避免通过vue-router再次进入时，仍是上次的history缓存的状态
    this.$destroy(true);
    next();
  },
};
</script>
<style lang="scss">
.order001 {
  min-height: 100vh;
  background-color: #f8f9fc;
  .header {
    box-sizing: border-box;
    padding: 0 60px;
    height: 85px;
    line-height: 85px;
    font-size: 32px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .img {
      width: 48px;
      height: 38px;
    }
  }
  .group {
    .month {
      padding: 0 60px;
      line-height: 92px;
      font-size: 32px;
      font-weight: 500;
      color: #999999;
    }
    .order {
      padding: 38px 0 0 60px;
      background-color: #fff;
      .inner {
        height: 167px;
        border-bottom: 0.5px solid #cacaca;
        padding-right: 60px;
      }
      &:last-of-type .inner {
        border-bottom: none;
      }
      .title-box {
        font-size: 36px;
        font-weight: bold;
        color: #000000;
        line-height: 36px;
        display: flex;
        justify-content: space-between;
        .title {
          max-width: 450px;
        }
      }
      .time {
        margin-top: 14px;
        font-size: 24px;
        font-weight: 400;
        color: #0e0e0e;
      }
    }
  }
  .hint {
    line-height: 94px;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    color: #999999;
  }
}
</style>
