<template>
  <el-dialog
    title="选择要复制的交易"
    :visible.sync="visible"
    width="80%"
  >
    <FormSearch
      :form-arr="formArr"
      :form-data="formData"
      @searchSubmit="searchSubmit"
      @reset="resetForm"
    />

    <PublicTable
      ref="tableRef"
      style="height: 480px"
      row-key="id"
      :table-info="{}"
      :loading="loading"
      :has-index="false"
      :need-select="false"
      :table-data="tableData"
      :table-column="columns"
      :events="events"
      :is-need-pagination="true"
      :current-page="pageNum"
      :page-size="pageSize"
      :total="total"
      :operated-string="operatedString"
      :is-need-customcolumn="false"
      :has-operation="false"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
      @customColumnChange="handleCustomColumnChange"
      @handleTableTopColumnIconClick="handleTableTopColumnIconClick"
      @handleSelectionChange="handleSelectionChange"
    />
    <!-- <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        size="small"
        @click="close"
      >取 消</el-button>
      <el-button
        size="small"
        type="primary"
        @click="close"
      >确 定</el-button>
    </span> -->
  </el-dialog>
</template>

<script>
import FormSearch from '@/components/formSearch/index.vue';

export default {
  components: {
    FormSearch,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: false,
      // form 配置
      formArr: [
        {
          prop: 'globalId',
          type: 'input',
          span: 6,
          attrs: {
            label: '外部流水号',
          },
          options: [],
        },
        {
          prop: 'dealStatus',
          type: 'select',
          span: 6,
          attrs: {
            label: '交易状态',
            multiple: true,
            'collapse-tags': true,
          },
          events: {
            focus: () => {
              const data = {
                'codifierGrpCodes': 'DealStatusRcs',
              };
              this.$apis.getPosOptions(data).then(res => {
                this.formArr[1].options = res.data.result.DealStatusRcs;
              });
            },
          },
          options: [],
        },
        {
          prop: 'dealId',
          type: 'input',
          span: 6,
          attrs: {
            label: '交易流水号',
          },
          options: [],
        },
        {
          prop: 'folder',
          type: 'select',
          span: 6,
          attrs: {
            label: '账户',
          },
          events: {
            focus: () => {
              const data = { 'q': '', 'queryParam.menuId': '', 'queryParam.productConfigGrp': '' };
              this.$apis.queryFolderQueryAuthList(data).then(res => {
                this.formArr[3].options = res.data.result.map((item) => {
                  return {
                    label: item.localName,
                    value: item.code,
                  };
                });
              });
            },
          },
          options: [],
        },
        {
          prop: 'underlying',
          type: 'input',
          span: 6,
          attrs: {
            label: '标的',
          },
          options: [],
        },
        {
          prop: 'cpty',
          type: 'select',
          span: 6,
          attrs: {
            label: '交易对手',
          },
          events: {
            focus: () => {
              const data = {
                'isInternalTrade': 'N',
                'queryParam.pageCtrl': 'true',
                'limitResultSet': 'true',
                'menuId': '',
                'productConfigGrp': '',
                'excludeBranch': 'N',
                'queryParam.pageStart': '1',
                'queryParam.pageLimit': '1000',
                'scrollFlag': '0',
                'startDate': '',
                'q': '',
              };
              this.$apis.queryCptyPage(data).then(res => {
                this.formArr[5].options = res.data.result.datals.map((item) => {
                  return {
                    label: item.localName,
                    value: item.code,
                  };
                });
              });
            },
          },
          options: [],
        },
        {
          prop: 'tradeDateStart',
          type: 'pickerDateSingle',
          span: 6,
          attrs: {
            label: '交易日期',
          },
          options: [],
        },
        {
          prop: 'tradeDateEnd',
          type: 'pickerDateSingle',
          span: 6,
          attrs: {
            label: '小于等于',
          },
          options: [],
        },
        {
          prop: 'maturityDateStart',
          type: 'pickerDateSingle',
          span: 6,
          attrs: {
            label: '到期日期',
          },
          options: [],
        },
        {
          prop: 'maturityDateEnd',
          type: 'pickerDateSingle',
          span: 6,
          attrs: {
            label: '小于等于',
          },
          options: [],
        },
      ],
      // 默认值
      formData: {},
      // table
      loading: false,
      tableData: [],
      columns: [
        {
          prop: 'dealId',
          minWidth: '100px',
          label: '交易流水号',
          fixed: 'left',
        },
        {
          prop: 'folderStr',
          minWidth: '100px',
          label: '账户',
        },
        {
          prop: 'cptyStr',
          minWidth: '120px',
          label: '交易对手',
        },
        {
          prop: 'underlying',
          minWidth: '80px',
          label: '标的',
        },
        {
          prop: 'tradeDateStr',
          minWidth: '110px',
          label: '交易日期',
        },
        {
          prop: 'valueDateStr',
          minWidth: '110px',
          label: '起息日',
        },
        {
          prop: 'maturityDateStr',
          minWidth: '110px',
          label: '到期日期',
        },
        {
          prop: 'dealStatusStr',
          minWidth: '80px',
          label: '交易状态',
        },
        {
          prop: 'sourceName',
          minWidth: '80px',
          label: '交易来源',
        },
        {
          prop: 'orginalId',
          minWidth: '90px',
          label: '外部流水号',
        },
      ],
      operatedString: '',
      pageNum: 1,
      pageSize: 50,
      total: 1,
      events: {
        'row-dblclick': (row) => {
          // 双击表格 行 触发的函数
          this.$emit('dblclick', row);
        },
      },
      // 其他字段

    };
  },
  watch: {
    value(newval) {
      this.visible = newval;
      if (this.visible) {
        this.queryPage();
      }
    },
  },
  mounted() {
  },
  methods: {
    queryPage() {
      const data = {
        'queryParam.instrument': 'FXSPOT',
        'queryParam.product': 'FXSPOT',
        'queryParam.globalId': this.formData.globalId,
        'queryParam.dealId': this.formData.dealId,
        'queryParam.folder': this.formData.folder,
        'queryParam.underlying': this.formData.underlying,
        'queryParam.cpty': this.formData.cpty,
        'queryParam.amount1': '',
        'queryParam.amount2': '',
        'queryParam.tradeDateStart': this.formData.tradeDateStart,
        'queryParam.tradeDateEnd': this.formData.tradeDateEnd,
        'queryParam.maturityDateStart': this.formData.maturityDateStart,
        'queryParam.maturityDateEnd': this.formData.maturityDateEnd,
        'queryParam.dealStatus': this.formData.dealStatus || [],
        'queryParam.pageStart': this.pageNum,
        'queryParam.pageLimit': this.pageSize,
        'queryParam.isFuzzy': 'Y',
      };
      this.$apis.getdealQueryqueryPage(data).then(res => {
        this.tableData = res.data.result.datals;
        this.total = res.data.result.total;
      });
    },
    searchSubmit(val) {
      // console.log('search结果', val);
      this.queryPage();
    },
    resetForm() {
      this.formData = {};
      this.queryPage();
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.queryPage();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.queryPage();
    },
    handleCustomColumnChange(val) {
    },
    handleTableTopColumnIconClick(val) {
      this.operatedString = '我是计算了之后的字符串';
      console.log('当前列 ', val);
    },
    handleSelectionChange(val) {
      console.log('多选事件 ', val);
    },
    close() {
      this.$emit('closeQuickSearch');
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
