<template>
    <transition :name="transitionName">
        <div>
            <div style="margin: 5px 20px">
                <el-steps :active="active" finish-status="success">
                    <el-step title="步骤 1">

                    </el-step>
                    <el-step title="步骤 2">
                    </el-step>
                    <el-step title="步骤 3"/>
                </el-steps>
                <div style="margin-top: 20px">
                    <div v-if="active===1">
                        <h2>你的二级域名</h2>
                        <el-input clearable autofocus v-model="domain_name"/>
                    </div>
                    <div v-else-if="active===2">
                        <div style="text-align: center;margin: 20px 0">
                            <h3>还差一步绑定成功</h3>
                        </div>
                        请联系域名管理员，前往 <strong>{{ domain_name }}</strong> 域名 DNS 管理后台添加如下 CNAME 记录。
                        <el-table
                                :data="domain_tData"
                                border
                                stripe
                                style="width: 100%;margin-top: 20px">
                            <el-table-column
                                    prop="type"
                                    label="记录类型"
                                    align="center"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="host"
                                    align="center"
                                    label="主机记录"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="dns"
                                    align="center"
                                    label="记录值"
                                    width="300">
                            </el-table-column>
                        </el-table>
                        <el-alert title="请在域名DNS配置成功后，点击“下一步”按钮"
                                  style="margin-top: 30px"
                                  type="warning"
                                  :closable="false"
                                  show-icon/>
                    </div>
                    <div v-else-if="active===3">
                        <div v-if="!bind_status">
                            <div style="text-align: center;margin: 20px 0">
                                <el-link :underline="false" type="danger"
                                         style="font-size: x-large">绑定失败
                                </el-link>
                            </div>

                            <p style="margin: 10px 0">您的账户正在绑定域名：<strong>{{ domain_name }}</strong></p>
                            <el-row>
                                <el-col :span="16"><p>系统未检出到您的CNAME记录，请检查您的配置。</p></el-col>
                                <el-col :span="6">
                                    <el-button type="danger" size="small" plain style="margin-top: 8px"
                                               @click="remove_domain">
                                        解除绑定
                                    </el-button>
                                </el-col>
                            </el-row>
                        </div>

                        <div v-else>
                            <div style="text-align: center;margin: 20px 0">
                                <el-link :underline="false" type="success"
                                         style="font-size: x-large">绑定成功
                                </el-link>
                            </div>

                            <el-row>
                                <el-col :span="16"><p>您的账户已绑定域名：<strong>{{ domain_name }}</strong></p></el-col>
                                <el-col :span="6">
                                    <el-button type="danger" size="small" plain style="margin-top: 8px"
                                               @click="remove_domain">
                                        解除绑定
                                    </el-button>
                                </el-col>
                            </el-row>

                        </div>
                        <el-table
                                :data="domain_tData"
                                border
                                stripe
                                style="width: 100%;margin-top: 20px">
                            <el-table-column
                                    prop="type"
                                    label="记录类型"
                                    align="center"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="host"
                                    align="center"
                                    label="主机记录"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="dns"
                                    align="center"
                                    label="记录值"
                                    width="300">
                            </el-table-column>
                        </el-table>
                        <div v-if="!bind_status" style="text-align: center;margin: 30px 0">
                            <el-button @click="check_cname" type="success" plain>已经修改配置，再次检查绑定</el-button>
                        </div>
                    </div>

                </div>
            </div>
            <div v-if="active!==3" style="margin:40px 20px 0;text-align: right">
                <el-button @click="last"
                           :disabled="bind_status|| active===1 ">上一步
                </el-button>
                <el-button @click="next">下一步</el-button>
            </div>

        </div>
    </transition>
</template>

<script>
    import {domainFun} from "@/restful";

    export default {
        name: 'BindDomain',
        props: {
            transitionName: {
                type: String,
                default: 'bind-domian'
            },
            app_id: {
                type: String,
                default: undefined
            },
        },
        data() {
            return {
                active: 1,
                bind_status: false,
                bind_domain_sure: true,
                domain_name: '',
                domain_tData: [{'type': 'CNAME', 'host': 'xxx', 'dns': 'demo.xxx.cn'}],
            }
        },
        mounted() {
            this.bind_click()
        },
        beforeDestroy() {
            this.bind_domain_sure = false;
        },
        methods: {
            check_cname() {
                domainFun(data => {
                    if (data.code === 1000) {
                        if (this.active++ > 2) this.active = 3;
                        this.bind_status = true;
                        if (!this.app_id) {
                            this.$store.dispatch("dodomainshow", false);
                        }
                    } else {
                        if (data.code === 1004) {
                            this.active = 1;
                            this.domain_name = '';
                        } else {
                            if (this.active++ > 2) this.active = 3;
                        }
                        this.bind_status = false;
                        this.$message.error("绑定失败 " + data.msg)
                    }
                }, {methods: 'PUT', data: {app_id: this.app_id}})
            },
            remove_domain() {
                domainFun(data => {
                    if (data.code === 1000) {
                        this.bind_status = false;
                        this.active = 1;
                        this.$message.success("解除绑定成功 ");
                        if (!this.app_id) {
                            this.$store.dispatch("dodomainshow", true);
                        }
                    } else {
                        this.$message.error("解除绑定失败 " + data.msg)
                    }
                }, {methods: 'DELETE', data: {app_id: this.app_id}});
            },
            bind_click() {
                domainFun(data => {
                    if (data.code === 1000) {
                        if (data.data) {
                            if (data.data.domain_name) {
                                this.domain_name = data.data.domain_name;
                            }
                            if (data.data.domain_record) {
                                this.format_domain_tData(data.data.domain_record);
                                if (this.active++ > 2) this.active = 3;
                            }
                            if (data.data.is_enable) {
                                this.bind_status = true;
                                if (this.active++ > 2) this.active = 3;
                            }
                            this.bind_domain_sure = true;
                        }
                    } else {
                        this.$message.error("绑定失败 " + data.msg)
                    }
                }, {methods: 'GET', data: {app_id: this.app_id}});
            },
            format_domain_tData(cname_domain) {
                let domain_name_list = this.domain_name.split('.');
                const d_len = domain_name_list.length;
                if (d_len === 2) {
                    this.domain_tData[0].host = '@'
                } else if (d_len > 2) {
                    domain_name_list.splice(domain_name_list.length - 2, 2);
                    this.domain_tData[0].host = domain_name_list.join(".")
                }
                this.domain_tData[0].dns = cname_domain;
            },
            next() {
                if (this.active === 1) {
                    domainFun(data => {
                        if (data.code === 1000) {
                            if (data.data && data.data.cname_domain) {
                                this.format_domain_tData(data.data.cname_domain);
                                if (this.active++ > 2) this.active = 3;
                            }
                        } else {
                            this.$message.error("绑定失败 " + data.msg)
                        }
                    }, {methods: 'POST', data: {domain_name: this.domain_name, app_id: this.app_id}})
                } else if (this.active === 2) {
                    this.check_cname()
                }
            },
            last() {
                if (this.active-- < 2) this.active = 1;
            },
        }
    }
</script>

<style scoped>
    .dialog-footer {

    }
</style>
