<template>
  <div class="futures-base-container">
    <div class="header">
      <date-picker
        v-model="filterObj.date"
        type="date"
        range
        value-type="format"
        placeholder="数据日期"
        @change="initData"
        style="width: 200px; "
      />
      
      <div>
        <el-select
          v-model="filterObj.base_type"
          style="width:120px"
          @change="() => {filterObj.exchange='';getExchangeOptions()}"
        >
          <el-option
              v-for="(item,index) in ['国内交易所','海外交易所']"
              :key="index"
              :label="item"
              :value="index"
            >
          </el-option>
        </el-select>
        
        <el-select
          v-model="filterObj.exchange"
          clearable
          placeholder="请选择交易所"
          @change="initData"
        >
          <el-option
            v-for="item in exchangeOptions"
            :key="item.Exchange"
            :label="item.Exchange"
            :value="item.Exchange"
          >
          </el-option>
        </el-select>
        
        <el-select
          v-model="filterObj.search_txt"
          ref="searchRef"
          :filterable="!filterObj.search_txt"
          remote
          clearable
          placeholder="合约代码"
          style="width: 350px"
          :remote-method="searchHandle"
          @change="initData"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
          <el-option
            v-for="item in searchOptions"
            :key="item.FutureGoodEdbInfoId"
            :label="item.FutureGoodEdbName"
            :value="item.FutureGoodEdbInfoId"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="box-shadow: 0px 3px 6px rgba(155, 170, 219, 0.2);margin-top: 20px"
      border
      max-height="680"
      ref="table"
    >
      <el-table-column
        v-for="item in tableColums"
        :key="item.label"
        :label="item.label"
        :width="item.widthsty"
        :min-width="item.minwidthsty"
        align="center"
      >
        <template slot-scope="{row}">
          <span>{{row[item.key]}}</span>
        </template>
      </el-table-column>
      <div class="nodata" slot="empty">
        <tableNoData text="请选择数据日期并输入合约代码" size="mini"/>
      </div>
    </el-table>
    
  </div>
</template>

<script>
import futuresInterface from '@/api/modules/futuresBaseApi';
export default {
  data() {
    return {
      filterObj: {
        date: [],
        base_type:0,
        exchange:'',
        search_txt: '',
      },
      searchOptions: [],
      current_search:'',

      tableData: [],
      loadOver: false,
      page_no: 1,
      pageSize: 20,
      tableColums: [
        {
					label: '日期',
					key: 'DataTime',
					widthsty: '120px'
				},
        {
					label: '合约代码',
					key: 'FutureGoodEdbCode',
				},
        {
					label: '合约名称',
					key: 'FutureGoodEdbName',
				},
        {
					label: '开盘价',
					key: 'Open',
				},
        {
					label: '最高价',
					key: 'High',
				},
        {
					label: '最低价',
					key: 'Low'
				},
        {
					label: '收盘价',
					key: 'Close'
				},
        {
					label: '成交量',
					key: 'Volume'
				},
        {
					label: '成交额',
					key: 'Amt'
				},
        {
					label: '持仓量',
					key: 'Oi'
				},
        {
					label: '结算价',
					key: 'Settle'
				},
      ],

      exchangeOptions: [],//交易所数据
    }
  },
  methods: {
      /* 搜索 */
		async searchHandle(query) {
      if(query) {
        const { Ret,Data } = await futuresInterface.targetSearch({ 
          Keyword: query,
          RegionType: this.filterObj.base_type ? '海外' : '国内',
          Exchange: this.filterObj.exchange
        });
  
        if(Ret !== 200) return 
        this.searchOptions = Data || [];
      }
		},

    initData() {
      this.$refs.table.bodyWrapper.scrollTop = 0;
      this.page_no=1;
      this.getTableData();
    },

    /* 获取期货交易所 */
    async getExchangeOptions() {
      const { Ret,Data } = await futuresInterface.exchangeList({
        RegionType: this.filterObj.base_type ? '海外' : '国内'
      })

      if(Ret !== 200) return
      this.exchangeOptions = Data || [];
    },

    /* 获取表格数据 */
    async getTableData() {
      if(!this.filterObj.search_txt) {
        this.tableData = []
        return
      }  
      const { Ret,Data } = await futuresInterface.futuresTargetList({
        CurrentIndex: this.page_no,
        PageSize: this.pageSize,
        StartDate: this.filterObj.date[0] || '',
        EndDate: this.filterObj.date[1] || '',
        FutureGoodEdbInfoId: this.filterObj.search_txt
      })

      if(Ret !== 200) return

      this.loadOver = this.page_no >= Data.Paging.Pages;
      this.tableData = this.page_no === 1 ? (Data.List || []) : [...this.tableData,...Data.List]
    },

    handleScroll: _.throttle(function(){
      const {scrollTop,clientHeight,scrollHeight} = this.$refs.table.bodyWrapper
      console.log('scroll')
      if(scrollTop + clientHeight >= scrollHeight-10 && !this.loadOver){
				this.page_no++;
				this.getTableData();
			}
    },300),
  },
  mounted() {
    this.$refs.table && this.$refs.table.bodyWrapper.addEventListener('scroll',this.handleScroll)
    this.getExchangeOptions();
  },
  destroyed() {
    this.$refs.table && this.$refs.table.bodyWrapper.removeEventListener('scroll',this.handleScroll)
  }
}
</script>

<style lang="scss" scoped>
*{ box-sizing: border-box; }
.futures-base-container {
  border: 1px solid #ececec;
  padding: 30px;
  background: #fff;
  border-radius: 4px;
  height: calc(100vh - 120px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .nodata {
    padding: 150px 0; 
    text-align: center;
    color: #999;
  }
}
</style>