<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="$t('system:l18n:search:InternationalizationType')"
          prop="InternationalizationType"
          v-if="status !== 'batch'"
        >
          <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="$t('system:l18n:search:Module')"
          prop="Module"
          v-if="status !== 'batch'"
        >
          <el-input
            v-model="form.Module"
            type="textarea"
            maxlength="200"
            :autosize="{ minRows: 2, maxRows: 4 }"
          />
        </el-form-item>
        <el-form-item
          :label="$t('system:l18n:search:Code')"
          prop="Code"
          v-if="status !== 'batch'"
        >
          <el-input
            v-model="form.Code"
            type="textarea"
            maxlength="200"
            :autosize="{ minRows: 2, maxRows: 4 }"
          />
        </el-form-item>
        <el-form-item
          :label="$t('system:l18n:search:ValueCN')"
          prop="ValueCN"
          v-if="status !== 'batch'"
        >
          <el-input
            v-model="form.ValueCN"
            type="textarea"
            maxlength="1000"
            :autosize="{ minRows: 2, maxRows: 4 }"
          />
        </el-form-item>
        <el-form-item
          :label="$t('system:l18n:search:Value')"
          prop="Value"
          v-if="status !== 'batch'"
        >
          <el-input
            v-model="form.Value"
            type="textarea"
            maxlength="1000"
            :autosize="{ minRows: 2, maxRows: 4 }"
          />
        </el-form-item>
        <el-form-item :label="$t('system:l18n:search:State')" 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-item
          :label="$t('system:l18n:search:Description')"
          prop="Description"
          v-if="status !== 'batch'"
        >
          <el-input
            v-model="form.Description"
            type="textarea"
            maxlength="200"
            :autosize="{ minRows: 2, maxRows: 4 }"
          />
        </el-form-item>
        <el-form-item
          :label="$t('system:l18n:search:PublishVersion')"
          prop="PublishLogId"
        >
          <el-select v-model="form.PublishLogId" clearable filterable>
            <el-option
              v-for="item in PublishVersionList"
              :key="item.Id"
              :label="item.Version"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </template>
    <template slot="dialog-footer">
      <el-button size="small" type="primary" @click="handleCancle">{{
        $t('common:button:cancel')
      }}</el-button>
      <el-button size="small" type="primary" @click="handleSave">{{
        $t('common:button:save')
      }}</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,
    Module: null,
    Code: null,
    Value: null,
    ValueCN: null,
    InternationalizationType: 1,
    PublishLogId: null,
  }
}
export default {
  name: 'I18nForm',
  components: { BaseModel },
  data() {
    return {
      status: 'add', // add update batch
      loading: false,
      form: formDataDefault(),
      rules: {
        State: [
          {
            required: true,
            message: this.$t('system:l18n:rule:selectState'),
            trigger: 'blur',
          },
        ],
        Module: [
          {
            max: 200,
            message: `${this.$t('common:ruleMessage:maxLength')} 200`,
            trigger: 'blur',
          },
        ],
        Description: [
          {
            max: 200,
            message: `${this.$t('common:ruleMessage:maxLength')} 200`,
            trigger: 'blur',
          },
        ],
        Code: [
          {
            required: true,
            message: this.$t('system:l18n:rule:inputCode'),
            trigger: 'blur',
          },
          {
            max: 200,
            message: `${this.$t('common:ruleMessage:maxLength')} 200`,
          },
        ],
        Value: [
          {
            required: true,
            message: this.$t('system:l18n:rule:inputValue'),
            trigger: 'blur',
          },
          {
            max: 1000,
            message: `${this.$t('common:ruleMessage:maxLength')} 1000`,
          },
        ],
        ValueCN: [
          {
            required: true,
            message: this.$t('system:l18n:rule:inputValueCN'),
            trigger: 'blur',
          },
          {
            max: 1000,
            message: `${this.$t('common:ruleMessage:maxLength')} 1000`,
          },
        ],
        InternationalizationType: [
          {
            required: true,
            message: this.$t('system:l18n:rule:selectInternationalizationType'),
            trigger: 'blur',
          },
        ],
        PublishLogId: [
          {
            required: true,
            message: this.$t('system:l18n:rule:selectPublishLogId'),
            trigger: 'blur',
          },
        ],
      },
      model_cfg: {
        visible: false,
        showClose: true,
        width: '600px',
        title: '',
        appendToBody: true,
      },
      PublishVersionList: [],
    }
  },
  mounted() {},
  methods: {
    openDialog(title, data, options = [], status) {
      this.PublishVersionList = options
      this.loading = false
      this.status = status
      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
        if (this.status === 'batch') {
          return this.$emit('batch', this.form)
        }
        addOrUpdateInternationalization(this.form)
          .then((res) => {
            this.loading = false
            this.$message.success(this.$t('common:message:savedSuccessfully'))
            this.model_cfg.visible = false
            this.$emit('getList')
          })
          .catch(() => {
            this.loading = false
          })
      })
    },
    handleCancle() {
      this.model_cfg.visible = false
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-select {
  width: 100%;
}
</style>
