<template>
    <div class="autoRulesList">
        <div class="tabBody">
            <a-tabs v-model="tabKey" @change="tabChange">
                <a-tab-pane key="1" tab="规则管理"></a-tab-pane>
                <a-tab-pane key="2" tab="运行记录" ></a-tab-pane>
            </a-tabs>
        </div>
        <div class="tableBody">
            <div class="opt" v-if="tabKey=='1'">
                <a-button type='primary' @click='createNewRule'>新建空白规则</a-button>
                <p class="title">已创建的自动规则</p>
            </div>
            <div class="opts" v-else>
                 <a-input-search placeholder="请输入规则id" style="width:350px" v-model="rulesId" enter-button @search="onSearch" />
            </div>
            <div class="table">
                <a-table
                    size="middle"
                    :columns="columns"
                    :dataSource="data"
                    bordered
                    id="outTable"
                    :pagination="ipagination"
                    :scroll="{ x: scrollX }"
                    :loading="loading"
                    @change="sort"
                    style="word-break: break-all;"
                    >
                    <span slot="status" slot-scope="text,record">
                        <a-spin :spinning="record.spin" size="small" >
                            <div class="spin-content">
                                <a-switch size="default" :checked=text  @change="switchChange(text,record)"/>
                            </div>
                        </a-spin>
                        <!-- <a-switch size="default" :checked=text  @change="switchChange(text,record)"/> -->
                    </span>
                    <span slot="processMethod" slot-scope="text">
                        {{text=='SEND'?'仅发送通知':'发送并关停组'}}
                    </span>
                    <span slot="options" slot-scope="text,record">
                        <a href="javascript:;" @click="editRule(record)">编辑</a>
                        <a-divider type="vertical" />
                        <a-popconfirm
                            title="确定删除该规则吗？"
                            @confirm="deleteRule(record)"                            
                        >
                            <a href="javascript:;" >删除</a>
                        </a-popconfirm>
                        
                    </span>

                </a-table>
            </div>
        </div>
    </div>
</template>

<script>
import moment from 'moment';
import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
let existColumns=[
    {
        title: '运行/暂停',
        dataIndex: 'status',
        align: 'center',
        width:100,
        key: 'status',
        scopedSlots: { customRender: 'status' }
    },
    {
        title: '规则名称',
        dataIndex: 'eventRuleName',
        align: 'center',
        
        key: 'eventRuleName',
        scopedSlots: { customRender: 'eventRuleName' }
    },
    {
        title: '应用对象',
        dataIndex: 'accountName',
        align: 'center',
        key: 'accountName',
        scopedSlots: { customRender: 'accountName' }
    },
    {
        title: '结果操作',
        dataIndex: 'processMethod',
        align: 'center',
        key: 'processMethod',
        scopedSlots: { customRender: 'processMethod' }
    },
    {
        title: '创建者',
        dataIndex: 'createrName',
        align: 'center',      
        key: 'createrName',
        scopedSlots: { customRender: 'createrName' }
    },
    {
        title: '操作',
        dataIndex: 'options',
        align: 'center',
       
        key: 'options',
        scopedSlots: { customRender: 'options' }
    },
]


let recordsColumns=[
   
    {
        title: '规则名称',
        dataIndex: 'eventRuleName',
        align: 'center',
        
        key: 'eventRuleName',
        scopedSlots: { customRender: 'eventRuleName' }
    },
    {
        title: '运行时间',
        dataIndex: 'runningTime',
        align: 'center',
        key: 'runningTime',
        scopedSlots: { customRender: 'runningTime' }
    },
    {
        title: '运行对象',
        dataIndex: 'accountName',
        align: 'center',
        key: 'accountName',
        scopedSlots: { customRender: 'accountName' }
    },
    {
        title: '满足条件',
        dataIndex: 'alarmCondition',
        align: 'center',      
        key: 'alarmCondition',
        scopedSlots: { customRender: 'alarmCondition' }
    },
    {
        title: '运行结果',
        dataIndex: 'processMethod',
        align: 'center',       
        key: 'processMethod',
        scopedSlots: { customRender: 'processMethod' }
    },
]



export default {
    data() {
        return {
            tabKey:"1",
            rulesId:undefined,
            data:[],
            columns:[...existColumns],
            scrollX:0,
            loading:false,
            ipagination: {
            current: 1,
            pageSize: 10,
                //   pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: true,
                showSizeChanger:true,
                pageSizeOptions: ['10', '30', '50'],
                total: 0,
                onChange: (current, pageSize) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.ipagination.current = current;
                    this.ipagination.pageSize= pageSize;
                }
            },
            url:{
                
                existUrl:'/alarm/alarmEventRule/list',
                resultRecordUrl:'/alarm/alarmEventRule/getRunningRecords'
            },
        }
    },
    methods: {
        moment,
        onSearch(value) {
            console.log(value);
        },
        tabChange(key){
            console.log(key);
            let url=''
            if(key=='1'){
                this.columns=[...existColumns]
                url=this.url.existUrl
            }else{
                 this.columns=[...recordsColumns]
                 url=this.url.resultRecordUrl
            }
            this.getTableListHttp(url)
        },
        createNewRule(){
            this.$router.push('/newBlankRule')
        },
        sort(pagination, filters, sorter, { currentDataSource }){
        
            this.ipagination.current=pagination.current;

            this.ipagination.pageSize=pagination.pageSize;
            let url=this.tabKey=='1'?this.url.existUrl:this.url.resultRecordUrl
            
            this.getTableListHttp(url)
        },
        editRule(record){
            console.log(record);
            this.$router.push(`/newBlankRule?id=${record.eventRuleId}`)
        },
        // recordsRule(record){
        //     console.log(record);
            
        // },
        deleteRule(record){
            console.log(record);
            getAction('/alarm/alarmEventRule/delete',{
                id:record.eventRuleId
            }).then(res=>{
                console.log(res);
                if(res.success){
                    this.getTableListHttp(this.url.existUrl)
                }else{
                    this.$message.error('删除失败')
                }
            })
        },
        switchChange(text,record){
            console.log(text,record);
            record.spin=true;
            let eventRuleStatus='1'
            if(text){
                eventRuleStatus='0'
                
            }else{
                eventRuleStatus='1';
            }
           
            postAction('/alarm/alarmEventRule/edit',{
                eventRuleId:record.eventRuleId,
                eventRuleStatus,
            }).then(res=>{
                console.log(res);
                record.spin=false;
                if(res.success){
                    // this.getTableListHttp()                    
                    if(text){
                        record.status=false
                        eventRuleStatus='0'                       
                    }else{
                        record.status=true
                        eventRuleStatus='1';
                    }
                }else{
                    this.$message.error('修改失败')
                    // this.getTableListHttp()
                }
            })
        },

        getTableListHttp(url){
            this.data=[];
            this.loading=true;
            // let url='/alarm/alarmEventRule/list'
            getAction(url,{
                pageNo:this.ipagination.current,
                pageSize:this.ipagination.pageSize
            }).then(res=>{
                console.log(res);
                this.loading=false;
                if(res.success){
                    this.data=res.result.list.map(item=>{
                        return {
                            ...item,
                            status:item.eventRuleStatus=='1'?true:false,
                            spin:false,
                        }
                    })
                    this.ipagination.total=res.result.total
                }
            })
        }
    },

    mounted(){
        this.getTableListHttp(this.url.existUrl)
    },
    activated(){
        this.getTableListHttp(this.url.existUrl)
    }
}


</script>

<style lang="scss" scoped>
.autoRulesList{
    background: white;
    padding: 20px;
    .tabBody{
        margin-bottom: 5px;
    }
    .tableBody{
        .opt{
            .title{
                margin: 15px 0;
                height: 57px;
                font-size: 16px;
                color: #333;
                line-height: 57px;
                background: #ffffff;
                padding-left: 15px;
                border-radius: 4px 4px 0 0;
                font-weight: 600;
                border-bottom: 1px solid #DADFE3;
            }
        }
        .opts{
            margin-bottom: 15px;
        }
    }
}
</style>