<template>
  <div class="w-full phoneInput" ref="phoneInput">
    <Input
      :placeholder="placeholder"
      :maxlength="maxlength"
      :clearable="true"
      :value="value"
      :type="type"
      @clear="$emit('clear')"
      @change="handleChange"
    >
      <template #button>
        <img
          :src="arrowDownIcon"
          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-white bg-font-light-black rememberPhoneBoxContainer"
        :class="{ [classOfRememberedPhoneBoxContainer]: !arrowDown }"
        style="background: #f6f6f6"
      >
        <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 text-gray-700"
        >
          <div class="ml-4" @click="handleClickPhoneItem(item)">{{ item.phone }}</div>
          <div class="flex-grow h-full" @click="handleClickPhoneItem(item)"></div>
          <img
            src="@/assets/icons/close.png"
            @click="handleClickDelete(item.phone)"
            class="closeIcon mr-4"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } 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 defineComponent({
  emits: ["selectItem", "change", 'deleteValue', 'clear'],
  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,
    };
  },
  computed: {
    classOfRememberedPhoneBoxContainer() {
      if (this.phonePwdList.length === 0 || this.phonePwdList.length > 3) {
        return 'h-24'
      } else if (this.phonePwdList.length <= 3) {
        return 'h-' + 8 * this.phonePwdList.length;
      } else {
        return ''
      }
    }
  },
  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();
      this.$emit('deleteValue', phone)
    },
  },
});
</script>

<style scoped lang="less">
.rememberPhoneBoxContainer {
  /* 设置滚动条的样式 */
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* 滚动条滑块 */
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #ccc;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: rgb(117, 117, 117);
  }
}
</style>