<template>
  <h-view id="contract-records" 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 v-if="data === null" class="null">
      <div class="display">
        <img src="@/assets/messageCenter/noMsg.png" alt="">
      </div>
    </div>
    <div v-if="data !== null" class="wrap has-header">
      <div class="search">
        <input v-model="searchInput" type="text" placeholder="请输入合同编号">
      </div>

    </div>
    <!-- 全部合同记录 -->
    <scroll v-show="data !== null" ref="scroll" :updateData="[showLists]" :pullUp="true"
      @pullingUp="loadMore('全部', pagenum, lists)">
      <div class="pay-content">
        <div v-for="(item, index) in showLists" :key="index" class="contract-item">
          <div class="header" @click="toRepayDetail(item)">
            <img src="@/assets/contractRepayment/contract.png" alt="">
            <h2>{{ item.project_number }}</h2>
            <p><img src="@/assets/constractSigning/righticon.png" alt="arrow" style="height: 20px; width: 20px;"></p>
            <!-- 看情况去留 -->
            <!-- <p v-if="item.contract_status_n === '待首付'" class="green">待首付</p>
            <p v-if="item.contract_status_n === '首付还款中'" class="orange">首付还款中</p>
            <p v-if="item.contract_status_n === '还款中'" class="blue">还款中</p>
            <p v-if="item.contract_status_n === '已结清'" class="black">已结清</p>
            <p v-if="item.contract_status_n === '撤销'" class="undo">{{ item.xcmg_contract_status_n }}</p>
            <p v-if="item.contract_status_n === '其他'" class="other">{{ item.xcmg_contract_status_n }}</p> -->
          </div>
          <div class="center">
            <div><span>合同履约情况</span>
              <p>{{ item.con_overdue_status }}</p>
            </div>
            <div><span>逾期租金（元）</span>
              <p>{{ parseFloat(item.finance_amount).toFixed(2) | currency }}</p>
            </div>
            <div><span>逾期利息（元）</span>
              <p>{{ parseFloat(item.finance_amount).toFixed(2) | currency }}</p>
            </div>
            <div><span>逾期天数</span>
              <p class="bold">{{ parseFloat(item.finance_amount).toFixed(2) | currency }}</p>
            </div>

            <!-- 看情况去留 -->
            <!-- <span v-if="item.con_overdue_status === '已逾期'" class="red">{{ item.con_overdue_status }}</span>
            <section @click="toRepayDetail(item.project_id)">
              <img src="@/assets/contractRepayment/view.png" alt="">
              <span>查看合同明细</span>
            </section> -->
          </div>
        </div>
      </div>
    </scroll>
  </h-view>
</template>

<script>

export default {
  name: 'overTimeQueryList',
  data() {
    return {
      data: 1,
      lists: [], // 全部记录
      showLists: [],
      pagenum: 1, // 全部列表页码
      searchInput: '', // 搜索内容
      bp_type: 'MANAGER', // 用户类型， 从缓存 now_user_bp_bind_id 中获取
    }
  },
  watch: {
    searchInput() {
      let vm = this
      if (vm.timeout) {
        clearTimeout(vm.timeout)
      }
      vm.timeout = setTimeout(() => {
        vm.searchs()
      }, 1000)
    },
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.pagenum = 1
      vm.searchInput = ''
      vm.lists = []
      vm.recordQuery(vm.lists)
    })
  },
  methods: {
    // 获取列表
    recordQuery(arr) {
      let vm = this
      let url = $config.basePath + 'con_contract_list_saleman'
      let param = {
        bp_id: JSON.parse(window.localStorage.now_user_bp_bind_id).bp_id,
        searchInput: vm.searchInput,
        pagenum: 1,
        pagesize: 10,
        contract_status_n: '全部',
      }

      vm.hlsPopup.showLoading('数据加载中')

      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()

        if (res.result === 'S') {
          vm.data = !!res.lists.length ? 1 : null;
          res.lists.forEach((data, index, array) => {
            arr.push(array[index])
          })
          vm.showLists = arr // 展示请求到的数据

          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
      vm.pagenum++
      vm.pageNum = vm.pagenum

      let url = $config.basePath + 'con_contract_list_saleman'

      let param = {
        bp_id: JSON.parse(window.localStorage.now_user_bp_bind_id).bp_id,
        searchInput: vm.searchInput,
        pagenum: vm.pageNum,
        pagesize: 10,
        contract_status_n: '全部',
      }

      vm.hlsPopup.showLoading('请稍候')

      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        let returnData = []

        if (res.result === 'S') {
          returnData = res.lists

          if (returnData.length === 0) {
            vm.$refs.scroll.update(true)
          } else if (returnData.length > 0 && returnData.length < 10) {

            returnData.forEach((data, index, array) => {
              // 加载更多时，将请求到的数据push到对应数组
              vm.lists.push(array[index])
            })
            vm.$refs.scroll.update(true)

          } else if (returnData.length === 10) {

            returnData.forEach((data, index, array) => {
              vm.lists.push(array[index])
            })

            vm.$refs.scroll.update(true)
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    // 搜索
    async searchs() {
      let vm = this

      let url = $config.basePath + 'con_contract_list_saleman'

      let param = {
        contract_status_n: '全部',
        bp_id: JSON.parse(window.localStorage.now_user_bp_bind_id).bp_id,
        searchInput: vm.searchInput,
        pagenum: 1,
        pagesize: 10,
      }

      vm.hlsPopup.showLoading('请稍候')

      let res = await vm.$post(url, param)

      if (res.result === 'S') {
        vm.hlsPopup.hideLoading()
        vm.lists = res.lists

        // 展示数据更新通过watch监听，默认展示当前页面请求到的数据
        vm.showLists = vm.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)
        }

        return true
      } else {
        hlsPopup.showLongCenter(res.message)
        return false
      }
    },
    // 明细
    toRepayDetail (val) {
      this.$router.push({
        name: 'overTimeQueryDetail',
        params: {
          project_id: val.project_id,
        },
      })
    },
  },
}
</script>
<style lang='less' >
#contract-records {
  .null {
    height: 100%;
  }

  .search {
    background-color: #fff;
    padding: 8px 12px;
    position: relative;

    input {
      background: url("../../assets/contractStart/search1.png") 320px no-repeat;
      background-size: 16px 16px;
      background-color: rgba(239, 239, 239, 0.55);
      padding-left: 12px;
      border-radius: 4px;
      height: 36px;
      line-height: 36px;
      width: 100%;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #888C8F;
    }

    input::placeholder {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #888C8F;
      letter-spacing: 0;
    }

    input:focus {
      background: url("../../assets/contractStart/search2.png") 320px no-repeat;
      background-size: 16px 16px;
      background-color: rgba(239, 239, 239, 0.55);
      border: 2px solid #bcc6ff;
    }
  }

  .pay-content {
    padding: 8px 8px;

    .contract-item {
      height: 178px;
      background-color: #fff;
      margin-bottom: 8px;

      .header {
        position: relative;
        height: 44px;

        img {
          position: absolute;
          width: 30px;
          height: 30px;
          left: 10px;
          top: 8px;
        }

        h2 {
          position: absolute;
          top: 13px;
          left: 50px;
          font-family: PingFangSC-Semibold;
          font-size: 15px;
          color: #4B4A4B;
          letter-spacing: 0;
          margin: 0px;
          font-weight: 700;
        }

        p {
          position: absolute;
          right: 30px;
          top: 6px;
          // width: 57px;
          padding: 2px 4px;
          // height: 21px;
          // line-height: 19px;
          text-align: center;
          border-radius: 2px;
          font-family: PingFangSC-Regular;
          font-size: 14px;
        }

        p.orange {
          // width: 30%;
          border: 1px solid #FDB62F;
          color: #FDB62F;
          white-space: nowrap;
        }

        p.blue {
          color: #1D3FFF;
          border: 1px solid #1D3FFF;
        }

        p.green {
          color: #1BA261;
          border: 1px solid #1BA261;
        }

        p.black {
          color: #4B4A4B;
          border: 1px solid #4B4A4B;
        }

        p.undo {
          color: #333399;
          border: 1px solid #333399;
        }

        p.other {
          color: #33CCCC;
          border: 1px solid #33CCCC;
        }
      }

      .center {
        padding-left: 50px;
        padding-right: 24px;
        position: relative;

        div {
          display: flex;
          padding: 8px 0;

          span {
            flex: 3;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #4B4A4B;
          }

          p {
            flex: 4;
            text-align: right;
            font-family: Verdana;
            font-size: 14px;
            color: #4B4A4B;
          }

          p.bold {
            font-weight: 700;
            font-family: Verdana-Bold;
          }
        }

        div:first-child {
          border-top: 1px solid #F3F3F7;
        }

        span.red {
          margin-top: 10px;
          position: absolute;
          //top: 10px;
          color: #F04747;
          font-family: PingFangSC-Regular;
          font-size: 14px;
        }

        span.red::before {
          position: absolute;
          bottom: -3px;
          content: "";
          width: 100%;
          height: 4px;
          background-color: rgb(255, 169, 169);
        }

        section {
          position: absolute;
          width: 123px;
          height: 30px;
          right: 24px;
          //bottom: 13px;
          line-height: 30px;
          background: rgba(33, 37, 76, .1);
          border-radius: 4px;

          img {
            width: 16px;
            position: absolute;
            top: 8px;
            left: 8px;
          }

          span {
            position: absolute;
            left: 32px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #21254C;
          }
        }
      }
    }
  }

  .display {
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      height: 100%;
      // margin-top: -70px;
    }
  }

  .wrap {
    width: 100%;
    position: absolute;
    z-index: 100
  }

  .content {
    position: absolute;
    top: 0;
  }

  .scrollContent {
    padding-top: 2.60rem;
    padding-bottom: 20px;
  }
}

.platform-ios {
  #contract-records {
    .scrollContent {
      padding-top: 3rem;
    }
  }
}

// iPhoneX适配
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  .platform-ios {
    #contract-records {
      .scrollContent {
        padding-top: 3.4rem;
      }
    }
  }
}

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

      .search {
        input {
          background: url("../../assets/contractStart/search1.png") 320px no-repeat;
          background-size: 16px 16px;
          background-color: rgba(239, 239, 239, 0.55);
          padding: 8px 12px;
          border-radius: 4px;
          width: 100%;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #888c8f;
        }
      }
    }
  }
}
</style>
