<template>
	<el-popconfirm
		title="确定删除吗？"
		@onConfirm="handleDelete"
		trigger="hover"
		class="ht-delete-button"
	>
		<el-button
			slot="reference"
			v-if="!row"
			:type="type"
			icon="el-icon-delete"
			v-loading="fullscreenLoading"
		>
			<slot></slot>
		</el-button>
		<el-dropdown-item
			icon="el-icon-delete"
			:command="{ row: row, command: 'delete' }"
			slot="reference"
			v-if="row"
			:type="type"
			v-loading="fullscreenLoading"
		>
			<slot></slot>
		</el-dropdown-item>
	</el-popconfirm>
</template>

<script>
import req from '@/request.js';
export default {
	name: 'ht-delete-button',
	props: {
		type: {
			type: String,
			default: 'danger',
		},
		requestMethod: {
			type: String,
			default: 'DELETE',
		},
		url: {
			type: String,
			required: true,
		},
		pk: {
			type: String,
			default: 'id',
		},
		parameter: {
			type: String,
			default: 'ids',
		},
		pureData: {
			type: Boolean,
			default: false,
		},
		htTable: {
			type: Object,
		},
		row: {
			type: Object,
		},
	},
	data() {
		return {
			fullscreenLoading: false,
			elTable: null,
		};
	},
	methods: {
		async handleDelete() {
			this.elTable = this.htTable;
			if (this.htTable.$refs && this.htTable.$refs.htTable) {
				this.elTable = this.htTable.$refs.htTable;
			}
			if (
				this.elTable &&
				this.elTable.selection &&
				this.elTable.selection.length == 0 &&
				!this.row
			) {
				this.$message.error('请至少选择一条数据');
				return;
			}

			let ids = [];

			if (this.row) {
				ids.push(this.row[this.pk]);
			} else {
				for (let item of this.elTable.selection) {
					ids.push(item[this.pk]);
				}
			}

			let params = {},
				data = null;
			params[this.parameter] = ids.join(',');
			// 如果是纯文本作为参数，则直接传递文本作为参数
			if (this.pureData) {
				params = null;
				data = ids.join(',');
			}

			this.fullscreenLoading = true;
			let response = await req
				.request({
					params: params,
					data: data,
					url: this.url,
					method: this.requestMethod,
				})
				.finally(() => {
					this.fullscreenLoading = false;
				});

			if (response.data && response.data.state) {
				this.$emit('after-delete');
				this.htTable.load();
				this.$message({
					message: response.data.message || '操作成功',
					showClose: true,
					type: 'success',
				});
			}
		},
	},
};
</script>
