<!--
 * @Author: your name
 * @Date: 2019-10-31 09:49:57
 * @LastEditTime : 2019-12-23 14:11:26
 * @LastEditors  : Please set LastEditors
 * @Description: 合同查询--明细
 * @FilePath:
 -->
<template>
  <h-view id="repay-detail" 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 class="download" @click="downLoad">电子版下载 <img src="@/assets/contractInquire/download.png" alt=""></div>
      </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 }}</div>
        </item>
        <item>
          <div slot="name">设备识别号</div>
          <div slot="content">{{ 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="loadMore">
        <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="toRepayPlans(item.contract_id)">
                <img src="@/assets/contractRepayment/plan.png" alt="">
                <span>还款计划</span>
              </div>
            </div>
          </item>
        </list-item>
      </scroll>
    </h-content>
    <PDFDown ref="pdf"/>
  </h-view>
</template>

<script>
import PDFDown from '@/components/PDFDownload'

export default {
  name: 'RepayDetail',
  components: {
    PDFDown,
  },
  filters: {
    lengthCheck: function (value) {
      if ((value.toString()).length === 1) {
        return `0${value}`
      } else {
        return value
      }
    },
  },
  data () {
    return {
      lists: [],
      pagenum: 1,
      hidden: false,
      detailInfo: {},
      fileArray: [],
    }
  },
  computed: {

  },
  watch: {},
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'ContractRecords') {
        vm.pagenum = 1
        vm.detailQuery()
        vm.equipQuery()
      }
    })
  },
  methods: {
    // val: contract_id
    toRepayPlans (val) {
      this.$router.push({
        name: 'RepayPlans',
        params: {
          contract_id: val,
          lease_num: this.detailInfo.lease_num,
        },
      })
    },
    downLoad () {
      let vm = this
      let url = $config.basePath + 'get_download_app'
      let param = {
        project_id: vm.$route.params.project_id,
        phone: window.localStorage.user_phone,
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.fileArray = res.info
          vm.pdfDownload()
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    pdfDownload () {
      // 下载pdf文件
      let vm = this
      vm.fileArray.forEach(element => {
        if (element.fileUrl) {
          console.log('vm.$refs.pdf' + vm.$refs.pdf)
          // debugger
          vm.$refs.pdf.downloadPDF(element.fileUrl, element.fileName)
        }
      })
    },
    // 合同明细
    detailQuery () {
      let vm = this
      let url = $config.basePath + 'con_contract_detial'
      let param = {
        project_id: vm.$route.params.project_id,
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.detailInfo = res.info
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    // 设备清单
    equipQuery () {
      let vm = this
      let url = $config.basePath + 'con_equip_list'
      let param = {
        pagesize: 10,
        pagenum: vm.pagenum,
        project_id: vm.$route.params.project_id,
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.lists = res.lists
          if (res.lists.length >= 0 && res.lists.length < 10) {
            vm.$refs.scroll.update(true)
          } else if (res.lists.length === 10) {
            vm.$refs.scroll.update(false)
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    loadMore () {
      let vm = this
      let url = $config.basePath + 'con_equip_list'
      vm.pagenum++
      let param = {
        pagesize: 10,
        pagenum: vm.pagenum,
        project_id: vm.$route.params.project_id,
      }
      vm.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.$refs.scroll.update(true)
          } else if (returnData.length === 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.lists.push(array[index])
            })
            vm.$refs.scroll.update(false)
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
  },
}
</script>
<style lang='less' >
#repay-detail {
   .status{
    margin-bottom:20px;
    display: inline-block;
  }
    .red{
      color: red;
      border-bottom: 1px solid red;
    }
  .repay-content {
    overflow: hidden;
    .header {
      position: relative;
      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;
      }
    }

    .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: #1D3FFF;
                letter-spacing: 0.4px;
                position: absolute;
                top: 5px;
                left: 32px;
              }
            }
          }

        }
      }
    }
  }

  .scrollContent {
    padding-bottom: 400px;
  }
  .tab-style {
    width: 100%;
    position: absolute;
  }
}
.platform-ios {
  #repay-detail {
    .scrollContent {
      // padding-top: 3.32rem;
    }
  }
}
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  .platform-ios {
    #repay-detail{
      .scrollContent {
        // padding-top: 3.72rem;
      }
    }
  }
}
// iPhoneXR适配
@media (device-width: 414px) and (device-height: 896px) {
  .platform-ios {
    #repay-detail{
      .scrollContent {
        // padding-top: 3.72rem;
      }
    }
  }
}
</style>