<template>
	<jl-input type="text" v-model="code" placeholder="请输入图形验证码" @confirm="confirm">
		<image class="code-input-image" :src="image" mode="" @click="refushCode"></image>
	</jl-input>
</template>

<script>
	import jlInput from '@/components/jl-input/main.vue'
	export default {
		components: {
			jlInput
		},
		props: {
			value: {
				type: String,
				default: ''
			},
			getCode: {
				type: Function,
			}
		},
		data() {
			return {
				image: ''
			}
		},
		created() {
			this.refushCode()
		},
		computed: {
			code: {
				get() {
					return this.value
				},
				set(val) {
					this.$emit('input', val)
				}
			}
		},
		methods: {
			refushCode() {
				this.code = ''
				this.getCode().then(resp => {
					const data = resp.data
					this.$emit('key-change', data.key)
					this.image = data.image
				})
			},
			confirm() {
				this.$emit('confirm')
			}
		}
	}
</script>

<style>
	.code-input-image {
		width: 180rpx;
		height: 60rpx;
		margin-left: 20rpx;
	}
</style>
