<!--
 * @Author: your name
 * @Date: 2019-09-29 10:02:11
 * @LastEditTime : 2019-12-27 10:28:37
 * @LastEditors  : Please set LastEditors
 * @Description: In User Settings Edit
 -->
<template>
  <h-view id="contract-create-list">
    <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="changeBase(item)">
            <img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon">
            <p>
              <span>合同号</span>
              <span>{{ item.project_number }}</span>
            </p>
            <img src="@/assets/constractSigning/righticon.png" alt="" class="arrow">
          </div>
          <div class="box">
            <div><p>承租人</p><p>{{ item.bp_name }}</p></div>
            <div><p>合同租金</p><p class="money">{{ item.total_price|currency }}</p></div>
            <div><p>申请时间</p><p>{{ dateConverse(item.project_start_date) }}</p></div>
          </div>
        </div>
      </div>
    </scroll>
    <bottom-tab>
      <tab-button class="footer" @click.native="changePage">
        <img class="add-img" src="@/assets/contractCreate/create-add.png" alt=""> 创建新合同
      </tab-button>
    </bottom-tab>
  </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 {
  data () {
    return {
      num: 1,
      pagenum: 1,
      submitPagenum: 1,
      approvedPagenum: 1,
      check1: Check1,
      check2: Check2,
      uncheck1: unCheck1,
      uncheck2: unCheck2,
      user_bp_type: '', // 客户类型
      searchInput: '', // 搜索内容
      submitLists: [], // 待签约
      approvedLists: [], // 已签约
      showLists: [],
      approvedFlag: false,
    }
  },
  watch: {
    'num': {
      handler (newVal, oldVal) {
        this.$refs.scroll.scrollToTop()
        // this.$refs.scroll.update(false)
        if (newVal === 2) {
          if (!this.approvedFlag) {
            this.contractList()
          }
          //  this.$refs.scroll.scrollToTop()
          this.showLists = this.approvedLists
        } else if (newVal === 1) {
          this.showLists = this.submitLists
          // this.$refs.scroll.scrollToTop()
        }
      },
    },
    searchInput () {
      let vm = this
      if (vm.timeout) {
        clearTimeout(vm.timeout)
      }
      vm.timeout = setTimeout(() => {
        vm.search()
      }, 1000)
    },
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'MyInfo') {
        vm.searchInput = ''
        vm.pagenum = 1
        vm.num = 1
        vm.submitPagenum = 1
        vm.approvedPagenum = 1
        vm.user_bp_type = vm.$route.params.user_bp_type
        vm.approvedFlag = false
        vm.submitLists = []
        vm.approvedLists = []
        vm.$refs.scroll.update(false)
        vm.$refs.scroll.scrollToTop()
        vm.contractList()
      }
    })
  },
  methods: {
    dateConverse (date) {
      return date.replace(/\//g, '-')
    },
    // 合同列表查询
    contractList () {
      let vm = this
      if (vm.num === 1) {
        let url = $config.basePath + 'prj_submit_list'
        let param = {
          user_phone: window.localStorage.user_phone,
          pagesize: 10,
          pagenum: vm.submitPagenum,
          project_status: 'NEW',
          searchInput: vm.searchInput,
        }
        vm.hlsPopup.showLoading('数据加载中')
        vm.hlsHttp.post(url, param).then(function (res) {
          vm.hlsPopup.hideLoading()
          if (res.result === 'S') {
            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_submit_list'
        let param = {
          pagesize: 10,
          pagenum: vm.approvedPagenum,
          searchInput: vm.searchInput,
          project_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 () {
      let vm = this
      if (vm.num === 1) {
        vm.submitPagenum++
        let url = $config.basePath + 'prj_submit_list'
        let param = {
          user_phone: window.localStorage.user_phone,
          pagesize: 10,
          pagenum: vm.submitPagenum,
          project_status: 'NEW',
          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_submit_list'
        let param = {
          user_phone: window.localStorage.user_phone,
          pagesize: 10,
          pagenum: vm.approvedPagenum,
          project_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)
          }
        })
      }
    },
    async submitSearch () {
      let vm = this
      vm.submitPagenum = 1
      let url = $config.basePath + 'prj_submit_list'
      let param = {
        user_phone: window.localStorage.user_phone,
        pagesize: 10,
        pagenum: vm.submitPagenum,
        project_status: 'NEW',
        searchInput: vm.searchInput,
      }
      vm.hlsPopup.showLoading('请稍后')
      let res = await vm.$post(url, param)
      if (res.result === 'S') {
        vm.hlsPopup.hideLoading()
        vm.submitLists = res.lists
        if (vm.num === 1) {
          vm.showLists = vm.submitLists
        }
        // 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)
        }
        return true
      } else {
        hlsPopup.showLongCenter(res.message)
        return false
      }
    },
    approvedearch () {
      let vm = this
      let url = $config.basePath + 'prj_submit_list'
      vm.approvedPagenum = 1
      let param = {
        user_phone: window.localStorage.user_phone,
        pagesize: 10,
        pagenum: vm.approvedPagenum,
        project_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
        }
        // 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)
        }
      })
    },
    async search () {
      let res = await this.submitSearch()
      if (res) {
        this.approvedearch()
      }
    },
    changePage () {
      window.localStorage.setItem('formPage', 'sale')
      this.$router.push({
        name: 'SalesInfo',
      })
    },
    changeBase (item) {
      window.localStorage.setItem('bp_name_tenant', item.bp_name)
      if (this.num === 1) {
        window.localStorage.setItem('contractReadonly', false)
        window.localStorage.setItem('fromPage', 'list')
        window.localStorage.setItem('project_id', item.project_id)
        window.localStorage.setItem('bp_class_tenant', item.bp_class)
        window.localStorage.setItem('bp_id_tenant', item.bp_id)
      } else if (this.num === 2) {
        window.localStorage.setItem('contractReadonly', true)
        window.localStorage.setItem('fromPage', 'list')
        window.localStorage.setItem('project_id', item.project_id)
        window.localStorage.setItem('bp_class_tenant', item.bp_class)
        window.localStorage.setItem('bp_id_tenant', item.bp_id)
      }
      this.$router.push({
        name: 'CreateBaseInfo',
        params: {
          bp_id: item.bp_id,
        },
      })
    },
    goDetails () {
      this.$router.push({
        name: 'SalesInfo',
        params: {
          user_bp_type: this.user_bp_type,
        },
      })
    },
  },
}
</script>

<style lang="less" type="text/less">
#contract-create-list {
   .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-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;
      }
    }
    .wrap {
      width: 100%;
      padding: 8px;
      .contract-lists {
        width: 100%;
        background: #fff;
        margin-bottom: 8px;
        border-radius: 2px;
        .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 {
          height: 96px;
          margin-left: 50px;
          margin-right: 19px;
          div {
            width: 100%;
            height: 32px;
            position: relative;
            .money {
              font-family: Verdana-Bold;
              font-size: 14px;
              color: #4B4A4B;
              letter-spacing: 0;
              font-weight: 600;
            }
            p {
              height: 32px;
              line-height: 32px;
              position: absolute;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              letter-spacing: 0;
            }
            p:nth-of-type(1){
              left: 0;
              color: rgba(75,74,75,0.60);
            }
            p:nth-of-type(2){
              right: 0;
              color: #4B4A4B;
            }
          }
        }
      }
    }
    .bottom-tab-button{
    background: @headerColor;
    border-radius: 4px;
    color:white;
    height: 40px;
    margin: 4px 2% 0 2%;
  }
  .add-img {
      width: 16px;
      height: 16px;
  }
    .content {
        position: absolute;
        top: 0;
    }
    .scrollContent {
        padding-top: 3rem;
        padding-bottom: 20px;
    }
}
.platform-ios {
    #contract-create-list {
      .scrollContent {
        padding-top: 3.4rem;
      }
    }
  }
  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      #contract-create-list {
        .scrollContent {
          padding-top: 3.8rem;
        }
      }
    }
  }
  // iPhoneXR适配
  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
      #contract-create-list {
        .scrollContent {
          padding-top: 3.8rem;
        }
        .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>