import { computed, defineComponent, reactive, ref } from 'vue';
import './index.less';
import { useI18n } from 'vue-i18n';
import Language from '@/assets/svg/header/language.svg';
import { getDeviceWidth } from '@/utils/tool';
export default defineComponent({
  setup() {
    const { locale } = useI18n();
    // 下拉框状态
    const selectStatus = ref(false);
    const languageList = reactive({
      list: [
        {
          label: '简体中文',
          value: 'cn',
        },
        {
          label: 'English',
          value: 'en',
        },
      ],
    });
    const ChangeLanguageList = () => {
      let client = getDeviceWidth();
      if (client <= 400) {
        languageList.list[0].label = '中文';
      }
    };
    ChangeLanguageList();
    const getLang = computed(() => {
      {
        if (locale.value == 'cn') {
          let client = getDeviceWidth();
          if (client <= 400) {
            return '中文';
          }
          return '简体中文';
        } else {
          return 'English';
        }
      }
    });
    const changeLanguage = () => {
      if (locale.value == 'cn') {
        locale.value = 'en';
      } else {
        locale.value = 'cn';
      }
    };
    const choseLang = () => {
      selectStatus.value = !selectStatus.value;
    };
    return () => (
      <div
        class={[
          'custom-select-language',
          selectStatus.value ? 'language-active' : '',
        ]}
        onClick={choseLang}
      >
        <span class="language-icon">
          <Language></Language>
        </span>
        <span class="active-text">{getLang.value}</span>
        <div class="position-select" v-show={selectStatus.value}>
          {languageList.list.map((item: any) => (
            <div
              class="value"
              onClick={changeLanguage}
              v-show={item.value != locale.value}
            >
              <span class="language-icon">
                <Language></Language>
              </span>
              <span class="text">{item.label}</span>
            </div>
          ))}
        </div>
      </div>
    );
  },
});
