<!--
 * @Author: your name
 * @Date: 2021-04-01 10:18:41
 * @LastEditTime: 2021-06-12 15:54:32
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \exclusive-cloud-admin\common\src\components\batch-handle\batch-handle.vue
-->
<template>
	<div>
		<div :id="id" v-if="data.show" class="layer-display popup-container" >
			<div>
				<efly-tip :icon="!data.tipsIcon && data.tipsIcon !== '' ? 'icon-cycel-exclamation' : data.tipsIcon" class="mar-b-default">
					<div v-html="data.tips || '点击“确认”进行批量操作，不可操作的数据将不会进行批量操作'"></div>
				</efly-tip>
				<div class="batch-opt-source mar-b-default" v-if="listNot.length > 0">
					<p class="batch-opt-source-content" @click="status.showListNot = !status.showListNot"><span class="color-danger">{{listNot.length}}</span>个不可{{statusPipe | batchHandlePipe}}，<span class="color-primary cursor-pointer">点击查看</span> <i class="icon icon-down-arrow"></i></p>
					<div class="batch-opt-list" v-show="status.showListNot">
						<div class="batch-opt-list-item" v-for="(item,index) in listNot" :key="index">
							<p class="box flex-justify-between text-color-regular"><span>{{item.describe}}</span><i class="icon icon-help color-danger cursor-pointer" @click="showErrorMsg(index)"></i></p>
							<div style="text-align:right;" v-if="item.showErrorMsg && item.errorMsg"><small class="form-error">{{item.errorMsg || '-'}}</small></div>
						</div>
					</div>
				</div>
				<div class="batch-opt-handle box">
					<div class="batch-opt-handle-label">
						<p>{{statusPipe | batchNamePipe}}：</p>
						<p class="font-small">(共<span class="color-primary">{{listAllow.length}}</span>个)</p>
					</div>
					<div class="batch-opt-handle-none color-info" v-if="listAllow.length === 0">无可操作{{statusPipe | batchResource}}</div>
					<div class="batch-opt-handle-one" v-if="listAllow.length === 1">{{listAllow[0].describe}}</div>
					<div class="batch-opt-handle-list" v-if="listAllow.length > 1">
						<div class="batch-opt-handle-list-item" v-for="(item,index) in listAllow" :key="index">
							<p class="box flex-justify-between" >
								<span>{{item.describe}}</span><i class="icon icon-cancel cursor-pointer" v-if="listAllow.length > 1" @click="listAllow.splice(index, 1)"></i>
							</p>
							<p class="color-warning" v-if="item.warningMsg">{{item.warningMsg}}</p>
						</div>
					</div>
				</div>
				<div class="batch-opt-btn">
					<efly-button  class="btn-primary btn-small" style="font-size:14px;" @click="confirm">确定
					</efly-button>
					<efly-button  class="btn-outline-primary mar-l-default btn-small" style="font-size:14px;" @click="close">取消</efly-button>
				</div>
			</div>

		</div>
		<batch-operation :batchOptData="batchOptData" @change="childEven($event)"></batch-operation>

	</div>

</template>

<script lang="ts">
    import BatchHandle from './batch-handle';
    export default BatchHandle;
</script>

<style lang="scss" scoped>

</style>
