/*
* @Author: caishenghan
* @Email: shenghan.cai@symbio.com
* @Date: 2020-05-26
* @description: 配置中英繁等 字段
*/
<template>
  <div class="base-lang-congig">
    <Input
      v-model.trim="defaultValue"
      v-bind="$attrs"
      :readonly="inputReadonly"
      @on-change="changeValue"
    >
    <Icon
      slot="suffix"
      class="iconfont iconzhongying"
      style="top: 2px;"
      @click.native="handleLangConfig()"
    />
    </Input>
    <Icon
      v-if="$attrs.type === 'textarea'"
      slot="suffix"
      class="iconfont iconzhongying"
      style="top: 2px; margin-top: 1px;"
      @click.native="handleLangConfig()"
    />
  </div>
</template>
<script>
import LangModal from './langModal.vue';
import { QueryValueSetByCode, getLanugageData } from '../server.js';
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    langId: {
      type: [String, Number],
      default: ''
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      lang: localStorage.getItem('lang') || 'zh-CN',
      defaultId: '',
      defaultValue: this.value,
      defaultReadonly: false,
      defaultLang: {},
      open: false,
      inputReadonly: !!this.langId
    };
  },
  watch: {
    value: {
      handler(val) {
        if (!this.langId) {
          this.defaultValue = val;
        }
      },
      immediate: true
    },
    // readonly: {
    //   handler(val) {
    //     this.defaultReadonly = val;
    //   },
    //   immediate: true
    // },
    langId: {
      handler(val) {
        this.init();
        this.inputReadonly = !!val;
      },
      immediate: true
    }
  },
  methods: {
    init() {
      if (!this.langId) {
        this.createLang();
        this.changeValue(this.defaultValue);
      } else {
        if (this.langId) {
          getLanugageData({
            url: this.$attrs.queryUrl,
            langId: this.langId,
            field: this.$attrs.name,
            method: this.$attrs.method ? this.$attrs.method : 'GET',
            resType: this.$attrs.resType || ''
          }).then(list => {
            const lang = localStorage.getItem('lang') || 'zh-CN';
            if (!Array.isArray(list)) {
              return this.$Message.error('error!');
            }
            list.forEach(item => {
              if (item.langCode == lang) {
                this.defaultValue = item[this.$attrs.name];
              }
              this.defaultLang[item.langCode] = item[this.$attrs.name];
            });
            this.changeValue(this.defaultValue);
            // if (Array.isArray(list)) {
            //   this.defaultLang = {};
            //   list.forEach(item => {
            //     this.defaultLang[item.langCode] = item[this.name];
            //   });
            // }
            // this.defaultLang[this.language] = this.curLangVal;
          });
        }
      }
    },
    createLang() {
      const valueSet = JSON.parse(sessionStorage.getItem('valueSet') || '{}');
      const code = 'SYSTEM_LANGUAGE';
      const key = `$${code}`;
      if (valueSet[key]) {
        this.setLanguage(valueSet[key]);
      } else {
        QueryValueSetByCode({
          code: 'SYSTEM_LANGUAGE'
        }).then(response => {
          valueSet[key] = response || [];
          sessionStorage.setItem('valueSet', JSON.stringify(valueSet));
          this.setLanguage(response);
        });
      }
    },
    setLanguage(langList) {
      this.defaultLang = {};
      langList.forEach(item => {
        this.defaultLang[item.value] = '';
      });
    },
    changeValue(val) {
      if (!this.defaultId && !this.open) {
        for (const k in this.defaultLang) {
          this.defaultLang[k] = this.defaultValue;
        }
      } else {
        this.defaultLang[this.lang] = this.defaultValue;
      }
      this.$emit('on-change', this.defaultLang);
      this.$emit('input', this.defaultValue);
    },
    handleLangConfig() {
      // 只读状态不能点击
      if (!this.$attrs.disabled) {
        new this.$pageModal(
          LangModal, {
            props: {
              lang: { ...this.defaultLang },
              langId: this.langId,
              readonly: this.defaultReadonly,
              curLangVal: this.defaultValue,
              ...this.$attrs
            }
          },
          data => {
            if (data) {
              this.open = true;
              this.defaultLang = data;
              this.defaultValue = data[this.lang];
            }
            this.$emit('on-change', data);
            this.$emit('input', this.defaultValue);
            this.$emit('updated', this.defaultValue);
          }
        ).pageInstance.setSize(500);
      }
    }

  }
};

</script>
<style lang="less">
.base-lang-congig {
  .global-icon {
    background: url(../../assets/images/global_icon.png) no-repeat 0 0;
    width: 20px;
    height: 20px;
    background-size: cover;
    display: inline-block;
    position: absolute;
    right: 4px;
    top: 50%;
    margin-top: -10px;
    cursor: pointer;
  }
}
</style>