<!--
 * @Description: 签约单列表
   * @Author: your name
 * @Date: 2019-09-25 10:30:46/>: your name
   -->

<template>
  <h-view id="distribute-sign" title="经销商签约">
    <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 class="tab-style has-header">
      <div :class="{'done':num === 1,'undone':num !== 1}" @click="num = 1;"><img :src="num === 1?check1:uncheck1"><span>待签约</span></div>
      <div :class="{'done':num === 2,'undone':num !== 2}" @click="num = 2;"><img :src="num === 2?check2:uncheck2"><span>已签约</span></div>
    </div>
    <!-- 搜索 -->
    <div class="search">
      <input v-model="searchInput" type="text" placeholder="请输入合同号/承租人名称">
    </div>
    <scroll
      ref="scroll"
      :updateData="[showLists]"
      :pullUp="true"
      @pullingUp="loadMore"
    >
      <div class="wrap">
        <div v-for="(item,index) in showLists" :key="index" class="contract-lists" >
          <div class="pro-code" @click="goDetails(item)">
            <img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon">
            <p>
              <span>合同号</span>
              <span>{{ item.project_number }}</span>
            </p>
            <img src="@/assets/distributorSign/goDetails.png" alt="" class="arrow">
          </div>
          <div class="box">
            <div><p>承租人</p><p>{{ item.bp_name }}</p></div>
            <div><p>合同名称</p><p>{{ item.project_name }}</p></div>
            <div><p>合同租金</p><p class="money">{{ item.total_price|currency }}</p></div>
            <div><p>产品名称</p><p>{{ item.division_n }}</p></div>
            <div><p>申请时间</p><p>{{ dateConverse(item.confirm_start_date) }}</p></div>
          </div>
        </div>
      </div>
    </scroll>
    <div v-if="showLists.length === 0">
      <div class="display">
        <img src="@/assets/messageCenter/noMsg.png" alt="">
      </div>
    </div>
  </h-view>
</template>

<script>
import Check1 from '@/assets/constractSigning/no-done.png'
import Check2 from '@/assets/constractSigning/yes-done.png'
import unCheck1 from '@/assets/constractSigning/no-undone.png'
import unCheck2 from '@/assets/constractSigning/yes-undone.png'
export default {
  name: 'ContractList',
  data () {
    return {
      num: 1,
      submitPagenum: 1, // 待签约页码
      approvedPagenum: 1, // 已签约页码
      searchInput: '', // 搜索内容
      check1: Check1,
      check2: Check2,
      uncheck1: unCheck1,
      uncheck2: unCheck2,
      lists: [],
      showLists: [],
      submitLists: [], // 待签约列表
      approvedLists: [], // 已签约列表
      approvedFlag: false,
    }
  },
  watch: {
    'num': {
      handler (newVal, oldVal) {
        // this.$refs.scroll.update(false)
        this.$refs.scroll.scrollToTop()
        if (newVal === 2) {
          if (!this.approvedFlag) {
            this.getLists()
          }
          this.$refs.scroll.scrollToTop()
          this.showLists = this.approvedLists
        } else if (newVal === 1) {
          this.showLists = this.submitLists
          this.$refs.scroll.scrollToTop()
        }
      },
      // immediate: true,
    },
    searchInput () {
      let vm = this
      if (vm.timeout) {
        clearTimeout(vm.timeout)
      }
      vm.timeout = setTimeout(() => {
        vm.search()
      }, 1000)
    },
  },
  created () {

  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'MyInfo') {
        vm.num = 1
        vm.submitPagenum = 1
        vm.approvedPagenum = 1
        vm.searchInput = ''
        vm.approvedFlag = false
        vm.submitLists = []
        vm.approvedLists = []
        // vm.$refs.scroll.update(false)
        vm.$refs.scroll.scrollToTop()
        vm.getLists()
      } else if (from.name === 'ContractDetails') {
        if (window.localStorage.backflag === 'true') {
          vm.searchInput = ''
          vm.submitPagenum = 1
          vm.approvedPagenum = 1
          vm.approvedFlag = false
          vm.getLists()
        }
      }
    })
  },
  methods: {
    // 查询签约列表
    getLists () {
      let vm = this
      if (vm.num === 1) {
        let url = $config.basePath + 'prj_confirm_list_query'
        let param = {
          pagesize: 10,
          pagenum: vm.submitPagenum,
          searchInput: vm.searchInput,
          confirm_status: 'SUBMIT',
          user_phone: window.localStorage.user_phone,
        }
        vm.hlsPopup.showLoading('数据加载中')
        vm.hlsHttp.post(url, param).then(function (res) {
          vm.hlsPopup.hideLoading()
          if (res.result === 'S') {
            console.log(res.lists)
            vm.submitLists = res.lists
            vm.showLists = vm.submitLists
            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)
          }
        })
      } else if (vm.num === 2) {
        let url = $config.basePath + 'prj_confirm_list_query'
        let param = {
          pagesize: 10,
          pagenum: vm.approvedPagenum,
          searchInput: vm.searchInput,
          confirm_status: 'APPROVED',
          user_phone: window.localStorage.user_phone,
        }
        vm.hlsPopup.showLoading('数据加载中')
        vm.hlsHttp.post(url, param).then(function (res) {
          vm.hlsPopup.hideLoading()
          if (res.result === 'S') {
            console.log(res.lists)
            vm.approvedLists = res.lists
            vm.approvedFlag = true
            vm.showLists = vm.approvedLists
            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 () {
      // debugger
      let vm = this
      if (vm.num === 1) {
        vm.submitPagenum++
        let url = $config.basePath + 'prj_confirm_list_query'
        let param = {
          user_phone: window.localStorage.user_phone,
          pagesize: 10,
          pagenum: vm.submitPagenum,
          confirm_status: 'SUBMIT',
          searchInput: vm.searchInput,
        }
        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) => {
                vm.submitLists.push(array[index])
              })
              vm.$refs.scroll.update(true)
            } else if (returnData.length === 10) {
              returnData.forEach((data, index, array) => {
                vm.submitLists.push(array[index])
              })
              vm.$refs.scroll.update(false)
            }
            vm.showLists = vm.submitLists
          } else {
            hlsPopup.showLongCenter(res.message)
          }
        })
      } else if (vm.num === 2) {
        vm.approvedPagenum++
        let url = $config.basePath + 'prj_confirm_list_query'
        let param = {
          user_phone: window.localStorage.user_phone,
          pagesize: 10,
          pagenum: vm.approvedPagenum,
          confirm_status: 'APPROVED',
          searchInput: vm.searchInput,
        }
        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) => {
                vm.approvedLists.push(array[index])
              })
              vm.$refs.scroll.update(true)
            } else if (returnData.length === 10) {
              returnData.forEach((data, index, array) => {
                vm.approvedLists.push(array[index])
              })
              vm.$refs.scroll.update(false)
            }
            vm.showLists = vm.approvedLists
          } else {
            hlsPopup.showLongCenter(res.message)
          }
        })
      }
    },
    submitSearch () {
      let vm = this
      vm.submitPagenum = 1
      let url = $config.basePath + 'prj_confirm_list_query'
      let param = {
        user_phone: window.localStorage.user_phone,
        pagesize: 10,
        pagenum: vm.submitPagenum,
        confirm_status: 'SUBMIT',
        searchInput: vm.searchInput,
      }
      vm.hlsPopup.showLoading('请稍后')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        vm.submitLists = res.lists
        if (vm.num === 1) {
          vm.showLists = vm.submitLists
        }
        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)
        }
      })
    },
    approvedearch () {
      let vm = this
      let url = $config.basePath + 'prj_confirm_list_query'
      vm.approvedPagenum = 1
      let param = {
        user_phone: window.localStorage.user_phone,
        pagesize: 10,
        pagenum: vm.approvedPagenum,
        confirm_status: 'APPROVED',
        searchInput: vm.searchInput,
      }
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.approvedLists = res.lists
        if (vm.num === 2) {
          vm.showLists = vm.approvedLists
        }
        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)
        }
      })
    },
    search () {
      this.submitSearch()
      setTimeout(this.approvedearch, 1000)
    },
    goDetails (item) {
      this.$router.push({
        name: 'ContractDetails',
        params: {
          item: item,
          check_id: item.check_id,
        },
      })
    },
    dateConverse (date) {
      return date.replace(/\//g, '-')
    },
  },
}
</script>
<style lang="less">
#distribute-sign {
  .display {
    position: fixed;
    // top: 0;
    img {
      width: 100%;
      height: 100%;
      // margin-top: -70px;
    }
  }
  .tab-style{
    display:flex;
    width: 100%;
    justify-content: center;
    padding-top:12px;
    padding-bottom: 8px;
    align-items: center;
    background-color: #fff;
    box-shadow:0 2px 3px 0  rgba(220,220,221,0.50);
    position: absolute;
    z-index: 999;

    div{
      position: relative;
      height: 32px;
      width: 172px;
      border-radius:16px;
      border-radius: 16px;
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      letter-spacing: 0.43px;
      margin:  0 4px;
      line-height: 32px;
    }
    .undone{
      background: rgba(220,220,221,0.26);
      color: #383F45;
    }
    .done{
      background: rgba(0,70,156,0.10);
      color: #00469C;
    }

    img{
      height: 20px;
      display: block;
      float: left;
      margin: 6px 0 0 43px;
    }

    span{
      position: absolute;
      left:70px;
    }
  }
  .search {
      background-color: #fff;
      padding: 8px 12px;
      position: absolute;
      width: 100%;
      z-index: 100;
      margin-bottom: 8px;
      margin-top: 52px;
      input {
        padding-left: 12px;
        border-radius: 4px;
        height: 36px;
        width: 100%;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #888C8F;
        line-height: 36px;
        background: url("../../assets/contractStart/search1.png") 320px no-repeat;
        background-size: 16px 16px;
        background-color: rgba(239, 239, 239, 0.55);
      }

      input::placeholder {
        font-size: 14px;
        color: #888C8F;
        font-family: PingFangSC-Regular;
        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;
      }
    }
  .wrap {
      width: 100%;
      padding: 8px;
      .contract-lists {
        width: 100%;
        background: #fff;
        margin-bottom: 8px;
        .pro-code {
          height: 44px;
          width: 100%;
          display: flex;
          flex-direction: row;
          align-items: center;

          .file-icon {
            width: 30px;
            height: 30px;
            margin-left: 10px;
          }
          p {
            height: 44px;
            line-height: 44px;
            margin-left: 10px;
            flex: 1;
            font-family: PingFangSC-Semibold;
            font-size: 15px;
            color: #4B4A4B;
            letter-spacing: 0;
            border-bottom: 1px solid #F3F3F7
          }
          .arrow {
            height: 16px;
            width: 16px;
            margin-right: 10px;
            margin-left: -8px;
          }
        }
        .box {
          margin-left: 50px;
          margin-right: 19px;
          div {
            width: 100%;
            padding: 8px 0;
            line-height: 18px;
            display: flex;
            justify-content: space-between;
            position: relative;
            .money {
              font-family: Verdana-Bold;
              font-size: 14px;
              color: #4B4A4B;
              letter-spacing: 0;
              font-weight: 600;
            }
            p {
              font-family: PingFangSC-Regular;
              font-size: 14px;
              letter-spacing: 0;
              word-break: break-all;
              word-wrap: break-word;
              white-space: normal;
            }
            p:nth-of-type(1){
              width: 32%;
              left: 0;
              color: rgba(75,74,75,0.60);
            }
            p:nth-of-type(2){
              right: 0;
              color: #4B4A4B;
            }
          }
        }
      }
  }
  .content{
    position: absolute;
      top:0;
  }
  .scrollContent{
     padding-top: 2.88rem;
      padding-bottom: 20px;
    }
}
.platform-ios {
    #distribute-sign {
      .scrollContent {
        padding-top: 3.28rem;
      }
    }
  }
  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      #distribute-sign {
        .scrollContent {
          padding-top: 3.68rem;
        }
      }
    }
  }
  // iPhoneXR适配
  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
      #distribute-sign {
        .scrollContent {
          padding-top: 3.68rem;
        }
        .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>