<template>
  <div class="w-full phoneInput" ref="phoneInput">
    <Input
      :placeholder="placeholder"
      :maxlength="maxlength"
      :clearable="true"
      :value="value"
      :type="type"
      @change="handleChange"
    >
      <template #button>
        <img
          :src="arrowDownIcon"
          alt=""
          ref="arrowImg"
          class="ml-2 transform transition-all"
          :class="{ 'rotate-180': !arrowDown }"
          @click="handleClickArrowIcon"
        />
      </template>
    </Input>
    <div class="w-full relative mt-px">
      <div
        class="
          absolute
          left-0
          right-0
          overflow-auto
          h-0
          transition-all
          z-10
          text-font-white
          bg-font-light-black
        "
        :class="{ 'h-24': !arrowDown }"
      >
        <div
          v-for="(item, index) in phonePwdList"
          :key="index"
          class="
            h-8
            flex
            items-center
            justify-between
            bg-font-light-black
            hover:bg-font-black
          "
          @click="handleClickPhoneItem(item)"
        >
          <div class="ml-4">{{ item.phone }}</div>
          <img
            src="@/assets/icons/close.png"
            @click="handleClickDelete(item.phone)"
            class="mr-4 closeIcon"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Input from "@/components/common/Input/index.vue";
import LoginService from "../../LoginService";
import { iRememberPhonePwd } from "../../types";

import eyeOpenIcon from "@/assets/icons/eye_open.png";
import eyeCloseIcon from "@/assets/icons/eye_close.png";
import arrowDownIcon from "@/assets/icons/arrow_down.png";

let NotCloseList = [] as Element[];

export default Vue.extend({
  components: {
    Input,
  },
  props: {
    type: {
      type: String,
      default: "text",
    },
    placeholder: String,
    clearable: {
      type: Boolean,
      default: false,
    },
    value: String,
    maxlength: Number,
    handlePhoneChange: Function,
  },
  data() {
    return {
      showPwd: false,
      eyeOpenIcon,
      eyeCloseIcon,
      phonePwdList: [] as iRememberPhonePwd[],
      arrowDownIcon,
      arrowDown: true,
    };
  },
  methods: {
    handleClickPhoneItem(item: iRememberPhonePwd) {
      this.$emit("selectItem", item);
    },
    handleChange(v: string) {
      this.$emit("change", v);
    },
    handleClickArrowIcon() {
      this.arrowDown = !this.arrowDown;
      if (!this.arrowDown) {
        this.fetchList();
        this.$nextTick(() => {
          this.initNotCloseList();
          document.removeEventListener("click", this.callback);
          document.addEventListener("click", this.callback);
        });
      }
    },
    callback(e: MouseEvent) {
      const notClose = NotCloseList.some((el) => {
        return el.contains(e.target as Node);
      });
      if (!notClose) {
        this.arrowDown = true;
      }
    },
    initNotCloseList() {
      const phoneInputEle = this.$refs.phoneInput as Element;
      const arrowImgEle = this.$refs.arrowImg as Element;
      const closeIcons = Array.from(
        phoneInputEle.querySelectorAll(".closeIcon")
      );
      NotCloseList = closeIcons;
      NotCloseList.push(arrowImgEle);
    },
    fetchList() {
      const list = LoginService.getIntance().getRememberedPhonePwdList();
      this.phonePwdList = list;
    },
    handleClickDelete(phone: string) {
      LoginService.getIntance().deletePhoneInStorage(phone);
      this.fetchList();
    },
  },
});
</script>

<style scoped lang="less">
</style>