<template>
  <div class="country-select">
    <el-input
      v-model="productName"
      clearable
      placeholder="第一步：输入你的产品名称，并在右方选择目标区域市场"
    />
    <span class="country-wrap">
      <el-dropdown ref="dropdown" trigger="contextmenu" popper-class="country-popper">
        <span class="country-wrap-item" @click="showCountryList" :title="countryInfo.name">
          <img :src="countryInfo.flag" />
        </span>
        <template #dropdown>
          <div class="custom-dropdown">
            <div class="custom-dropdown-filter">
              <el-input v-model="search" clearable placeholder="Select Country">
                <template #prefix>
                  <img :src="SearchIcon" />
                </template>
              </el-input>
            </div>
            <div class="custom-dropdown-list">
              <el-dropdown-menu>
                <el-dropdown-item
                  v-for="item in renderContryList"
                  :key="item.code"
                  @click="() => selectCountry(item)"
                >
                  <img :src="item.flag" />
                  <span :title="`${item.chineseName} (${item.name})`" :class="{ 'country-name': true, active: countryInfo.code === item.code }">
                    {{ item.code }}
                    {{ '-' }}
                    {{ item.chineseName }}
                    {{ `(${item.name})` }}
                  </span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </div>
          </div>
        </template>
      </el-dropdown>
    </span>
  </div>
</template>

<script lang="ts" setup>
import { ComputedRef, ref, computed, onMounted } from 'vue';
import countryData from '../assets/country.json';
import SearchIcon from '../assets/images/Search.png';

import type { DropdownInstance } from 'element-plus';

interface countryItem {
  code: string;
  name: string;
  flag: any;
  chineseName: string;
}

const images = import.meta.glob('@/assets/flags/4x3/*.svg', { eager: true, import: 'default' });
const productName = ref<string>('');
const search = ref<string>('');
const countryList: countryItem[] = countryData.map((item) => ({
  code: item.code.toUpperCase(),
  name: item.name,
  flag: images[`/src/assets/flags/4x3/${item.code}.svg`],
  chineseName: item.chineseName
}));
const renderContryList: ComputedRef<countryItem[]> = computed(() => {
  return countryList.filter((item) => (item.name + item.chineseName).includes(search.value));
});
const countryInfo = ref<countryItem>(JSON.parse(JSON.stringify(countryList[0])));
const dropdown = ref<DropdownInstance>();

const selectCountry = (item: countryItem) => {
  countryInfo.value = item;
};

const showCountryList = () => {
  if (!dropdown.value) return;
  dropdown.value.handleOpen();
};

defineExpose({
  getLocationName: () => countryInfo.value.name,
  getProductName: () => productName.value
});
</script>

<style lang="scss">
.country-popper {
  .custom-dropdown {
    display: flex;
    flex-direction: column;
    width: 320px;
    height: 398px;
    padding-left: 21px;
    box-sizing: border-box;
    overflow: hidden;

    &-filter {
      height: 48px;

      .el-input {
        height: 48px;
      }

      .el-input__prefix {
        img {
          width: 16px;
          height: 16px;
        }
      }

      .el-input__inner {
        font-size: 16px;
        color: #282e30;
        &::placeholder {
          font-weight: 400;
          font-size: 16px;
          color: rgba(40, 46, 48, 0.6);
        }
      }

      .el-input__wrapper {
        width: 100%;
        height: 100%;
        box-shadow: none;
      }
    }

    &-list {
      flex: 1;
      overflow: auto;
      height: 100%;

      .el-dropdown-menu {
        padding-top: 0 !important;
      }

      .el-dropdown-menu__item {
        padding: 10px;
        font-weight: 400;

        .country-name {
          font-size: 16px;
          color: #282e30;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;

          &.active {
            color: var(--promotion--color-primary);
          }
        }
        img {
          width: 30px;
          height: 24px;
          margin-right: 7px;
          // margin: 0 6px;
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.country-select {
  display: flex;
  align-items: center;

  :deep(.el-input) {
    width: 504px !important;
    height: 48px !important;
  }

  :deep(.el-input__inner) {
    line-height: 48px;
    font-size: 16px;
    &::placeholder {
      font-weight: 400;
      font-size: 16px;
      color: rgba(40, 46, 48, 0.6);
    }
  }
}

.country-wrap {
  width: 92px;
  height: 68px;
  display: flex;
  justify-content: center;
  align-items: center;
  // background-color: #fff;
  margin-left: 10px;

  &-item {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 48px;
    background-color: #ffffff;
    cursor: pointer;

    img {
      width: 100%;
      // height: 100%;
      // width: 4.5rem;
    }
  }
}
</style>
