<template>
  <div class="RCSbox common-page">
    <el-tabs
      v-model="activeTab"
      @tab-click="e=>handleClick(e,scriptId, 'FxSwapPositionDetail', posType)"
    >
      <el-tab-pane label="实时头寸">
        <FormSearch
          :form-arr="formArr"
          :form-data="searchParams"
          @outOperation="outOperation"
          @searchSubmit="searchSubmit"
          @reset="resetForm"
        />
        <PublicTable
          ref="table"
          class="table"
          row-key="id"
          :loading="loading"
          :has-index="false"
          :need-select="false"
          :table-data="tableData"
          :table-info="tableInfo"
          :table-column="columns"
          :events="events"
          operation-width="150px"
          :has-operation="false"
          :btn-button="operations"
          :table-top-button="tableTopButton"
          :operation-fixed="true"
          :is-need-pagination="false"
          :is-need-customcolumn="true"
          :drop-custom-buttons="dropCustomButtons"
          :current-page="searchParams.pageStart"
          :page-size="searchParams.pageLimit"
          :total="total"
          @sizeChange="handleSizeChange"
          @currentChange="handleCurrentChange"
          @handleSelectionChange="handleSelectionChange"
        >
          <template #dropExportPage>
            <span @click="exportPage(scriptId,posType,searchParams.folder,0)">导出当前页</span>
          </template>
          <template #dropExportAll>
            <span @click="exportPage(scriptId,posType,searchParams.folder,1)">导出全部</span>
          </template>
        </PublicTable>
      </el-tab-pane>
      <el-tab-pane label="历史头寸">
        <HistoryPos
          v-if="activeTab=='1'"
          :query="queryParam"
        /></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import FormSearch from '@/components/formSearch/index.vue';
import PublicTable from '@/components/table/index.vue';
import posMixin from '../../../mixins/posMixin';
import HistoryPos from '../forexSpotSingleCurrencyPosition/historyPos.vue';
export default {
  components: {
    FormSearch,
    PublicTable,
    HistoryPos,
  },
  mixins: [posMixin],
  data() {
    return {
      formArr: [
        {
          type: 'selectTreeTable',
          prop: 'folder',
          span: 4,
          attrs: {
            label: '账户',
            placeholder: '请选择',
            info: { title: '账户检索' },
            clearable: false,
          },
          options: [],
        },
      ],
      loading: false,
      // table数据源
      tableData: [],
      tableInfo: {
        tableHeight: 350,
        tableTitle: this.$t('menu.forexSwapTenorPosition'),
      },
      // 表格项绑定的属性
      columns: [],
      // 操作栏自定义按钮
      operations: [],
      tableTopButton: [],
      // 搜索查询的参数
      searchParams: {
        pageStart: 1,
        pageLimit: 20,
        folder: '',
      },
      total: 0,
      scriptId: 'FxSwapPairTermPosition',
      posType: 'FxSwapPairPosition',
    };
  },
  async mounted() {
    await this.getOptions();
    await this.setUserFolder(this.posType);
    await this.getTableConfig(this.scriptId, 'FxSwapPositionDetail', this.posType);
    this.getTableList(this.scriptId, false, this.posType);
  },
  methods: {
    searchSubmit(val) {
      console.log('search结果', val);
      this.searchParams = { ...this.searchParams, ...val };
      this.getTableList(this.scriptId, false, this.posType);
    },
    resetForm() {
      // this.searchParams = {
      //   pageStart: 1,
      //   pageLimit: 20,
      //   folder: '',
      // };
    },
    outOperation(val, index, prop, num) {
      console.log(val, index, prop, num, '查询');
      this.searchParams[prop] = val;
    },
    // 页面展示条数改变事件-pageLimit
    handleSizeChange(pageLimit) {
      this.searchParams.pageLimit = pageLimit;
      this.getTableList(this.scriptId, false, this.posType);
    },
    // 页面切换事件-pageStart
    handleCurrentChange(pageStart) {
      this.searchParams.pageStart = pageStart;
      this.getTableList(this.scriptId, false, this.posType);
    },
    // 多选事件
    handleSelectionChange(val) {
      console.log('多选事件 ', val);
      this.selection = val;
    },
  },
};
</script>

<style lang="scss" scoped>
:deep(.define-btn){
  margin-right:10px;
  cursor:pointer
}
</style>
