<template>
	<v-card class="radius-10">
		<v-card-title>
			<span class="headline">Update Password</span>
		</v-card-title>
		<v-divider class="mb-4"></v-divider>
		<v-card-text class="py-4">
			<v-row dense>
				<v-col cols="12" md="12" class="pb-2">
					<v-text-field
						v-model="form.password"
						type="password"
						label="New Password"
						dense
						:error-messages="errors.password"
					></v-text-field>
				</v-col>
				<v-col cols="12" md="12" class="pb-2">
					<v-text-field
						v-model="form.password_confirmation"
						type="password"
						label="Confirm New Password"
						dense
						:error-messages="errors.password_confirmation"
					></v-text-field>
				</v-col>
			</v-row>
		</v-card-text>
		<v-card-actions>
			<v-spacer></v-spacer>
			<v-btn 
				color="blue darken-1" text title="Cancel" 
				@click="closeDialog()"
			>
				Cancel
			</v-btn>
			<v-btn 
				color="blue darken-1" 
				text title="Save" 
				:loading="submit_loading"
				@click="submitForm(form)"
			>
				Save
			</v-btn>
		</v-card-actions>
	</v-card>
</template>

<script>
import { errorHandlerMixin } from "@/js/mixins/ErrorHandlerMixin"
export default {
	components: { },
	mixins: [ 
		errorHandlerMixin
	],
	props:{
		userId:{
			type: Number,
			default: 0
		},
		visible: {
			type: Boolean,
			required: true,
		},
	},
	data () {
		return {
			form : {},
			errors : {},
			submit_loading : false,
		}
	},
	watch:{
		'visible':{
			handler: function (newVal){
				if(newVal){
					// 
				}else{
					// reset
					this.form = {}
					this.errors = {}
				}
			},
			immediate : true,
		},
	},
	created(){
	},
	methods: {
		closeDialog(){
			this.$emit('update:visible',false)
		},
		submitForm(item){
			this.saveModel(item)
		},
		saveModel(item){
			this.submit_loading = true
			this.errors = {}
			let payload = {
				id : this.userId,
				password : item.password,
				password_confirmation : item.password_confirmation,
			}	
			this.$api.updateUserPassword(payload).then((res)=>{
				this.$toast.success(res.data.message)
				this.closeDialog()
			}).catch((err) => {
				this.errors = this.errorHandler_(err, ["password",'password_confirmation'])
			}).finally(()=>{
				this.submit_loading = false
			})
		},
	}
}
</script>