<script>
import RightToolbar from "@/components/RightToolbar/index.vue";
export default {
  watch: {
    showSearch: {
      handler: function (val) {
        this.$emit("update:showSearch", val);
      },
    },
  },
  components: {
    RightToolbar,
  },
  props: {
    columns: {
      type: Array,
      default: [],
    },
    filterOptions: {
      type: Array,
      default: [],
    },
    showSearch: {
      type: Boolean,
      default: true,
    },
    showAdd: {
      type: Boolean,
      default: true,
    },
    showEdit: {
      type: Boolean,
      default: true,
    },
    showDelete: {
      type: Boolean,
      default: true,
    },
    showExport: {
      type: Boolean,
      default: false,
    },
    showImport: {
      type: Boolean,
      default: false,
    },
    permission: {
      type: Object,
      default: {},
    },
    single: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    hideRightToolbar: {
      type: Boolean,
      default: true,
    },
    showFilter: {
      type: Boolean,
      default: false,
    },
    addBtnName: {
      type: String,
      default: '新增',
    },
  },
  methods: {
    handleAdd() {
      this.$emit("add");
    },
    handleEdit() {
      this.$emit("edit");
    },
    handleDelete() {
      this.$emit("delete");
    },
    handleExport() {
      this.$emit("export");
    },
    handleImport() {
      this.$emit("import");
    },
    queryTable() {
      this.$emit("queryTable");
    },
  },
};
</script>

<template>
  <el-row :gutter="10" class="mb8">
    <slot name="beforeTop"></slot>
    <el-col :span="1.5" v-if="showAdd">
      <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="[permission.add]">{{
    addBtnName ? addBtnName : "新增"
  }}</el-button>
    </el-col>
    <el-col :span="1.5" v-if="showEdit">
      <el-button type="success" plain icon="Edit" :disabled="single" @click="handleEdit"
        v-hasPermi="[permission.edit]">修改</el-button>
    </el-col>
    <el-col :span="1.5" v-if="showDelete">
      <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
        v-hasPermi="[permission.delete]">删除</el-button>
    </el-col>
    <el-col :span="1.5" v-if="showImport">
      <el-button type="info" plain icon="Upload" @click="handleImport" v-hasPermi="[permission.import]">导入</el-button>
    </el-col>
    <el-col :span="1.5" v-if="showExport">
      <el-button type="warning" plain icon="Download" @click="handleExport"
        v-hasPermi="[permission.export]">导出</el-button>
    </el-col>
    <slot name="afterTop"></slot>
    <RightToolbar v-if="hideRightToolbar" v-model:showSearch="showSearch" @queryTable="queryTable" :columns="columns"
      :filterOptions="filterOptions" :showFilter="showFilter"></RightToolbar>
  </el-row>
</template>

<style scoped>
.control-box {
  display: flex;
  align-items: center;
  /* justify-content: flex-end; */
  margin: 10px 15px 10px 5px;
}
</style>
