<!--
 * @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" @click="$routeGo()">
        <img src="@/assets/userBind/arrow.png">
        <span>合同明细</span>
      </div>
    </h-header>
    <div 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">{{ 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 }}</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>
    <scroll
      ref="scroll"
      :updateData="[lists]"
      :pullUp="true"
      @pullingUp="loadMore">
      <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="toRepayPlans(item.contract_id)">
              <img src="@/assets/contractRepayment/plan.png" alt="">
              <span>还款计划</span>
            </div>
          </div>
        </item>
      </list-item>
    </scroll>
  </h-view>
</template>

<script>

export default {
  name: 'RepayDetail',
  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,
        bp_id: JSON.parse(window.localStorage.now_user_bp_bind_id).bp_id,
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.fileArray = res.info
          vm.fileArray.forEach(i => {
            // cordova.InAppBrowser.open(i.fileUrl, '_system', 'location=yes,hideurlbar=no,toolbarposition=top')
            // cordova.InAppBrowser.open(i.fileUrl, '_system', 'location=yes')
            if (vum.Platform.isAndroid()) { // android终端
              window.open(i.fileUrl, '_system', 'location=yes')
            } else if (vum.Platform.isIOS() || vum.Platform.isIPad()) { // ios终端
              // window.location.href = i.fileUrl;
              // 模拟 输入框
              var cInput = document.createElement('input')
              cInput.value = i.fileUrl
              document.body.appendChild(cInput)
              cInput.select() // 选取文本框内容
              // 执行浏览器复制命令
              // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
              // Input要在正常的编辑状态下原生复制方法才会生效
              document.execCommand('copy')
              hlsPopup.showLongCenter('复制成功,请在浏览器中打开')
              // 复制成功后再将构造的标签 移除
              document.body.removeChild(cInput)
            } else {
              window.open(i.fileUrl, '_system', 'location=yes')
            }
          })
          // 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;
      position: absolute;
      z-index: 10;
      width: 100%;

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

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

    }

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

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

          }
        }
      }
    }

    .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>
