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

<template>
  <h-view class="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>
    <Tab @getTabNum="getTabNum"/>
    <div class="hinput">
      <div class="search-box">
        <input type="text" placeholder="请输入合同号/承租人名称">
        <img src="@/assets/distributorSign/search.png" alt="">
      </div>
    </div>
    <scroll
      v-if="tabNum === 0"
      ref="scroll"
      :updateData="[submitLists]"
      :pullUp="true"
    >
      <div class="wrap">
        <div v-for="(item,index) in submitLists" :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 class="money">{{ item.total_price|currency }}</p></div>
            <div><p>申请时间</p><p>{{ dateConverse(item.confirm_start_date) }}</p></div>
          </div>
        </div>
      </div>
    </scroll>

    <scroll
      v-if="tabNum === 1"
      ref="scrollList"
      :updateData="[approvedLists]"
      :pullUp="true"
    >
      <div class="wrap">
        <div v-for="(item,index) in approvedLists" :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 class="money">{{ item.total_price|currency }}</p></div>
            <div><p>申请时间</p><p>{{ dateConverse(item.confirm_start_date) }}</p></div>
          </div>
        </div>
      </div>
    </scroll>

  </h-view>
</template>

<script>
import Tab from '@/pages/distributorSign/tab'
export default {
  name: 'ContractList',
  components: {
    Tab,
  },
  data () {
    return {
      tabNum: 0,
      lists: [],
      submitLists: [],
      approvedLists: [],
    }
  },
  created () {
    this.getLists()
  },
  methods: {
    // 查询签约列表
    getLists () {
      let vm = this
      let url = $config.basePath + 'prj_confirm_list_query'
      let param = {
        user_phone: window.localStorage.user_phone,
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.submitLists = res.lists.filter(item => item.confirm_status === 'SUBMIT')
          vm.approvedLists = res.lists.filter(item => item.confirm_status === 'APPROVED')
          if (vm.submitLists.length > 0 && vm.submitLists.length < 10) {
            vm.$refs.scroll.update(true)
          }
          if (vm.approvedLists.length > 0 && vm.approvedLists.length < 10) {
            vm.$refs.scrollList.update(true)
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    goDetails (item) {
      window.sessionStorage.setItem('confirm_id', item.confirm_id)
      window.sessionStorage.setItem('bp_class', item.bp_class)
      window.sessionStorage.setItem('project_id', item.project_id)
      window.sessionStorage.setItem('confirm_status', item.confirm_status)
      this.$router.push({
        name: 'ContractDetails',
        params: {
          confirm_id: item.confirm_id,
        },
      })
    },
    getTabNum (i) {
      this.tabNum = i
    },
    dateConverse (date) {
      return date.replace(/\//g, '-')
    },
  },
}
</script>
<style lang="less" scoped>
.distribute-sign {
  .hinput {
    width: 100%;
    height: 68px;
    border-bottom:1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3px;
    background: #fff;

    .search-box {
      position: relative;
      z-index: 50;
      width: 93.6%;
      height: 36px;
      font-size: 14px;
      color: #B4B4B5;
      letter-spacing: 0;
      font-family: PingFangSC-Regular;
      border: 1px solid rgba(56,63,69,0.60);
      border-radius: 4px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;

      input {
          width: 90%;height: 100%;
          opacity: 0.4;
            border: none;
        line-height: 34px;
        }
    }
  }
  // .scrollContent{
  //     padding-bottom: 90px;
  //   }
  .wrap {
      width: 100%;
      padding: 8px;
      padding-bottom: 104px;
      .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 {
          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;
            }
          }
        }
      }
  }
}

</style>