    <template>
            <el-dialog :title="dialogTitles" :visible.sync="showPopup"  class="my-dialog-class"  >
            <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" >
                    
                <el-col :md='8'>
                    <el-form-item label='Nume' prop="Nume" clearable>
                        <el-input  class='full-width' v-model='selectedObject.Nume'  size="mini" />
                    </el-form-item>
                </el-col>
                <el-col :md='8'>
                    <el-form-item label='Prenume' prop="Prenume" clearable>
                        <el-input  class='full-width' v-model='selectedObject.Prenume'  size="mini" />
                    </el-form-item>
                </el-col>
                <el-col :md='8'>
                    <el-form-item label='Email' prop="Email" >
                        <el-input  class='full-width' v-model='selectedObject.Email'  size="mini" />
                    </el-form-item>
                </el-col>
                <el-col :md='8'>
                    <el-form-item label='Telefon' prop="Telefon">
                        <el-input  class='full-width' v-model='selectedObject.Telefon'  size="mini"/>
                    </el-form-item>
                </el-col>
                <el-col :md='8'>
                    <el-form-item label='Observatii' prop="Observatii">
                        <el-input class='full-width' v-model='selectedObject.Observatii'  size="mini" />
                    </el-form-item>
                </el-col>
                <el-col :md='8'>
                    <el-form-item label='Adresa' prop="Adresa">
                        <el-input  class='full-width' v-model='selectedObject.Adresa'  size="mini" />
                    </el-form-item>
                </el-col>
                <el-col :md='8'>
                    <el-form-item label='Tip Persoana' prop="TipPersoana">
                        <el-select class='full-width' v-model='selectedObject.TipPersoana' size="mini" >
                        <el-option label='Fizica' value='Fizica'></el-option>
                        <el-option label='Juridica' value='Juridica'></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :md='8'>
                    <el-form-item label='CNP' prop="Cnp"> <!--prop am folosit pentru a accesa rules din script, (pentru a face campurile required) -->
                        <el-input 
                        @input='handleCNPInput'
                        class='full-width' 
                        size="mini" 
                        show-word-limit
                        :maxlength="13" 
                        v-model='selectedObject.Cnp'
                        />
                        
                    </el-form-item>
                </el-col>

                <el-col :md='10'>
                    <el-form-item 
                        v-if="mode==='add'" >

                    </el-form-item>
                    <el-form-item  
                    prop="IdUserCreare"
                    v-else>
                        Creat la data de {{this.selectedObject.DataCreare}} de
                        <el-select  class='full-width' placeholder='Utilizator' v-model='selectedObject.IdUserCreare' size='mini'  >
                            <el-option
                                v-for="item in Info.utilizatori"
                                :key="item.Id"
                                :label="item.Nume"
                                :value="item.Id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!-- <el-col :md='20'>
                    <div v-if="mode==='add'">
                        
                    </div>
                    <div v-else>
                       Creat la data {{this.selectedObject.DataCreare}} de {{this.selectedObject.NumeUser.Nume}} 
                    </div>
                </el-col> -->
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer" >
                <el-button @click="showPopup=false"     > Renunta  </el-button>
                <el-button type="primary" @click="save" > Salveaza </el-button>
            </span>
        </el-dialog>
    </template>

    <script>
        import settings from "@/backend/LocalSettings";
        import BasePage from '@/pages/BasePage';
        import {computed,reactive} from 'vue';
        
        export default {
            name: "Clienti_dialog",
            extends: BasePage,
            components: { }, 
            data () {
                // let validatorCNP=async(rule, value, callback)=>{
                //     console.log(value);
                //     return
                //         this.selectedObject.Cnp = this.selectedObject.Cnp.replace(/[^0-9]/g, '');
                //         if(this.selectedObject.Cnp.length<13)
                //         callback(new Error('cnp trebuie sa contina treisprezece caractere'));
                //         return;
                //     }
                return {
                    dialogVisible: false,
                    dialogTitle: '',
                    baseUrl :'',
                    showPopup: false,
                    mode: 'add',
                    selectedObject: {
                        Nume: '' , Prenume: '' , Email: '' , Telefon: '' , Adresa: '' , Cnp: '' , TipPersoana: '' , Observatii:'' , IdUserCreare:'' , DataCreare:'' , NumeUser:'' , DataIncepere:'', DataSfarsit:''              },
                    Info:{
                        utilizatori:[]
                    },
                    rules: {
                        //   Nume: [ { required: true, message: "Campul este obligatoriu" } ]
                        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' } ],
                        IdUserCreare: [ { required: true, message: 'Campul este obligatoriu' } ],
                        DataCreare: [ { required: true, message: 'Campul este obligatoriu' } ], 
        
                        TipPersoana: [ { required: true, message: 'Campul este obligatoriu' } ], 
                        Cnp:[{required:true, message:'Campul este obligatoriu',  trigger:'blur'},
                            { min:13 , message:'CNP-ul trebuie sa aiba 13 cifre',trigger:'blur'}],
                        Observatii:[{required:false, message:'Campul este obligatoriu'}],

        
                        
                    },
                    
                }
        },

            //     computed: {
            //             dialogTitle() {
            //         if(this.mode==='add'){
            //             this.dialogTitle="Adauga client"
            //         }
            //         else{
            //             this.dialogTitle="Editeaza client"
            //         }
            //         return(this.dialogTitle);
                    

            //     }
            // },

                    computed: {
                        dialogTitles() {
                            if (this.mode == 'add') {
                                return "Adauga client"
                            } else {
                                return `Editeaza client: ${this.selectedObject.Nume} ${this.selectedObject.Prenume} ` 
                            }
                    }
                    
                        // dialogParagraph(){
                        //     if(this.mode == 'add'){
                        //         return ""
                        //     }else{
                        //         return `Creat de: ${this.selectedObject.Nume} ${this.selectedObject.Prenume} la data de ${this.selectedObject.DataCreare} `
                        //     }
                        // }
            },
            
                methods: {
                    handleCNPInput(){
                        this.selectedObject.Cnp = this.selectedObject.Cnp.replace(/[^0-9]/g, '');
                    },
                    resetSelectedObject(){
                        this.selectedObject={
                            Nume:'',
                            Prenume:'',
                            Email: '',
                            Telefon: '',
                            Adresa: '',
                            Cnp: '',
                            TipPersoana: '',
                            Observatii: '',
                        }
                    },
                    
                show_me: async function( id ) {
                    this.showPopup        = true;
                    if( id == null )
                    {
                        this.mode = "add";
                        this.dialogTitle = "Adauga client";
                        this.resetSelectedObject();
                        
                    }
                    else
                    {
                        this.mode             = "edit";
                        this.dialogTitle = "Editare";
                        var            result = await this.post("clienti/get_info_item_dialog", { id: id } );
                        this.selectedObject   = result.Item;
                        
                    }
                    this.showPopup = true;
                },
                async get_info(){
                    var response = await this.post("utilizatori/get_info");
                    this.Info.utilizatori=response.utilizatori;
                    
                    
                    
                    
                },
                async get_info_item_dialog(){
                    var response=await this.get("clienti/get_info_item_dialog()");
                    this.selectedObject.Telefon=clienti.Telefon;
                    this.selectedObject.DataCreare=clienti.DataCreare;
                    },
    
                save: async function() {   
                    
                    this.$refs['my-form'].validate( async(valid) => {
                        if (valid)
                        {
                            await this.post("clienti/save", { mode: this.mode, object: this.selectedObject } );
                            this.showPopup = false;
                            this.$emit("save");
                        }
                    });
                }
            },
            mounted: function() {
                this.baseUrl = settings.BASE_URL;
                this.get_info();
                
                
            }
        };
    </script>

    <style lang="less" scoped>
        .full-width {
            width: 100%;
        }
        #inputObservatii{
            flex-wrap:wrap;
        }

    </style>