<template>
	<view @click="cancel" class="cu-modal bottom-modal" :class="[show ? 'show' : '']">
		<view @click.stop="" v-if="custom=='1'" class="cu-dialog" >
			<view class="cu-bar bg-white">
				<view class="action " :style="{color:confirmColor}" @click="confirm">{{ showConfirm ? textConfirm : '' }}</view>
				<view style="height: 100%;line-height: 100%;">{{ title }}</view>
				<view class="action " :style="{color:cancelColor}" @click="cancel">{{ showCancel ? textCancel : '' }}</view>
			</view>
			<view style="text-align: start;padding: 0;position: relative;" ><slot /></view>
		</view>
		<view  @click.stop="" v-if="custom=='2'" class="cu-dialog" style="border-radius: 32upx 32upx 0  0;position: relative;min-height: 100upx;">
			<view  @click="cancel" style="position: absolute;z-index: 50;right: 20upx;top: 20upx;" class="action ">
				<text   :style="{color:cancelColor}" class="cuIcon-close text-xxl"></text>
			</view>
			<view style="text-align: start;padding: 0;position: relative;" ><slot /></view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		show: { type: Boolean, default: false },
		title: { type: String, default: '' },
		custom: { type: String/Number, default: '1' },
		showConfirm: { type: Boolean, default: true },
		showCancel: { type: Boolean, default: true },
		textConfirm: { type: String, default: '确定' },
		textCancel: { type: String, default: '取消' },
		cancelColor:{type:String,default:"#0081ff"},
		confirmColor:{type:String,default:"#39b54a"}
	},
	methods: {
		cancel() {
			if (!this.showCancel) return false;
			this.$emit('cancel') || '';
			this.$emit('update:show', false);
		},
		confirm() {
			if (!this.showConfirm) return false;
			this.$emit('confirm') || '';
			this.$emit('update:show', false);
		}
	}
};
</script>

<style lang="scss" scoped>

</style>
