/**
* @Author Sean
* @Date 2019/4/24
*/
<template>
  <h-view class="public-style" style="height: 100%">
    <h-header :proportion="[0,4,1]">
      <div slot="center" class="search-center">
        <div class="search-line">
          <img src="../../../assets/qixinbao/search@2x.png" class="search-icon"/>
          <input type="text" placeholder="请输入公司名称关键字" v-model="info.key" @input="detectSearchCondition">
        </div>
      </div>
      <div slot="right" class="h-header-btn" @click="$routeGo(-1)">取消</div>
    </h-header>
    <div v-if="!showdata" class="wra">
      <item>
        <div slot="name" style="font-size: 13px;color: gray;">历史搜索</div>
        <img slot="right-icon" src="../../../assets/qixinbao/dustbin.png" class="right-icon">
      </item>

      <list-item>
        <item :proportion="[5,1]" v-for="(list,index) in hisList" :key="index" @click.native="goDetail(index,'hisList')">
          <div slot="name">
            <div class="cont-name">\{{list['company_name']}}</div>
            <div class="cont-type">\{{list['search_date']}}</div>
          </div>
        </item>
      </list-item>
    </div>

    <scroll
      ref="scroll"
      :autoUpdate="true"
      :pullUp="true"
      class="content scroll-content has-header"
      @pullingUp="loadMore"
      v-if="showdata">
      <list-item>
        <item :proportion="[5,1]" v-for="(list,index) in dataList" :key="index" @click.native="goDetail(index,'dataList')">
          <div slot="name">
            <div class="cont-name">\{{list['名称']}}</div>
            <div class="cont-type">\{{list['核准日期']}}</div>
          </div>
        </item>
      </list-item>
    </scroll>
  </h-view>
</template>

<script>
  export default {
    data() {
      return {
        info: {
          key: ''
        },
        dataList: [],
        hisList: [],
        showdata: false,
        from: 1,
      }
    },
    created: function () {
    },
    mounted: function () {
    },
    updated: function () {
    },
    destroyed: function () {
    },
    beforeRouteEnter(to, form, next) {
      next(vm => {
        vm.queryHistory()
      })
    },
    methods: {
      //查询历史搜索
      queryHistory() {
        let vm = this
        var url = process.env.basePath + 'risk_his_query';
        var param = {};
        hlsPopup.showLoading('请稍候')
        vm.$post(url, param).then(function (res) {
          vm.showdata = false;
          hlsPopup.hideLoading();
          vm.hisList = res.risktorm_history_list;
        });
      },
      clearCondition() {
        let vm = this
        vm.info.key = '';
        vm.dataList.length = 0;
        vm.queryHistory();
      },
      goDetail(num, list) {
        let vm = this
        if (list == 'dataList') {
          if (vm.dataList[num]["统一社会信用代码"]) {
            vm.$router.push({
              name: 'QiXinDetail',
              params: {
                id: vm.dataList[num]['统一社会信用代码'],
                name: vm.dataList[num]["名称"]
              }
            })
          } else {
            hlsPopup.showLongCenter('暂无详情')
          }
        } else if (list == 'hisList') {
          if (vm.hisList[num]["organization_code"]) {
            vm.$router.push({
              name: 'QiXinDetail',
              params: {
                id: vm.hisList[num]["organization_code"],
                name: vm.hisList[num]["company_name"]
              }
            })
          } else {
            hlsPopup.showLongCenter('暂无详情')
          }
        }
      },
      //输入框值改变执行方法
      detectSearchCondition() {
        let vm = this
        if (vm.timeout) {
          clearTimeout(vm.timeout)
        }
        vm.timeout = setTimeout(function () {
          vm.search()
        }, 1000)
      },
      //根据关键字查询
      search() {
        let vm = this
        vm.from = 1;
        vm.dataList = [];
        if (vm.info.key != '') {
          var url = process.env.riskPath + 'company_search';
          var param = {
            "keyword": vm.info.key,
            "from": vm.from,
            "size": 10
          };
          vm.$riskPost(url, param).then(function (res) {
            hlsPopup.hideLoading();
            vm.dataList = res.hits;
            vm.showdata = true;
            if (vm.dataList.length >= 0 && vm.dataList.length < 10) {
              vm.$refs.scroll.update(true) // 关闭上拉 ，为true  不再滚动
            } /*else if (vm.dataList.length === 10) {
              vm.$refs.scroll.update(false)
            }*/
          });

        } else if (vm.info.key == '') {
          vm.from = 1;
          vm.dataList = [];
          vm.$refs.scroll.update(false)
        }
      },
      loadMore() {
        let vm = this
        vm.from += 10;
        var url = process.env.riskPath + 'company_search';
        var param = {
          "keyword": vm.info.key,
          "from": vm.from,
          "size": 10
        };
        vm.$riskPost(url, param).then(function (res) {
          hlsPopup.hideLoading();
          var returnData = res.hits;
          if (returnData.length == 0) {
            vm.$refs.scroll.update(true)// 不再滚动
          } else if (returnData.length > 0 && returnData.length < 10) {
            vm.$refs.scroll.update(true)// 不再滚动
            returnData.forEach(item => {
              vm.dataList.push(item);
            })
          } else if (returnData.length === 10) {
            vm.$refs.scroll.update(false)
            returnData.forEach(item => {
              vm.dataList.push(item);
            })
          }
        });

      },
      //清除搜索历史
      clearHistory() {
        let vm = this
        var url = process.env.basePath + 'risk_his_clean';
        var param = {};
        vm.$post(url, param).then(function (res) {
          vm.showdata = false;
          hlsPopup.hideLoading();
          vm.hisList = [];
        });
      }
    }
  }
</script>

<style scoped lang="less" rel="stylesheet">
  .public-style {
    .search-center {
      height: 30px;
      border: 1px solid rgba(0,0,0,.2);
      border-radius: 18px;
      font-size: 13px;
      margin-left: 8%;
    }

    .search-line {
      //position: absolute;
      //top:80px;
      height: 100%;
      margin: 0px 24px;
      display: flex;
      align-items: center;
      //right: 48px;
      justify-content: space-between;

      div {
        font-family: PingFangSC-Semibold;
        font-size: 13px;
        color: #FFFFFF;
      }

      input {
        width: 100%;
        font-size: 12px;
        opacity: 0.6;
        background: rgba(255, 255, 255, 0.50);
        border-radius: 5px;
        border: none;
      }
    }

    .right-icon {
      width: 20px;
    }
    .cont-name {
      color: @headerColor;
    }

    .cont-type {
      color: rgba(0, 0, 0, .4);
    }
    .wrap{
      position: fixed;
      width: 100%;
      .content {

      }
    }

  }
</style>