<template>
  <h-view class="public-style contract-sign-list" title="合同签约">
    <h-content class="scroll-content">
      <s-tab @tabClick="switchTab">
        <tab-item>本年</tab-item>
        <tab-item>本季</tab-item>
        <tab-item>本月</tab-item>
      </s-tab>
      <div class="info-board">
        <div class="board-line">
          <div class="ionic-img">
            <img src="@/assets/image/contractMainten/total@2x.png">
          </div>
          <div class="text">合同总计</div>
        </div>
        <div class="board-line"><span>\{{ infoShow.contract_count }}</span><span>个</span></div>
        <div class="board-line">
          <div class="board-block">
            <div class="type">新建</div>
            <div class="number"><span>\{{ infoShow.new_count }}</span>个</div>
          </div>
          <div class="board-block">
            <div class="type">签约</div>
            <div class="number"><span>\{{ infoShow.sign_count }}</span>个</div>
          </div>

          <div class="board-block">
            <div class="type">审批中</div>
            <div class="number"><span>\{{ infoShow.incept_count }}</span>个</div>
          </div>

          <div class="board-block">
            <div class="type">拒绝</div>
            <div class="number"><span>\{{ infoShow.overdue_count }}</span>个</div>
          </div>
        </div>
      </div>
      <div class="search">
        <div class="searchInput">
          <div class="img-box"><img src="@/assets/image/contractMainten/search@2x.png"></div>
          <input
            v-model="searchCondition.input"
            placeholder="请输入合同编号/承租人名称"
            @input="detectSearchCondition()">
        </div>
      </div>
      <scroll
        ref="scroll"
        :updateData="[con_list]"
        :pullUp="true"
        class="content-scroll"
        @pullingUp="loadMore">
        <list-item :item-height="80">
          <item
            v-for="(list,index) in con_list" :key="index" :proportion="[5,1]" :show-arrow="true"
            @click.native="goContractMainten(list)">
            <img slot="left-icon" src="@/assets/image/contractMainten/item@2x.png" class="left-icon">
            <div slot="name" class="text">
              <div class="cont-name" style="font-size: 16px;color: #5D98F6">合同编号：\{{ list.contract_number }}</div>
              <div class="cont-type" style="color: #8C8C8C;">承租人名称：\{{ list.bp_id_tenant_n }}</div>
              <div class="cont-type" style="color: #8C8C8C;">单据类别：\{{ list.document_type_n }}</div>
              <div class="cont-type" style="color: #8C8C8C;">合同创建日期：\{{ list.creation_date }}</div>
            </div>
          </item>
        </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, 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 {
    .scroll-content{
      position: absolute;
      top: 0;
      bottom: 0;
      height: auto;
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
      overflow-scrolling: touch;
    }
    .content-scroll{
      top:225px;
    }
    .content{
      overflow: hidden;
    }
    .hls-switch-tab .tab-content .h-tab-item .h-item {
      width: 100%;
    }

    .hls-switch-tab {
      position: relative;
    }

    .info-board {
      background-color: #FFF;

      .board-line {
        display: flex;
        display: -webkit-flex;
        padding-top: 10px;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        font-size: 13px;
        line-height: 18px;
        padding-bottom: 6px;

        &:before {
          content: '';
        }

        &:after {
          content: '';
        }

        &:first-child {
          justify-content: flex-start;
          -webkit-justify-content: flex-start;
        }

        &:nth-child(2) {
          justify-content: center;
          -webkit-justify-content: center;
        }

        .ionic-img {
          margin-left: 11px;
          margin-right: 4px;
          width: 17px;
          height: 15px;

          img {
            height: 100%;
            width: 100%;
            border: none;
          }
        }

        .text {
          font-size: @font-size-middle;
        }

        span {
          font-size: 26px;
          color: #FF8877;
          margin-right: 2px;

          &:nth-child(2) {
            font-size: @font-size-small;
            color: #313131;
            margin-top: 5px;
            margin-left: 2px;
          }
        }

        .board-block {
          height: 100%;
          width: 100%;
          text-align: center;

          .number {
            span {
              font-size: @font-size-middle;
              margin-right: 2px;
            }
          }
        }
      }
    }

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

      .searchInput {
        display: flex;
        display: -webkit-flex;
        height: 33px;
        border: 1px solid #5D98F6; /*no*/
        margin: 7px 10px;
        width: 100%;
        display: flex;
        align-items: center;
        -webkit-align-items: center;

        .img-box {
          height: 17px;
          border-right: 1px solid #5D98F6; /*no*/
          padding: 2px 0;
          margin-left: 10px;

          img {
            margin-right: 5px;
            width: 15px;
          }
        }

        input {
          width: 100%;
          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-item {
      &:nth-child(odd) {
        background-color: #EFF1F3;
      }

      &:nth-child(even) {
        background-color: #fff;
      }

      .contents .add-name {

        .left-icon {
          width: 34px;
        }

        .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>