<template>
  <el-card class="language-selector" shadow="hover">
    <div slot="header" class="clearfix">
      <span>选择语言</span>
    </div>
    <div class="language-list">
      <el-checkbox
        v-for="lang in languages"
        :key="lang.code"
        v-model="lang.selected"
        @change="handleLanguageChange(lang.code)"
      >
        {{ lang.nameCn }}
      </el-checkbox>
    </div>
    <el-divider content-position="center">已选择的语言</el-divider>
    <transition-group name="el-fade-in-linear" tag="div" class="selected-languages">
      <el-tag
        v-for="lang in selectedLanguages"
        :key="lang.code"
        closable
        @close="removeLanguage(lang.code)"
        class="selected-language"
      >
        {{ lang.nameCn }}
      </el-tag>
    </transition-group>
  </el-card>
</template>

<script>
export default {
  name: 'LanguageSelector',
  props: {
    selectedCountries: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: '选择国家'
    }
  },
  data() {
    return {
      languages: [
        {
          "code": "en",
          "nameEn": "English",
          "nameCn": "英语",
          "criterionId": 1000
        },
        {
          "code": "de",
          "nameEn": "German",
          "nameCn": "德语",
          "criterionId": 1001
        },
        {
          "code": "fr",
          "nameEn": "French",
          "nameCn": "法语",
          "criterionId": 1002
        },
        {
          "code": "es",
          "nameEn": "Spanish",
          "nameCn": "西班牙语",
          "criterionId": 1003
        },
        {
          "code": "it",
          "nameEn": "Italian",
          "nameCn": "意大利语",
          "criterionId": 1004
        },
        {
          "code": "ja",
          "nameEn": "Japanese",
          "nameCn": "日语",
          "criterionId": 1005
        },
        {
          "code": "da",
          "nameEn": "Danish",
          "nameCn": "丹麦语",
          "criterionId": 1009
        },
        {
          "code": "nl",
          "nameEn": "Dutch",
          "nameCn": "荷兰语",
          "criterionId": 1010
        },
        {
          "code": "fi",
          "nameEn": "Finnish",
          "nameCn": "芬兰语",
          "criterionId": 1011
        },
        {
          "code": "ko",
          "nameEn": "Korean",
          "nameCn": "韩语",
          "criterionId": 1012
        },
        {
          "code": "no",
          "nameEn": "Norwegian",
          "nameCn": "挪威语",
          "criterionId": 1013
        },
        {
          "code": "pt",
          "nameEn": "Portuguese",
          "nameCn": "葡萄牙语",
          "criterionId": 1014
        },
        {
          "code": "sv",
          "nameEn": "Swedish",
          "nameCn": "瑞典语",
          "criterionId": 1015
        },
        {
          "code": "zh_CN",
          "nameEn": "Chinese (simplified)",
          "nameCn": "简体中文",
          "criterionId": 1017
        },
        {
          "code": "zh_TW",
          "nameEn": "Chinese (traditional)",
          "nameCn": "繁体中文",
          "criterionId": 1018
        },
        {
          "code": "ar",
          "nameEn": "Arabic",
          "nameCn": "阿拉伯语",
          "criterionId": 1019
        },
        {
          "code": "bg",
          "nameEn": "Bulgarian",
          "nameCn": "保加利亚语",
          "criterionId": 1020
        },
        {
          "code": "cs",
          "nameEn": "Czech",
          "nameCn": "捷克语",
          "criterionId": 1021
        },
        {
          "code": "el",
          "nameEn": "Greek",
          "nameCn": "希腊语",
          "criterionId": 1022
        },
        {
          "code": "hi",
          "nameEn": "Hindi",
          "nameCn": "印地语",
          "criterionId": 1023
        },
        {
          "code": "hu",
          "nameEn": "Hungarian",
          "nameCn": "匈牙利语",
          "criterionId": 1024
        },
        {
          "code": "id",
          "nameEn": "Indonesian",
          "nameCn": "印尼语",
          "criterionId": 1025
        },
        {
          "code": "is",
          "nameEn": "Icelandic",
          "nameCn": "冰岛语",
          "criterionId": 1026
        },
        {
          "code": "iw",
          "nameEn": "Hebrew",
          "nameCn": "希伯来语",
          "criterionId": 1027
        },
        {
          "code": "lv",
          "nameEn": "Latvian",
          "nameCn": "拉脱维亚语",
          "criterionId": 1028
        },
        {
          "code": "lt",
          "nameEn": "Lithuanian",
          "nameCn": "立陶宛语",
          "criterionId": 1029
        },
        {
          "code": "pl",
          "nameEn": "Polish",
          "nameCn": "波兰语",
          "criterionId": 1030
        },
        {
          "code": "ru",
          "nameEn": "Russian",
          "nameCn": "俄语",
          "criterionId": 1031
        },
        {
          "code": "ro",
          "nameEn": "Romanian",
          "nameCn": "罗马尼亚语",
          "criterionId": 1032
        },
        {
          "code": "sk",
          "nameEn": "Slovak",
          "nameCn": "斯洛伐克语",
          "criterionId": 1033
        },
        {
          "code": "sl",
          "nameEn": "Slovenian",
          "nameCn": "斯洛文尼亚语",
          "criterionId": 1034
        },
        {
          "code": "sr",
          "nameEn": "Serbian",
          "nameCn": "塞尔维亚语",
          "criterionId": 1035
        },
        {
          "code": "uk",
          "nameEn": "Ukrainian",
          "nameCn": "乌克兰语",
          "criterionId": 1036
        },
        {
          "code": "tr",
          "nameEn": "Turkish",
          "nameCn": "土耳其语",
          "criterionId": 1037
        },
        {
          "code": "ca",
          "nameEn": "Catalan",
          "nameCn": "加泰罗尼亚语",
          "criterionId": 1038
        },
        {
          "code": "hr",
          "nameEn": "Croatian",
          "nameCn": "克罗地亚语",
          "criterionId": 1039
        },
        {
          "code": "vi",
          "nameEn": "Vietnamese",
          "nameCn": "越南语",
          "criterionId": 1040
        },
        {
          "code": "ur",
          "nameEn": "Urdu",
          "nameCn": "乌尔都语",
          "criterionId": 1041
        },
        {
          "code": "tl",
          "nameEn": "Filipino",
          "nameCn": "菲律宾语",
          "criterionId": 1042
        },
        {
          "code": "et",
          "nameEn": "Estonian",
          "nameCn": "爱沙尼亚语",
          "criterionId": 1043
        },
        {
          "code": "th",
          "nameEn": "Thai",
          "nameCn": "泰语",
          "criterionId": 1044
        },
        {
          "code": "bn",
          "nameEn": "Bengali",
          "nameCn": "孟加拉语",
          "criterionId": 1056
        },
        {
          "code": "fa",
          "nameEn": "Persian",
          "nameCn": "波斯语",
          "criterionId": 1064
        },
        {
          "code": "gu",
          "nameEn": "Gujarati",
          "nameCn": "古吉拉特语",
          "criterionId": 1072
        },
        {
          "code": "kn",
          "nameEn": "Kannada",
          "nameCn": "卡纳达语",
          "criterionId": 1086
        },
        {
          "code": "ml",
          "nameEn": "Malayalam",
          "nameCn": "马拉雅拉姆语",
          "criterionId": 1098
        },
        {
          "code": "mr",
          "nameEn": "Marathi",
          "nameCn": "马拉地语",
          "criterionId": 1101
        },
        {
          "code": "ms",
          "nameEn": "Malay",
          "nameCn": "马来语",
          "criterionId": 1102
        },
        {
          "code": "pa",
          "nameEn": "Punjabi",
          "nameCn": "旁遮普语",
          "criterionId": 1110
        },
        {
          "code": "ta",
          "nameEn": "Tamil",
          "nameCn": "泰米尔语",
          "criterionId": 1130
        },
        {
          "code": "te",
          "nameEn": "Telugu",
          "nameCn": "泰卢固语",
          "criterionId": 1131
        }
      ],
    };
  },
  computed: {
    selectedLanguages() {
      return this.languages.filter(lang => lang.selected);
    },
  },
  created() {
    this.$emit('input', this.selectedLanguages);
  },

  methods: {
    handleLanguageChange(code) {
      this.$emit('input', this.selectedLanguages);
    },
    removeLanguage(code) {
      const lang = this.languages.find(l => l.code === code);
      if (lang) {
        lang.selected = false;
      }
      this.$emit('input', this.selectedLanguages);
    },
  },
};
</script>

<style scoped>
.language-selector {
  max-width: 500px;
  margin: 0 auto;
}

.language-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.selected-languages {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.selected-language {
  margin-right: 0;
}

.el-checkbox {
  margin-right: 0;
  margin-bottom: 0;
}
</style>
