<style lang='scss'>
    .checker{
        .el-dialog__footer{
            text-align: right;
        }
    }
</style>
<template>
    <section class="checker">
        <p><span>会议管理></span>核销员管理</p>
        <div class="content">
            <div class="filter">
                <el-form size="small" label-width="70px" :inline="true"  label-position="left">
                    <el-form-item label="">
                            <el-select v-model="form.id" clearable placeholder="请选择会议"></el-select>
                    </el-form-item>
                    <el-form-item label="">
                            <el-select v-model="form.id" clearable placeholder="请选择核销员"></el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button  type="primary">搜索</el-button>
                    </el-form-item>
                    <el-form-item style="float:right" >
                         <el-button @click="dialogVisible=true"  icon="el-icon-plud" type="primary">添加核销员</el-button>
                        <el-button plain icon="el-icon-download" type="primary">导出Excel</el-button>
                    </el-form-item>
                </el-form>
            </div>
             <el-table
                    class="table"
                    :data="list"
                    height='50vh'
                    border  v-loading="loading"
                    default-expand-all row-key="id"
                    style="width: 100%">
                    <el-table-column
                    prop="name"  
                    label="核销员头像">
                    </el-table-column>
                    <el-table-column
                    prop="username"  
                    label="核销员昵称">
                    </el-table-column>
                    <el-table-column
                    prop="username"  
                    label="所属会议">
                    </el-table-column>
                    <el-table-column
                    prop="username"  
                    label="加入时间">
                    </el-table-column>
                    <el-table-column
                    prop=""  
                    label="核销详细">
                    </el-table-column>
                  
                    <el-table-column  
                    prop="zip"  width="100" fixed="right"
                    label="操作">
                    <template slot-scope="">
                        <el-button @click="del(scope.row.id)" class="edit"  type="text" >解除核销员</el-button>
                    </template>
                    </el-table-column>
            </el-table>
            <Page  ref="pageButton" :current='form.page' :page_size='form.page_size' :total='total' @pageChange='gopage'/>
        </div>
        
        <el-dialog width="70%"
        title="添加核销员" :close-on-click-modal='false'
        :visible.sync="dialogVisible">
           <el-button size="small" type="primary">点击获取会议列表</el-button>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" type="primary">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog width="70%"
        title="会议列表" :close-on-click-modal='false'
        :visible.sync="dialogVisible1">
           <el-table
                    class="table"
                    :data="list"
                    default-expand-all 
                    style="width: 100%">
                    <el-table-column
                    prop="name"  
                    label="会议名称">
                    </el-table-column>
                    <el-table-column
                    prop="name"  
                    label="会议头像">
                    </el-table-column>
                    <el-table-column
                    prop="name"  
                    label="创建时间">
                    </el-table-column>
           </el-table>
           <span slot="footer" class="dialog-footer">
                <el-button size="small" type="primary">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>
<script>
import Page from '../../components/Page';
export default {
    components:{
        Page
    },
    data(){
        return{
            form:{},
            list:[{}],
            dialogVisible:false,
            dialogVisible1:false,
            loading:false,
            total:0
        }
    },
    methods:{
        gopage(size){
            if(size){
                this.form.page_size=size
            }
            this.form.page=this.$refs.pageButton.page
            this.getData()
        },
        del(id){
                this.$confirm('确定删除吗', '提示', {
                        type: 'warning'
                    }).then(() => {
                    this.$api.delUser({id:id}).then((res)=>{
                        if(res.data.code==0){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            this.getData()
                        }else{
                            this.$message.error(res.data.message);
                        }
                    })
                })
        },
    }
}
</script>