<template>
  <div class="header-select">
    <FormModelItem
      v-for="(item, index) in fooList"
      :prop="`fooProp${index}`"
      :key="index"
      :label="item.label"
    >
      <a-select
        class="header-select-item mx-3 my-2"
        @change="(value) => handleSelectChange(value, index)"
        :placeholder="item.placeholder"
        :value="item.value"
        :disabled="index + 1 <= userLevel ? true : item.disable"
      >
        <a-select-option
          :value="option.ID"
          :key="option.ID"
          v-for="option in item.options"
          >{{ option.Name }}</a-select-option
        >
      </a-select>
    </FormModelItem>
  </div>
</template>

<script lang="ts">
import { eLevel } from "@/types/level";
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";
import { FormModel } from "ant-design-vue";

const FormModelItem = FormModel.Item;

export default Vue.extend({
  components: {
    FormModelItem,
    FormModel,
  },
  props: {
    fooList: {
      type: Array as PropType<typeof fooList>,
    },
    setFooList: Function,
    level: Number,
    userLevel: Number,
  },
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    handleSelectChange(value: number, index: number) {
      const baseList = [...this.fooList];
      baseList[index].value = value;
      const newList = baseList.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) {
        const baseList = [...this.fooList];
        baseList[index].options = ret.data.item;
        this.changeFooList(baseList);
      }
    },
    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() {
      this.$nextTick(() => {
        // 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;
        const baseList = [...this.fooList];
        baseList[0].options = options;
        const newList = baseList.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,
      });
      const baseList = [...this.fooList];
      if (ret.code === 200) {
        baseList[2].options = ret.data.item;
      }
      this.setFooList(baseList);
    },
    async init_first_sub_Level(selfOutLet: iOutLet) {
      const baseList = [...this.fooList];
      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) {
        baseList[3].options = ret.data.item;
      }
      this.setFooList(baseList);
    },
    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>