<template>
    <PageHeader :title="title">
        <template #action>
            <Button v-if="elements.indexOf('5-1') != -1" name="新增邮箱" type="primary"
                @click="modlShow = true">新增邮箱</Button>
        </template>
    </PageHeader>
    <div style="margin-top: 8px;">
        <Table row-key="id" :columns="columns" :data="emails">
            <template #name="{ row }">
                <strong>{{ row.name }}</strong>
            </template>
            <template v-if="elements.indexOf('5-2') != -1" name="编辑列" #action="{ row }">
                <Button type="primary" size="small" style="margin-right: 5px"
                    @click="addinfo = JSON.parse(JSON.stringify(row)); modlShow = true">编辑</Button>
                <Button type="error" size="small" @click="delEmail(row.id)">删除</Button>
            </template>
        </Table>
    </div>
    <Space wrap>
        <Modal :title="addinfo.id ? '编辑邮箱' : '添加邮箱'" v-model="modlShow" class-name="vertical-center-modal">
            <Form ref="addForm" :model="addinfo" :rules="ruleValidate" :label-width="80">
                <FormItem label="邮箱持有者" prop="name">
                    <Input v-model="addinfo.name" placeholder="请输入名字"></Input>
                </FormItem>
                <FormItem label="邮箱地址" prop="address">
                    <Input v-model="addinfo.address" placeholder="请输入邮箱地址"></Input>
                </FormItem>
            </Form>
            <template #footer>
                <Button @click="closeShow()">取消</Button>
                <Button type="primary" @click="addinfo.id ? editEmail() : addEmail()">确认</Button>
            </template>
        </Modal>
    </Space>
</template>

<script>


export default {
    props: ['isCollapsed',],
    data() {
        return {
            page_id: 20,
            title: "邮箱中心",
            modlShow: false,
            addinfo: {
                name: null,
                address: null
            },
            emails: [],
            ruleValidate: {
                name: [
                    { required: true, message: '持有者不能为空', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
                    { type: 'email', message: '邮箱格式错误', trigger: 'blur' }
                ]
            },
            columns: [
                {
                    title: '持有人',
                    key: 'name',
                    align: 'center'
                }, {
                    title: '邮箱地址',
                    key: 'address',
                    align: 'center'
                }
            ],
            elements: []
        }
    },
    methods: {
        closeShow() {
            this.addinfo = {
                name: null,
                address: null
            },
            this.modlShow = false;
        },

        async addEmail() {
            var next_ = await this.$refs["addForm"].validate((valid) => {
                if (!valid) {
                    this.$Message.error('请完善信息')
                };
            })
            if (!next_) return
            this.$request("post", "/tool/testport/addemailuser", this.addinfo, this, () => { this.getEmail(); this.closeShow() })
        },
        getEmail() {
            this.$request("get", "/tool/testport/emailuserlist", null, this, (data) => { this.emails = data.data })
        },
        async editEmail() {
            var next_ = await this.$refs["addForm"].validate((valid) => {
                if (!valid) {
                    this.$Message.error('请完善信息')
                };
            })
            if (!next_) return
            this.$request("post", "/tool/testport/editemailuser", this.addinfo, this, () => { this.getEmail(); this.closeShow() })

        },
        delEmail(id_) {
            this.$request("delete", "/tool/testport/deleteemailuser/" + id_, null, this, () => { this.getEmail(); })
        },

    },

    watch: {
        elements(value) {
            if (value.indexOf('5-2') != -1 && this.columns.findIndex(each => { return each.title == '编辑' }) == -1) {
                this.columns.push({
                    title: '编辑',
                    slot: 'action',
                    width: 200,
                    align: 'center'
                })
            } else {
                const index = this.columns.findIndex(ele => { return ele.title == 'Action' })
                index != -1 && this.columns.splice(index, 1)
            }
        }
    },
    created() {
        this.$getElements(this.page_id, this, (data) => this.elements = data.data)
        this.getEmail();
    }
};
</script>

<style>
.vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vertical-center-modal .ivu-modal {
    top: 0;
}
</style>