//操作确认弹出层 /* 1：使用场景 操作类按钮提示信息 2：所需参数 (1) 提示信息
(2)确定按钮被点击 */
<template>
	<div>
		<a-modal
			:class="style['modal']"
			:closable="false"
			v-model:visible="modalVisible"
			:width="width"
		>
			<template #footer>
				<a-button
					@click="
						() => {
							$emit('confirm-modal-cancel')
						}
					"
					:loading="okLoading"
				>
					<close-outlined />
					<!-- 取消 -->
					{{ cancelButtonText }}
				</a-button>
				<a-button
					type="primary"
					:loading="okLoading"
					@click="
						() => {
							$emit('confirm-modal-ok')
						}
					"
					v-if="isShowOkButton"
				>
					<save-outlined />
					<!-- 确定 -->
					{{ okButtonText }}
				</a-button>
			</template>
			<div :class="style['content']">
				<exclamation-circleOutlined
					:style="{ fontSize: '28px', color: '#faad14' }"
				/>
				<span :class="style['text']">
					{{ text }}
				</span>
			</div>
		</a-modal>
	</div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import style from './index.module.less'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { getI18n } from '@/utils/i18n'
import { CloseOutlined, SaveOutlined } from '@ant-design/icons-vue'
export default defineComponent({
	name: 'BaseOperationalQualification',
	components: {
		ExclamationCircleOutlined,
		CloseOutlined,
		SaveOutlined,
	},
	props: {
		// 操作确认弹出层宽度
		width: {
			type: Number,
			required: false,
			default: 320,
		},
		// 内容信息
		text: {
			type: String,
			required: false,
			default: getI18n('common', 'Common_Delete_Tips'), // 确定删除吗？
		},
		// 确认按钮loading
		okLoading: {
			type: Boolean,
			required: false,
			default: false,
		},
		// 操作确认弹出层是否展示
		confirmModalVisible: {
			type: Boolean,
			required: false,
			default: false,
		},
		// 是否展示确认按钮
		isShowOkButton: {
			type: Boolean,
			required: false,
			default: true,
		},
		// 取消按钮文字
		cancelButtonText: {
			type: String,
			required: false,
			default: getI18n('common', 'Common_Remove'), // 取消
		},
		// 确认按钮文字
		okButtonText: {
			type: String,
			required: false,
			default: getI18n('common', 'Common_Certain'), // 确认
		},
	},
	emits: ['confirm-modal-cancel', 'confirm-modal-ok'],
	setup(_props) {
		let modalVisible = ref(_props.confirmModalVisible)
		watch(
			() => _props.confirmModalVisible,
			newValue => {
				modalVisible.value = newValue
			}
		)
		return {
			style,
			getI18n,
			modalVisible,
		}
	},
})
</script>