<template>
  <BaseLoggedPage>
    <el-card>
      <div slot="header" class="clearfix">
        <div class="header-top">
          <h1>{{nume_controller}}</h1>
          <el-button @click="add_item()">+</el-button>
        </div>
      </div>
      
      <div class="top-bar">
        <div class="filtre">
          <el-form @submit.native.prevent="refresh_info()">
            {{template_filtre}}
            <el-input placeholder="Cautare dictionar" prefix-icon="el-icon-search" v-model="Filters.Nume"
              @input="refresh_info()" clearable />
          </el-form>
        </div>
      </div>
      
      <hr />

      <el-table :data="Results">
        {{coloane}}
        <el-table-column prop="Sters" label="Sters">
          <template #default="scope">
            <span v-if="scope.row.Sters == 1">DA</span>
            <span v-else>NU</span>
          </template>
        </el-table-column>

        <el-table-column label="Actiuni" width="150">
          <template #default="scope">
            <el-tooltip content="Modificare">
              <el-button type="primary" size="small" circle @click="edit_item(scope.row.Id)">
                <el-icon>
                    <Edit />
                </el-icon>
              </el-button>
            </el-tooltip>

            <el-tooltip content="Sterge" v-if="scope.row.Sters == 0">
              <el-button type="danger" size="small" circle @click="delete_item(scope.row.Id)">
                <el-icon>
                    <Delete />
                </el-icon>
              </el-button>
            </el-tooltip>
            <el-tooltip content="Pune inapoi" v-if="scope.row.Sters == 1">
              <el-button type="danger" size="small" circle @click="undelete_item(scope.row.Id)">
                <el-icon>
                    <Back />
                </el-icon>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="refresh_info" @current-change="refresh_info" v-model:page-size="PaginationInfo.PerPage"
        v-model:current-page="PaginationInfo.Page" :total="PaginationInfo.RowCount" layout="pager" />
    </el-card>
    
    <dictionare-dialog ref="dlg" @save="refresh_info" />
    <designer-dialog ref="designerDlg"  />
  </BaseLoggedPage>
</template>
  
<script>
import BaseLoggedPage from "@/pages/BaseLoggedPage.vue";
import {{nume_controller}}_Dialog from "./{{nume_controller}}_Dialog.vue";


export default {
  name: "dictionare",
  components: { BaseLoggedPage, "{{nume_controller}}-dialog": {{nume_controller}}_Dialog },
  extends: BaseLoggedPage,
  data: function () {
    return {
      Results: [],
      base_url: "",
      Info: {
          {{info_array}}
      },
      Filters: { {{filtre_array}} },
      OrderBy: {},
      PaginationInfo: {
        Page: 1,
        PerPage: 50,
        RowCount: 0,
        PageSizes: [10, 25, 50, 100, 200],
      },
    };
  },
  methods: {
    async get_info() {
      
      var response = await this.post("{{nume_controller}}/get_info");
      this.Info = response.Info;
      this.refresh_info();
      {{after_get_info}}
    },

    async refresh_info() {
      var response = await this.post("{{nume_controller}}/refresh_info", { Filters: this.Filters, OrderBy: this.OrderBy, PaginationInfo: this.PaginationInfo });
      this.Results = response.Results;
      this.PaginationInfo = response.PaginationInfo;
    },
    add_item(){
      this.$refs.dlg.show_me();
    },
    edit_item(id) {
      this.$refs.dlg.show_me(id);
    },
    async delete_item(id) {
        var confirm = await this.$confirm(`Sunteti sigur ?`, 'Warning');
        if (confirm) {
            await this.post("{{nume_controller}}/delete_item", { id: id });
            this.refresh_info();
        }
    },
    async undelete_item(id) {
        var confirm = await this.$confirm(`Punem inapoi ?`, 'Warning');
        if (confirm) {
            await this.post("{{nume_controller}}/undelete_item", { id: id });
            this.refresh_info();
        }
    },
  },
  mounted: function () {
    this.get_info();
  },
};
</script>
  
<style lang="less" scoped>
</style>
  