<template>
  <vxe-toolbar ref="toolbarRef" class="define-toolbar">
    <template #tools>
      <div class="define-toolbar-warp">
        <vxe-button
          ref="customBtnRef"
          type="text"
          icon="vxe-icon-custom-column"
          class="type--button is--circle define-custom"
          @click="hanleOpenCustom"
        />
        <div class="vxe-table-custom-wrapper" ref="showCustomRef">
          <ul class="vxe-table-custom--header">
            <li class="vxe-table-custom--option">
              <vxe-checkbox
                v-model="allCheckbox"
                class="w-100"
                :indeterminate="indeterminate"
              >
                全选
              </vxe-checkbox>
            </li>
          </ul>
          <ul class="vxe-table-custom--body">
            <li
              class="vxe-table-custom--option"
              v-for="(item, index) in columnShowList"
              :key="index"
            >
              <vxe-checkbox v-model="item.visible" class="w-100">
                {{ item.title }}
              </vxe-checkbox>
            </li>
          </ul>
          <div class="vxe-table-custom--footer">
            <button class="vxe-table-btn--confirm" @click="hanleConfirm">确认</button
            ><button class="vxe-table-btn--reset" @click="hanleReset">还原</button>
          </div>
        </div>
      </div>
    </template>
  </vxe-toolbar>
</template>
<script lang="ts" setup>
import { ref, watch, unref, computed, onMounted, onUnmounted } from "vue";
import type { VxeGridPropTypes, VxeTableDataRow } from "vxe-table";

const props = defineProps<{
  columns?: VxeGridPropTypes.Columns<VxeTableDataRow>;
}>();
const emit = defineEmits(["onToolbarConfirm", "onToolbarReset"]);
const allCheckbox = ref(true);
const showCustom = ref(false);
const showCustomRef = ref();
const customBtnRef = ref()
const columnShowList = ref<VxeGridPropTypes.Columns<VxeTableDataRow>>([]);
// 监听表格列配置
watch(
  () => props.columns,
  (columns) => {
    const list = columns || [];
    const columnFilter = list.filter((item) => {
      if (item.title === "操作") return false;
      return item.title;
    });
    columnShowList.value = columnFilter.map((item2) => {
      if (!item2.visible) {
        item2.visible = false;
      }
      return item2;
    });
  },
  {
    immediate: true,
  }
);
// 是否全选
const indeterminate = computed(() => {
  const isEvery = columnShowList.value.every((item) => item.visible);
  allCheckbox.value = isEvery;
  return !isEvery;
});
// 打开列表
const hanleOpenCustom = () => {
  showCustom.value = !showCustom.value;
  const showCustomDom = unref(showCustomRef);
  showCustomDom && unref(showCustom)
    ? (showCustomDom.style.display = "block")
    : (showCustomDom.style.display = "none");
};
// 确认列表
const hanleConfirm = () => {
  hanleOpenCustom()
  const columns = unref(columnShowList);
  emit("onToolbarConfirm", columns);
};
// 重置列表
const hanleReset = () => {
  hanleOpenCustom();
  const columns = unref(columnShowList).map((item) => {
    item.visible = true;
    return item;
  });
  emit("onToolbarReset", columns);
};
function customButton(event) {
  const classs = event.target.classList[0];
  const isDom = unref(showCustomRef).querySelector(`.${classs}`);
  const customBtn = unref(customBtnRef).$el && unref(customBtnRef).$el.querySelector(`.${classs}`);
  // 如果点击的不是按钮，隐藏按钮
  if (!isDom && !customBtn) {
      const showCustomDom = unref(showCustomRef)
      showCustomDom && (showCustomDom.style.display = 'none')
      showCustom.value = false
  }
}
onMounted(() => {
  document.addEventListener("mousedown", customButton);
});
onUnmounted(() => {
  document.removeEventListener("mousedown", customButton);
});
</script>
<style lang="scss" scoped>
.define-toolbar {
  padding-top: 0;
  .w-100 {
    width: 100%;
  }
  .define-toolbar-warp {
    position: relative;
    :deep(.vxe-table-custom-wrapper) {
      top: 38px;
    }
    :deep(.vxe-table-custom--body) {
      max-height: 349px;
    }
  }
}
</style>
