<template>
  <base-model :config="model_cfg">
    <template slot="dialog-body">
      <el-form
        ref="i18nForm"
        v-loading="loading"
        :model="form"
        :rules="rules"
        label-width="130px"
        size="small"
      >
        <el-form-item label="国际化类型" prop="InternationalizationType">
          <el-radio-group v-model="form.InternationalizationType">
            <el-radio
              v-for="item of $d.InternationalizationType"
              :key="'InternationalizationType'+item.value"
              :label="item.value"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="功能模块/服务名" prop="Description">
          <el-input
            v-model="form.Description"
            type="textarea"
            maxlength="200"
            :autosize="{ minRows: 2, maxRows: 4}"
          />
        </el-form-item>
        <el-form-item label="标识" prop="Code">
          <el-input
            v-model="form.Code"
            type="textarea"
            maxlength="200"
            :autosize="{ minRows: 2, maxRows: 4}"
          />
        </el-form-item>
        <el-form-item label="中文值" prop="ValueCN">
          <el-input
            v-model="form.ValueCN"
            type="textarea"
            maxlength="1000"
            :autosize="{ minRows: 2, maxRows: 4}"
          />
        </el-form-item>
        <el-form-item label="英文值" prop="Value">
          <el-input
            v-model="form.Value"
            type="textarea"
            maxlength="1000"
            :autosize="{ minRows: 2, maxRows: 4}"
          />
        </el-form-item>

        <el-form-item label="状态" prop="State">
          <el-radio-group v-model="form.State">
            <el-radio
              v-for="item of $d.InternationalizationKeyState"
              :key="'InternationalizationKeyState'+item.value"
              :label="item.value"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </template>
    <template slot="dialog-footer">
      <el-button size="small" type="primary" @click="handleCancle">取消</el-button>
      <el-button size="small" type="primary" @click="handleSave">保存</el-button>
    </template>
  </base-model>
</template>
<script>
import { addOrUpdateInternationalization } from '@/api/admin'
import BaseModel from '@/components/BaseModel'
const formDataDefault = () => {
  return {
    Id: null,
    State: 0,
    Description: null,
    Code: null,
    Value: null,
    ValueCN: null,
    InternationalizationType: 1
  }
}
export default {
  name: 'I18nForm',
  components: { BaseModel },
  data() {
    return {
      loading: false,
      form: formDataDefault(),
      rules: {
        State: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        Description: [
          { required: true, message: '请注明', trigger: 'blur' },
          { max: 200, message: `${this.$t('common:ruleMessage:maxLength')} 200` }
        ],
        Code: [
          { required: true, message: '请注明', trigger: 'blur' },
          { max: 200, message: `${this.$t('common:ruleMessage:maxLength')} 200` }
        ],
        Value: [
          { required: true, message: '请注明', trigger: 'blur' },
          { max: 1000, message: `${this.$t('common:ruleMessage:maxLength')} 1000` }
        ],
        ValueCN: [
          { required: true, message: '请注明', trigger: 'blur' },
          { max: 1000, message: `${this.$t('common:ruleMessage:maxLength')} 1000` }
        ],
        InternationalizationType: [
          { required: true, message: '请选择', trigger: 'blur' }
        ]
      },
      model_cfg: { visible: false, showClose: true, width: '600px', title: '', appendToBody: true }
    }
  },
  mounted() {
  },
  methods: {

    openDialog(title, data) {
      this.model_cfg.visible = true
      this.model_cfg.title = title
      if (Object.keys(data).length > 0) {
        for (const k in this.form) {
          if (data.hasOwnProperty(k)) {
            this.form[k] = data[k]
          }
        }
      } else {
        this.form = formDataDefault()
      }
    },
    handleSave() {
      this.$refs.i18nForm.validate(valid => {
        if (!valid) return
        this.loading = true
        addOrUpdateInternationalization(this.form).then(res => {
          this.loading = false
          this.$message.success('保存成功！')
          this.model_cfg.visible = false
          this.$emit('getList')
        }).catch(() => {
          this.loading = false
        })
      })
    },
    handleCancle() {
      this.model_cfg.visible = false
    }
  }
}
</script>
