<template>
  <div class="top-action-button-container">
    <!-- 左边 -->
    <div class="top-action-button-left">
      <!-- 刷新按钮 -->
      <el-button
        v-if="openRefresh"
        type="primary"
        icon="el-icon-refresh-right"
        :size="btnSize"
        @click="handleRefresh"
      />

      <!-- 按钮1 -->
      <el-button
        v-if="openBtn1"
        :disabled="disabledBtn1"
        :size="btnSize"
        :type="typeBtn1"
        :plain="plainBtn1"
        @click="handleButton1"
      >
        <i v-if="!isSvgBtn1" :class="iconBtn1" />
        <svg-icon v-else :icon-class="iconBtn1" style="margin-right: 6px" />
        <span v-if="textBtn1.length > 0">{{ textBtn1 }}</span>
      </el-button>

      <el-button
        v-if="openBtn2"
        :disabled="disabledBtn2"
        :size="btnSize"
        :type="typeBtn2"
        :plain="plainBtn2"
        @click="handleButton2"
      >
        <i v-if="!isSvgBtn2" :class="iconBtn2" />
        <svg-icon v-else :icon-class="iconBtn2" style="margin-right: 6px" />
        <span v-if="textBtn2.length > 0">{{ textBtn2 }}</span>
      </el-button>


      <!-- 按钮3 -->
      <el-button
        v-if="openBtn3"
        :disabled="disabledBtn3"
        :size="btnSize"
        :type="typeBtn3"
        :plain="plainBtn3"
        @click="handleButton3"
      >
        <i v-if="!isSvgBtn3" :class="iconBtn3" />
        <svg-icon v-else :icon-class="iconBtn3" style="margin-right: 6px" />
        <span v-if="textBtn3.length > 0">{{ textBtn3 }}</span>
      </el-button>

      <!-- 按钮4 -->
      <el-button
        v-if="openBtn4"
        :disabled="disabledBtn4"
        :size="btnSize"
        :type="typeBtn4"
        :plain="plainBtn4"
        @click="handleButton4"
      >
        <i v-if="!isSvgBtn4" :class="iconBtn4" />
        <svg-icon v-else :icon-class="iconBtn4" style="margin-right: 6px" />
        <span v-if="textBtn4.length > 0">{{ textBtn4 }}</span>
      </el-button>




            <!-- 下拉按钮 -->
      <el-dropdown v-if="openBtn5" style="margin-left: 10px">
        <!-- 按钮2 -->
        <el-button
          :disabled="disabledBtn5"
          :size="btnSize"
          :type="typeBtn5"
          :plain="plainBtn5"
          @click="handleButton5"
        >
          <span class="el-dropdown-link">
            <i v-if="!isSvgBtn5" :class="iconBtn5" />
            <svg-icon v-else :icon-class="iconBtn5" style="margin-right: 6px" />
            <span v-if="textBtn5.length > 0">{{ textBtn5 }}</span>
            <i class="el-icon-caret-bottom" style="margin-left: 5px" />
          </span>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item disabled>双皮奶</el-dropdown-item>
          <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

 
  </div>
</template>

<script>
/**
 *  数据表格上面的操作按钮
 *  openRefresh：   左边是否打开刷新按钮
 *  openSearch：    右边的搜索按钮是否展开
 *  btnSize：       button 大小
 *
 *  添加按钮参数
 *  openAdd：       是否打开添加
 *  addBtnType：    添加按钮的类型，有primary，success...
 *  addBtnIcon：    添加按钮的icon值，参考element icon
 *  addBtnText：    添加按钮的文字
 *
 *  删除按钮参数
 *  openDelete：    是否打开删除
 *  deleteBtnType： 删除按钮的类型，有primary，success...
 *  deleteBtnIcon： 删除按钮的icon值，参考element icon
 *  deleteBtnText： 删除按钮的文字
 *
 */
export default {
  props: {
    // 基础设置
    openSearch: {
      type: Boolean,
      default: true,
    },
    openRefresh: {
      type: Boolean,
      default: true,
    },
    btnSize: {
      type: String,
      default: "mini",
    },
    // 按钮1
    openBtn1: {
      type: Boolean,
      default: false,
    },
    isSvgBtn1: {
      type: Boolean,
      default: false,
    },
    typeBtn1: {
      type: String,
      default: "primary",
    },
    iconBtn1: {
      type: String,
      default: "el-icon-plus",
    },
    textBtn1: {
      type: String,
      default: "",
    },
    disabledBtn1: {
      type: Boolean,
      default: false,
    },
    plainBtn1: {
      type: Boolean,
      default: false,
    },
    // 按钮2
    openBtn2: {
      type: Boolean,
      default: false,
    },
    isSvgBtn2: {
      type: Boolean,
      default: false,
    },
    typeBtn2: {
      type: String,
      default: "primary",
    },
    iconBtn2: {
      type: String,
      default: "el-icon-plus",
    },
    textBtn2: {
      type: String,
      default: "",
    },
    disabledBtn2: {
      type: Boolean,
      default: false,
    },
    plainBtn2: {
      type: Boolean,
      default: false,
    },
    // 按钮3
    openBtn3: {
      type: Boolean,
      default: false,
    },
    isSvgBtn3: {
      type: Boolean,
      default: false,
    },
    typeBtn3: {
      type: String,
      default: "primary",
    },
    iconBtn3: {
      type: String,
      default: "el-icon-plus",
    },
    textBtn3: {
      type: String,
      default: "",
    },
    disabledBtn3: {
      type: Boolean,
      default: false,
    },
    plainBtn3: {
      type: Boolean,
      default: false,
    },
    // 按钮4
    openBtn4: {
      type: Boolean,
      default: false,
    },
    isSvgBtn4: {
      type: Boolean,
      default: false,
    },
    typeBtn4: {
      type: String,
      default: "primary",
    },
    iconBtn4: {
      type: String,
      default: "el-icon-plus",
    },
    textBtn4: {
      type: String,
      default: "",
    },
    disabledBtn4: {
      type: Boolean,
      default: false,
    },
    plainBtn4: {
      type: Boolean,
      default: false,
    },
    // 按钮5
    openBtn5: {
      type: Boolean,
      default: false,
    },
    isSvgBtn5: {
      type: Boolean,
      default: false,
    },
    typeBtn5: {
      type: String,
      default: "primary",
    },
    iconBtn5: {
      type: String,
      default: "el-icon-plus",
    },
    textBtn5: {
      type: String,
      default: "",
    },
    disabledBtn5: {
      type: Boolean,
      default: false,
    },
    plainBtn5: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleRefresh() {
      this.$emit("handle-refresh");
    },
    handleSearch() {
      this.$emit("handle-search");
    },
    handleButton1() {
      this.$emit("handle-button1");
    },
    handleButton2() {
      this.$emit("handle-button2");
    },
    handleButton3() {
      this.$emit("handle-button3");
    },
    handleButton4() {
      this.$emit("handle-button4");
    },
    handleButton5() {
      this.$emit("handle-button5");
    },
  },
};
</script>

<style lang="scss" scoped>
// 操作按钮
.top-action-button-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.el-dropdown-link {
  color: #fff;
}
</style>
