<template>
  <base-model :config="model_cfg">
    <template slot="dialog-body">
      <el-form ref="batcnAddForm" v-loading="loading" :model="form" size="small" :rules="rules">
        <el-form-item :label="$t('system:l18n:search:InternationalizationType')" 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="$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: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-table :data="form.AddList" style="width: 100%" height="300">
          <el-table-column prop="" :label="$t('system:l18n:search:Module')">
            <template slot-scope="scope">
              <el-form-item label="" :prop="`AddList.${scope.$index}.Module`" :rules="[
                {
                  max: 200,
                  message: `${$t('common:ruleMessage:maxLength')} 200`,
                  trigger: ['change', 'blur'],
                },
              ]">
                <el-input v-model="scope.row.Module" type="textarea" maxlength="200"
                  :autosize="{ minRows: 2, maxRows: 4 }" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="" :label="$t('system:l18n:search:Code')">
            <template slot-scope="scope">
              <el-form-item label="" :prop="`AddList.${scope.$index}.Code`" :rules="[
                {
                  required: true,
                  message: $t('common:ruleMessage:specify'),
                  trigger: ['change', 'blur'],
                },
                {
                  max: 200,
                  message: `${$t('common:ruleMessage:maxLength')} 200`,
                },
              ]">
                <el-input v-model="scope.row.Code" type="textarea" maxlength="200"
                  :autosize="{ minRows: 2, maxRows: 4 }" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="" :label="$t('system:l18n:search:ValueCN')">
            <template slot-scope="scope">
              <el-form-item label="" :prop="`AddList.${scope.$index}.ValueCN`" :rules="[
                {
                  required: true,
                  message: $t('common:ruleMessage:specify'),
                  trigger: ['change', 'blur'],
                },
                {
                  max: 1000,
                  message: `${$t('common:ruleMessage:maxLength')} 1000`,
                },
              ]">
                <el-input v-model="scope.row.ValueCN" type="textarea" maxlength="1000"
                  :autosize="{ minRows: 2, maxRows: 4 }" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="" :label="$t('system:l18n:search:Value')">
            <template slot-scope="scope">
              <el-form-item label="" :prop="`AddList.${scope.$index}.Value`" :rules="[
                {
                  required: true,
                  message: $t('common:ruleMessage:specify'),
                  trigger: ['change', 'blur'],
                },
                {
                  max: 1000,
                  message: `${$t('common:ruleMessage:maxLength')} 1000`,
                },
              ]">
                <el-input v-model="scope.row.Value" type="textarea" maxlength="1000"
                  :autosize="{ minRows: 2, maxRows: 4 }" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="" :label="$t('system:l18n:search:Description')">
            <template slot-scope="scope">
              <el-form-item label="" :prop="`AddList.${scope.$index}.Description`" :rules="[
                {
                  max: 200,
                  message: `${$t('common:ruleMessage:maxLength')} 200`,
                  trigger: ['change', 'blur'],
                },
              ]">
                <el-input v-model="scope.row.Description" type="textarea" maxlength="200"
                  :autosize="{ minRows: 2, maxRows: 4 }" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column align="right" width="100">
            <template slot="header">
              <!-- 新增 -->
              <el-button size="small" type="primary" @click="handleAdd">{{ $t('common:button:new') }}</el-button>
            </template>
            <template slot-scope="scope">
              <!-- 删除 -->
              <el-button type="text" @click="handleDelete(scope.$index)">{{ $t('common:button:delete') }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </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 { batchAddInternationalization } from '@/api/admin'
import BaseModel from '@/components/BaseModel'
const formDataDefault = () => {
  return {
    State: 0,
    InternationalizationType: 1,
    PublishLogId: null,
    AddList: [],
  }
}
export default {
  name: 'BatcnAddForm',
  components: { BaseModel },
  data() {
    return {
      loading: false,
      form: formDataDefault(),
      model_cfg: {
        visible: false,
        showClose: true,
        width: '800px',
        title: '',
        appendToBody: true,
      },
      rules: {
        PublishLogId: [
          {
            required: true,
            message: this.$t('system:l18n:rule:selectPublishLogId'),
            trigger: 'blur',
          },
        ],
      },
      PublishVersionList: [],
    }
  },
  mounted() { },
  methods: {
    openDialog(title, data, options = []) {
      this.PublishVersionList = options
      this.model_cfg.visible = true
      this.model_cfg.title = title
      this.form = formDataDefault()
    },
    handleSave() {
      this.$refs.batcnAddForm.validate((valid) => {
        if (!valid) return
        this.loading = true
        batchAddInternationalization(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
    },
    handleAdd() {
      this.form.AddList.push({
        Description: '',
        Code: '',
        ValueCN: '',
        Value: '',
      })
    },
    handleDelete(index) {
      this.$confirm(this.$t('system:l18n:confirm:delete'), {
        type: 'warning',
        distinguishCancelAndClose: true,
      }).then(() => {
        this.form.AddList.splice(index, 1)
      })
    },
  },
}
</script>
