<template>
  <div>
    <ul>
      <li
        v-for="item in items"
        :key="item.langDesc"
        style="display：table; text-align: center"
      >
        <br>
        {{ item.langDesc }}:
        <Input
          v-model="item.menuName"
          type="text"
          style="width:240px"
          size="small"
          maxlength="30"
        ></Input>
        <br>
      </li>
    </ul>
  </div>
</template>
<script>
import { GetMenuLang, SetManuAndLang } from '../server.js';
export default {
  props: {
    menuId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      items: []
    };
  },
  created: function() {
    this.$emit('SetPageSize', 400);
    this.getMenuLang();
    this.$emit('SetTitle', '功能名称编辑');
    this.$emit('SetPageActions', [
      {
        text: '保存',
        theme: 'primary',
        icon: 'edit',
        action: 'SetManuLAng',
        handle: this.updateMenuLang
      }
    ]);
  },
  methods: {
    getMenuLang() {
      GetMenuLang(this.menuId).then(response => {
        for (const key in response) {
          if (key) {
            this.items.push({ langCode: response[key].langCode, langDesc: response[key].langDesc, menuName: response[key].menuName, version: response[key].version });
          }
        }
      });
    },
    updateMenuLang() {
      // 文本框输入格式校验
      const dataUpdate = [];
      for (const key in this.items) {
        if (key) {
          dataUpdate.push({ langCode: this.items[key].langCode, langDesc: this.items[key].langDesc, menuId: this.menuId, menuName: this.items[key].menuName, version: this.items[key].version });
        }
      }
      SetManuAndLang(dataUpdate).then(() => {
        this.$Message.success({
          content: '功能名称修改成功',
          duration: 3
        });
      });
      this.$emit('Close', dataUpdate);
    }
  }
};
</script>
