<template>
  <a-modal
    :visible="true"
    :width="1000"
    title="多语言配置"
    @cancel="handcancel(thethis)"
    :footer="null"
    :maskClosable="false"
    class="Lang"
  >
    <a-spin :spinning="false">
      <a-form-model ref="ruleForm" :model="form" v-bind="formLayout" :rules="rules">
        <a-form-model-item style="display: none">
          <a-input
            allow-clear
            autocomplete="off"
            v-decorator="['operateType']"
            type="hidden"
          />
        </a-form-model-item>
        <a-card
          class="card"
          :title="data ? '更改' : '新增'"
          :bordered="false"
          size="small"
        >
          <a-row class="form-row" :gutter="[16, 0]" v-if="formAdd.length <= 0">
            <!-- 关键词 -->
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item label="关键词" prop="key">
                <a-input
                  placeholder="请输入关键词"
                  v-model="form.key"
                />
              </a-form-model-item>
            </a-col>

            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item label="语言" prop="language">
                <a-select v-model="form.language">
                  <a-select-option :value="'zh-CN'">中文</a-select-option>
                  <a-select-option :value="'en-US'">英文</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <!-- 显示 -->
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item label="显示内容" prop="value">
                <a-input
                  placeholder="请输入显示内容"
                  v-model="form.value"
                  
                />
              </a-form-model-item>
            </a-col>
            <!-- 排序 -->
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-model-item label="排序" prop="sort">
                <a-input v-model="form.sort" :style="{ width: '150px' }" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <template v-else>
            <a-form-model
              ref="ruleForm2"
              v-for="(item, index) in formAdd"
              :key="index"
              :model="item"
              v-bind="formLayout"
              :rules="rules"
            >
              <a-row class="form-row" :gutter="[16, 0]">
                <!-- 关键词 -->
                <a-col :lg="12" :md="12" :sm="24">
                  <a-form-model-item label="关键词" prop="key">
                    <a-input
                      placeholder="请输入关键词"
                      v-model="item.key"
                      
                    />
                  </a-form-model-item>
                </a-col>

                <a-col :lg="12" :md="12" :sm="24">
                  <a-form-model-item label="语言" prop="language">
                    <a-select v-model="item.language">
                      <a-select-option :value="'zh-CN'">中文</a-select-option>
                      <a-select-option :value="'en-US'">英文</a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <!-- 显示 -->
                <a-col :lg="12" :md="12" :sm="24">
                  <a-form-model-item label="显示内容" prop="value">
                    <a-input
                      placeholder="请输入显示内容"
                      v-model="item.value"
                      
                    />
                  </a-form-model-item>
                </a-col>
                <!-- 排序 -->
                <a-col :lg="12" :md="12" :sm="24">
                  <a-form-model-item label="排序" prop="sort">
                    <a-input v-model="item.sort"  />
                  </a-form-model-item>
                </a-col>

                <a-divider />
              </a-row>
            </a-form-model>
            <a-button
              type="dashed"
              :style="{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                margin: '0px auto',
                width: '140px',
              }"
              @click="add"
            >
              <a-icon type="plus" /> Add
            </a-button>
          </template>
          <!-- 提交和重置 -->
          <div :style="{ margin: '20px auto', width: '140px' }">
            <a-button type="primary" @click="on_Submit">
              {{ data ? "更改" : "提交" }}
            </a-button>
            <a-button
              style="margin-left: 10px"
              @click="
                () => {
                  $emit('closePopForm', that);
                }
              "
            >
              关闭
            </a-button>
          </div>
        </a-card>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>
<script>
import {
  formLayout,
  rules,
  isHaveData,
  clearInfo,
  handcancel,
} from "@/common/components/Commonality/Form/js/form.js";
import { addLangInfo,modifyLangInfo } from "@/baseConfigComponents/api/langSetting";
export default {
  props: ["data", "that", "site"],
  mounted() {
    console.log();
    this.data ? (this.form = this.data) : this.formAdd.push({ ...this.form });
  },
  data() {
    this.thethis = this;
    return {
      // 布局
      formLayout,
      // 表单初始格式
      form: {
        id: 0,
        key: "",
        language: "",
        value: "",
        sort: 0,
      },
      formAdd: [],
      // 验证规则
      rules: {
        key: [rules.required],
        language: [rules.required],
        value: [rules.required],
      },
    };
  },

  methods: {
    // 重置表单元素
    clearInfo,

    // 关闭
    handcancel,

    add() {
      this.formAdd.push({ ...this.form });
    },

    // 提交（更改）表单
    on_Submit(type) {
      var that = this;
      // 提示框确认
      this.$confirm({
        title: "确认提交？",
        okText: "提交",
        cancelText: "取消",
        onOk() {
          // 点击确定
          if (that.data) {
            that.info = { ...that.form };
            that.$refs.ruleForm.validate((valid) => {
              if (valid) {
                console.log(that.info);
                modifyLangInfo(that.site.siteCode, that.info).then((res) => {
                  that.$message.success(that.$t("成功"));
                  that.handcancel(that);
                  that.$emit('getList','')
                });
              }
              console.log(valid);
            });
          } else {
            var validResult = true;
            that.info = that.formAdd;
            that.$refs.ruleForm2.forEach((item) => {
              item.validate((valid) => {
                console.log(valid);
                if (!valid) {
                  validResult = false;
                  return;
                }
              });
            });

            if (validResult) {
              addLangInfo(that.site.siteCode, that.info).then((res) => {
                that.$message.success(that.$t("成功"));
                that.handcancel(that);
                that.$emit('getList','')
              });
            }
          }

          // this.$refs.ruleForm2.forEach((item) => {
          //   item.validate((valid) => {
          //     if (!valid) {
          //       validResult = false;
          //       return;
          //     }
          //   });
          // });
        },
        onCancel() {},
      });
    },
  },

  components: {},
};
</script>

<style lang="less" >
.Lang .ant-col-sm-13 {
      display: block;
      box-sizing: border-box;
      width: 70.16666667% !important;
  }



</style>

