<!--
 * @Author: your name
 * @Date: 2019-10-31 09:49:57
 * @LastEditTime: 2019-12-05 14:53:37
 * @LastEditors: Please set LastEditors
 * @Description: 合同查询--记录
 * @FilePath:
 -->
<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">
        <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
        <span>合同记录</span>
      </div>
    </h-header>
    <div v-if="data===null" class="null">
      <div class="display">
        <img src="@/assets/contractRepayment/null.png" alt="">
        <p>暂时没有还款记录</p>
        <div @click="$routeGo()">返回</div>
      </div>
    </div>
    <div v-if="data!==null" class="wrap has-header">
      <div class="tab">
        <p><span :class="{'selected':selected === 'all'}" @click="isSelected('all')">全部</span></p>
        <p><span :class="{'selected':selected === 'one'}" @click="isSelected('one')">待首付</span></p>
        <p><span :class="{'selected':selected === 'two'}" @click="isSelected('two')">首付还款中</span></p>
        <p><span :class="{'selected':selected === 'three'}" @click="isSelected('three')">还款中</span></p>
        <p><span :class="{'selected':selected === 'four'}" @click="isSelected('four')">已结清</span></p>
      </div>

      <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">
            <img src="@/assets/contractRepayment/contract.png" alt="">
            <h2>{{ item.project_number }}</h2>
            <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>
          </div>
          <div class="center">
            <div><span>承租人</span><p>{{ item.bp_name }}</p></div>
            <div><span>年利率</span><p>{{ item.int_rate_n }}</p></div>
            <div><span>期限</span><p>{{ item.lease_times }}期</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: 'ContractRecords',
  components: {
  },
  data () {
    return {
      // data: null, // 无记录时
      data: 1,
      lists: [], // 全部记录
      showLists: [],
      selected: 'all',
      unSignedLists: [], // 待首付
      unRepayLists: [], // 首付还款中
      repayingLists: [], // 还款中
      repayedLists: [], // 已结清
      pagenum: 1, // 全部列表页码
      unSigned_pagenum: 1, // 待首付页码
      unRepay_pagenum: 1, // 首付还款中页码
      repaying_pagenum: 1, // 还款中页码
      repayed_pagenum: 1, // 已结清页码
      searchInput: '', // 搜索内容
      contract_status_n: '全部', // 全部/待首付/首付还款中/还款中/已结清
      unSigned_flag: false, // 控制tab切换时再次请求
      unRepay_flag: false,
      repaying_flag: false,
      repayed_flag: false,
    }
  },
  computed: {},
  watch: {
    selected () {
      this.$refs.scroll.update(false)
      this.$refs.scroll.scrollToTop()
      if (this.selected === 'all') {
        this.contract_status_n = '全部'
        // this.pageNum = this.pagenum
        this.showLists = this.lists
      } else if (this.selected === 'one') {
        this.contract_status_n = '待首付'
        // this.pageNum = this.unSigned_pagenum
        this.showLists = this.unSignedLists
        if (!this.unSigned_flag) {
          this.recordQuery('待首付', this.unSignedLists)
        }
      } else if (this.selected === 'two') {
        this.contract_status_n = '首付还款中'
        // this.pageNum = this.unRepay_pagenum
        this.showLists = this.unRepayLists
        if (!this.unRepay_flag) {
          this.recordQuery('首付还款中', this.unRepayLists)
        }
      } else if (this.selected === 'three') {
        this.contract_status_n = '还款中'
        // this.pageNum = this.repaying_pagenum
        this.showLists = this.repayingLists
        if (!this.repaying_flag) {
          this.recordQuery('还款中', this.repayingLists)
        }
      } else if (this.selected === 'four') {
        this.contract_status_n = '已结清'
        // this.pageNum = this.repayed_pagenum
        this.showLists = this.repayedLists
        if (!this.repayed_flag) {
          this.recordQuery('已结清', this.repayedLists)
        }
      }
    },
    searchInput () {
      let vm = this
      if (vm.timeout) {
        clearTimeout(vm.timeout)
      }
      vm.timeout = setTimeout(() => {
        vm.searchs()
      }, 1000)
    },
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'HomePage') {
        vm.selected = 'all'
        vm.pagenum = 1
        vm.unSigned_pagenum = 1
        vm.unRepay_pagenum = 1
        vm.repaying_pagenum = 1
        vm.repayed_pagenum = 1
        vm.searchInput = ''
        vm.contract_status_n = '全部'
        vm.lists = []
        vm.unSignedLists = []
        vm.unRepayLists = []
        vm.repayingLists = []
        vm.repayedLists = []
        vm.unSigned_flag = false
        vm.unRepay_flag = false
        vm.repaying_flag = false
        vm.repayed_flag = false
        vm.recordQuery('全部', vm.lists)
      }
    })
  },
  methods: {
    // 合同明细 val: project_id
    toRepayDetail (val) {
      this.$router.push({
        name: 'RepayDetail',
        params: {
          project_id: val,
        },
      })
    },
    // tab切换
    isSelected (name) {
      this.selected = name
    },
    // 合同记录
    recordQuery (status, arr) {
      let vm = this
      let url = $config.basePath + 'con_contract_list'
      let param = {
        user_phone: window.localStorage.user_phone,
        searchInput: vm.searchInput,
        pagenum: 1,
        pagesize: 10,
        contract_status_n: status,
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          // 判断有无数据
          if (status === '全部' && res.lists.length === 0) {
            vm.data = null
          } else {
            vm.data = 1
          }
          res.lists.forEach((data, index, array) => {
            arr.push(array[index])
          })
          vm.showLists = arr // 展示请求到的数据
          if (res.lists.length >= 0 && res.lists.length < 10) {
            if (status === '全部') {
              vm.$refs.scroll.update(true)
            } else if (status === '待首付') {
              vm.unSigned_flag = true
              vm.$refs.scroll.update(true)
            } else if (status === '首付还款中') {
              vm.unRepay_flag = true
              vm.$refs.scroll.update(true)
            } else if (status === '还款中') {
              vm.repaying_flag = true
              vm.$refs.scroll.update(true)
            } else if (status === '已结清') {
              vm.repayed_flag = true
              vm.$refs.scroll.update(true)
            }
          } else if (res.lists.length === 10) {
            if (status === '全部') {
              vm.$refs.scroll.update(false)
            } else if (status === '待首付') {
              vm.unSigned_flag = true
              vm.$refs.scroll.update(false)
            } else if (status === '首付还款中') {
              vm.unRepay_flag = true
              vm.$refs.scroll.update(false)
            } else if (status === '还款中') {
              vm.repaying_flag = true
              vm.$refs.scroll.update(false)
            } else if (status === '已结清') {
              vm.repayed_flag = true
              vm.$refs.scroll.update(false)
            }
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },

    loadMore () {
      let vm = this
      if (vm.selected === 'all') {
        vm.pagenum++
        vm.pageNum = vm.pagenum
      } else if (vm.selected === 'one') {
        vm.unSigned_pagenum++
        vm.pageNum = vm.unSigned_pagenum
      } else if (vm.selected === 'two') {
        vm.unRepay_pagenum++
        vm.pageNum = vm.unRepay_pagenum
      } else if (vm.selected === 'three') {
        vm.repaying_pagenum++
        vm.pageNum = vm.repaying_pagenum
      } else if (vm.selected === 'four') {
        vm.repayed_pagenum++
        vm.pageNum = vm.repayed_pagenum
      }
      let url = $config.basePath + 'con_contract_list'
      let param = {
        user_phone: window.localStorage.user_phone,
        searchInput: vm.searchInput,
        pagenum: vm.pageNum,
        pagesize: 10,
        contract_status_n: vm.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到对应数组
              if (vm.selected === 'all') {
                vm.lists.push(array[index])
              } else if (vm.selected === 'one') {
                vm.unSignedLists.push(array[index])
              } else if (vm.selected === 'two') {
                vm.unRepayLists.push(array[index])
              } else if (vm.selected === 'three') {
                vm.repayingLists.push(array[index])
              } else if (vm.selected === 'four') {
                vm.repayedLists.push(array[index])
              }
            })
            vm.$refs.scroll.update(true)
          } else if (returnData.length === 10) {
            returnData.forEach((data, index, array) => {
              if (vm.selected === 'all') {
                vm.lists.push(array[index])
              } else if (vm.selected === 'one') {
                vm.unSignedLists.push(array[index])
              } else if (vm.selected === 'two') {
                vm.unRepayLists.push(array[index])
              } else if (vm.selected === 'three') {
                vm.repayingLists.push(array[index])
              } else if (vm.selected === 'four') {
                vm.repayedLists.push(array[index])
              }
            })
            vm.$refs.scroll.update(true)
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    // 搜索
    async searchs () {
      let resAll = await this.searchAll()
      if (resAll) {
        let res = await this.searchUnsign() // 待首付结果
        if (res) {
          let resUnrepay = await this.searchUnrepay() // 首付还款中结果
          if (resUnrepay) {
            let resRepaying = await this.searchRepaying() // 还款中结果
            if (resRepaying) {
              this.searchRepayed()
            }
          }
        }
      }
    },
    async searchAll () {
      let vm = this
      let url = $config.basePath + 'con_contract_list'
      let param = {
        contract_status_n: '全部',
        user_phone: window.localStorage.user_phone,
        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监听,默认展示当前页面请求到的数据
        if (vm.selected === 'all') {
          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
      }
    },
    async searchUnsign () {
      let vm = this
      let url = $config.basePath + 'con_contract_list'
      let param = {
        contract_status_n: '待首付',
        user_phone: window.localStorage.user_phone,
        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.unSignedLists = res.lists
        if (vm.selected === 'one') {
          vm.showLists = vm.unSignedLists
        }
        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
      }
    },

    async searchUnrepay () {
      let vm = this
      let url = $config.basePath + 'con_contract_list'
      let param = {
        contract_status_n: '首付还款中',
        user_phone: window.localStorage.user_phone,
        searchInput: vm.searchInput,
        pagenum: 1,
        pagesize: 10,
      }
      let res = await vm.$post(url, param)
      if (res.result === 'S') {
        vm.unRepayLists = res.lists
        if (vm.selected === 'two') {
          vm.showLists = vm.unRepayLists
        }
        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
      }
    },

    async searchRepaying () {
      let vm = this
      let url = $config.basePath + 'con_contract_list'
      let param = {
        contract_status_n: '还款中',
        user_phone: window.localStorage.user_phone,
        searchInput: vm.searchInput,
        pagenum: 1,
        pagesize: 10,
      }
      let res = await vm.$post(url, param)
      if (res.result === 'S') {
        vm.repayingLists = res.lists
        if (vm.selected === 'three') {
          vm.showLists = vm.repayingLists
        }
        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
      }
    },

    searchRepayed () {
      let vm = this
      let url = $config.basePath + 'con_contract_list'
      let param = {
        contract_status_n: '已结清',
        user_phone: window.localStorage.user_phone,
        searchInput: vm.searchInput,
        pagenum: 1,
        pagesize: 10,
      }
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.repayedLists = res.lists
        if (vm.selected === 'four') {
          vm.showLists = vm.repayedLists
        }
        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)
        }
      })
    },
  },
}
</script>
<style lang='less' >
#contract-records {

  .tab {
    display: flex;
    background-color: #fff;
    padding: 6px 8px 4px 6px;

    p {
      text-align: center;
      flex: auto;

      span {
        display: block;
        padding: 6px 0;
        background-color: #fff;
        font-family: PingFangSC-Regular;
        font-size: 15px;
        color: #656464;
      }

      span.selected {
        background: rgba(29,63,255,.2);
        border-radius: 20px;
        color: #1D3FFF;
        font-family: PingFangSC-Semibold;
        font-weight: 700;
      }
    }
  }

  .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;
      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: 208px;
      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: 20px;
          top: 13px;
          width: 57px;
          height: 21px;
          line-height: 19px;
          text-align: center;
          border-radius: 2px;
          font-family: PingFangSC-Regular;
          font-size: 14px;
        }

        p.orange {
          border: 1px solid #FDB62F;
          color: #FDB62F;
        }

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

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

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

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

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

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

          p {
            flex:2;
            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;
          }
        }
      }
    }
  }

  .null {
    position: relative;

    .display {
      width:150px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 100px;
      z-index: 999;
      img {
        width:150px;
      }

      p {
        text-align: center;
        opacity: 0.7;
        font-family: PingFangSC-Semibold;
        font-size: 17px;
        color: #21254C;
        letter-spacing: 0;
        font-weight: 700;
        margin-top: 10px;
      }

      div {
        width: 140px;
        height: 32px;
        background: #1D3FFF;
        border-radius: 4px;
        color: white;
        line-height: 32px;
        text-align: center;
        margin-left: 5px;
        margin-top: 20px;
      }
    }

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