<template>
  <div class="dsk-email-input-container">
    <el-autocomplete :popper-class="popperClass" v-model="comEmailValue" :clearable="clearable" :fetch-suggestions="searchQuery"
      :placeholder="placeholder" @select="handleSelect" @input="valueChange" :disabled="disabled">
      <template slot-scope="{ item }">
        <slot :optionData="item">
          <div class="email-type-option">
            <div class="email-type-inner">
              <div class="email-icon-box"></div>
              <div class="email-content-box">{{item.value}}</div>
            </div>
            <div class="email-vfx-box"></div>
          </div>
        </slot>
      </template>
    </el-autocomplete>
  </div>
</template>
<script>
const emailTypeList = [
  {
    value: "@qq.com",
    emailIcon: "",
    chineseName: "QQ邮箱"
  },
  {
    value: "@163.com",
    emailIcon: "",
    chineseName: "网易邮箱"
  },
  {
    value: "@126.com",
    emailIcon: "",
    chineseName: "网易邮箱"
  },
  {
    value: "@yahoo.cn",
    emailIcon: "",
    chineseName: "雅虎邮箱"
  },
  {
    value: "@sina.com",
    emailIcon: "",
    chineseName: "搜狐邮箱"
  },
  {
    value: "@outlook.com",
    emailIcon: "",
    chineseName: "微软邮箱"
  },
  {
    value: "@gmail.com",
    emailIcon: "",
    chineseName: "谷歌邮箱"
  },
  {
    value: "@163.net",
    emailIcon: "",
    chineseName: "尊享邮"
  }
];
export default {
  name: "dskEmailInput",
  props: {
    emailValue: {
      required: true,
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: ""
    },
    clearable: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    popperClass: {
      type: String,
      default: "dsk-email-options-popper"
    }
  },
  model: {
    prop: "emailValue",
    event: "update:emailValue"
  },
  watch: {
    emailValue: {
      handler(newValue) {
        this.comEmailValue = newValue;
      },
      immediate: true
    }
  },
  data() {
    return {
      comEmailValue: this.emailValue,
    };
  },
  //可访问data属性
  created() {

  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    handleSelect(item) {
      this.$emit("select", item);
      this.$emit("update:emailValue", item.value);
    },
    valueChange(value) {
      this.$emit("update:emailValue", value);
    },
    searchQuery(keywords, callback) {
      // 空值不联想
      if (!keywords?.trim()) {
        return callback([]);
      }
      // 存在字符
      /** 
       * @type {string}
      */
      let key = keywords;
      const index = key.indexOf("@");
      // 检索到@符号进行联想
      if (index != -1) {
        // 截取@符号前部分
        key = key.slice(0, index);
        // 只有一个@符号 没有其它值的情况
        if (!key) return callback([]);
        /** 
         * @type {Array<{
         * value : string;
         * emailIcon : string;
         * chineseName : string;
         * }>}
        */
        const emailTyps = JSON.parse(JSON.stringify(emailTypeList));
        const _temp = emailTyps.map(item => {
          item.value = `${key}${item.value}`;
          return item;
        });
        return callback(_temp);
      }
      return callback([]);
    }
  },
}
</script>
<style lang="scss" scoped>
.dsk-email-input-container {
  height: 32px;
  width: 100%;
  position: relative;

  ::v-deep .el-autocomplete {
    width: 100%;
  }
}
</style>
<style lang="scss">
.dsk-email-options-popper {
  .el-autocomplete-suggestion__wrap {
    .el-autocomplete-suggestion__list {
      & > [id*="el-autocomplete"] {
        padding: 0px 0px;
        line-height: 32px;

        &:hover {
          background: unset;
          background-image: linear-gradient(
            135deg,
            rgba(0, 128, 255, 0.3),
            #f5f7fa,
            rgba(242, 242, 242, 0.473)
          );
        }
      }
      .email-type-option {
        display: flex;
        align-items: center;
        width: 100%;
        height: 32px;
        padding: 0 16px;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;

        .email-type-inner {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          position: relative;
          z-index: 9;
        }

        &:hover {
          .email-vfx-box {
            width: 100%;
            height: 32px;
          }
        }

        .email-icon-box {
          width: 24px;
          height: 24px;
          min-width: 24px;
        }

        .email-content-box {
          width: calc(100% - 40px);
          height: 100%;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          margin-left: 16px;
          color: rgba(35, 35, 35, 0.8);
        }
      }
    }
  }
}
</style>
