<template>
  <div class="bill-item">
    <div class="item" @click="handleToDetails">
      <div class="left">
        <div v-if="itemData.stages" class="step">
          <circle-step v-bind="false && disabled" :percent="percent" />
        </div>
        <div :class="[itemData.overdue && 'overdue-reverse']">
          <p class="title">{{ itemData.title }}</p>
          <p class="text ellipsis">
            {{ itemData.text }}
          </p>
        </div>
      </div>
      <div class="right">
        <p class="title">{{ itemData.rightTitle }}</p>
        <p :class="['text', itemData.overdue && 'overdue-text']">
          {{ itemData.rightText }}<span v-if="!isDetails" class="arrow">></span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import circleStep from './circleStep';
import { getMonthAdd0 } from '@/service/utils.service';
import localStorage from '@/service/localStorage.service';
export default {
  components: {
    circleStep
  },
  props: {
    itemData: {
      type: Object,
      default: () => {}
    },
    isStages: {
      type: Boolean,
      default: false
    },
    isOverdue: {
      type: Boolean,
      default: false
    },
    userId: {
      type: String,
      default: ''
    },
    isDetails: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      billActive: 0,
      disabled: {
        bgColor: '#fff',
        barColor: '#d8d8d8'
      }
    };
  },
  computed: {
    percent() {
      return (this.itemData.currTerm / this.itemData.term) * 100;
    }
  },

  mounted() {},
  methods: {
    handleToDetails() {
      if (this.isOverdue && !this.isDetails) {
        const { year, month, billNo } = this.itemData || {};
        const date = year + getMonthAdd0(month) + '01';
        this.$router.push({
          name: 'billDetails',
          query: {
            yearMonth: date,
            billNo,
            userId: this.userId
          }
        });
        return;
      }
      let url = this.itemData.orderUrl;
      if (this.isStages) {
        url = this.itemData.installmentUrl;
      }
      window.location.href = this.formatUrl(url);
    },
    formatUrl(url) {
      return url?.replace(/\{token\}/g, localStorage.get('vccToken'));
    }
  }
};
</script>
<style lang="less" scoped>
.bill-item {
  padding: 0 20px;
  box-sizing: border-box;
}
.item {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding-top: 16px;
  box-sizing: border-box;
  border-bottom: 1px solid #d8d8d8;
  height: 72px;
}
.left {
  display: flex;
  .step {
    margin-right: 5px;
  }
  .title {
    color: @gray-5;
    .text-size(12);
  }
  .text {
    margin-top: 11px;
    color: @font-color-dark;
    .text-size(14);
    max-width: 190px;
  }

  .overdue-reverse {
    display: flex;
    flex-direction: column-reverse;
    .title {
      margin-top: 11px;
      margin-bottom: 7px;
    }
    .text {
      margin-top: 0;
      .text-size(16);
    }
  }
}
.right {
  .title {
    color: @gray-4;
    .text-size(12);
    height: 18px;
  }
  .text {
    margin-top: 11px;
    color: @font-color-dark;
    text-align: right;
    .text-size(14);
    .arrow {
      color: @gray-4;
      margin-left: 8px;
    }
  }
}
.overdue-text {
  font-size: 12px !important;
  color: #f41c1c !important;
}
</style>
