<template>
  <div>
    <el-dialog
      :title="dataId?$t1('编辑多语言'):$t1('新增多语言')"
      :append-to-body="true"
      :modal-append-to-body="true"
      :close-on-click-modal="false"
      :visible.sync="showDialog"
      :modal="false"
      custom-class="dialog-style list-dialog dialog-checkbox pd_8"
      width="544px"
      v-el-drag-dialog
      @close="close"
    >
      <div class="cont" style="max-height: 500px;">
        <el-form ref="editForm" :model="fieldTranslation" label-width="110px" class="adSearchForm"
                 style="width:100%;height: auto;">
          <el-form-item :label="$t1('数据类型')" prop="dataTypeName" :rules="[{ required: false, trigger: 'blur' }]">
            <span>{{ dataTypeMap[fieldTranslation.dataTypeCode] }}</span>
          </el-form-item>
          <el-form-item :label="$t1('字段编码')" prop="fieldCode" :rules="[{ required: false, trigger: 'blur' }]" class="block">
            <el-input type="textarea" :rows="2" v-model="fieldTranslation.fieldCode" clearable/>
          </el-form-item>
          <el-form-item :label="$t1('中文')" prop="translation1" :rules="[{ required: false, trigger: 'blur' }]"
                        class="block">
            <el-input type="textarea" :rows="2" v-model="fieldTranslation.translation1" clearable/>
          </el-form-item>
          <el-form-item v-for="(item,index) in languageSettings" :key="index" :label="item.languageName" :prop="item.sn"
                        :rules="[{ required: false, trigger: 'blur' }]" class="block">
            <el-input type="textarea" :rows="2" v-model="fieldTranslation[item.translationField]" clearable/>
          </el-form-item>
<!--          <el-form-item :label="$t1('多语言标签')" prop="translation1" :rules="[{ required: false, trigger: 'blur' }]"
                        class="block">
            <langTagView v-model="fieldTranslation.fieldTranslationTagDTOs" :readonly="!isDev"></langTagView>
          </el-form-item>-->
          <el-form-item :label="$t1('创建时间')" prop="createDate" :rules="[{ required: false, trigger: 'blur' }]">
            <span>{{ fieldTranslation.createDate }}</span>
          </el-form-item>
          <el-form-item :label="$t1('更新时间')" prop="modifyDate" :rules="[{ required: false, trigger: 'blur' }]">
            <span>{{ fieldTranslation.modifyDate }}</span>
          </el-form-item>

        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button type="primary" plain class="button-sty" @click="showDialog=false">
        <i class="el-icon-close el-icon"></i>
        {{ $t1('取 消') }}
      </el-button>
      <el-button type="primary" @click="saveData" class="button-sty" v-if="isDev">
        <i class="el-icon-check el-icon"></i>
        {{ $t1('确 定') }}
      </el-button>
    </span>
    </el-dialog>
<!--    <langTagDialog v-if="showLangTagDialog"
                   :visiable.sync="showLangTagDialog"
                   @confirm="confirmLangTagDialog"
                   :multi="true"
                   :rows="fieldTranslationTagDTOs"
                   fieldKey="tagCode"></langTagDialog>-->
  </div>
</template>

<script>
import {getBdFlag} from "@base/api/user";
/*import langTagDialog from "../../../views/user/lang_tag/dialog.vue";
import langTagView from "@base/components/langTag/view.vue";*/


export default {
  components: {/*langTagDialog, langTagView*/},
  props: {
    _dataId: [String, Number],
    currentDataType: Object
  },
  data() {
    return {
      isEdit: false,
      tabIndex: 'first',
      showDialog: true,
      dataId: '',
      fieldTranslation: {
        dataTypeCode: null,
        dataTypeName: null
      },
      fieldTranslationDicts: [],
      fieldTranslationDictMap: {},
      groupArray: [],
      dataTypeGroup: "fieldTranslation",
      showDataTypeDialog: false,
      languageSettings: [],
      dataTypeMap: {
        "business": this.$t1('全局对照表'),
        "menus": this.$t1('菜单对照表'),
      },
      showLangTagDialog: false,
      isDev: true
    };
  },
  created() {
    if (this._dataId && !isNaN(this._dataId)) {
      this.dataId = this._dataId;
    } else {
      this.fieldTranslation.dataTypeCode = this.currentDataType?.dataTypeCode || null;
      this.fieldTranslation.dataTypeName = this.currentDataType?.dataTypeName || null;
    }
    /*this.$getBaseDicts({
      code: "fieldTranslation",
      success: ({dicts, dictMap}) => {
        this.fieldTranslationDicts = dicts;
        this.fieldTranslationDictMap = dictMap;
        // this.groupArray = this.chunkArray(dicts, 2);
      }
    });*/
    this.initLanguageSetting();
  },
  mounted() {
    // this.getBdEnv();
    this.getData();
  },
  methods: {
    initLanguageSetting() {
      return this.$http({
        url: USER_PREFIX + `/language_setting/listPage`,
        method: `post`,
        data: {
          enabled: true
        },
        isLoading: true,
        modalStrictly: true,
        success: res => {
          this.languageSettings = res?.objx?.records || [];
        }
      });
    },
    chunkArray(array, chunkSize) {
      let result = [];
      for (let i = 0; i < array.length; i += chunkSize) {
        result.push(array.slice(i, i + chunkSize));
      }
      return result;
    },
    getData(callback) {
      if (this.dataId && !isNaN(this.dataId)) {
        this.isEdit = true;
        this.$commonHttp({
          url: USER_PREFIX + `/fieldTranslation/get`,
          method: `post`,
          data: {
            id: this.dataId
          },
          isLoading: true,
          modalStrictly: true,
          success: res => {
            let row = res.objx || {};
            this.fieldTranslation = row;
            callback && callback(row);
          }
        });
      }
    },
    confirmDataType(rows) {
      if (rows.length) {
        let row = rows[0];
        this.fieldTranslation.dataTypeCode = row.dataTypeCode;
        this.fieldTranslation.dataTypeName = row.dataTypeName;
      }
    },
    saveData() {
      this.$refs.editForm.$baseValidate(valid => {
        if (valid) {
          this.$baseConfirm(this.$t1('您确定要保存吗？')).then(() => {
            var url = USER_PREFIX + (this.isEdit ? `/fieldTranslation/update` : `/fieldTranslation/save`);
            this.$http({
              url: url,
              method: `post`,
              data: this.fieldTranslation,
              isLoading: true,
              success: res => {
                this.$message({
                  message: res.content,
                  type: 'success',
                  duration: 500,
                  onClose: t => {
                    this.dataId = res.objx;
                    this.getData((row) => {
                      this.close();
                      this.$emit('confirm', row)
                    })
                  }
                });
              }
            });
          });
        }
      });
    },
    close() {
      this.showDialog = false;
      this.$emit('update:visiable', false)
    },
    openLangTagDialog() {
      let fieldTranslationTagDTOs = this.fieldTranslation.fieldTranslationTagDTOs || [];
      this.fieldTranslationTagDTOs = fieldTranslationTagDTOs.map(item => {
        return {
          tagCode: item.tagCode,
          tagName: item.tagName,
        }
      })
      this.showLangTagDialog = true;
    },
    confirmLangTagDialog(rows) {
      this.fieldTranslation.fieldTranslationTagDTOs = rows.map(item => {
        return {
          tagCode: item.tagCode,
          tagName: item.tagName
        }
      })
    },
    getBdEnv() {
      getBdFlag({
        success: res => {
          this.isDev = res.objx == 1
        }
      });
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-form-item {
  float: left;
  width: 50%;

  &.block {
    width: 100%
  }

  .el-form-item__content {
    font-size: 12px;

    .el-textarea__inner {
      margin-top: 3px;
    }

    .el-input {
      width: 100% !important;
    }
  }
}
</style>
