<template>
  <h-view id="repay-details" class="public-style">
    <h-header :proportion="[5, 1, 1]" class="bar-custom">
      <div slot="left" class="h-header-btn" @click="$routeGo()">
        <img src="@/assets/userBind/arrow.png">
        <span>逾期信息明细</span>
      </div>
    </h-header>

    <div ref="content" class="repay-content">
      <div class="header">合同</div>
      <list-item :item-height="44" class="invoice">
        <item>
          <div slot="name">合同编号</div>
          <div slot="content">{{ detailInfo.project_number }}</div>
        </item>
        <item>
          <div slot="name">合同名称</div>
          <div slot="content">{{ "暂无数据" }}</div>
        </item>
        <item>
          <div slot="name">现金流项目</div>
          <div slot="content">{{ "暂无数据" }}</div>
        </item>
        <item>
          <div slot="name">逾期期数</div>
          <div slot="content">{{ detailInfo.total_price | currency }}</div>
        </item>
      </list-item>

      <div class="header">逾期现金流</div>
    </div>


    <scroll ref="scroll" :updateData="[lists]" :pullUp="true" @pullingUp="getEquipment" class="plan-content">
      <div v-for="(item, index) in repayLists" :key="index"
        :class="{ 'plan-list': true, 'or': statu === 'orange', 'bl': statu === 'blue', 'gr': statu === 'green' }">
        <div
          :class="{ 'period': true, 'orange': statu === 'orange', 'blue': statu === 'blue', 'green': statu === 'green' }">
          {{ index + 1 }}期
        </div>

        <img v-if="statu === 'black'" src="@/assets/contractInquire/black.png" alt="" class="left">
        <img v-else-if="statu === 'orange'" src="@/assets/contractInquire/orange.png" alt="" class="left">
        <img v-else-if="statu === 'blue'" src="@/assets/contractInquire/blue.png" alt="" class="left">
        <img v-else-if="statu === 'green'" src="@/assets/contractInquire/green.png" alt="" class="left">

        <div class="time">
          <p>{{ item.due_date.substr(0, 4) }}</p>
          <span>{{ dateConverse(item.due_date).substr(5, 10) }}</span>
        </div>

        <div class="number">
          <div>
            <span>本金</span>
            <span>{{ item.principal | currency }}</span>
          </div>
          <div>
            <span>租金</span>
            <span :class="{ 'orang': statu === 'orange', 'blu': statu === 'blue', 'gree': statu === 'green' }">
              {{ item.rental | currency }}
            </span>
          </div>
        </div>

        <div class="number">
          <div>
            <span>利息</span>
            <span>{{ item.interest | currency }}</span>
          </div>
          <div>
            <span>逾期天数</span>
            <span>33</span>
          </div>

        </div>

        <img v-if="statu === 'black'" src="@/assets/contractInquire/done.png" alt="" class="status">
        <img v-else-if="statu === 'orange'" src="@/assets/contractInquire/prompt.png" alt="" class="status">
      </div>
    </scroll>
  </h-view>
</template>

<script>
export default {
  name: 'overTimeQueryDetail',
  data() {
    return {
      detailInfo: {
        project_number: '',
        agent_bp_name: '',
        total_price: '',
      },
      repayLists: [], // 现金流
      statu: 'orange',
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.getDetail()
      vm.repayPlan()
    })
  },
  methods: {
    getDetail() {
      let vm = this
      let url = process.env.basePath + 'con_repayment_detial'
      let param = { project_id: '268227' }
      hlsPopup.showLoading('请稍候')

      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.detailInfo = res.info
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    // 还款计划
    repayPlan() {
      let vm = this
      let url = $config.basePath + 'con_equip_cashflow_query'
      let param = {
        contract_id: '271234'
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        console.log(res)
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.repayLists = res.lists.sort(vm.arrSort('times')) // 根据还款期排序
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    // 根据还款期排序
    arrSort(property) {
      return function (a, b) {
        var value1 = a[property]
        var value2 = b[property]
        return value1 - value2
      }
    },
    dateConverse(date) {
      return date.replace(/\//g, '-')
    },
  },
}
</script>


<style lang='less' >
#repay-details {
  .status {
    margin-bottom: 20px;
    display: inline-block;
  }

  .red {
    color: red;
    border-bottom: 1px solid red;
  }

  .blue {
    color: blue;
    border-bottom: 1px solid blue;
  }

  .h-header {
    background-color: @headerColor;

    .h-header-btn {
      img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
      }

      span {
        font-family: PingFangSC-Semibold;
        margin-left: 16px;
        font-size: 17px;
        letter-spacing: 0.61px;
        line-height: 24px;
      }
    }
  }

  .repay-content {
    overflow: hidden;
    position: absolute;
    z-index: 10;
    width: 100%;

    .header {
      background-color: #fff;
      height: 40px;
      line-height: 40px;
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #21254c;
      font-weight: 700;
      text-indent: 1em;
      border-bottom: 1px solid #f1f0f5;

      &:before {
        content: "";
        position: absolute;
        top: 12px;
        left: 0;
        width: 4px;
        height: 16px;
        background: @headerColor;
      }
    }

    .invoice {
      margin-bottom: 0px;

      .hls-item {
        .contents {
          .add-name {
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #656464;
          }

          .add-content {
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: rgba(56, 63, 69, 0.6);
          }
        }
      }
    }
  }


  .scrollContent {
    // padding-bottom: 20px;

    .header {
      //position: relative;
      background-color: #fafafa;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #1d3fff;
      text-indent: 1em;
      border-bottom: 1px solid #f1f0f5;

      .download {
        position: absolute;
        padding-left: 12px;
        right: 12px;
        top: 8px;
        background: #ffffff;
        border-radius: 5px;
        height: 24px;
        line-height: 24px;
        // width: 93px;
        font-family: PingFangSC-Regular;
        font-size: 11px;
        color: #1d3fff;
        letter-spacing: 0.34px;

        img {
          position: absolute;
          height: 15px;
          left: 6px;
          top: 6px;
        }
      }

      &:before {
        content: "";
        position: absolute;
        top: 12px;
        left: 0;
        width: 4px;
        height: 16px;
        background: #1d3fff;
      }
    }
  }

  .tab-style {
    width: 100%;
    position: absolute;
  }
}

.platform-ios {
  #repay-details {
    .scrollContent {
      // padding-top: 3.32rem;
    }
  }
}

@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  .platform-ios {
    #repay-details {
      .scrollContent {
        // padding-top: 3.72rem;
      }
    }
  }
}

// iPhoneXR适配
@media (device-width: 414px) and (device-height: 896px) {
  .platform-ios {
    #repay-details {
      .scrollContent {
        // padding-top: 3.72rem;
      }
    }
  }
}

.plan-content {
  background-color: #fff;
  padding: 0px 11px;

  .plan-list {
    position: relative;
    background-color: #fff;
    height: 78px;
    display: flex;
    padding-right: 20px;
    padding-left: 10px;
    padding-top: 20px;
    margin-bottom: 10px;

    .left {
      height: 30px;
      position: absolute;
      left: -8px;
      top: 24px;
    }

    .status {
      position: absolute;
      width: 18px;
      right: -3px;
      top: -5px;
    }

    .period {
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(75, 74, 75, .5);
      border-radius: 4px 0 4px 0;
      // width: 30px;
      padding: 1px 2px;
      height: 20px;
      color: #fff;
      font-family: PingFangSC-Semibold;
      font-size: 12px;
      letter-spacing: 1.09px;
      line-height: 20px;
      text-align: center;
    }

    .orange {
      background: rgba(253, 182, 47, .5);
    }

    .blue {
      background-color: rgba(29, 63, 255, .5);
    }

    .green {
      background-color: rgba(27, 162, 97, .5);
    }

    .time {

      p {
        font-family: DIN-Regular;
        font-size: 12px;
        color: rgba(56, 63, 69, 0.60);
        margin-bottom: 4px;
        margin-top: 8px;
      }

      span {
        font-family: DIN-Bold;
        font-weight: 700;
        font-size: 14px;
        color: #21254C;
      }
    }

    .name {
      // flex: 9;
      font-family: PingFangSC-Regular;
      font-size: 13px;
      color: #4B4A4B;
      //padding-top: 20px;
      margin-left: 22px;

      span:nth-of-type(2) {
        margin-left: 8px;
      }

      span:nth-of-type(1) {
        opacity: 0.6;
      }
    }

    .number {
      // flex: 9;
      display: flex;
      flex-direction: column;
      font-family: PingFangSC-Regular;
      font-size: 13px;
      color: #4B4A4B;
      margin-left: 20px;

      div:nth-of-type(2) {
        margin-top: 12px;
      }

      span:nth-of-type(2) {
        margin-left: 8px;
      }

      span.orang {
        color: rgb(253, 182, 47);
        font-weight: 700;
        font-family: PingFangSC-Semibold;
      }

      span.blu {
        color: #1D3FFF;
        font-weight: 700;
        font-family: PingFangSC-Semibold;
      }

      span.gree {
        color: #1BA261;
      }
    }
  }

  .or {
    background-color: rgba(253, 182, 47, .05);
  }

  .bl,
  .gr {
    background: #FFFFFF;
    box-shadow: 0 1px 5px 0 rgba(219, 219, 219, 0.69);
  }

}
</style>
