<template>
  <h-view class="public-style contract-sign-list" style="height:100%;" title="合同签约">
    <s-tab position="top" class="my-height" @tabClick="switchTab">
      <tab-item>本年</tab-item>
      <tab-item>本季</tab-item>
      <tab-item>本月</tab-item>
    </s-tab>
    <h-content class="scroll-content">
      <div class="top-part">
        <div class="client">
          <div class="client-img">
            <img src="../../../assets/image/contractMainten/total@2x.png">
          </div>
          <div class="statistics">合同总计</div>
        </div>
        <div class="total-num">\{{ infoShow.contract_count }}<span class="measure">个</span></div>
        <div class="list-general">
          <div class="enterprise">
            <div class="list-name">新建</div>
            <div class="list-num">\{{ infoShow.new_count }}<span class="sum-num">个</span></div>
          </div>
          <div class="enterprise">
            <div class="list-name">签约</div>
            <div class="list-num">\{{ infoShow.sign_count }}<span class="sum-num">个</span></div>
          </div>
          <div class="enterprise">
            <div class="list-name">审批中</div>
            <div class="list-num">\{{ infoShow.incept_count }}<span class="sum-num">个</span></div>
          </div>
          <div class="enterprise">
            <div class="list-name">拒绝</div>
            <div class="list-num">\{{ infoShow.overdue_count }}<span class="sum-num">个</span></div>
          </div>
        </div>

      </div>
      <div class="search">
        <div class="searchInput">
          <div class="searchIcon">
            <div class="img-box"><img src="../../../assets/image/contractMainten/search@2x.png"></div>
          </div>
          <input
            v-model="searchCondition.input" placeholder="请输入合同编号/承租人名称"
            @input="detectSearchCondition()">
        </div>
        <div class="filterIcon" @click="detectSearchCondition()">
          <img src="../../../assets/image/contractMainten/filter@2x.png">
        </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"
            :has-border="false" :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">合同编号：\{{ list.contract_number }}</div>
              <div class="cont-type">承租人名称：\{{ list.bp_id_tenant_n }}</div>
              <div class="cont-type">单据类别：\{{ list.document_type_n }}</div>
              <div class="cont-type">合同创建日期：\{{ 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: 40px;
      right: 0;
      bottom: 0;
      left: 0;
      width: auto;
      height: auto;
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
      overflow-scrolling: touch;
    }
    .content {
      background-color: #FFF;
      padding-top: 0;
      .top-part{
        background-color: #FFFFFF;
        padding:12px 0 10px 0;
        .client{
          display: flex;
          .client-img{
            margin:0 5px 0 15px;
            img{
              width:17px;
              height: 15px;
            }
          }
          .statistics{
            font-size: 14px;
            line-height: 16px;
            color: #363636;
          }
        }
        .total-num{
          width: 100%;
          padding: 10px 0 25px 0;
          font-size: 26px;
          color: #FF8877;
          display: flex;
          justify-content: center;
          .measure{
            font-size: 13px;
            color: #313131;
            padding:5px;
          }
        }
        .list-general{
          width: 100%;
          display: flex;
          justify-content: center;
          .enterprise{
            width: 25%;
            display: flex;
            text-align:center;
            flex-direction: column;
            .list-name{
              font-size: 13px;
              color: #313131;
            }
            .list-num{
              padding-top: 6px;
              font-size: 14px;
              color: #FF8877;
              .sum-num{
                font-size: 12px;
                line-height: 17px;
                color: #313131;
                padding-left: 2px;
              }
            }
          }
        }
      }
      .search {
        display: flex;
        display: -webkit-flex;
        height:50px;
        background-color: #FFFFFF;
        margin-top: 10px;
        .searchInput {
          display: flex;
          display: -webkit-flex;
          height: 33px;
          border: 1px solid @headerColor;
          margin-left: 10px;
          margin-top: 7px;
          margin-bottom: 7px;
          width: 100%;
          display: flex;
          display: -webkit-flex;
          align-items: center;
          -webkit-align-items: center;
          .img-box {
            height: 17px;
            border-right: 1px solid @headerColor;
            padding: 2px 0;
            margin-left: 10px;
            img {
              width: 50%;
              margin-right: 5px;
            }
          }
          input {
            width: 80%;
            font-size: 13px;
            height: 17px;
            line-height: 17px;
            border: none;
            margin-top: 3px;
            margin-bottom: 4px;
            padding-left: 10px;
          }
        }
        .filterIcon {
          width: 38px;
          height: 33px;
          background-color: @headerColor;
          margin: 7px 10px 0px 10px;
          display: flex;
          display: -webkit-flex;
          align-items: center;
          -webkit-align-items: center;
          justify-content: center;
          -webkit-justify-content: center;
          img {
            width: 50%;
          }
        }
      }

      .hls-item {
        &:nth-child(odd){
          background-color: #EFF1F3;
        }
        &:nth-child(even){
          background-color: #fff;
        }

        .contents {
          .add-name {
            .cont-name{
              font-size: 15px;
              line-height: 21px;
              color: @headerColor;
            }
            .cont-type{
              font-size: 13px;
              line-height: 18px;
              color: #888;
            }
            .left-icon{
              width: 10%;
            }
          }
        }
      }
    }
    .content-scroll{
      top: 215px;
    }
  }
</style>
