<template>
    <div class="ruleSetList">
        <div class="toolbox-automate-rules-create-content_title"><h3> 新建空白模板</h3></div>
        <div class="tabBody">
            
            
            <div>
                <span>模板名称：</span>
                <a-input v-model="templateName" placeholder="模板名字" style="width:250px;margin-right:40px"/>
            </div>
            <div>
                <span>模板ID：</span>
                <a-input v-model="templateId" placeholder="模板ID" style="width:250px"/>
            </div>
            

            <div class="opt">
                <a-button type='primary' @click="search">查询</a-button>
            </div>
        </div>
        <div class="tableBody">
            <div class="opt" >
                <a-button type='primary' @click='createNewRule'>新建模板</a-button>
               
            </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="mediaType" slot-scope="text">
                        {{text|handleMediaType}}
                    </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="`当前模板关联账户个数为${relationCount},确定删除吗？`"
                            @confirm="deleteRule(record)"                            
                        >
                            <a href="javascript:;" @click.stop="showRelativeCount(record)">删除</a>
                        </a-popconfirm>
                        
                    </span>

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

<script>
import moment from 'moment';
import { getAction, postAction, downFile, downFilePost ,deleteAction} from '@/api/manage';
let existColumns=[
    // {
    //     title: '运行/暂停',
    //     dataIndex: 'status',
    //     align: 'center',
    //     width:100,
    //     key: 'status',
    //     scopedSlots: { customRender: 'status' }
    // },
   {
        title: '模板名称',
        dataIndex: 'templateName',
        align: 'center',
        
        key: 'templateName',
        scopedSlots: { customRender: 'templateName' }
    },
    {
        title: '模板ID',
        dataIndex: 'id',
        align: 'center',
        key: 'id',
        scopedSlots: { customRender: 'id' }
    },
    {
        title: '应用媒体',
        dataIndex: 'mediaType',
        align: 'center',
        key: 'mediaType',
        scopedSlots: { customRender: 'mediaType' }
    },
    // {
    //     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: 'templateName',
        align: 'center',
        
        key: 'templateName',
        scopedSlots: { customRender: 'templateName' }
    },
    {
        title: '应用媒体',
        dataIndex: 'mediaType',
        align: 'center',
        key: 'mediaType',
        scopedSlots: { customRender: 'mediaType' }
    },
    {
        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 {
            templateId:'',
            templateName:"",
            relationCount:2,

            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:{
                
                list:'/ruleTemplate/list',
                delete:'/ruleTemplate/delete',
                getRelationAccountById:'/ruleAccountTemplate/getRelationAccountById',
                
            },
        }
    },
    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('/earlyWarningRules/configRules')
        },
        sort(pagination, filters, sorter, { currentDataSource }){
        
            this.ipagination.current=pagination.current;

            this.ipagination.pageSize=pagination.pageSize;
                      
            this.getTableListHttp(this.url.list)
        },
        editRule(record){
            console.log(record);
            this.$router.push(`/earlyWarningRules/configRules?id=${record.id}`)
        },
        // recordsRule(record){
        //     console.log(record);
            
        // },
        showRelativeCount(record){
             getAction(this.url.getRelationAccountById,{
                id:record.id
            }).then(res=>{
                console.log(res)
                if(res.success){
                    this.relationCount=res.result.relationCount
                }
            })
        },
        deleteRule(record){
            console.log(record);
           
            deleteAction(this.url.delete,{
                id:record.id
            }).then(res=>{
                console.log(res);
                if(res.success){
                    this.getTableListHttp(this.url.list)
                }else{
                    this.$message.error('删除失败')
                }
            })
                
            
            
        },
        
        search(){
            this.getTableListHttp(this.url.list)
            this.ipagination.current=1;
        },
        getTableListHttp(url){
            this.data=[];
            this.loading=true;
            getAction(url,{
                id:this.templateId,
                templateName:this.templateName,
                pageNo:this.ipagination.current,
                pageSize:this.ipagination.pageSize
            }).then(res=>{
                console.log(res);
                this.loading=false;
                if(res.success){
                    this.data=res.result.records.map(item=>{
                        return {
                            ...item,
                            status:item.eventRuleStatus=='1'?true:false,
                            spin:false,
                        }
                    })
                    this.ipagination.total=res.result.total
                }
            })
        }
    },

    mounted(){
        this.getTableListHttp(this.url.list)
    },
    activated(){
        this.getTableListHttp(this.url.list)
    },
    filters:{
        handleMediaType(val){
            switch (val) {
               
                case 2:
                    return '快手'
                    break;
            
                case 3:
                    return '头条'
                    break;
            
                case 4:
                    return '快手内广'
                    break;
            
                default:
                    break;
            }
        }
    }
}


</script>

<style lang="scss" scoped>
.ruleSetList{
    background: white;
    padding: 20px;
    .toolbox-automate-rules-create-content_title {
        background-color: #fff;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 28px;
        h3 {
            font-size: 22px;
            margin: 0;
            font-weight: 400;
            height: 30px;
            line-height: 30px;
        }
    }
    .tabBody{
        margin-bottom: 28px;
        display: flex;
        position: relative;
        font-size: 16px;
        .opt{
           position: absolute; 
           right: 0;
        }
    }
    .tableBody{
        .opt{
            margin-bottom: 28px;
            .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: 28px;
        }
        .table{
            // margin-top: 20px;
        }
    }
}
</style>