<template>
  <!-- 通用搜索 -->
  <ComSearch v-show="buttons.includes('comSearch') && state.showComSearch" />

  <!-- 操作按钮组 -->
  <div v-bind="$attrs" class="table-header">
    <el-tooltip v-if="buttons.includes('add') && auth('add')" content="添加" placement="top">
      <el-button v-blur @click="onAction('add')" class="table-header-operate" type="primary">
        <Icon name="fa fa-plus" />
        <span class="table-header-operate-text">添加</span>
      </el-button>
    </el-tooltip>
    <el-tooltip v-if="buttons.includes('edit') && auth('edit')" content="编辑选中的行" placement="top">
      <el-button v-blur @click="onAction('edit')" :disabled="!enableBatchOpt" class="table-header-operate"
                 type="primary">
        <Icon name="fa fa-pencil" />
        <span class="table-header-operate-text">编辑</span>
      </el-button>
    </el-tooltip>
    <el-popconfirm v-if="buttons.includes('delete') && auth('del')" @confirm="onAction('delete')"
                   confirm-button-text="删除" cancel-button-text="取消" confirmButtonType="danger"
                   title="确定删除选中记录？">
      <template #reference>
        <div class="mlr-12">
          <el-tooltip content="删除选中行" placement="top">
            <el-button v-blur :disabled="!enableBatchOpt" class="table-header-operate" type="danger">
              <Icon name="fa fa-trash" />
              <span class="table-header-operate-text">删除</span>
            </el-button>
          </el-tooltip>
        </div>
      </template>
    </el-popconfirm>
    <el-tooltip v-if="buttons.includes('unfold')" :content="baTable.table.expandAll ? '收起' : '展开所有子菜单'"
                placement="top">
      <el-button v-blur @click="changeUnfold" class="table-header-operate"
                 :type="baTable.table.expandAll ? 'danger' : 'warning'">
        <span class="table-header-operate-text">{{ baTable.table.expandAll ? "收起所有" : "展开所有" }}</span>
      </el-button>
    </el-tooltip>

    <!-- slot -->
    <slot></slot>

    <!-- 右侧搜索框和工具按钮 -->
    <div class="table-search">
      <el-input v-model="state.quickSearch" class="xs-hidden" @input="debounce(onSearchInput, 500)()"
                :placeholder="quickSearchPlaceholder ? quickSearchPlaceholder : '搜索'" />

      <div class="flex align-center ml-20">
        <div class="mr-15">
          <el-tooltip content="密度" placement="top">
            <el-dropdown trigger="click" @command="onDrapDownSelect" style="position: relative;top: 4px">
              <Icon name="fa fa-align-left" color="#515a6e" size="14" />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="(item,idx) in state.tableStyle" :key="idx"
                                    :command="item.id"
                                    :style="{'color':item.isSelect?'#409eff':'#000'}">{{ item.title }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-tooltip>
        </div>
        <div class="mr-15">
          <el-tooltip v-if="buttons.includes('refresh')" content="刷新" placement="top">
            <Icon name="fa fa-repeat" color="#515a6e" size="14"
                  @click="onAction('refresh', { loading: true })" />
          </el-tooltip>
        </div>
        <div class="mr-15">
          <el-tooltip content="列设置" placement="top">
            <el-dropdown :hide-on-click="true" trigger="click" style="position: relative;top: 4px">
              <Icon name="fa fa-sliders" color="#515a6e" size="14" />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="(item, index) in baTable.table.column" :key="index">
                    <el-checkbox v-if="item.prop" @change="onChangeShowColumn($event, item.prop!)"
                                 :checked="!item.show"
                                 :model-value="item.show" size="small" :label="item.label" />
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-tooltip>
        </div>
        <div class="mr-15" v-if="buttons.includes('comSearch')">
          <el-tooltip :disabled="state.showComSearch" content="展开通用搜索" placement="top">
            <Icon name="fa fa-search" color="#515a6e" size="14"
                  @click="state.showComSearch = !state.showComSearch" />
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed, inject, ref, onMounted } from "vue";
import { debounce, auth } from "/@/utils/common";
import type baTableClass from "/@/utils/baTable";
import ComSearch from "/@/components/table/comSearch/index.vue";

const baTable = inject("baTable") as baTableClass;
const isFullScreen = ref(false);

interface Props {
  buttons: HeaderOptButton[];
  quickSearchPlaceholder?: string;
}

const props = withDefaults(defineProps<Props>(), {
  buttons: () => {
    return ["refresh", "add", "edit", "delete"];
  },
  quickSearchPlaceholder: ""
});

const itemStyle = computed(() => {

});

const state = reactive({
  quickSearch: "",
  showComSearch: false,
  tableStyle: [
    { id: 1, title: "默认", isSelect: true },
    { id: 2, title: "宽松", isSelect: false },
    { id: 3, title: "紧凑", isSelect: false }
  ]
});

onMounted(() => {
  baTable.table.rowStyle = "";
  baTable.table.headerRowStyle = "";
});

const enableBatchOpt = computed(() => (baTable.table.selection!.length > 0 ? true : false));

const emits = defineEmits<{
  (e: "action", event: string, data: anyObj): void
}>();

const onAction = (event: string, data: anyObj = {}) => {
  emits("action", event, data);
};

const changeUnfold = () => {
  emits("action", "unfold", { unfold: !baTable.table.expandAll });
};

const onSearchInput = () => {
  emits("action", "quick-search", { keyword: state.quickSearch });
};

const onChangeShowColumn = (value: boolean, field: string) => {
  emits("action", "change-show-column", { field: field, value: value });
};

const onDrapDownSelect = (command: string | number | object) => {
  state.tableStyle.map((item) => {
    item.isSelect = false;
  });
  state.tableStyle = state.tableStyle.filter((item) => {
    if (item.id == command) {
      item.isSelect = true;
    }
    return item;
  });

  if (command == 1) {
    baTable.table.rowStyle = "";
    baTable.table.headerRowStyle = "";
  }

  if (command == 2) {
    baTable.table.rowStyle = "table-row-loose";
    baTable.table.headerRowStyle = "table-header-row-loose";
  }

  if (command == 3) {
    baTable.table.rowStyle = "table-row-compact";
    baTable.table.headerRowStyle = "table-header-row-compact";
  }
};
</script>

<style scoped lang="scss">
.table-header {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  background-color: #ffffff;
  border: 1px solid #f6f6f6;
  border-bottom: none;
  padding: 13px 15px;
  font-size: 14px;

  .table-header-operate-text {
    margin-left: 6px;
  }

  .table-header-operate .icon {
    font-size: 14px !important;
    color: #ffffff !important;
  }
}

.mlr-12 {
  margin-left: 12px;
}

.mlr-12 + .el-button {
  margin-left: 12px;
}

.table-search {
  display: flex;
  margin-left: auto;
}

.table-search-button-group {
  display: flex;
  margin-left: 12px;

  button:focus,
  button:active {
    background-color: #ffffff;
  }

  button:hover {
    background-color: #dcdfe6;
  }

  .table-search-button-item {
    margin-right: -1px;
  }

  .table-search-button-item:first-child {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
}

.selectStyle {
  background-color: #409eff30 !important;
  color: #409eff !important;
}
</style>
