/**
* @Author think
* @Date 2019-04-30 09:46
*/

<template>
  <h-view class="public-style risk-search">
    <h-header :proportion="[1,10,2]" class="bar-custom">
      <div slot="center" class="search-shelter">
        <img src="@/assets/image/risk/search@2x.png" class="search-icon">
        <input
          id="risk-search-input" v-model="info.key" type="text"
          placeholder="请输入公司名称关键字" class="search-input">
        <img v-show="info.key" src="@/assets/image/risk/clear.png" class="clear-button" @click="clearCondition()">
      </div>
      <div slot="right" class="h-header-btn" @click="detectSearchCondition()">搜索</div>
    </h-header>
    <scroll
      ref="scroll"
      :updateData="[dataList]"
      :pullUp="true"
      @pullingUp="loadMore">
      <div v-if="!showdata">
        <div class="area-title">
          <div>历史搜索</div>
          <div class="title-items" @click="clearHistory()"><img src="@/assets/image/risk/dustbin.png"></div>
        </div>
        <list-item :item-height="40">
          <item
            v-for="(list,index) in hisList"
            :key="index"
            :proportion="[10,0]" @click.native="goDetail(index,'hisList')">
            <div slot="name" class="text">
              <div class="cont-name">{{ list.company_name }}</div>
              <div class="cont-type">{{ list.search_date }}</div>
            </div>
          </item>
        </list-item>
      </div>
      <div v-if="showdata">

        <list-item :item-height="40">
          <item
            v-for="(list,index) in dataList"
            :key="index"
            :proportion="[9,1]" @click.native="goDetail(index,'dataList')">
            <div slot="name" class="text">
              <div class="cont-name">{{ list['名称'] }}</div>
              <div class="cont-type">{{ list['核准日期'] }}</div>
            </div>
          </item>
        </list-item>
      </div>

    </scroll>
  </h-view>
</template>

<script>
import riskDetailService from './riskDetailService'
export default {
  name: 'RiskSearch',
  data () {
    return {
      info: {
        key: '',
      },
      dataList: [],
      hisList: [],
      from: 1,
      showdata: false,
    }
  },
  watch: {
    'info.key': {
      handler (newName, oldName) {
        let vm = this
        if (vm.timeout) {
          clearTimeout(vm.timeout)
        }
        vm.timeout = setTimeout(() => {
        //  vm.search()
        }, 1000)
      },
    },
  },
  mounted () {
    this.queryHistory()
  },
  methods: {
    detectSearchCondition () {
      let vm = this
      if (vm.timeout) {
        clearTimeout(vm.timeout)
      }
      vm.timeout = setTimeout(() => {
        vm.search()
      }, 1000)
    },
    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]['统一社会信用代码']) {
          let name = vm.dataList[num]['bp_name']
          let organizationCode = vm.dataList[num]['organization_code']
          riskDetailService.setCompanyName(name)
          riskDetailService.setOrganizationCode(organizationCode)
          vm.$router.push({
            name: 'RiskSearchDetail',
            params: {
              id: organizationCode,
              name: name,
            },
          })
        } else {
          vm.hlsPopup.showLongBottom('暂无详情')
        }
      } else if (list === 'hisList') {
        if (vm.hisList[num]['organization_code']) {
          let name = vm.hisList[num]['bp_name']
          let organizationCode = vm.hisList[num]['organization_code']
          riskDetailService.setCompanyName(name)
          riskDetailService.setOrganizationCode(organizationCode)
          vm.$router.push({
            name: 'RiskSearchDetail',
            params: {
              id: organizationCode,
              name: name,
            },
          })
        } else {
          vm.hlsPopup.showLongBottom('暂无详情')
        }
      }
    },

    loadMore () {
      let vm = this
      vm.from += 10
      let url = $config.riskPath + 'company_search'
      let param = {
        'apikey': $config.riskKey,
        'keyword': vm.info.key,
        'from': vm.from,
        'size': 10,
      }
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        let 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((data, index, array) => {
            vm.dataList.push(array[index])
          })
        } else if (returnData.length === 10) {
          returnData.forEach((data, index, array) => {
            vm.dataList.push(array[index])
          })
        }
      })
    },

    search () {
      let vm = this
      vm.from = 1
      vm.dataList = []
      if (vm.info.key !== '') {
        vm.hlsPopup.showLoading('请稍等！')
        let url = $config.riskPath + 'company_search'
        let param = {
          'apikey': $config.riskKey,
          'keyword': vm.info.key,
          'from': vm.from,
          'size': 10,
        }
        vm.hlsHttp.post(url, param).then(function (res) {
          vm.hlsPopup.hideLoading()
          vm.dataList = res.hits
          vm.showdata = true
          if (vm.dataList.length >= 0 && vm.dataList.length < 10) {
            vm.$refs.scroll.update(true)
          } else {
            vm.$refs.scroll.update(false)
          }
        })
      } else if (vm.info.key === '') {
        vm.from = 1
        vm.dataList = []
      }
    },

    queryHistory () {
      let vm = this
      let url = $config.basePath + 'risk_his_query'
      let param = {}
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.showdata = false
        vm.hlsPopup.hideLoading()
        vm.hisList = res.risktorm_history_list
        vm.$refs.scroll.update(true)
      })
    },

    clearHistory () {
      let vm = this
      let url = $config.basePath + 'risk_his_clean'
      let param = {}
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.showdata = false
        vm.hisList = []
        vm.$refs.scroll.update(false)
      })
    },
  },
}
</script>

<style lang="less">
  .risk-search {
    .search-shelter {
      height: 30px;
      width: 100%;
      background-color: #fff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      img {
        width: 15px;
        margin: 0 10px;
      }

      input {
        width: 100%;
        font-size: 14px;
        color: #333;
        margin-bottom: 0;
        padding: 0;
        border: none;
      }
    }
    .content{
      .area-title {
        width: 100%;
        height: 30px;
        background-color: @background-color-gray;
        color: @mainColor;

        display: flex;

        align-items: center;
        justify-content: space-between;
        padding: 0 15px 0 15px;
        font-size:14px;
      }
      .title-items {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.5);
        height: 25px;
        width: 22px;
        div {
          text-align: center;
          width: 100%;
        }
        img{
          width: 100%;
          height: 100%;
        }
      }
      .hls-item {
        .contents {
          .add-name{
           .text{
             color: @headerColor;
             .cont-type{
               color: rgba(0,0,0,.4);
             }
           }
          }
        }
      }
    }
  }
</style>
