<template>
    <el-dialog
      title="Editare {{nume_controller}}"
      v-model="showPopup"
      class="my-dialog-class"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        label-position="top"
        :inline="false"
        :rules="rules"
        label-width="100%"
        :model="selectedObject"
        ref="my-form"
        @submit.prevent="save"
        v-loading="loadingVisible"
      >
        <el-row :gutter="15">
          {{template_fields}}
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="showPopup = false">Renunta</el-button>
        <el-button type="primary" @click="save">Salveaza</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script>
  import settings from "@/backend/LocalSettings";
  import BaseLoggedPage from "../BaseLoggedPage.vue";
  
  export default {
    name: "{{nume_controller}}_Dialog",
    extends: BaseLoggedPage,
  
    data() {
      return {
        showPopup: false,
        mode: "add",
        languages: [],
        BASE_URL: "",
        selectedObject: {
          {{selected_object_campuri}}
        },
        Info: {},
        rules: {
          {{rules}}
        },
      };
    },
    methods: {
      show_me: async function (id) {
        this.showPopup = true;
        if (id == null) {
          this.mode = "add";
          {{clear_fields_code}}
        } else {
          this.mode = "edit";
          var result = await this.post("{{nume_controller}}/get_info_item_dialog", { id: id });
          this.selectedObject = result.Item;
        }
      },
  
      async get_info() {
        var response = await this.post("{{nume_controller}}/get_info_dialog");
        this.Info = response.Info;
        {{after_get_info}}
      },
      
      save: async function () {
        this.$refs["my-form"].validate(async (valid) => {
          if (valid) {
            await this.post("{{nume_controller}}/save", {
              mode: this.mode,
              object: this.selectedObject,
            });
            this.showPopup = false;
            this.$emit("save");
          }
        });
      },
    },
    mounted: function () {
      this.BASE_URL = settings.BASE_URL;
      this.get_info();
    },
  };
  </script>
  
  <style lang="less" scoped>
  .full-width {
    width: 100%;
  }
  .avatar{
    width: 50%;
  }
  .avatar-uploader-icon{
    border: 1px solid #DCDCDC;
    padding: 25px;
  }
  </style>