<template>
  <div class="RCSbox event-manager 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="true"
      :table-data="tableData"
      :table-info="tableInfo"
      :table-column="columns"
      :events="events"
      operation-width="150px"
      :btn-button="operations"
      :table-top-button="tableTopButton"
      :operation-fixed="true"
      :is-need-pagination="true"
      :current-page="searchParams.pageStart"
      :page-size="searchParams.pageLimit"
      :total="total"
      :has-operation="false"
      :is-need-customcolumn="false"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
      @customColumnChange="handleCustomColumnChange"
      @handleTableTopColumnIconClick="handleTableTopColumnIconClick"
      @handleSelectionChange="handleSelectionChange"
    />
    <eventDialog
      :dialog-show.sync="dialogShow"
      :select-row="selectRow"
    />
  </div>
</template>

<script>
import FormSearch from '@/components/formSearch/index.vue';
import PublicTable from '@/components/table/index.vue';
import eventDialog from './components/eventDialog.vue';
export default {
  components: {
    FormSearch,
    PublicTable,
    eventDialog,
  },
  data() {
    return {
      dialogShow: false,
      selection: [],
      selectRow: {},
      formArr: [
        {
          type: 'input',
          prop: 'dealId',
          span: 4,
          attrs: {
            label: '交易流水号',
          },
        },
        {
          type: 'selectLabel',
          prop: 'product',
          span: 4,
          attrs: {
            label: '产品',
          },
          options: [],
        },
        {
          type: 'select',
          prop: 'typeOfEvent',
          span: 4,
          attrs: {
            label: '动作事件',
          },
          options: [],
        },
        {
          type: 'select',
          prop: 'eventStatus',
          span: 4,
          attrs: {
            label: '事件状态',
          },
          options: [],
        },
        {
          type: 'pickerDate',
          prop: 'eventDate',
          span: 4,
          attrs: {
            label: '事件日期',
            type: 'daterange',
            'value-format': 'yyyy-MM-dd',
            'range-separator': '至',
            'start-placeholder': '开始日期',
            'end-placeholder': '结束日期',
          },
        },
      ],
      // 默认值
      formData: {},
      loading: false,
      // table数据源
      tableData: [],
      tableInfo: {
        // tableHeight: document.documentElement.clientHeight - 286,
      },
      // 表格项绑定的属性
      columns: [
        {
          prop: 'dealId',
          minWidth: '200px',
          align: 'center',
          label: this.$t('field.dealId'),
          render: (h, params) => {
            return h('span', {
              //   attrs: {
              //     title: params.row.dealId,
              //   },
              domProps: {
                innerHTML: params.row.dealId,
              },
              style: {
                cursor: 'pointer',
                color: '#017BFF',
              },
              on: {
                click: () => {
                  this.selectRow = params.row;
                  this.dialogShow = true;
                },
              },
            });
          },
        },
        {
          prop: 'productStr',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.product'),
        },
        {
          prop: 'typeOfEventStr',
          minWidth: '200px',
          align: 'center',
          label: this.$t('field.typeOfEvent'),
        },
        {
          prop: 'eventStatusStr',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.eventStatus'),
        },
        {
          prop: 'eventId',
          minWidth: '160px',
          align: 'center',
          label: this.$t('field.eventId'),
        },
        {
          prop: 'blockNo',
          minWidth: '160px',
          align: 'center',
          label: this.$t('field.blockNo'),
        },
        {
          prop: 'eventDate',
          minWidth: '160px',
          align: 'center',
          label: this.$t('field.eventDate'),
        },
        // {
        //   prop: 'outsideEventId',
        //   minWidth: '160px',
        //   align: 'center',
        //   label: this.$t('form.outsideEventId'),
        // },
      ],
      // 表格行单机双击事件
      events: {
      },
      // 操作栏自定义按钮
      operations: [

      ],
      tableTopButton: [
        {
          text: this.$t('button.revoke'),
          type: 'primary',
          class: 'el-text-color',
          callback: (value) => {
            this.handleBatchRevoke(value);
          },
        },
      ],
      // 搜索查询的参数
      searchParams: {
        pageStart: 1,
        pageLimit: 20,
      },
      total: 0,
    };
  },
  async mounted() {
    this.queryPage();
    this.getOptions();
  },
  methods: {
    resetForm() {
      this.searchParams = {
        pageStart: 1,
        pageLimit: 20,
      };
    },
    searchSubmit(val) {
      console.log('search结果', val);
      this.searchParams = { ...this.searchParams, ...val };
      this.queryPage();
    },
    // 页面展示条数改变事件-pageLimit
    handleSizeChange(pageLimit) {
      this.searchParams.pageLimit = pageLimit;
      this.queryPage();
    },
    // 页面切换事件-pageStart
    handleCurrentChange(pageStart) {
      // console.log('');
      this.searchParams.pageStart = pageStart;
      this.queryPage();
    },
    // 数据列确定修改事件
    handleCustomColumnChange(val) {
      // console.log('数据列确定修改事件',val);
      // this.tableData = mockData2;
    },
    // 多选事件
    handleSelectionChange(val) {
      console.log('多选事件 ', val);
      this.selection = val;
    },
    // 自定义按钮 点击事件
    async handleBatchRevoke(val) {
      if (!this.selection.length > 0) {
        const temp = await this.$confirmAction(
          '请至少选择一条记录！',
          'warning',
          '撤销',
        );
        return temp;
      }
      this.$apis
        .batchRevoke({ ids: this.selection })
        .then((res) => {
          console.log(res, '确定回调---');
          this.$message.success('请求成功');
        });
    },
    async queryPage() {
      const params = {
        moduleName: 'dcsEventManager',
        ...this.searchParams,
      };
      if (params.eventDate && params.eventDate.length > 0) {
        params.eventDateStart = this.searchParams.eventDate[0];
        params.eventDateEnd = this.searchParams.eventDate[1];
      }
      delete params.eventDate;
      const transformedParams = {};
      for (const key in params) {
        transformedParams[`queryParam.${key}`] = params[key];
      }
      this.loading = true;
      const res = await this.$apis.getEventList(transformedParams);
      this.loading = false;
      if (res.success) {
        this.tableData = res.data.result.datals;
        this.total = res.data.result.total;
      }
    },
    getOptions() {
      this.$apis
        .queryComboxData({ 'codifierGrpCodes': 'Instrument,static_RcsTypeOfEvent,DealStatusRcs,productList' })
        .then((res) => {
          const { DealStatusRcs, Instrument, RcsTypeOfEvent, productList } = res.data.result;
          this.formArr[2].options = RcsTypeOfEvent;
          this.formArr[3].options = DealStatusRcs;
          this.formArr[1].options = productList;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.event-manager{
    height: 100%;
}
</style>
