<template>
  <h-view class="public-style contract-sign-list" title="合同签约">
    <h-content class="">
      <s-tab @tabClick="switchTab">
        <tab-item>待签约</tab-item>
        <tab-item>已签约</tab-item>
      </s-tab>
      <div class="search">
        <div class="searchInput">
          <input
            v-model="searchCondition.input"
            placeholder="请输入合同编号/承租人名称"
            @input="detectSearchCondition()">
        </div>
      </div>
      <scroll
        ref="scroll"
        :updateData="[con_list]"
        :pullUp="true"
        @pullingUp="loadMore">

        <list-item :item-height="80">
          <div v-for="(list,index) in con_list"  :key="index" :proportion="[5,1]" :show-arrow="true">
            <div class="con-num">合同编号: <span style="font-weight: 600">201821023721847</span></div>
          <item
            @click.native="goContractMainten(list)">
            <img slot="left-icon" src="../../../assets/image/contractMainten/item@2x.png" class="left-icon">
            <div slot="name" class="text" style="width: 70%;font-size: 12px;">
              <div class="cont-type" style="color: #5a5959;font-size: 14px">合同金额&nbsp;&nbsp;<span style="font-weight: 600;">12333333</span></div>
              <div class="cont-type" style="color: #5a5959;font-size: 14px">承租人&nbsp;&nbsp;&nbsp;&nbsp;张三</div>
            </div>
            <div slot="name" class="text" style="width: 30%;font-size: 12px;">
              <div class="cont-type" style="color: #5a5959;">申请时间</div>
              <div class="cont-type" style="color: #5a5959;">2020-01-23</div>
            </div>
            <img slot="right-icon" src="../../../assets/image/right-arrow@2x.png" class="right-icon">
          </item>
          </div>
        </list-item>
      </scroll>
    </h-content>
  </h-view>
</template>

<script>
export default {
  data () {
    return {
      con_list: [],
      infoShow: {},
      info: null,
      searchCondition: {
        input: null,
      },
    }
  },
  created () {
    this.offsize = 1
    this.pagesize = 10
    this.index = [1, 0, 0]
  },
  mounted () {
    this._initLoad()
  },
  methods: {
    switchTab: function (index) {
      let vm = this
      vm.index = [0, 0]
      vm.index[index] = 1
      vm.changeData()
    },
    changeData: function () {
      let vm = this
      vm.infoShow = vm.info[vm.getTabName()][0]
    },

    getTabName: function () {
      let vm = this
      let tabName = ''
      vum.forEach(vm.index, function (data, index, array) {
        if (data === 1) {
          if (index === 0) {
            tabName = 'year_contract_list'
          } else if (index === 1) {
            tabName = 'reason_contract_list'
          } else if (index === 2) {
            tabName = 'month_contract_list'
          }
        }
      })
      return tabName
    },

    detectSearchCondition: function () {
      let vm = this
      if (vm.timeout) {
        clearTimeout(vm.timeout)
      }
      vm.timeout = setTimeout(function () {
        vm._initLoad()
      }, 1000)
    },

    _initLoad: function () {
      let vm = this
      vm.load_count()
      vm.offsize = 1
      let url = process.env.basePath + 'app_get_contract_selected' // 合同维护信息查询
      let param = {
        'offsize': vm.offsize,
        'searchInput': vm.searchCondition.input,
      }
      vm.hlsPopup.showLoading('请稍等')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        vm.con_list = res.getContract_list
        if (res.getContract_list.length >= 0 && res.getContract_list.length < vm.pagesize) {
          vm.$refs.scroll.update(true)
        }
      })
    },

    load_count: function () {
      let vm = this
      let url = process.env.basePath + 'contract_count'
      let param = {}
      // hlsPopup.showLoadingWithoutBackdrop();
      vm.$post(url, param).then(function (res) {
        vm.info = res
        vm.changeData()
      })
    },

    loadMore: function () {
      let vm = this
      vm.offsize = vm.offsize + 1
      let url = process.env.basePath + 'app_get_contract_selected'
      let param = {
        'offsize': vm.offsize,
        'searchInput': vm.searchCondition.input,
      }
      vm.$post(url, param).then(function (res) {
        let returnData = []
        returnData = res.getContract_list
        if (returnData.length === 0) {
          vm.$refs.scroll.update(true)
        } else if (returnData.length > 0 && returnData.length < vm.pagesize) {
          vum.forEach(returnData, function (data, index, array) {
            vm.con_list.push(array[index])
          })
          vm.$refs.scroll.update(true)
        } else if (returnData.length === vm.pagesize) {
          vum.forEach(returnData, function (data, index, array) {
            vm.con_list.push(array[index])
          })
          vm.$refs.scroll.update(false)
        }
      })
    },
    goContractMainten: function (list) {
      this.$router.push({
        name: 'ContractSign',
        params: {
          contract_id: list.contract_id,
          cdd_list_id: list.cdd_list_id,
        },
      })
    },
  },
}
</script>

<style lang="less" rel="stylesheet">
  .contract-sign-list {
    .content{
      overflow: hidden;
    }
    .hls-switch-tab .tab-content .h-tab-item .h-item {
      width: 100%;
      border: 1px solid #cccccc;
      color: black;
      border-radius: 10px;
    }
    .hls-switch-tab .tab-content .h-tab-item.activated .h-item {
      color: white;
      background-color: blue;
      border-radius: 10px;
    }
    .hls-switch-tab .tab-content {
      width: 90%;
      margin-left: 5%;
    }
    .con-num{
      width: 90%;
      margin-left: 5%;
      font-size: 15px;
      color: #424242;
      margin-top: 15px;
      margin-bottom: 12px;
    }
    .hls-switch-tab .tab-content .h-tab-item {
      width: 50%;
      height: 0.7rem;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      position: relative;
    }
    .hls-switch-tab .tab-content .h-tab-item.activated .h-item {
      background-color: blue;
      color: white;
      height: 0.7rem;
      border-radius: 5px;
    }
    .hls-switch-tab .tab-content .h-tab-item .h-item {
      color: black;
      height: 0.7rem;
      border-radius: 5px;
      border: 1px solid #cccccc;
    }
    .hls-switch-tab .tab-content .h-tab-item.activated .h-item .bottom-border {
     border-bottom:none;
    }
    .hls-switch-tab {
      position: relative;
    }
    .content{
      background-color: white;
    }
    .hls-switch-tab {
      margin-top: 10px;
    }

    .search {
      display: flex;
      //height: 50px;
      background-color: #FFF;
      margin-top: 10px;
      // margin-bottom: 10px;

      .searchInput {
        margin-left: 5%;
        display: -webkit-flex;
        border: 1px solid #cccccc;
        /* margin: 0.14rem 0.2rem; */
        width: 80%;
        height: 0.56rem;
        border-radius: 20px;
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-align-items: center;

        input {
          text-align: center;
          width: 90%;
          margin-left: 5%;
          font-size: 13px;
          height: 17px;
          line-height: 17px;
          border: none;
          margin-top: 3px;
          margin-bottom: 4px;
          //padding-left: 11px;
        }
      }
    }

    .vue-better-scroll {
      // top: 226px;
    }

    .vue-better-scroll__wrapper {
      margin-top: 10px;
    }
    .hls-list-item {
     margin-bottom: 0;
      padding-bottom: 10px;
    }

    .hls-item {
      padding: 0;
      border-radius: 20px;
      box-shadow: 0px 4px 0px 0px #cac9c9;
      &:nth-child(odd) {
        background-color: #f1f1f1;
      }

      &:nth-child(even) {
        background-color: #f1f1f1;
      }
      .add-name{
        flex: 9 1 0% !important;
      }
       .contents{
         width: 98%;
         margin-left: 1%;
       }
      .contents .add-name {

        .left-icon {
          width: 14px;
          margin-right: 0;
        }
        .right-icon{
          margin-left: 20%;
        }

        .text {
          margin-left: 15px;

          .cont {
            margin-top: 5px;
            font-size: 13px;
            line-height: 18px;

            &:first-child {
              margin-top: 0;
            }
          }

          .cont-num {
            margin-top: 8px;
            font-size: 15px;
            line-height: 21px;
            color: #5D98F6;
          }
        }
      }
    }
  }
</style>
