<template>
	<el-dialog title="作废耗卡" :visible.sync="visible" width="500px" :close-on-click-modal="false">
		<p class="cancel-tip">确定要作废该耗卡记录吗？作废后关联品项、业绩及人次将一并失效，此操作不可撤销。</p>
		<el-form ref="form" :model="form" :rules="rules" label-width="100px">
			<el-form-item label="作废原因" prop="remark">
				<el-input
					v-model="form.remark"
					type="textarea"
					:rows="4"
					placeholder="请输入作废原因"
					maxlength="500"
					show-word-limit
				/>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取消</el-button>
			<el-button type="danger" @click="submit" :loading="loading">确定作废</el-button>
		</div>
	</el-dialog>
</template>

<script>
import request from '@/utils/request'

export default {
	name: 'LqXhHyhkCancelDialog',
	data() {
		return {
			visible: false,
			loading: false,
			form: {
				id: '',
				remark: ''
			},
			rules: {
				remark: [{ required: true, message: '请输入作废原因', trigger: 'blur' }]
			}
		}
	},
	methods: {
		init(id) {
			this.visible = true
			this.form = {
				id: id || '',
				remark: ''
			}
			this.$nextTick(() => {
				if (this.$refs.form) {
					this.$refs.form.clearValidate()
				}
			})
		},
		submit() {
			this.$refs.form.validate(valid => {
				if (!valid) return

				this.loading = true
				const remarks = encodeURIComponent(this.form.remark.trim())
				request({
					url: `/api/Extend/LqXhHyhk/Admin/CancelCardUsageRecord/${this.form.id}?remarks=${remarks}`,
					method: 'PUT'
				}).then(res => {
					this.loading = false
					if (res.code == 200) {
						this.$message.success(res.msg || '作废成功')
						this.visible = false
						this.$emit('refresh')
					} else {
						this.$message.error(res.msg || '作废失败')
					}
				}).catch(() => {
					this.loading = false
				})
			})
		}
	},
	watch: {
		visible(val) {
			if (!val) {
				this.$refs.form && this.$refs.form.resetFields()
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.cancel-tip {
	margin: 0 0 16px;
	color: #606266;
	line-height: 1.6;
}

.dialog-footer {
	text-align: right;
}
</style>
