<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>
