<template>
  <el-dialog
    title="附件管理"
    :visible.sync="visible"
    width="960px"
    height="480px"
  >
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane
        label="用户管理"
        name="first"
      >用户管理</el-tab-pane>
      <el-tab-pane
        label="配置管理"
        name="second"
      >配置管理</el-tab-pane>
    </el-tabs>
    <PublicTable
      ref="tableRef"
      style="height: 480px"
      row-key="id"
      :loading="loading"
      :has-index="false"
      :need-select="false"
      :table-top-button="tableTopButton"
      :table-data="tableData"
      :table-info="tableInfo"
      :table-column="columns"
      :events="events"
      :is-need-pagination="false"
      :current-page="pageNum"
      :page-size="pageSize"
      :total="total"
      :operated-string="operatedString"
      :is-need-customcolumn="false"
      :is-need-import="true"
      :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>

export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      activeName: 'first',
      visible: false,
      // table
      loading: false,
      tableTopButton: [],
      tableData: [],
      tableInfo: {
        fileConfig: {
          uploadParams: {
            moduleName: 'dcsDailyTradeQuery',
            param: { 'multiple': false },
          },
        },
      },
      columns: [
        {
          prop: 'dealId',
          minWidth: '100px',
          label: '附件编号',
        },
        {
          prop: 'folderStr',
          minWidth: '100px',
          label: '附件名称',
        },
        {
          prop: 'cptyStr',
          minWidth: '120px',
          label: ' 创建时间 ',
        },
        {
          prop: 'underlying',
          minWidth: '80px',
          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: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    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;
      });
    },
    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>
