<template>
    <div class="email-list-page">
        <div class="top-box">
            <el-button type="primary" @click="popData.show=true">添加客户邮箱</el-button>
            <el-input placeholder="请输入客户名称或邮箱地址" v-model="searchVal" style="max-width: 520px; float: right" @input="handleSearch" clearable>
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
        </div>
        <div class="list-wrap">
            <el-table :data="list" border>
                <el-table-column align="center" prop="Email" label="邮箱地址"></el-table-column>
                <el-table-column align="center" prop="Name" label="客户名称"></el-table-column>
                <el-table-column align="center" prop="CreateTime" label="创建时间"></el-table-column>
                <el-table-column align="center" prop="AdminName" label="创建人"></el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <span style="cursor: pointer;color:#4099ef;margin-right:10px" @click="handleEdit(scope.row)">编辑</span>
                        <span style="cursor: pointer;color:#ff0000" @click="handleDel(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="popData.show" 
            width="600px" 
            :title="popData.id>0?'编辑客户邮箱':'新增客户邮箱'"
            center
        >
            <el-form
			    :model="popData"
				:rules="formRule"
				ref="form"
				label-width="90px"
				@submit.native.prevent
			>
                <el-form-item prop="email" label="邮箱地址">
                    <el-input type="text" v-model="popData.email" placeholder="请输入邮箱地址"></el-input>
                </el-form-item>
                <el-form-item prop="name" label="客户姓名">
                    <el-input type="text" v-model="popData.name" placeholder="请输入客户姓名"></el-input>
                </el-form-item>
                <div style="text-align:center;margin-bottom:30px;margin-top:40px">
                    <el-button type="primary" plain style="margin-right:10px" @click="popData.show=false">取消</el-button>
                    <el-button type="primary" @click="handleSave">确定</el-button>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import * as reportEnInterface from '@/api/modules/reportEnApi';
export default {
    data() {
        return {
            searchVal:'',
            page: 1,
            pageSize: 10,
            total: 0,
            list: [],
            
            popData:{
                show:false,
                id:0,
                name:'',
                email:''
            },
            formRule:{
                name:[{ required: true, message: '客户姓名不能为空', trigger: 'blur' }],
                email:[{required: true, message: '邮箱不能为空', trigger: 'blur' }]
            }
        }
    },
    watch: {
        'popData.show'(n){
            if(!n){
                this.popData.id=0
                this.popData.name=''
                this.popData.email=''
                this.$refs.form.clearValidate();
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        handleSearch(e){
            this.searchVal=e 
            this.page=1
            this.list=[]
            this.getList()
        },

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

        async getList(){
            const res=await reportEnInterface.customEmailList({
                CurrentIndex:this.page,
                PageSize:this.pageSize,
                Keywords:this.searchVal
            })
            if(res.Ret===200){
                this.list=res.Data.List||[]
                this.total=res.Data.Paging.Totals
            }
        },

        handleDel(item){
            this.$confirm(`是否确认删除${item.Name}的邮箱信息?`,'提示',{
				type:'warning'
			}).then(() => {
				reportEnInterface.delCustomEmail({
                    EmailId:item.Id
                }).then(res=>{
                    if(res.Ret===200){
                        this.$message.success('删除成功');
                        this.page=1
						this.getList();
                    }
                })
			}).catch(() => {});
        },

        handleEdit(item){
            this.popData.show=true
            this.popData.id=item.Id
            this.popData.name=item.Name 
            this.popData.email=item.Email
        },

        handleSave(){
            this.$refs.form.validate((valid)=>{
                if(valid){
                    reportEnInterface.saveCustomEamil({
                        Id:this.popData.id,
                        Name:this.popData.name,
                        Email:this.popData.email
                    }).then(res=>{
                        if(res.Ret===200){
                            this.$message.success('操作成功')
                            this.popData.show=false
                            this.page=1
                            this.searchVal=''
                            this.getList()
                        }
                    })
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.email-list-page{
    min-height: calc(100vh - 200px);
	padding: 20px 30px;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 4px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    .list-wrap{
        margin-top: 30px;
        padding-bottom: 100px;
    }
}
</style>