<template>
  <a-modal
    :title="$t('多语言维护')"
    :visible="visible"
    :confirm-loading="submitLoading"
    :cancelText="$t('取消')"
    :okText="$t('保存')"
    @ok="submit"
    @cancel="visible = false"
  >
    <a-spin :spinning="loading">
      <a-form-model
        ref="formList"
        class="multilingual_detail_from"
        :model="formList"
        :rules="rules"
        v-bind="{
          labelCol: { span: 6 },
          wrapperCol: { span: 17 },
        }"
      >
        <a-form-model-item
          :label="$t('编码')"
          prop="code"
        >
          <a-input
            v-model="formList.code"
            :placeholder="$t('请输入编码')"
          />
        </a-form-model-item>
        <template v-for="item in formList.details">
          <a-form-model-item
            required
            :key="item.type"
            :label="item.typeName"
          >
            <a-input
              v-model="item.value"
              :placeholder="`${$t('请输入语言资源')}：${item.typeName}`"
            />
          </a-form-model-item>
        </template>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>
<script>
  const $appService = require('w-vue-basis/src/api/appService');

  export default {
    name: 'multilingualDetail',
    props: {
      show: [Boolean],
      info: [Object],
    },
    computed: {
      visible: {
        get() {
          return this.show;
        },
        set(val) {
          this.$emit('update:show', val);
        },
      },
    },
    data() {
      return {
        loading: false,
        formList: {
          code: undefined,
          details: [],
        },
        rules: {
          code: [{ required: true, message: $t('请输入编码'), trigger: 'blur' }],
        },
        submitLoading: false,
      };
    },
    watch: {
      visible(val) {
        if (val) {
          this.initData();
        }
      },
    },
    created() {},
    methods: {
      async initData() {
        this.formList.code = this.info.code || undefined,
        this.formList.details = $winexI18n.languageTypes.map(item => {
          return {
            code: this.info.code,
            type: item.value,
            typeName: item.name,
            value: undefined
          };
        });

        if(this.info.code) {
          $appService.getSysLangList({
            pageNum: 1,
            pageSize: 15,
            queryParams: {
              F_code_eq: this.info.code,
            },
          }).then(req => {
            let info = req.data;
            this.formList.details.forEach(item => {
              let val = info.find(v => { return v.type == item.type });
              if(val) {
                item.value = val.content;
              }
            });
          })
        }
      },
      /**
       * @Author: y_zp
       * @description: 提交
       */
      submit() {
        this.$refs.formList.validate((valid) => {
          if (valid) {
            let pass = true;
            this.formList.details.forEach(item => {
              if (!item.value) {
                pass = false;
                this.$message.success(`${$t("请输入语言资源")}：${item.typeName}!`);
              }
            });
            if(pass) {
              let params = this.formList.details.map(item => {
                return {
                  code: this.formList.code,
                  type: item.type,
                  content: item.value,
                  status: "0",
                  statusName: '未锁定'

                }
              });
              $appService.batchSaveSysLang(params).then(req => {
                this.visible = false;
                this.$message.success($t('保存成功'));
                this.$emit('change');
              })
            }
          }
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  .multilingual_detail_from {
    .btn {
      text-align: right;
    }
  }
</style>
