/**
* @Author think
* @Date 2019-06-13 14:03
*/

<template>
  <h-view class="public-style project-mainten" title="申请维护">
    <h-content class="">
      <s-tab @tabClick="changeData">
        <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/projectCreate/total@2x.png">
          </div>
          <div class="text">租赁申请总计</div>
        </div>
        <div class="board-line"><span>\{{ countInfo.apply_count }}</span><span>单</span></div>
        <div class="board-line">
          <div class="board-block">
            <div class="type">新建</div>
            <div class="number"><span>\{{ countInfo.new_count }}</span>单</div>
          </div>
          <div class="board-block">
            <div class="type">审批中</div>
            <div class="number"><span>\{{ countInfo.approving_count }}</span>单</div>
          </div>

          <div class="board-block">
            <div class="type">审批通过</div>
            <div class="number"><span>\{{ countInfo.approved_count }}</span>单</div>
          </div>

          <div class="board-block">
            <div class="type">拒绝</div>
            <div class="number"><span>\{{ countInfo.reject_count }}</span>单</div>
          </div>
        </div>
      </div>
      <div class="search">
        <div class="searchInput">
          <div class="img-box"><img src="@/assets/image/projectCreate/search@2x.png"></div>
          <input
            v-model="searchCondition.input"
            placeholder="请输入合同编号/代理商名称">
        </div>
      </div>
      <scroll
        ref="scroll"
        :updateData="[prjList]"
        :pullUp="true"
        @pullingUp="loadMore">
        <list-item :item-height="80">
          <item
            v-for="(project,index) in prjList" :key="index" :proportion="[5,1]" :show-arrow="true"
            @click.native="goDetail(project)">
            <img slot="left-icon" src="@/assets/image/projectCreate/item@2x.png" class="left-icon">
            <div slot="name" class="text">
              <div class="cont cont-num">合同编号：\{{ project.project_number }}</div>
              <div class="cont cont-name">代理商名称：\{{ project.bp_name }}-\{{ project.invoice_agent_id_n }}</div>
              <div class="cont cont-data">创建日期：\{{ project.create_date }}</div>
            </div>
          </item>
        </list-item>
      </scroll>
    </h-content>
  </h-view>
</template>

<script>
import projectService from './projectService'
export default {
  name: 'PrjMaintenList',
  data () {
    return {
      defaultIndex: 0,
      offsize: 1,
      scrollBusy: true,
      prjList: [],
      countList: [],
      countInfo: {},
      searchCondition: {
        input: '',
      },
    }
  },
  watch: {
    'searchCondition.input': {
      handler: function (val, oldval) {
        this.detectSearchCondition()
      },
    },
  },
  created: function () {
    this.projectQuery()
    this.prjApplyQuery()
  },
  methods: {
    /**
       * 项目维护查询
       */
    projectQuery () {
      let vm = this
      let url = $config.basePath + 'prj_project_query' // 项目维护列表查询
      let param = {
        'offsize': vm.offsize,
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.prjList = res.prj_project_list
          if (res.prj_project_list.length > 0 && res.prj_project_list.length < 10) {
            vm.$refs.scroll.update(true)
          }
        }
      })
    },

    /**
       * 租赁申请总计查询
       */
    prjApplyQuery () {
      let vm = this
      let param1 = {}
      let url1 = $config.basePath + 'prj_apply_count' // 租赁申请总计查询
      vm.hlsHttp.post(url1, param1).then(function (res) { // 各种单数信息查询
        vm.countList = res
        vm.changeData(0)
      })
    },

    changeData (index) {
      let vm = this
      let currentIndex = vm.defaultIndex = index
      vm.countInfo = vm.countList[vm.getTabName(currentIndex)][0]
    },

    getTabName (index) {
      let tabName = ''
      if (index === 0) {
        tabName = 'year_apply_list' // 本年
      } else if (index === 1) {
        tabName = 'reason_apply_list' // 本季
      } else if (index === 2) {
        tabName = 'month_apply_list' // 本月
      }
      return tabName
    },

    detectSearchCondition () {
      let vm = this
      vm.scrollBusy = false
      if (vm.timeout) {
        clearTimeout(vm.timeout)
      }
      vm.timeout = setTimeout(() => {
        vm.search()
      }, 1000)
    },

    /**
       * 项目维护模糊查询
       */
    search () {
      let vm = this
      let url = $config.basePath + 'prj_project_query'
      let param = {
        'offsize': 1,
        'searchInput': vm.searchCondition.input,
      }
      vm.hlsPopup.showLoading('请稍候')
      hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.prjList = res.prj_project_list
          if (res.prj_project_list.length >= 0 && res.prj_project_list.length < 10) {
            vm.$refs.scroll.update(true)
          } else {
            vm.$refs.scroll.update(false)
          }
        }
      })
    },
    loadMore () {
      let vm = this
      vm.offsize = vm.offsize + 1
      let url = $config.basePath + 'prj_project_query'
      let param = {
        'offsize': vm.offsize,
        'searchInput': vm.searchCondition.input,
      }
      vm.hlsHttp.post(url, param).then(function (res) {
        var returnData = []
        if (res.result === 'S') {
          returnData = res.prj_project_list
          if (returnData.length === 0) {
            vm.$refs.scroll.update(true)
          } else if (returnData.length > 0 && returnData.length < 10) {
            returnData.forEach((data, index, array) => {
              vm.prjList.push(array[index])
            })
            vm.$refs.scroll.update(true)
          } else if (returnData.length === 10) {
            returnData.forEach((data, index, array) => {
              vm.prjList.push(array[index])
            })
            vm.$refs.scroll.update(false)
          }
        }
      })
    },

    goDetail (project) {
      projectService.cleanProject()
      projectService.setAttachFlag(1)
      projectService.setCarFlag(1)
      projectService.setClientInfoFlag(1)
      projectService.setOfferFlag(1)
      projectService.setProject(project)
      this.$router.push({
        name: 'InfoMationMain',
        params: {
          reload: true,
        },
      })
    },
  },
}
</script>

<style  lang="less">
  .project-mainten {
    .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>
