<!--
 * @Author: your name
 * @Date: 2021-03-05 09:44:53
 * @LastEditTime: 2021-06-12 16:12:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \exclusive-cloud\manage\common\src\components\easy-operate\easy-operate.vue
-->
<template>
	<div :id="id" class="popup-container layer-display">
		<div class="popup-item" v-for="(item, index) in data" :key="index" v-if="scene === 'info'">
			<efly-tip :icon="item.icon ? item.icon === 'none' ? '' : item.icon : 'icon-cycel-exclamation'" width="100%" :type="item.model" v-if="item.type === 'tips'">
				<div v-html="item.value"></div>
			</efly-tip>
			<div class="box" v-if="item.type === 'info'">
				<span class="popup-item-label">{{item.label}}：</span>
				<span class="popup-item-content text-secondary" v-if="!Array.isArray(item.value)">
					{{item.value ? item.value : '-'}}
				</span>
				<div class="popup-item-content text-secondary box flex-column" v-else>
					<span v-for="(item2, index2) in item.value" :key="index2">
						{{item2}}
					</span>
				</div>
			</div>
		</div>
		<div class="popup-confirm" v-if="scene === 'confirm'">
			<i class="popup-confirm-icon icon" :class="{
			    'icon-circle-success color-success': sceneIcon === 'success',
			    'icon-cycel-exclamation color-warning': sceneIcon === 'warning',
			    'icon-deep-error color-danger': sceneIcon === 'danger',
			}"></i>
			<div class="popup-confirm-content mar-l-mini">
				<p v-for="(item, index) in data" :class="{
				    'color-danger': item.color === 'danger',
				    'color-primary': item.color === 'primary'
				}">{{item.value}}</p>
			</div>
		</div>
		<div class="popup-footer">
			<efly-button size="small" class="btn-primary layer-btn" @click="submit">{{confirm}}
			</efly-button>
			<efly-button size="small" class="btn-outline-primary mar-l-default layer-btn" @click="close">{{cancel}}</efly-button>
		</div>
	</div>
</template>

<script>
    import EasyOperate from "./easy-operate";

    export default EasyOperate;
</script>

<style lang="scss" scoped>
.layer-btn{
	min-width: 100px;
}
</style>
