<template>
        <base-page>
        <titlu-pagina Titlu="Adauga client" @on_add_clicked="show_dialog()"  @click="get_info()" :AdaugaVisible='true'  />
        <el-card style='margin:5px 0px 5px 0px'>
            <div slot="header" class="clearfix">
                <strong> Filtre </strong>
            </div>
            <div class="filtre">
                <el-form @submit.prevent.native='refresh_info()'>
                    <el-row :gutter="20">
                        
            <el-col :span='4'>
                <el-form-item label='Nume' >
                    <el-input v-model='Filters.Nume' @input="refresh_info()" clearable size="mini" />
                </el-form-item>
            </el-col>
            <el-col :span='4'>
                <el-form-item label='Prenume' >
                    <el-input v-model='Filters.Prenume' @input="refresh_info()" clearable size="mini" />
                </el-form-item>
            </el-col>
            <el-col :span='4'>
                <el-form-item label='Email' >
                    <el-input v-model='Filters.Email' @input="refresh_info()" clearable size="mini" />
                </el-form-item>
            </el-col>
             <el-col :span='4'>
                <el-form-item label='Observatii' >
                    <el-input v-model='Filters.Observatii' @input="refresh_info()" clearable size="mini" />
                </el-form-item>
            </el-col>
            <el-col :span='4'>
                <el-form-item label='Telefon' >
                    <el-input v-model='Filters.Telefon' @input="refresh_info()" clearable size="mini" />
                </el-form-item>
            </el-col>
            <el-col :span='4'>
                <el-form-item label='CNP' >
                    <el-input v-model='Filters.Cnp' @input="refresh_info()" clearable size="mini" />
                </el-form-item>
            </el-col>
            <el-col :span='7'>
               
                <el-form-item label='Interval data creare' >
                    <el-date-picker v-model="Filters.IntervalData"
                        @change="refresh_info()"
                        type="daterange"
                        value-format='yyyy-MM-dd'
                        start-placeholder="Start Date"
                        end-placeholder="End Date"
                        size='mini'/>
                </el-form-item>
            </el-col>
            <el-col :span='4'>
                <el-form-item label='Utilizator creare' >
                    <el-select class='full-width' v-model='Filters.IdUserCreare' @change="refresh_info()"  size="mini" >
                        <el-option label='Oricare' value="-1"/>
                        <el-option
                            v-for="item in Info.utilizatori"
                            :key="item.Id"
                            :label="item.Nume"
                            :value="item.Id"/>
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span='4'>
                <el-form-item label='Tip persoana' >
                     <el-select class='full-width' v-model='Filters.TipPersoana' @change="refresh_info()" size="mini" >
                        <el-option label='Oricare' value="-1" />
                        <el-option label='Fizica' value='Fizica' />
                        <el-option label='Juridica' value='Juridica'></el-option>
                     </el-select>
                </el-form-item>
            </el-col>                        
                <el-col :md='24' >
            </el-col>
        </el-row>
    </el-form>
    </div>
    </el-card>

<el-table :data="Results">
    <el-table-column prop='Id' label='Id' ></el-table-column>
    <el-table-column prop='Nume' label='Nume' ></el-table-column>
    <el-table-column prop='Prenume' label='Prenume' >
        <template #default="{row}">
            {{ row.TipPersoana == 'Juridica' ? '-' : row.Prenume }}
        </template>
    </el-table-column>
    <el-table-column prop='NumeUtilizator' label='Utilizator' >
        <template #default="{row}">
            {{ row.NumeUtilizator =='' ? '-': row.NumeUtilizator}}
        </template>
        <!-- <template #default="{row}">
            {{row.IdUserCreare=='2' ? 'filip' : row.IdUserCreare && row.IdUserCreare=='1' ? 'dan' : row.IdUserCreare}}
        </template> -->
    </el-table-column>
    <el-table-column prop='DataCreare' label='Data creare' value-format='dd/MM/yyyy'></el-table-column>
    <el-table-column prop='TipPersoana' label='Tip persoana' ></el-table-column>
    <el-table-column fixed="right" label="Actiuni" width="200px" >
    <template slot-scope="scope" >
        
    <el-tooltip content="Modificare">
            <el-button type="primary" icon="el-icon-edit"  @show_me circle @click="show_dialog(scope.row.Id)" />
    </el-tooltip>

    <el-tooltip content="Sterge" >
        <el-button type="danger" icon="el-icon-delete" circle @click="delete_item(scope.row)" />
    </el-tooltip>

</template>
</el-table-column>
</el-table>
<el-pagination @size-change="refresh_info" @current-change="refresh_info" :page-size.sync="PaginationInfo.PerPage" :current-page.sync="PaginationInfo.Page" :total="PaginationInfo.RowCount" layout="pager" />
<Clienti-dialog ref='dlg' @save="refresh_info()"/>
</base-page>
</template>

<script>
import settings from "@/backend/LocalSettings";
import BasePage from "@/pages/BasePage";
import Clienti_dialog from '@/pages/clienti/Clienti_dialog.vue';
import TitluPagina from '@/widgets/TitluPagina';
// import ElementUI from 'element-ui';
// import lang from 'element-ui-languages/lang/ro-RO';

// Utilizați limba română
// ElementUI.use(lang);
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
// import locale from 'element-ui-languages/lang/ro_RO';

// Vue.use(ElementUI, { locale });
// import { ConfigProvider } from 'antd';
// import ro_RO from 'antd/locale/ro_RO';




export default {
    name: "clienti",
    extends: BasePage,
    components: {
        'base-page': BasePage,
        'Clienti-dialog': Clienti_dialog,
        'titlu-pagina': TitluPagina
    },
    data () {
        return {

        //     pickerOptions: {
        //         locale: 'ro',
        //         shortcuts: [{
        //                 onClick(picker) {
        //                     const end = new Date();
        //                     const start = new Date();
        //                     start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        //                     picker.$emit('pick', [start, end]);
        //     }
        // }]
        
        // },
            Results: [],
            base_url: '',
            Info: {
                utilizatori:[],
                
                },
            Filters: {
                Nume: '' , Prenume: '' , Email: '' , Telefon: '' , Cnp: '' , TipPersoana: '-1' , Observatii:'' , IdUserCreare: '-1', IntervalData:['',''],      },
            OrderBy: { },

            rules:{
                Nume: [ { required: true, message: 'Campul este obligatoriu' } ], 
                Prenume: [ { required: true, message: 'Campul este obligatoriu' } ], 
                Email: [ { required: true, message: 'Campul este obligatoriu' } ], 
                Telefon: [ { required: true, message: 'Campul este obligatoriu' } ], 
                Adresa: [ { required: true, message: 'Campul este obligatoriu' } ], 
                Cnp: [ { required: true, message: 'Campul este obligatoriu' } ],
                IdUserCreare: [ { required: true, message: 'Campul este obligatoriu' } ],
                DataCreare: [ { required: true, message: 'Campul este obligatoriu' } ], 
                Observatii:[{required:true, message:'Campul este obligatoriu'}],
                TipPersoana: [ { required: true, message: 'Campul este obligatoriu' } ],

            },
            PaginationInfo: { Page: 1, PerPage: 50, RowCount: 0, PageSizes: [10, 25, 50, 100, 200] },

        
        }
    },

    methods: {
        // test(){
        //     const dataIncepere = this.Filters.DataCreare[0]
        //     const dataSfarsit = this.Filters.DataCreare[1]
        //     console.log('data inceput:',dataIncepere)
        //     console.log('data final:',dataSfarsit)
        // },

        async get_info(){
            var response        = await this.post("utilizatori/get_info" );
            this.Info.utilizatori=response.utilizatori;
            this.refresh_info();
        },

        async refresh_info(){       
            
            var response        = await this.post("clienti/index", { Filters: this.Filters, OrderBy: this.OrderBy, PaginationInfo: this.PaginationInfo } );
            this.Results        = response.Results;
            this.PaginationInfo = response.PaginationInfo;     
            this.select_menu_item('clienti');
            

        },
        
        


        async delete_item( item ){
            // var totalClienti = this.PaginationInfo.RowCount;
            // if (totalClienti < 10) {
            // this.$message({
            //     type: 'warning',
            //     message: 'Nu puteți șterge un client când există mai puțin de 10 clienți în total.'
            // });
            // }
              if (item.TipPersoana === 'Juridica') {
                this.$message({
                    type: 'warning',
                    message: 'Nu puteti sterge un client de tip persoana juridica.'
                });
            } else  {
                var confirm =  await this.$confirm(`Sunteti sigur ?`, 'Warning');
                if( confirm ){
                    const response = await this.post("clienti/delete_item", { id: item.Id } );
                        if(response.success==false){
                            this.$message({
                                type: 'warning',
                                message: response.message
                            });
                        }
                    this.refresh_info();
                }
            }
        },

        show_dialog(id){
            this.$refs.dlg.show_me(id);
        },
        

        // showDialog(title) {
        //     this.dialogTitle = title; 
        //     this.dialogVisible = true;
        // },

        

    },
    mounted(){
        this.base_url = settings.BASE_URL;
        this.get_info();
        // this.getUserFromToken();
    }
};
</script>

<style lang="less" scoped>

    .top50{
        margin-top: 20px;
    }

    .filtre{
        .el-input-number
        {
            width: 100% !important;
        }
    }

</style>
