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

<template>
  <h-view class="public-style project-mainten" title="申请维护">
    <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-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 {
    .hls-switch-tab .tab-content .h-tab-item .h-item {
      width: 100%;
    }
    .hls-switch-tab {
      position: relative;
    }
    .info-board {
      background-color: rgb(255, 255, 255);
      position: relative;
      z-index: 5;
      .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: rgb(255, 136, 119);
          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: rgb(255, 255, 255);
      padding:5px 0;
      position: relative;
      z-index: 5;
      .searchInput {
        display: flex;
        display: -webkit-flex;
        height: 33px;
        border: 1px solid rgb(93, 152, 246); /*no*/
        margin: 7px 10px;
        width: 100%;
        align-items: center;
        -webkit-align-items: center;
        .img-box {
          height: 17px;
          border-right: 1px solid rgb(93, 152, 246); /*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;
        }
      }
    }
    .hls-item {
      &:nth-child(odd) {
        background-color: rgb(239, 241, 243);
      }
      &: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: rgb(93, 152, 246);
          }
        }
      }
    }
  }
</style>
