/*
* @Author: caishenghan
* @Email: shenghan.cai@symbio.com
* @Date: 2020-05-26
* @description: 配置中英繁等 字段
*/
<template>
  <Form
    ref="langForm"
    :label-width="120"
    class="base-lang-config"
    :model="defaultLang"
  >
    <FormItem
      v-for="item in langList"
      :key="item.value"
      :prop="item.value"
      :label="item.label"
      :rules="{ required: required, message: $tt('请输入') + item.label, trigger: 'blur' }"
    >
      <Input
        v-model.trim="defaultLang[item.value]"
        :maxlength="maxlength || textLength"
        :readonly="readonly || disabled"
        style="width:300px"
      ></Input>
    </FormItem>
  </Form>
</template>
<script>
import { textLength, longTextLength } from '../../common/constValue.js';
import { QueryValueSetByCode, getLanugageData, updateLanugageData } from '../server.js';
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    langId: {
      type: [String, Number],
      default: ''
    },
    curLangVal: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    upUrl: {
      type: String,
      default: ''
    },
    queryUrl: {
      type: String,
      default: ''
    },
    lang: {
      type: [Object, Boolean],
      default: () => {
        return false;
      }
    },
    readonly: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    longText: {
      type: Boolean,
      default: false
    },
    method: {
      type: String,
      default: 'GET'
    },
    resType: {
      type: String,
      default: ''
    },
    otherParams: {
      type: Object,
      default() {
        return {};
      }
    },
    maxlength: {
      type: Number,
      default: null
    },
    required: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      textLength: this.longText ? longTextLength : textLength,
      langList: [],
      defaultLang: this.lang,
      language: localStorage.getItem('lang') || 'zh-CN'
    };
  },
  created() {
    this.$emit('SetTitle', this.title || this.$t('多语言配置'));
    const btnList = [
      {
        text: this.$t('确定'),
        type: 'warning',
        action: 'save',
        handle: () => {
          this.save();
        }
      },
      {
        text: this.$t('关闭'),
        action: 'close',
        handle: () => this.$emit('Close')
      }
    ];
    if (this.readonly || this.disabled) {
      btnList.pop();
    }
    this.$emit('SetPageActions', btnList);
    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);
      });
    }
    if (this.langId) {
      getLanugageData({
        url: this.queryUrl,
        langId: this.langId,
        field: this.name,
        method: this.method,
        resType: this.resType
      }).then(list => {
        if (Array.isArray(list)) {
          let defaultLang = {};
          list.forEach(item => {
            defaultLang[item.langCode] = item[this.name];
          });
          this.defaultLang = defaultLang;
        }
        this.defaultLang[this.language] = this.curLangVal;
      });
    }
  },
  methods: {
    $tt(text) {
      return this.$t(text);
    },
    setLanguage(langList) {
      this.langList = langList;
      if (!this.defaultLang) {
        this.defaultLang = {};
        langList.forEach(item => {
          this.defaultLang[item.value] = '';
        });
      }
    },
    save() {
      this.$refs.langForm.validate(valid => {
        if (!valid) {
          this.$t('请检查数据');
          return;
        }
        if (this.langId) {
          this.$emit('SetActionsState', { btn: 'save', state: true });
          const arr = [];
          for (const lang in this.defaultLang) {
            const obj = {
              langCode: lang,
              langId: this.langId
            };
            obj[this.name] = this.defaultLang[lang];
            arr.push(obj);
          }
          if (this.required) {
            this.otherParams.require = this.required;
          }
          const params = Object.assign({}, this.otherParams, {
            langList: arr,
            resType: this.resType
          });
          updateLanugageData(this.upUrl, params).then(() => {
            this.$Message.success('修改成功');
            this.$emit('Close', this.defaultLang);
          }).catch(error => {
            this.$Message.error(error || '修改失败');
          }).done(() => {
            this.$emit('SetActionsState', { btn: 'save', state: false });
          });
        } else {
          this.$emit('Close', this.defaultLang);
        }
      });
    }
  }
};
</script>
