<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="4">
                <el-input size="medium" v-model="query.opter" placeholder="请输入账号"></el-input>
            </el-col>
            <el-col :span="2">
                <el-button size="medium" type="primary" plain @click="getList">查询</el-button>
            </el-col>
            <el-col :span="2">
                <el-button size="medium" type="primary" @click="addForm">新增</el-button>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col>
                <el-table
                        :data="tableData"
                        border
                        style="width: 80%">
                    <el-table-column
                            fixed
                            prop="id"
                            label="id"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="opter"
                            label="账号"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="receaddr"
                            label="收报地址"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            prop="createtime"
                            label="创建时间"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button
                                    @click.native.prevent="ediForm(scope.row)"
                                    type="text"
                                    style="color: #5BB75B"
                                    size="small">
                                更新
                            </el-button>
                            <el-button
                                    @click.native.prevent="deleteRow(scope.row.id)"
                                    type="text"
                                    style="color: #5BB75B"
                                    size="small">
                                移除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="10">
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="query.pageNum"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="query.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-dialog :title="'客户信息'+textMap[dialogStatus]" :visible.sync="dialogFormVisible">
                <el-form :model="form" ref="form" :rules="rules">
                    <el-form-item label="账号" prop="opter">
                        <el-input size="medium" v-model="form.opter" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="电报地址" prop="receaddr">
                        <el-input size="medium" v-model="form.receaddr" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="" :label-width="formLabelWidth">
                        <el-button size="medium" @click="dialogFormVisible = false">取 消</el-button>
                        <el-button size="medium" type="primary" @click="dialogStatus==='create'?addsubmitForm('form'):edisubmitForm('form')">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </el-row>
    </div>
</template>
<script>
    import {
        addTeleAddr,
        delTeleAddr,
        ediTeleAddr,
        selectLists
    } from '../../api/remote_interface/byont_import';
    export default {
        data(){
            return{
                rules: {
                    opter: [
                        { required: true, message: '请输入客户编码', trigger: 'blur' },
                    ],
                    receaddr: [
                        { required: true, message: '请输入电报地址', trigger: 'blur' },
                    ]},
                dialogStatus: '',
                textMap: {
                    update: '更新',
                    create: '新增'
                },
                query:{
                    opter:'',
                    pageNum:0,
                    pageSize:10
                },
                tableData: [],
                total:0,
                dialogFormVisible:false,
                form: {
                    id:'',
                    opter:'',
                    receaddr:'',
                    createtime:''
                },
                formLabelWidth: '120px'
            }
        },
        methods:{
            addForm(){
                this.dialogFormVisible = true;
                this.dialogStatus = 'create';
            },
            ediForm(row){
                this.dialogFormVisible = true;
                this.dialogStatus = 'update';
                this.form=row;
            },
            addsubmitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.form.id='';
                        addTeleAddr(this.form).then((response) => {
                            const res = response.data
                            if (res.code !== '200') {
                                return this.$message.error('电报地址添加，失败！')
                            }
                            this.$message.success('电报地址添加，成功！')
                            this.dialogFormVisible = false;
                            this.getList();
                        }).catch(error => {
                            // 关闭加载
                            this.$message.warning('电报地址添加，失败！')
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            edisubmitForm(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        ediTeleAddr(this.form).then((response) => {
                            const res = response.data
                            if (res.code !== '200') {
                                return this.$message.error('电报地址更新，失败！')
                            }
                            this.$message.success('电报地址更新，成功！')
                            this.dialogFormVisible = false;
                            this.getList();
                        }).catch(error => {
                            // 关闭加载
                            this.$message.warning('电报地址更新，失败！')
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            deleteRow(id){
                this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    delTeleAddr({id: id}).then((response) => {
                        const res = response.data
                        this.$message.success(res.msg)
                        this.getList()
                    }).catch(error => {
                        this.$message.error('删除电报地址，失败！')
                    })
                }).catch(() => {
                })
            },
            handleSizeChange(val) {
                this.query.pageSize=val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.query.pageNum = val;
                this.getList();
            },
            getList(){
                selectLists(this.query).then((response) => {
                    const res = response.data
                    if (res.code !== '200') {
                        return this.$message.error('获取消息收发记录，失败！')
                    }
                    // 获取列表数据
                    this.tableData = res.data.list
                    // 获取列表的总记录数
                    this.total = res.data.total
                    this.$message.success('获取消息收发记录，成功！')
                }).catch(error => {
                    // 关闭加载
                    this.$message.error(error.toString())
                })
            }
        },
        mounted() {
            this.getList();
        }
    }
</script>