<template>
  <div class="RCSbox send-exception 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"
    />
    <JsonDialog
      :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 JsonDialog from './components/jsonDialog.vue';
export default {
  components: {
    FormSearch,
    PublicTable,
    JsonDialog,
  },
  data() {
    return {
      dialogShow: false,
      selection: [],
      selectRow: {},
      tableInfo: {
        // tableHeight: document.documentElement.clientHeight - 286,
      },
      formArr: [
        {
          type: 'input',
          prop: 'dealId',
          span: 4,
          attrs: {
            label: '交易流水号',
          },
        },

        {
          type: 'pickerDate',
          prop: 'sendDate',
          span: 4,
          attrs: {
            label: '发送日期',
            type: 'daterange',
            'value-format': 'yyyy-MM-dd',
            'range-separator': '至',
            'start-placeholder': '开始日期',
            'end-placeholder': '结束日期',
          },
        },
        {
          type: 'select',
          prop: 'sendStatus',
          span: 4,
          attrs: {
            label: '发送状态',
          },
          options: [],
        },
      ],
      // 默认值
      formData: {},
      loading: false,
      // table数据源
      tableData: [],
      // 表格项绑定的属性
      columns: [
        {
          prop: 'dealId',
          minWidth: '200px',
          align: 'center',
          label: this.$t('field.dealId'),
        },
        {
          prop: 'eventStr',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.event'),
        },
        {
          prop: 'sendService',
          minWidth: '200px',
          align: 'center',
          label: this.$t('field.sendService'),
        },
        {
          prop: 'acceptService',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.acceptService'),
        },
        {
          prop: 'sendDateStr',
          minWidth: '160px',
          align: 'center',
          label: this.$t('field.sendDate'),
        },
        {
          prop: 'sendTimeStr',
          minWidth: '160px',
          align: 'center',
          label: this.$t('field.sendingTime'),
        },
        {
          prop: 'sendStatusStr',
          minWidth: '160px',
          align: 'center',
          label: this.$t('field.sendStatus'),
        },
        {
          prop: 'exceptionCause',
          minWidth: '160px',
          align: 'center',
          label: this.$t('field.exceptionCause'),
        },

        {
          minWidth: '100px',
          align: 'center',
          label: '报文内容',
          render: (h, params) => {
            return h('Icon', {
              attrs: {
                class: 'el-icon-edit',
              },
              style: {
                cursor: 'pointer',
                color: '#017BFF',
                fontSize: '16px',
              },
              on: {
                click: () => {
                  this.dialogShow = true;
                  this.selectRow = params.row;
                },
              },
            });
          },
        },
      ],
      // 表格行单机双击事件
      events: {
      },
      // 操作栏自定义按钮
      operations: [

      ],
      tableTopButton: [
        {
          text: this.$t('button.sendAgain'),
          type: 'primary',
          class: 'el-text-color',
          callback: (value) => {
            this.handleBatchSendAgain(value);
          },
        },
      ],
      // 搜索查询的参数
      searchParams: {
        pageStart: 1,
        pageLimit: 20,
        sendStatus: '2',
      },
      total: 0,
    };
  },
  async mounted() {
    this.queryPage();
    this.getOptions();
  },
  methods: {
    resetForm() {
      this.searchParams = {
        pageStart: 1,
        pageLimit: 20,
        sendStatus: '2',
      };
    },
    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 handleBatchSendAgain(val) {
      if (!this.selection.length > 0) {
        const temp = await this.$confirmAction(
          '请至少选择一条记录！',
          'warning',
          '补发',
        );
        return temp;
      }
      const isContinue = this.$confirmAction('确定要执行该操作吗？',
        'warning',
        '提示');
      if (isContinue) {
        this.$apis
          .batchSendAgain({ 'queryParam.list': this.selection })
          .then((res) => {
            console.log(res, '确定回调---');
            this.$message.success('请求成功');
            this.queryPage();
          });
      }
    },
    async queryPage() {
      const params = {
        moduleName: 'pubSendExceptionManager',
        sendService: 'DCS',
        ...this.searchParams,
      };
      if (params.sendDate && params.sendDate.length > 0) {
        params.sendDateStart = this.searchParams.sendDate[0];
        params.sendDateEnd = this.searchParams.sendDate[1];
      }
      delete params.sendDate;
      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': 'SendExceptionStatus' })
        .then((res) => {
          const { SendExceptionStatus } = res.data.result;
          this.formArr[2].options = SendExceptionStatus;
        });
    },
  },
};
</script>

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