<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 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">{{ 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>-->

    <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">{{detailInfo.bp_agent_name?'经销商':'办事处'}}</div>
          <div slot="content">{{ detailInfo.bp_agent_name?detailInfo.bp_agent_name:detailInfo.office_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>
    <scroll ref="scroll" :updateData="[lists]" :pullUp="true" @pullingUp="getEquipment">
      <div class="header">设备清单</div>
      <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" />
              <span>还款计划</span>
            </div>
          </div>
        </item>
      </list-item>
    </scroll>
  </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;
    position: absolute;
    z-index: 10;
    width: 100%;

    .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.6);
          }
        }
      }
    }
  }

  .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.6);
                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, 0.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;

    .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;
      }
    }
  }
}
</style>
