<template>
    <div v-if="labelKeys" class="para-labels">
        <!--请输入-->
        <a-input :placeholder="placeHolder[language2]" v-model="labelKeys[language1]" class="language-input">
            <template slot="addonBefore">{{languageList[language1]}}</template>
            <a-popover slot="addonAfter"
                       trigger="click"
                       placement="bottom">
                <template slot="content">
                    <!--设置多国语言显示名称-->
                    <p>{{titleText[language2]}}</p>
                    <div v-for="(k,l) in languageList" :key='l' class="language-item">
                        <template v-if="language1 !== l">
                            <!--请输入-->
                            <a-input :placeholder="placeHolder[language2]" v-model="labelKeys[l]"
                                     class="language-input">
                                <template slot="addonBefore">{{k}}</template>
                            </a-input>
                        </template>
                    </div>
                </template>
                <!--设置多国语言显示名称-->
                <span class="iconfont iconzengjia" :title="titleText[language2]"
                      style="cursor: pointer"></span>
            </a-popover>
        </a-input>
    </div>
</template>

<script>
  import {Input, Popover} from 'ant-design-vue';

  export const $languageList = {
    'zh_CN': '中文',
    'en_GB': 'English'
  };

  export default {
    props: {
      value: {
        default: () => ({})
      },
      language: {
        default: 'zh_CN'
      }
    },
    components: {
      aInput: Input,
      aPopover: Popover
    },
    data() {
      return {
        language1: this.language, // 当前选中的语言类型
        languageList: $languageList, // 语言列表
        // dialogLanguage: false,
        labelKeys: null,// 绑定的数据
        titleText: {
          zh_CN: '设置多国语言显示名称',
          en_GB: 'Set multi-language name'
        },
        placeHolder: {
          zh_CN: '请输入',
          en_GB: 'Please Input'
        }
      };
    },
    created() {
      let labelVals;
      if (typeof this.value === 'object' && this.value !== null) labelVals = this.value;
      else labelVals = {};
      this.langKeys = Object.keys(this.languageList);
      this.labelKeys = this.setLabel(labelVals);
    },
    methods: {
      setLabel(values) {
        const labels = {};
        for (let i = 0, l = this.langKeys.length; i < l; i++) {
          const langs = this.langKeys[i];
          labels[langs] = values[langs] || '';
          if (!labels[langs] && langs === 'zh_CN') labels[langs] = values.zh || '';
        }
        return labels;
      }
    },
    computed: {
      language2() {
        return JSON.parse(window.localStorage[window.$project]).setting.language || 'zh_CN';
      },
    },
    watch: {
      labelKeys: {
        handler(val) {
          this.$emit('input', val);
          this.$emit('change', val);
        },
        deep: true
      },
      value(val, old) {
        if (JSON.stringify(val) === JSON.stringify(old)) return;
        if (typeof val === 'object') {
          this.labelKeys = this.setLabel(val);
        }
      },
      language(val) {
        this.language1 = val;
      }
    }
  };
</script>

<style lang="less">
    @import "_para-labels";
</style>
