<template>
    <el-dialog
        title="查看参会名单"
        :visible.sync="isParticipateShow"
        width="700px"
        append-to-body
        @close="$emit('close')"
    >
        <div class="partic-list-dialog-container">
            <el-table :data="tableData" border>
                <el-table-column align="center"
                    prop="RealName" label="姓名"
                ></el-table-column>
                <el-table-column align="center"
                    prop="Position" label="职位"
                ></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="{ row }" >
                        <span
                        class="deletesty"
                        @click="deleteItem(row)">
                            删除</span>
                    </template>
                </el-table-column>
            </el-table>
            <div @click="addItem" class="add-box">
                <img :src="$icons.addblue" alt="" />
                <span>添加</span>
            </div>
        </div>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
            <el-button type="primary" @click="$emit('close')">确定</el-button>
            <el-button @click="$emit('close')">取消</el-button>
        </div>
        <addParticipateDia 
            :isAddParticipateShow="isAddShow"
            :RsCalendarId="RsCalendarId"
            @close="isAddShow=false;"
            @confirm="getTableData();isAddShow=false;"
        />
    </el-dialog>
</template>

<script>
import { roadshowInterence } from "@/api/api.js";
import addParticipateDia from "./addParticipateDia.vue";
export default {
    props: {
        isParticipateShow: {
            type: Boolean,
            default: false
        },
        RsCalendarId: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            tableData: [],
            isAddShow:false
        };
    },
    watch: {
        isParticipateShow(newval) {
            if (newval) {
                this.getTableData();
            }
        },
    },
    methods: {
        getTableData() {
            roadshowInterence.getMeetingUserList({
                RsCalendarId: this.RsCalendarId
            }).then(res => {
                if (res.Ret !== 200)
                    return;
                this.tableData = res.Data.List;
            });
        },
        addItem() {
            this.isAddShow = true
        },
        deleteItem(row){
            roadshowInterence.deleteMeetingUser({
                RsCalendarMeetingUserId:row.RsCalendarMeetingUserId
            }).then(res=>{
                if(res.Ret!==200) return 
                this.$message.success('删除成功')
                this.getTableData()
            })
        },
    },
    components: { addParticipateDia }
};
</script>

<style scoped lang="scss">
.partic-list-dialog-container{
    .add-box {
        margin-top:15px;
        display: flex;
        align-items: center;
        color: #5882ef;
        cursor: pointer;
        img {
            width: 16px;
            height: 16px;
            margin-right: 10px;
        }
    }
}
</style>
