<template>
  <div class="RCSbox common-page">
    <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"
      :current-page="searchParams.pageStart"
      :page-size="searchParams.pageLimit"
      :total="total"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
      @handleSelectionChange="handleSelectionChange"
    />
  </div>
</template>

<script>
import FormSearch from '@/components/formSearch/index.vue';
import PublicTable from '@/components/table/index.vue';
export default {
  components: {
    FormSearch,
    PublicTable,
  },
  data() {
    return {
      formArr: [
        {
          type: 'selectTree',
          prop: 'folder',
          span: 6,
          attrs: {
            label: '账户',
            props: {
              label: 'text',
              children: 'children',
            },
          },
          options: [],
        },
        {
          type: 'select',
          prop: 'currency',
          span: 6,
          attrs: {
            label: '货币',
            multiple: true,
          },
          options: [],
        },
      ],
      loading: false,
      // table数据源
      tableData: [],
      tableInfo: {
        tableHeight: 350,
      },
      // 表格项绑定的属性
      columns: [],
      // 操作栏自定义按钮
      operations: [],
      tableTopButton: [],
      // 搜索查询的参数
      searchParams: {
        pageStart: 1,
        pageLimit: 20,
        folder: '',
      },
      total: 0,
    };
  },
  async mounted() {
    await this.getOptions();
    this.getTableList();
  },
  methods: {
    searchSubmit(val) {
      console.log('search结果', val);
      this.searchParams = { ...this.searchParams, ...val };
      this.getTableList();
    },
    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();
    },
    // 页面切换事件-pageStart
    handleCurrentChange(pageStart) {
      this.searchParams.pageStart = pageStart;
      this.getTableList();
    },
    // 多选事件
    handleSelectionChange(val) {
      console.log('多选事件 ', val);
      this.selection = val;
    },
    async getOptions() {
      await this.$apis.getPosOptions({ 'codifierGrpCodes': 'folderTreeAuthWithGrp,static_currencies' }).then(res => {
        this.formArr[0].options = res.data.result.folderTreeAuthWithGrp;
        this.searchParams.folder = res.data.result.folderTreeAuthWithGrp[0].id;
        this.formArr[1].options = res.data.result.currencies;
      });
    },
    getTableList() {
      const params = {
        posType: 'PV01Position',
        ...this.searchParams,
      };
      this.loading = true;
      this.$apis.getPv01DataList(params).then(res => {
        this.tableData = res.data.result.datals;
        this.total = res.data.result.total;
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
