<template>
  <div class="bill-card">
    <div class="content">
      <div class="left-content">
        <div v-if="status === PAY_COMPLETE" class="pay-off-box">
          <h3 class="pay-off">本月账单已还清</h3>
          <p class="zan">好棒，点个赞</p>
        </div>
        <div v-else class="arrears-box">
          <p class="arrears-title">剩余待还(元)</p>
          <p class="arrears-text">
            <span class="money">{{ orderAmount }}</span>
            <span v-if="status === PAY_BACK" class="text">还款中…</span>
          </p>
          <p v-if="status === OVERDUE" class="overdue">
            已逾期
          </p>
          <p v-if="status !== OVERDUE && lastDay" class="last-day">
            最后还款日{{ lastDay }}，请在还款日前还款
          </p>
          <p class="to-details" @click="handleToDetails">
            查看详情>
          </p>
        </div>
      </div>
      <div v-if="status === PAY_COMPLETE || status === OVERDUE" class="right-content">
        <div v-if="status === PAY_COMPLETE" class="zan-img">
          <img :src="payBackZan" alt="" />
        </div>
        <div v-if="status === OVERDUE" class="overdue-img">
          <img v-if="isCalendar" :src="groupImg" alt="" />
          <img v-else :src="payBackYuQi" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import payBackZan from '@/assets/images/bill/payback_zan.png';
import payBackYuQi from '@/assets/images/bill/payback_yuqi.png';
import groupImg from '@/assets/images/bill/group.png';
import { SHOULD_ALSO, PAY_BACK, OVERDUE, PAY_COMPLETE } from '@/constants/bill';
export default {
  components: {},
  props: {
    // 已还清0/应还1/还款中2/逾期3
    status: {
      type: Number,
      default: 0
    },
    isCalendar: {
      type: Boolean,
      default: false
    },
    orderAmount: {
      type: String,
      default: ''
    },
    lastDay: {
      type: String,
      default: ''
    },
    repayAmountDetail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      billActive: SHOULD_ALSO,
      payBackZan,
      payBackYuQi,
      groupImg,
      PAY_BACK,
      OVERDUE,
      PAY_COMPLETE
    };
  },
  mounted() {},
  methods: {
    handleToDetails() {
      this.$router.push({
        name: 'payBackDetails',
        params: {
          ...this.repayAmountDetail,
          amount: this.orderAmount
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.bill-card {
  padding: 0 12px;
  z-index: 2;
  position: relative;
}
.content {
  display: flex;
  height: 160px;
  background: @white;
  padding: 0 28px 0 24px;
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  box-shadow: 1px 8px 12px #c5c2c2;
  .arrears-box {
    margin-top: 18px;
    color: @black;
    .arrears-title {
      .text-size(12);
    }
    .arrears-text {
      font-size: 30px;
      margin: 3px 0 12px 0;
    }

    .money {
      font-weight: bold;
    }
    .overdue {
      color: #f41c1c;
      .text-size(20);
      margin-bottom: 17px;
    }
    .last-day {
      .text-size(12);
      margin-bottom: 10px;
      color: @gray-4;
    }
    .to-details {
      .text-size(12);
      color: @black;
    }
  }
  .pay-off-box {
    margin-left: 4px;
    margin-top: 48px;
    margin-left: 4px;
  }
  .pay-off {
    .text-size(26);
    color: @black;
    margin-bottom: 2px;
  }
  .zan {
    color: @black;
    .text-size(14);
  }
  .right-content {
    width: 100px;
    height: 100px;
    div {
      box-sizing: border-box;
      display: flex;
    }
  }
  .zan-img {
    margin-top: 30px;
    padding: 0 10px;
  }
  .overdue-img {
    margin-top: 30px;
    display: flex;
    padding: 0 20px;
  }
  .right-content {
    img {
      justify-content: center;
      align-items: center;
      width: 100%;
    }
  }
}
</style>
