<template>
  <div>
    <el-form-item label-width="0">
      <el-divider class="custom-divider">列表导出设置</el-divider>
    </el-form-item>
    <el-form-item label="导出文件名称">
      <el-input v-model="optionModel.exportFileName"></el-input>
    </el-form-item>
    <el-form-item label="表格唯一名称">
      <el-input v-model="optionModel.tableRef"></el-input>
    </el-form-item>
    <el-form-item label="导出列表显示图片">
      <el-switch v-model="optionModel.showImageAtTable" @change="changeShowImageAtTable"></el-switch>
    </el-form-item>
    <el-form-item label="导出每页查询数量">
      <base-input-number v-model="optionModel.exportPageSize"
                         :max="optionModel.showImageAtTable?150:1000"></base-input-number>
    </el-form-item>
    <el-form-item label="导出参数" label-width="150px">
      <a href="javascript:void(0);" class="a-link link-oneLind"
         @click="editEventHandler('tableExportParam', eventParams)">
        <span>{{ optionModel.tableExportParam }}</span>
        <i class="el-icon-edit"></i>
      </a>
    </el-form-item>
  </div>
</template>

<script>
import i18n from "../../../../../../components/xform/utils/i18n";
import eventMixin
  from "../../../../../../components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin";

export default {
  name: "table-export-button-editor",
  mixins: [i18n, eventMixin],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  data() {
    return {
      eventParams: [],
    };
  },
  methods: {
    changeShowImageAtTable(val) {
      if (val) {
        let exportPageSize = this.optionModel.exportPageSize || 0;
        if (exportPageSize > 150) {
          this.optionModel.exportPageSize = 150
        }
      }
    }
  }
};
</script>

<style scoped></style>
