<template>
    <div class="page" :class="{ 'page--iphoneX': iphoneX }">
        <div class="form-card">
            <section class="form-item">
                <div class="label"><span class="required">*</span>姓名：</div>
                <div class="box">
                    <input type="text" v-model="form.name" placeholder="请输入" />
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required">*</span>
                    微信号：
                </div>
                <div class="box">
                    <input
                        type="text"
                        v-model="form.wechat"
                        placeholder="请输入"
                    />
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required">*</span>
                    银行：
                </div>
                <div class="box">
                    <picker
                        :mode="'selector'"
                        :range="opts"
                        :range-key="'key'"
                        @change="pickerChange($event)"
                    >
                        <input
                            type="text"
                            :disabled="true"
                            :value="form.bank"
                            placeholder="请选择"
                        />
                    </picker>
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required">*</span>
                    开户支行：
                </div>
                <div class="box">
                    <input
                        type="text"
                        v-model="form.bankBranch"
                        placeholder="请输入"
                    />
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required">*</span>
                    银行卡号：
                </div>
                <div class="box">
                    <input
                        type="text"
                        v-model="form.bankAccount"
                        placeholder="请输入"
                    />
                </div>
            </section>
            <section class="form-item">
                <div class="label">
                    <span class="required">*</span>
                    验证码：
                </div>
                <div class="box code-box">
                    <input
                        type="text"
                        v-model="form.code"
                        placeholder="请输入"
                    />
                    <span class="get-code" @click="getCode">{{ codeStr }}</span>
                </div>
            </section>
            <p class="tel">
                店长手机号：{{ shopInfo.managerTelephone | hideTel }}
            </p>
        </div>
        <div class="btns">
            <div class="btn" @click="saveOk">保存</div>
        </div>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";

export default {
    name: "",
    components: { MyImage },
    filters: {
        hideTel(v) {
            if(!v){
                return '';
            }
            return v.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3") || "";
        },
    },
    // 数据
    data() {
        return {
            form: {
                name: "",
                wechat: "",
                bank: "",
                bankBranch: "",
                bankAccount: "",
                code: "",
            },
            opts: [
                { key: "工商银行", value: "工商银行" },
                { key: "农业银行", value: "农业银行" },
                { key: "建设银行", value: "建设银行" },
                { key: "招商银行", value: "招商银行" },
                { key: "中国银行", value: "中国银行" },
                { key: "浦发银行", value: "浦发银行" },
                { key: "广发银行", value: "广发银行" },
                { key: "民生银行", value: "民生银行" },
                { key: "平安银行", value: "平安银行" },
                { key: "光大银行", value: "光大银行" },
                { key: "兴业银行", value: "兴业银行" },
                { key: "中信银行", value: "中信银行" },
                { key: "上海银行", value: "上海银行" },
            ],
            submitLoading: false,
            timeing: false,
            codeStr: "发送验证码",
            shopInfo: {},
        };
    },

    onLoad(opts) {
        this.getData();
    },

    onShow() {},

    // 函数
    methods: {
        getData() {
            this.api.get("/Shop/GetInfo", {}, { pass: true }).then((res) => {
                if (res.success && res.data) {
                    this.shopInfo = res.data;
                }
            });
        },
        getCode() {
            if (this.timeing) {
                return;
            }
            if(!this.shopInfo.managerTelephone){
                return this.fn.showToast('未获取到店长手机号');
            }
            this.sendCode();
            this.downTime();
        },
        sendCode() {
            this.api
                .get("/Login/SendSms", {
                    mobile: this.shopInfo.managerTelephone,
                    type:1
                })
                .then((res) => {});
        },
        downTime() {
            this.timeing = true;
            let t = 60;
            this.codeStr = t + "s重新获取";
            this.timer = setInterval(() => {
                t--;
                if (t === 0) {
                    clearInterval(this.timer);
                    this.codeStr = "发送验证码";
                    this.timeing = false;
                } else {
                    this.codeStr = t + "s重新获取";
                }
            }, 1000);
        },
        pickerChange(e) {
            let val = this.opts[e.detail.value];
            console.log(e,val)
            this.form.bank = val.value;
        },
        saveOk() {
            if (this.submitLoading) {
                return;
            }
            if (!this.form.name) {
                return this.fn.showToast("请输入姓名");
            }
            if (!this.form.wechat) {
                return this.fn.showToast("请输入微信号");
            }
            if (!this.form.bank) {
                return this.fn.showToast("请选择银行");
            }
            if (!this.form.bankBranch) {
                return this.fn.showToast("请输入开户支行");
            }
            if (!this.form.bankAccount) {
                return this.fn.showToast("请输入银行卡号");
            }
            if (!this.form.code) {
                return this.fn.showToast("请输入验证码");
            }
            this.submitLoading = true;
            uni.showLoading({
                title: "提交中...",
            });
            let data = {
                mobile:this.shopInfo.managerTelephone,
                smsCode:this.form.code,
                account:{
                    name:this.form.name,
                    wechat:this.form.wechat,
                    bank:this.form.bank,
                    bankBranch:this.form.bankBranch,
                    bankAccount:this.form.bankAccount,
                    userId:this.user.id,
                    appId:this.user.appId,
                }
             };
            this.api.post("/User/BindAccount", data, { pass: true }).then((res) => {
                this.submitLoading = false;
                uni.hideLoading();
                if (res.success) {
                    this.fn.showToast("设置成功");
                    this.router.back();
                } else {
                    this.fn.showModal({
                        title: "设置失败",
                        content: res.message,
                        showCancel: false,
                    });
                }
            });
        },
    },

    // 数据计算
    computed: {
        // pickerView() {
        //     for (let item of this.opts) {
        //         if (item.value === this.form.bank) {
        //             return item.key;
        //         }
        //     }
        //     return "";
        // },
        user() {
            return this.$store.state.user.user;
        },
    },

    // 数据监听
    watch: {},
};
</script>


<style lang="scss" scoped>
.page {
    padding-bottom: px(120);
    min-height: 100vh;
    background-color: #fff;
}
.page--iphoneX {
    padding-bottom: px(150);
    .btn {
        padding-bottom: px(30);
        background-color: rgb(0, 188, 38);
    }
}
.form-card {
    background-color: #fff;
    padding: 0 px(30);
    & ~ .form-card {
        margin-top: px(25);
    }
    .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: px(140);
        background-color: #fbfbfb;
        border-bottom: 1px solid #f1f1f1;
        border-top: 1px solid #f1f1f1;
        font-size: px(44);
    }
}
.form-item {
    display: flex;
    min-height: px(140);
    padding: px(30) 0;
    box-sizing: border-box;
    align-items: center;
    font-size: px(44);
    border-top: 1px solid #f1f1f1;
    &.dis-item {
        color: #999;
        background: #f9f9f9;
    }
    .label {
        width: px(280);
        flex-shrink: 0;
        color: #999;
        margin-right: px(10);
    }
    .box {
        width: 100%;
        position: relative;
        input {
            width: 100%;
        }
    }
    .tool {
        flex-shrink: 0;
        color: #999;
        margin-left: px(10);
    }
    textarea,
    input {
        max-width: 100%;
        width: 100%;
    }
}
.list {
    // min-height: 100vh;
    // background-color: #fff;
    // border-bottom: 1px solid #f1f1f1;
    li {
        padding: px(0) px(35);
        height: px(140);
        line-height: px(140);
        font-size: px(44);
        border-top: 1px solid #f1f1f1;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .tools {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        span {
            display: inline-block;
            border: 1px solid #f1f1f1;
            font-size: px(36);
            height: px(80);
            width: px(120);
            display: flex;
            justify-content: center;
            align-items: center;
            & ~ span {
                margin-left: px(30);
            }
        }
        .remove {
            color: #f00;
        }
    }
}
.btn {
    width: 100%;
    height: px(120);
    background-color: rgb(0, 188, 38);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btns {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
.layout {
    background-color: #eee;
    color: #666;
}
.add-btn {
    height: px(120);
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: px(50) px(35) 0;
    border: 1px solid #ccc;
    border-radius: px(10);
}
.code-tool {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .scan-img {
        flex-shrink: 0;
        width: px(80);
        height: px(80);
        /deep/ img {
            width: px(80);
            height: px(80);
        }
    }
    .generate {
        color: #0097d1;
        margin-right: px(30);
        flex-shrink: 0;
    }
}
.required {
    color: #f00;
    font-size: px(44);
    &.hide {
        visibility: hidden;
    }
}
.inp-dis {
    color: #999;
}

.img-card {
    padding-top: px(30);
    padding-bottom: px(30);
}
.form-img-item {
    .tit {
        padding: px(30);
        font-size: px(44);
    }
}

.spec-list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    li {
        width: 33.333333%;
        font-size: px(40);
        height: px(100);
        border: 1px solid #f1f1f1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        & ~ li {
            // border-left: none;
        }
        &.on {
            color: rgb(0, 188, 38);
            border-color: rgb(0, 188, 38);
        }
    }
}
.mo-date {
    margin-top: px(20);
    border-bottom: 1px solid #f1f1f1;
    background: #fbfbfb;
    font-size: px(40);
    padding: px(10);
}
.n-date-box {
    margin-top: px(20);
    font-size: px(40);
}
.n-date {
    border-bottom: 1px solid #f1f1f1;
    background: #fbfbfb;
    padding: 0 px(20);
    display: inline-block;
    width: px(200);
    font-size: px(44);
    vertical-align: bottom;
}
.address-icon {
    /deep/ img {
        width: px(60);
        height: px(60);
    }
}
.dis {
    background-color: #f6f6f6;
}
.code-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .get-code {
        width: px(250);
        flex-shrink: 0;
        font-size: px(40);
        padding: 0 px(10);
        border: none;
        &.dis {
            border-color: #f1f1f1;
            color: #999;
        }
    }
}
.tel {
    border-top: 1px solid #f1f1f1;
    padding-top: px(60);
    text-align: center;
    font-size: px(40);
    color: #666;
}
</style>