<template>
    <div>
        <form class="row" @submit="submitForm" id="editUserForm">
            <div class="col-md-12 text-center margin-bottom-20">
                <div class="photo-upload text-center" v-for="(input , index) in imgInput">
                    <label :for="'image'+index+1">
                        <input name="avatar" type="file" class="d-none" v-bind="input.file"  accept="image/*" :id="'image'+index+1" @change="imgChange(index,$event.target)"/>
                        <img src="/uploads/img/karshenas.png" class="width100" />
                        <div class="bg pic-show" :id="'bg'+index" :style="{backgroundImage:'url(\''+input+'\')' }"></div>
                    </label>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>نام</label>
                    <input name="fname" type="text" class="form-control" :value="user.fname"/>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>نام خانوادگی</label>
                    <input name="lname" type="text" class="form-control" :value="user.lname"/>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>ایمیل</label>
                    <input name="email" type="text" class="form-control" :value="user.email"/>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>استان</label>
                    <v-select :options="states" label="title" v-model="selectedState" :placeholder="state">
                        <span slot="no-options">
                            نتیجه ای یافت نشد
                        </span>
                    </v-select>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>شهر</label>
                    <v-select :options="cities" label="title" v-model="selectedCity" :placeholder="city">
                        <span slot="no-options">
                            نتیجه ای یافت نشد
                        </span>
                    </v-select>
                </div>
            </div>
            <div class="col-md-12 text-left">
                <button class="btn fabrikaBtn" type="submit">ثبت</button>
            </div>
        </form>
    </div>
</template>

<script>
    import vSelect from 'vue-select'
    export default {
        components: {
            vSelect,
        },
        props:['user'],
        data() {
            return {
                states:[],
                cities:[],
                selectedState:null,
                selectedCity:null,
                finalCity:null,
                imgInput:[
                    '/uploads/img/karshenas.png'
                ],
                city:null,
                state:null,
            }

        },
        watch:{
            selectedState: function (val) {
                this.cities=[]
                this.selectedCity=null
                this.finalCity=null
                axios.get('/advertisement/data-cities/'+val.id).then(res=>{
                    this.cities=res.data
                })
            },
            selectedCity:function (val) {
                this.finalCity=val.id
            }
        },
        beforeMount(){
            axios.get('/advertisement/city?id='+this.user.city_id).then(res=>{
                this.city=res.data.title
                this.state=res.data.state.title
            })
            axios.get('/advertisement/data-states').then(res=>{
                this.states = res.data
            })
        },
        methods:{
            imgChange:function (pic,input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = (e)=> {
                        this.imgInput[pic]=e.target.result
                        this.$forceUpdate()
                    }
                    reader.readAsDataURL(input.files[0]);
                }
            },
            submitForm:function (e) {
                e.preventDefault()
                let fd = new FormData($('#editUserForm')[0])
                if(this.finalCity){
                    fd.append('city_id',this.finalCity)
                }
                axios.post('/core/update',fd,{  headers: { 'Content-Type': 'multipart/form-data' }}).then(res=>{
                    location.reload();
                })
            }
        }
    }
</script>

<style scoped>

</style>