<template>
    <div class="activity-speaker-page">
        <div class="top-box">
            <el-input 
                placeholder="请输入主讲人姓名" 
                v-model="keyword" 
                style="max-width: 400px"
                @input="handleSearch" 
                clearable
            >
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-button type="primary" style="float:right" @click="show=true">添加主讲人</el-button>
        </div>

        <div class="content-box">
            <el-table 
                :data="list" 
                border
            >
                <el-table-column 
                    align="center" 
                    prop="SpeakerHeadPic" 
                    label="头像"
                >
                    <template slot-scope="scope">
                        <el-image
                            style="width: 100px; height: 100px"
                            :src="scope.row.SpeakerHeadPic"
                            fit="cover"
                            :preview-src-list="[scope.row.SpeakerHeadPic]"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column 
                    align="center" 
                    prop="SpeakerName" 
                    label="姓名"
                ></el-table-column>
                <el-table-column 
                    align="center" 
                    prop="CreateTime" 
                    label="添加时间"
                ></el-table-column>
                <el-table-column key="操作" align="center" label="操作">
                    <template slot-scope="scope">
                        <span style="color: #4099ef;display:inline-block;margin-right:10px;cursor: pointer;" @click="handelEdit(scope.row)">编辑</span>
                        <span style="color: #ff4040;display:inline-block;cursor: pointer;" @click="handleDelSpeaker(scope.row)">删除</span>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination 
                layout="total,prev,pager,next,jumper" 
                background 
                :current-page="page"
                @current-change="handlePageChange" 
                :page-size="pageSize" 
                :total="total" 
                style="float:right;margin-top:20px"
            >
            </el-pagination>
        </div>

        <!-- 添加弹窗 -->
        <el-dialog 
            v-dialogDrag 
            :append-to-body="true" 
            :visible.sync="show" 
            width="600px" 
            :title="popData.id?'编辑主讲人':'添加主讲人'"
            center
        >
            <div class="add-speaker-dialog">
                <el-form ref="form" :model="popData" label-width="120px" :rules="rules">
                    <el-form-item label="主讲人姓名" prop="name">
                        <el-input v-model="popData.name" placeholder="请输入主讲人姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="头像" prop="avatar">
                        <el-upload
                            class="avatar-uploader"
                            action=""
                            accept="image/*"
                            :http-request="handleUploadImg"
                            :show-file-list="false"
                        >
                            <img v-if="popData.avatar" :src="popData.avatar" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <p>注：图片格式支持jpg、jpeg、png格式，大小不超过10MB。</p>
                    <div style="margin:20px 0;text-align:center">
                        <el-button type="primary" plain @click="show=false">取消</el-button>
                        <el-button type="primary"  @click="handleSaveSpeaker">确定</el-button>
                    </div>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { ficcManageInterface,customInterence} from "@/api/api";
export default {
    watch:{
        show(n){
            if(!n){
                this.popData={
                    name:"",
                    avatar:"",
                    id:0,
                }
                this.$refs.form.resetFields()
            }
        }
    },
    data() {
        return {
            keyword:'',
            page:1,
            pageSize:10,
            total:0,
            show:false,
            list:[],
            popData:{
                name:"",
                avatar:"",
                id:0,
            },
            rules:{
                name:[{required: true, message: '请输入主讲人姓名', trigger: 'blur'}],
                avatar:[{required: true, message: '请上传头像', trigger: 'change'}],
            },
        }
    },
    created() {
        this.getSpeakerList()
    },
    methods: {
        //上传封面
        async handleUploadImg(e){
            console.log(e);
            let form = new FormData()
            form.append("file", e.file)
            const res=await customInterence.upload(form)
            if(res.Ret===200){
                this.popData.avatar=res.Data.ResourceUrl
            }
        },

        //搜索
        handleSearch(){
            this.page=1
            this.getSpeakerList()
        },

        // 获取主讲人列表
        async getSpeakerList(){
            const res=await ficcManageInterface.activitySpeakerList({
                PageSize:this.pageSize,
                CurrentIndex:this.page,
                Keywords:this.keyword
            })
            if(res.Ret===200){
                this.list=res.Data.List||[]
                this.total=res.Data.Paging.Totals
            }
        },

        handlePageChange(e){
            this.page=e
            this.getSpeakerList()
        },

        handleSaveSpeaker(){
            this.$refs.form.validate(async (valid)=>{
                if(valid){
                    const res=await ficcManageInterface.saveSpeaker({
                        SpeakerId:Number(this.popData.id),
                        SpeakerName:this.popData.name,
                        SpeakerHeadPic:this.popData.avatar
                    })
                    if(res.Ret===200){
                        this.$message.success(`${this.popData.id?'编辑成功':'创建成功'}`)
                        this.show=false
                        this.page=1
                        this.keyword=''
                        this.getSpeakerList()
                    }
                }else{
                    this.$message.warning('请完善表单项')
                }
            })
        },

        handelEdit(item){
            this.popData.name=item.SpeakerName
            this.popData.avatar=item.SpeakerHeadPic
            this.popData.id=item.SpeakerId
            this.show=true
        },

        async handleDelSpeaker(item){
            //删除前校验
            const checkRes=await ficcManageInterface.delSpeakerCheck({SpeakerId:item.SpeakerId})
            if(checkRes.Ret===200&&!checkRes.Data.Ok){
                this.$alert(checkRes.Data.Msg,'操作提示',{
                    confirmButtonText: '确定',
                    callback: action => { 
                    }
                });
                return false
            }

            this.$confirm(`是否确认删除主讲人${item.SpeakerName}？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                ficcManageInterface.delSpeaker({
                    SpeakerId:item.SpeakerId
                }).then(res=>{
                    if(res.Ret===200){
                        this.$message.success('删除成功')
                        this.page=1
                        this.keyword=''
                        this.getSpeakerList()
                    }
                })
            }).catch(() => {
                    
            });
        }

    },
}
</script>

<style lang="scss">
    .add-speaker-dialog{
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 36px;
            color: #8c939d;
            width: 120px;
            height: 120px;
            line-height: 120px;
            text-align: center;
        }
        .avatar {
            width: 120px;
            height: 120px;
            display: block;
        }
    }
</style>
<style lang="scss" scoped>
.activity-speaker-page{
    background: #ffffff;
    border: 1px solid #ececec;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 30px;
    min-height: 70vh;
    .content-box{
        margin-top: 30px;
        padding-bottom: 50px;
    }

    .add-speaker-dialog{
        
    }
}
</style>