<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,
    },
  },
  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]"
        >新增</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>
