<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">
        <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
        <span>合同明细</span>
      </div>
    </h-header>
    <h-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">{{ detailInfo.bp_agent_name }}</div>
        </item>
        <item>
          <div slot="name">承租人</div>
          <div slot="content">{{ detailInfo.bp_name }}</div>
        </item>
        <item>
          <div slot="name">产品名称</div>
          <div slot="content">{{ detailInfo.division_n?detailInfo.division_n:"暂无数据" }}</div>
        </item>
        <item>
          <div slot="name">设备识别号</div>
          <div slot="content" >{{ detailInfo.product_code?detailInfo.product_code:"暂无数据" }}</div>
        </item>
        <item>
          <div slot="name">合同金额</div>
          <div slot="content">{{ detailInfo.total_price|currency }}</div>
        </item>
        <item>
          <div slot="name">商务政策</div>
          <div slot="content">{{ detailInfo.product_plan_id_n }}</div>
        </item>
        <item>
          <div slot="name">租赁物数量</div>
          <div slot="content">{{ detailInfo.product_num }}</div>
        </item>

      </list-item>
      <div class="header">设备清单</div>
      <scroll
        ref="scroll" :updateData="[lists]" :pullUp="true"
        @pullingUp="getEquipment">
        <list-item :item-height="104" class="equipment-list">
          <item v-for="(item,index) in lists" :proportion="[2,1]" :key="index">
            <div slot="name" class="parameters">
              <div class="list">
                <p>设备识别号</p>
                <span class="bold">{{ item.product_code }}-{{ index+1 |lengthCheck }}</span>
              </div>
              <div class="list">
                <p>发动机号</p>
                <span>{{ item.lease_item_engine_num }}</span>
              </div>
              <div class="list">
                <p>车辆型号</p>
                <span>{{ item.vehicle_model }}</span>
              </div>
              <div class="list">
                <p>合格证编号</p>
                <span>{{ item.certificate_number }}</span>
              </div>
            </div>
            <div slot="content">
              <span v-if="item.overdue_times!=0" :class="['status','red']">逾期{{ item.overdue_times }}期</span>
              <div class="plan" @click="toRepayPlan(item.contract_id)">
                <img src="@/assets/contractRepayment/plan.png" alt="">
                <span>还款计划</span>
              </div>
            </div>
          </item>
        </list-item>
    </scroll></h-content>
  </h-view>
</template>

<script>
export default {
  name: 'RepayDetails',
  components: {
  },
  filters: {
    lengthCheck: function (value) {
      if ((value.toString()).length === 1) {
        return `0${value}`
      } else {
        return value
      }
    },
  },
  data () {
    return {
      pagenum: 1,
      detailInfo: {
        project_number: '',
        agent_bp_name: '',
        bp_name: '',
        division_n: '',
        total_price: '',
        product_plan_id_n: '',
        product_num: '',
        product_code: '',
      },
      lists: [],
    }
  },
  computed: {},
  watch: {},
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'ContractRepayment') {
        vm.pagenum = 1
        vm.lists = []
        vm.getDetail()
        vm.getEquipment()
      }
    })
  },
  methods: {
    getEquipment () {
      let vm = this
      let url = process.env.basePath + 'con_equip_list'
      let param = {
        project_id: this.$route.params.project_id,
        pagesize: 10,
        pagenum: vm.pagenum,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          let returnData = []
          returnData = res.lists
          if (returnData.length === 0) {
            vm.$refs.scroll.update(true)
          } else if (returnData.length > 0 && returnData.length < 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.lists.push(array[index])
            })
            vm.pagenum++
            vm.$refs.scroll.update(true)
          } else if (returnData.length === 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.lists.push(array[index])
            })
            vm.pagenum++
            vm.$refs.scroll.update(false)
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    getDetail () {
      let vm = this
      let url = process.env.basePath + 'con_repayment_detial'
      let param = {
        project_id: this.$route.params.project_id,
      }
      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)
        }
      })
    },
    toRepayPlan (e) {
      this.$router.push({
        name: 'RepayPlan',
        params: {
          contract_id: e,
        },
      })
    },
  },
}
</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;
    .header {
      // position: relative;
      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.60);
          }
        }
      }
    }

    .equipment-list {
      border-top: none;
      background-color: transparent;

      .hls-item {
        border-top: 1px solid #D9DBDF;
        border-bottom: 1px solid #D9DBDF;
        background-color: #fff;
        margin-bottom: 10px;

        .contents {
          padding-top: 8px;
          .add-name{
            display: flex;
            flex-direction: column;

            .parameters {
              width: 100%;
              margin-left: -40px;

              .list {
                display: flex;
                margin-bottom:0;

                p {
                  font-family: PingFangSC-Regular;
                  font-size: 13px;
                  color: rgba(56,63,69,0.60);
                  letter-spacing: 0.4px;
                  text-align: right;
                  flex: 1;
                }

                span {
                  flex:1;
                  margin-left: 15px;
                  font-family: PingFangSC-Regular;
                  font-size: 13px;
                  color: #383F45;
                  letter-spacing: 0.4px;
                }

                span.bold {
                  font-family: PingFangSC-Semibold;
                  font-weight: 700;
                }
              }
            }
          }

          .add-content {
            .plan {
              position: relative;
              width: 100px;
              height: 30px;
              background: rgba(29, 63, 255,.2);
              border-radius: 4px;

              img {
                height: 14px;
                position: absolute;
                top: 8px;
                left: 12px;
              }

              span {
                font-family: PingFangSC-Regular;
                font-size: 13px;
                color: @headerColor;
                letter-spacing: 0.4px;
                position: absolute;
                top: 5px;
                left: 32px;
              }
            }
          }

        }
      }
    }
  }
  .scrollContent {
    padding-bottom: 20px;
  }
  .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;
      }
    }
  }
}
</style>
