<template>
  <el-popover
    placement="bottom-end"
    trigger="click"
    :visible="showHeaderSet"
    :width="popoverWidth"
  >
    <div class="page_popover">
      <div class="popover_content">
        <div class="vertical_checkbox_group">
          <template v-for="item in showHeaderData" :key="item.prop">
            <el-checkbox v-model="item.display" :disabled="item.disable">
              {{ item.label }}
            </el-checkbox>
          </template>
        </div>
      </div>
      <div class="popover_button">
        <el-button @click="showHeaderSet = !showHeaderSet">取消</el-button>
        <el-button
          type="primary"
          @click="SetEnterHeaderData()"
          :loading="loading"
        >
          确定
        </el-button>
      </div>
    </div>
    <template #reference>
      <el-button
        class="button_set_header"
        @click="showHeaderSet = !showHeaderSet"
      >
        <img src="@/assets/icon/header_icon.webp" />设置表头
      </el-button>
    </template>
  </el-popover>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";

// ================= 类型定义 =================
interface HeaderItem {
  label: string;
  prop: string;
  display: boolean;
  disable: boolean;
  isShow: boolean;
  type: string; // '0' 静态  '1' 动态  '2' 子表头
}

interface HeaderSourceItem {
  label: string;
  prop: string;
  display: boolean;
}

interface HeaderData {
  static?: HeaderSourceItem[];
  dynamisc?: HeaderSourceItem[];
  child?: HeaderSourceItem[];
}

interface HeaderResult {
  static: Pick<HeaderItem, "display" | "label" | "prop">[];
  dynamisc: Pick<HeaderItem, "display" | "label" | "prop">[];
  child: Pick<HeaderItem, "display" | "label" | "prop">[];
}

// ================= Props & Emits =================
const props = withDefaults(
  defineProps<{
    data: HeaderData;
    notEditable?: string[];
    isShowStatic?: boolean;
    isShowDynamisc?: boolean;
    isShowChild?: boolean;
  }>(),
  {
    data: () => ({
      static: [],
      dynamisc: [],
      child: [],
    }),
    notEditable: () => [],
    isShowStatic: true,
    isShowDynamisc: true,
    isShowChild: true,
  },
);

const emit = defineEmits<{
  (e: "SetEnterHeaderData", data: HeaderResult): void;
}>();

// ================= 响应式数据 =================
const headerData = ref<HeaderItem[]>([]);
const showHeaderSet = ref(false);
const loading = ref(false);

// ================= 计算属性 =================
const showHeaderData = computed(() =>
  headerData.value.filter((item) => item.isShow),
);

const popoverWidth = computed(() => {
  return `${Math.ceil(showHeaderData.value.length / 10) * 130}px`;
});

// ================= 监听器 =================
watch(
  () => props.data,
  (newVal) => {
    if (newVal) {
      SetAllHeaderData();
    }
  },
);

// ================= 方法 =================
const SetAllHeaderData = () => {
  headerData.value = [];
  loading.value = false;

  if (props.data.static && props.data.static.length > 0) {
    props.data.static.forEach((item) => {
      headerData.value.push({
        label: item.label,
        prop: item.prop,
        display: item.display,
        disable: props.notEditable.indexOf(item.prop) > -1,
        isShow: props.isShowStatic,
        type: "0",
      });
    });
  }

  if (props.data.dynamisc && props.data.dynamisc.length > 0) {
    props.data.dynamisc.forEach((item) => {
      headerData.value.push({
        label: item.label,
        prop: item.prop,
        display: item.display,
        disable: props.notEditable.indexOf(item.prop) > -1,
        isShow: props.isShowDynamisc,
        type: "1",
      });
    });
  }

  if (props.data.child && props.data.child.length > 0) {
    props.data.child.forEach((item) => {
      headerData.value.push({
        label: item.label,
        prop: item.prop,
        display: item.display,
        disable: props.notEditable.indexOf(item.prop) > -1,
        isShow: props.isShowChild,
        type: "2",
      });
    });
  }
};
const SetEnterHeaderData = () => {
  loading.value = true;

  const staticList: HeaderResult["static"] = [];
  const dynamiscList: HeaderResult["dynamisc"] = [];
  const childList: HeaderResult["child"] = [];

  headerData.value.forEach((item) => {
    const resultItem = {
      display: item.display,
      label: item.label,
      prop: item.prop,
    };
    if (item.type === "0") staticList.push(resultItem);
    if (item.type === "1") dynamiscList.push(resultItem);
    if (item.type === "2") childList.push(resultItem);
  });

  const isAllDisplay = childList.every((item) => !item.display);
  dynamiscList.forEach((item) => {
    item.display = isAllDisplay ? false : item.display;
  });

  emit("SetEnterHeaderData", {
    static: staticList,
    dynamisc: dynamiscList,
    child: childList,
  });

  loading.value = false;
  showHeaderSet.value = false;
};
</script>

<style scoped lang="scss">
.vertical_checkbox_group{
    .el-checkbox{
        height: 20px !important;
    }
}
</style>
