<template>
  <div
    :class="isStatus || isStatuser ? 'flex' : 'flex-end'"
    class="data-table-btn"
  >
    <div v-if="isStatus || isStatuser" class="vStatus">
      <slot name="header" />
    </div>
    <div v-if="isBtn" class="rb">
      <template v-if="isSearch">
        <!-- <div class="serlog">
          <div class="log"></div>
        </div> -->
        <!-- <el-input
          v-model="input"
          class="inputcas"
          placeholder="请输入您要搜索的内容"
          clearable
        /> -->
        <Search @clear="clear" @search="search" />
        <!-- <el-button type="danger" size="default" class="br L12">搜索</el-button> -->
      </template>
      <template v-if="isPreser">
        <el-button
          type="danger"
          size="default"
          class="br L12"
          @click="preserBtn"
          >保存</el-button
        >
      </template>
      <template v-if="isAuth">
        <el-button size="default" plain class="btn-white br" @click="addBbut()"
          >新增</el-button
        >
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
import Search from "@/components/search/index.vue";
import { ElMessage } from "element-plus";
const props = defineProps({
  //是否显示新增按钮
  isBtn: {
    type: Boolean,
    default: true,
  },
  //是否启用权限按钮
  isAuth: {
    type: Boolean,
    default: false,
  },
  //是否显示状态
  isStatus: {
    type: Boolean,
    default: false,
  },
  //是否显示名称
  isStatuser: {
    type: Boolean,
    default: false,
  },
  //是否显示搜索
  isSearch: {
    type: Boolean,
    default: false,
  },
  //是否显示保存
  isPreser: {
    type: Boolean,
    default: false,
  },
});
//搜索内容
const input = ref("");
const emits = defineEmits(["addForm", "preserForm"]);
const addBbut = () => {
  emits("addForm");
};
const search = (val) => {
  ElMessage.success(`搜索成功：${val}`);
};
const clear = () => {
  ElMessage.success(`清除`);
};
//保存
const preserBtn = () => {
  emits("preserForm");
};
</script>
<style lang="scss" scoped>
.data-table-btn {
  line-height: 32px;
  margin-bottom: 20px;
}
.inputcas {
  width: 240px;
  height: 32px;
  background: #ffffff;
  // border: 1px solid #d2d6df;
  // box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border: none;
  // box-shadow: 0 0 0 0;
}
::v-deep .el-input__wrapper {
  box-shadow: none;
}
.rb {
  display: flex;
  align-items: center;
}
.serlog {
  width: 32px;
  height: 32px;
  background: #fff;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  display: flex;
  align-items: center;
  > .log {
    width: 14px;
    height: 14px;
    background: url("../../assets/header/ic_search_top.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 16px;
  }
}
</style>
