<template>
  <div class="details-container">
    <div class="bg" />
    <bill-card v-bind="cardData" />
    <list-content v-if="isOverdue" overdue>
      <template v-for="(item, idx) in overdueOrderList">
        <list-item :key="idx" :item-data="item" :is-overdue="true" :is-details="true" />
      </template>
    </list-content>
    <list-content v-if="noAmortizeOrderList.length > 0" title="账单分期">
      <template v-for="(item, idx) in noAmortizeOrderList">
        <list-item :key="idx" :item-data="item" :is-stages="true" />
      </template>
    </list-content>
    <list-content
      v-if="amortizeOrderList.length > 0"
      title="本月账单明细"
      :bill-trade-cycle="bill.billTradeCycle"
    >
      <template v-for="(item, idx) in amortizeOrderList">
        <list-item :key="idx" :item-data="item" />
      </template>
    </list-content>
  </div>
</template>
<script>
import billCard from '../bill/components/billCard';
import listContent from '../bill/components/listContent';
import listItem from '../bill/components/listItem';
import { getDetailBill } from '@/api/bill.api';
import dayjs from 'dayjs';
export default {
  components: {
    billCard,
    listItem,
    listContent
  },
  data() {
    return {
      bill: {},
      amortizeOrderList: [],
      overdueOrderList: [],
      noAmortizeOrderList: [],
      cardData: {}
    };
  },
  computed: {
    isOverdue() {
      return this.bill.status === 3;
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      const { yearMonth, billNo, userId } = this.$route.query;
      try {
        const [res] = await getDetailBill({
          yearMonth,
          billNo,
          userId
        });
        const { bill } = res || {};
        this.bill = bill;
        this.amortizeOrderList = this.formatAmortize(bill.amortizeOrderList);
        this.overdueOrderList = this.formatOverdue(bill.overdueOrderList);
        this.noAmortizeOrderList = this.formatNoAmortize(bill.noAmortizeOrderList);
        this.cardData = this.formtCardData(bill);
      } catch (err) {
        console.log(err);
      }
    },
    formatOverdue(data) {
      return (
        data?.map(item => {
          const { amount, billName, billNo } = item;
          return {
            title: amount,
            text: billName,
            rightText: billNo,
            overdue: true,
            ...item
          };
        }) || []
      );
    },
    formatAmortize(data) {
      return (
        data?.map(item => {
          const { orderName, orderAmount, orderTime } = item;
          return {
            title: dayjs(orderTime).format('YYYY-MM-DD HH:mm'),
            text: orderName,
            rightText: orderAmount,
            ...item
          };
        }) || []
      );
    },
    formatNoAmortize(data) {
      return (
        data?.map(item => {
          const { orderName, orderAmount, term, currTerm } = item;
          const title = `第${currTerm}/${term}期`;
          return {
            title,
            text: orderName,
            rightText: orderAmount,
            term,
            currTerm,
            stages: true,
            ...item
          };
        }) || []
      );
    },
    formtCardData(data) {
      const { status, balanceAmount, repayAmountDetail } = data;
      return {
        status: Number(status),
        orderAmount: balanceAmount.toString(),
        repayAmountDetail
      };
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
