<template>
  <div class="header-select">
    <a-select
      v-for="(item, index) in fooList"
      :key="index"
      class="header-select-item mx-3 my-2"
      @change="(value) => handleSelectChange(value, index)"
      :placeholder="item.placeholder"
      :value="item.value"
      :disabled="item.disable"
    >
      <a-select-option
        :value="option.ID"
        :key="option.ID"
        v-for="option in item.options"
        >{{ option.Name }}</a-select-option
      >
    </a-select>
  </div>
</template>

<script lang="ts">
import { eLevel } from "@/types/level";
import { eNewRoleRelatedToBackEnd } from "@/types/role";
import { getSelfOutLet } from "@/utils/outlet";
import { message } from "ant-design-vue";
import StaffService from "@/service/StaffService";
import { fooList } from "./const";

import Vue, { PropType } from "vue";
import { iOutLet } from "@/service/StaffService/types";

export default Vue.extend({
  props: {
    fooList: {
      type: Array as PropType<typeof fooList>,
    },
    setFooList: Function,
    level: Number,
    role: String as PropType<eNewRoleRelatedToBackEnd>,
  },
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    handleSelectChange(value: number, index: number) {
      this.fooList[index].value = value;
      const newList = this.fooList.map((i, idx) => {
        idx > index && console.log(i);
        return {
          ...i,
          options: idx > index ? [] : i.options,
          value: idx > index ? undefined : i.value,
        };
      });
      this.changeFooList([...newList]);
      index + 1 !== 4 && this.fetchOptions(index + 1);
    },
    async fetchOptions(index: number) {
      const ret = await StaffService.getInstance().getBranch({
        level: index + 1,
        page_size: 10000,
        parent_id: this.fooList[index - 1].value,
      });
      if (ret.code === 200) {
        this.fooList[index].options = ret.data.item;
        this.changeFooList(this.fooList);
      }
    },
    changeFooList(v: any[]) {
      let lastIndexhasValue = true;
      const newList = v.map((item, index) => {
        if (index >= this.level) {
          const shouldDisable = !lastIndexhasValue;
          lastIndexhasValue = item.value !== undefined;
          return {
            ...item,
            disable: shouldDisable,
            options: shouldDisable ? [] : item.options,
          };
        } else {
          return {
            ...item,
          };
        }
      });
      this.setFooList(newList);
    },
    resetList() {
      const list = this.fooList.map((i) => {
        return {
          ...i,
          disable: false,
          value: undefined,
          options: [],
        };
      });
      this.setFooList([...list]);
    },
    async init() {
      const selfOutLet = await getSelfOutLet();
      this.resetList();
      this.$nextTick(() => {
        if (this.role === eNewRoleRelatedToBackEnd.BackAdmin) {
          this.initBackAdmin(selfOutLet);
        } else if (this.level === eLevel.firstLevel_branch) {
          this.init_firstLevel(selfOutLet);
        } else if (this.level === eLevel.secondary_branch) {
          this.init_secondLevel(selfOutLet);
        } else if (this.level === eLevel.firstLevel_sub_branch) {
          this.init_first_sub_Level(selfOutLet);
        } else if (this.level === eLevel.secondary_sub_branch) {
          this.init_second_sub_Level(selfOutLet);
        }
      });
    },
    async initBackAdmin(selfOutLet: iOutLet) {
      const ret = await StaffService.getInstance().getBranch({
        level: eLevel.firstLevel_branch,
      });
      if (ret.code === 200) {
        const options = ret.data.item;
        this.fooList[0].options = options;
        const newList = this.fooList.map((item, i) => {
          return {
            ...item,
            disable: i >= 1,
          };
        });
        this.setFooList(newList);
      }
    },
    init_firstLevel(selfOutLet: iOutLet) {
      const list = this.initFooListBasicValues(
        selfOutLet,
        eLevel.firstLevel_branch
      );
      this.setFooList(list);
    },
    async init_secondLevel(selfOutLet: iOutLet) {
      const { fid, first_branch, sid, second_branch } = selfOutLet;
      const list = this.initFooListBasicValues(
        selfOutLet,
        eLevel.secondary_branch
      );
      this.setFooList(list);
      const ret = await StaffService.getInstance().getBranch({
        level: eLevel.firstLevel_sub_branch,
        page_size: 10000,
        parent_id: sid,
      });
      if (ret.code === 200) {
        this.fooList[2].options = ret.data.item;
      }
      this.setFooList(this.fooList);
    },
    async init_first_sub_Level(selfOutLet: iOutLet) {
      const { fid, first_branch, sid, second_branch, fs_id, first_sub_branch } =
        selfOutLet;
      const list = this.initFooListBasicValues(
        selfOutLet,
        eLevel.firstLevel_sub_branch
      );
      this.setFooList(list);
      const ret = await StaffService.getInstance().getBranch({
        level: eLevel.secondary_sub_branch,
        page_size: 1000,
        parent_id: fs_id,
      });
      if (ret.code === 200) {
        this.fooList[3].options = ret.data.item;
      }
      this.setFooList(this.fooList);
    },
    init_second_sub_Level(selfOutLet: iOutLet) {
      this.initFooListBasicValues(selfOutLet, eLevel.secondary_sub_branch);
    },
    initFooListBasicValues(selfOutLet: iOutLet, level: eLevel) {
      let list = this.fooList;
      const {
        fid,
        first_branch,
        sid,
        second_branch,
        fs_id,
        first_sub_branch,
        ss_id,
        second_sub_branch,
      } = selfOutLet;
      if (
        [
          eLevel.firstLevel_branch,
          eLevel.secondary_branch,
          eLevel.firstLevel_sub_branch,
          eLevel.secondary_sub_branch,
        ].includes(level)
      ) {
        list[0].value = fid;
        list[0].options = [{ ID: fid, Name: first_branch }];
        list[0].disable = true;
      }
      if (
        [
          eLevel.secondary_branch,
          eLevel.firstLevel_sub_branch,
          eLevel.secondary_sub_branch,
        ].includes(level)
      ) {
        list[1].value = sid;
        list[1].options = [{ ID: sid, Name: second_branch }];
        list[1].disable = true;
      }

      if (
        [eLevel.firstLevel_sub_branch, eLevel.secondary_sub_branch].includes(
          level
        )
      ) {
        list[2].value = fs_id;
        list[2].options = [{ ID: fs_id, Name: first_sub_branch }];
        list[2].disable = true;
      }
      if ([eLevel.secondary_sub_branch].includes(level)) {
        list[3].value = ss_id;
        list[3].options = [{ ID: ss_id, Name: second_sub_branch }];
        list[3].disable = true;
      }
      return list;
    },
    popupScroll1(e: Event) {
      let h = e.target as HTMLElement;
      if (h.scrollHeight - h.scrollTop <= h.clientHeight) {
        message.info("臣妾做不到啊");
      }
    },
    popupScroll2(e: Event) {
      let h = e.target as HTMLElement;
      if (h.scrollHeight - h.scrollTop <= h.clientHeight) {
        message.info("臣妾做不到啊");
      }
    },
    popupScroll3(e: Event) {
      let h = e.target as HTMLElement;
      if (h.scrollHeight - h.scrollTop <= h.clientHeight) {
        message.info("臣妾做不到啊");
      }
    },
    popupScroll4(e: Event) {
      let h = e.target as HTMLElement;
      if (h.scrollHeight - h.scrollTop <= h.clientHeight) {
        message.info("臣妾做不到啊");
      }
    },
  },
});
</script>
<style scoped lang="less">
.header-select {
  .header-select-item {
    width: 200px;
  }
}
</style>