<!--
 * @Author: your name
 * @Date: 2021-03-05 09:44:53
 * @LastEditTime: 2021-06-12 14:06:32
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \exclusive-cloud\manage\common\src\components\batch-operation\batch-operation.vue
-->
<template>
    <div>
        <div class="batch-operation-container layer-display popup-container" id="batchOperation" v-if="batchOptData.show">
            <div class="batch-operation-content">
                <efly-tip icon="icon-triangle-plaint" type="danger">{{'批量操作过程中，请勿离开此页面，否则批量操作将会终止！'}}</efly-tip>
                <div class="batch-operation-progress mar-top-20">
                    <label>{{statusPipe | batchHandlePipe}}进度：</label>
                    <div class="progress">
                        <efly-progress color="#409eff" width="450px" :percentage="progress"></efly-progress>
                        <p><span>任务队列：{{currIndex}} / {{optResource.length}}</span><span>当前进度：{{progress}}%</span></p>
                    </div>
                </div>
                <ul class="batch-operation-table-header mar-top-20">
                    <li class="box flex-justify-between"><span>任务详情</span><span class="mar-r-ms">操作信息</span></li>
                </ul>
                <div class="batch-operation-table-content">
                    <li v-for="(item,idx) in optResource" :key="idx">
                        <div class="box flex-justify-between">
                            <span class="flex">{{idx+1}}.{{statusPipe | batchResource}}：{{item.describe}}</span>
                            <span :class="{'text-secondary': item.status == '0',
                                            'color-primary': item.status == '1',
                                            'color-success': item.status == '2',
                                            'color-danger': item.status == '-1'}">
                                <span>{{statusPipe | batchStatus(item.status || '0')}}</span>
                                <span v-if="batchOptData['isCheckFailOpt'] && item.status == '-1'">，金额交易已撤销并全额退款</span>
                                <i title="点击显示或关闭错误提示" v-show="item.status == '-1'" :style="{'visibility': item.status == '-1' ? 'visible' : 'hidden'}" class="icon icon-question-mark font-mini cursor-pointer" @click="showErrorMsg(idx)"></i>
                            </span>
                        </div>
                        <small v-show="!!item.showErrorMsg" class="text-content-error">{{item.errorMsg || '操作失败'}}</small>
                    </li>
                </div>
            </div>
        </div>
        <!-- 终止提示 -->
        <div id="batchOptCancelResultOpen" class="layer-display" style="padding: 30px 35px 0;display: none;">
            <p>您还有 <span style="font-weight:700;">{{optResource.length - currIndex}}</span> 个操作未处理，是否确定终止？</p>
        </div>
    </div>

</template>

<script>
    import BatchOperation from './batch-operation';
    export default BatchOperation;
</script>

<style lang="scss" scoped>
    // @import '../../assets/sass/efly-ui/index.scss';

</style>
