<template>
  <div class="obpm-dataSource">
    <div class="obpm-title">
      <div class="d-inline-block">
        <i class="el-icon-folder title-icon"></i>
        <div class="title-name d-inline-block ml-2">{{$t('multilanguage.title')}}</div>
      </div>
      <div class="bar d-inline-block float-right">
        <el-button type="primary" size="small" @click="save('formName')">{{$t('btns.save')}}</el-button>
        <el-button size="small" @click="close">{{$t('btns.exit')}}</el-button>
      </div>
    </div>
    <div class="obpm-main mt-3">
      <el-form :model="formData" class="demo-form-inline" size="small" label-width="100px" label-position="top" :rules="rules" ref="formName">
        <el-row>
          <el-col :span="8">
            <el-form-item :label="$t('multilanguage.label')" class="padding0Label" prop="label">
              <el-input v-model="formData.label" size="small" class="width-360"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="4">
            <el-form-item :label="$t('multilanguage.text')" class="padding0Label" prop="text">
              <el-input v-model="formData.text" size="small"  class="width-360"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item :label="$t('multilanguage.type')" class="padding0Label">
              <el-select v-model="formData.type"  class="width-360">
                <el-option label="English" value="1"></el-option>
                <el-option label="简体中文" value="2"></el-option>
                <el-option label="繁體中文" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import { saveMultiLanguage,editgetMultiLanguage,saveEditMultiLanguage } from "@/service/MultiLanguageAPI.js";
import { nameCheck, validateSpecial } from "@/utils/utils.js";

export default {
  name: "getMultiLanguage",
  data() {
    return {
      formData:{
        label: "",
        text: "",
        type: "1"
      },
      rules: {
        label: [
          { required: true, message: this.$t('placeholder.name'), trigger: 'blur' },
          { validator: nameCheck, trigger: "blur" },
        ],
        text: [
          { required: true, message: this.$t('placeholder.text'), trigger: 'blur' },
          { validator: validateSpecial, trigger: "blur" },
        ],
      },
      btnloading: false, // 按钮的加载图标
    }
  },
  mounted(){
    let edit = this.$route.query.edit;
    if(edit && edit!='false'){
      this.getMultiLanguage();
    }
  },
  methods: {
    /**
     * 保存表单
     */
    save(formName){
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let appId = sessionStorage.getItem("appId");
          let edit = this.$route.query.edit;
          let data = JSON.parse(JSON.stringify(this.formData));
          data.type = parseInt(data.type);
          if(edit){
            data.applicationid = appId;
            data.id = this.$route.query.params.languageId;
            data.parentId = appId;
            const response = await saveEditMultiLanguage(data)
            if (response.data.errcode == 0) {
              this.$message.success(this.$t('msg.ss'));
            }
          }else{
            this.btnloading = true;
            const response = await saveMultiLanguage(appId,data)
            this.btnloading = false;
            if (response.data.errcode == 0) {
              this.$message.success(this.$t('msg.ss'));
            }
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    /**
     * 获取多语言详情
     */
    async getMultiLanguage(){
      let languageId = this.$route.query.params.languageId;
      const response = await editgetMultiLanguage(languageId)
      if (response.data.errcode == 0) {
        this.formData = response.data.data;
        this.formData.type = String(this.formData.type);
      }
    },
    /**
     * 退出
     */
    close(){
      this.$store.dispatch("rightHelpPageParams", { title: "多语言列表", url: "domain/domain_multiLanguages_list_help.html" });
      let params = {
        appId: sessionStorage.getItem("appId"),
      }
      this.$router.push({path: '/home/softwaresdetails/MultiLanguageList',query:{edit: true, params: params}});
    }
  },
  watch: {
    "$store.state.rightHelpPageParams": {
      handler() {
        if (this.$store.state.rightHelpFrame) {
          this.$store.state.rightHelpFrame.contentWindow.showHelpContentHtml(this.$store.state.rightHelpPageParams.title, this.$store.state.rightHelpPageParams.url);
        }
      },
      deep: true,
    },
  },
}
</script>