<template>
    <div class="set-item-box">
        <div class="center-title clearfix">
            <h3>安全设置</h3>
        </div>
        <ul class="set-item clearfix" v-loading="loading">
            <li>
                <img src="~assets/images/icon-notice-succ-big.png" alt />
                <div class="set-item-title">登录密码</div>
                <div class="set-item-explanation">
                    定期更换密码会让您的账号更加安全。
                    <br />密码最少8位，需使用字母、数字和符号两种及以上的组合。
                </div>
                <div class="set-item-btn">
                    <router-link to="/center/setting/password" class="btn-change">修改</router-link>
                </div>
            </li>
            <!-- <li>
                <img src="~assets/images/icon-notice-succ-big.png" alt v-if="condition" />
                <img src="~assets/images/icon-notice-big.png" alt v-else />
                <div class="set-item-title">支付密码</div>
                <div class="set-item-explanation">
                    您未设置支付密码
                    <br />请设置支付密码，以便于更加便捷的完成支付
                </div>
                <div class="set-item-btn">
                    <a href="javascript:;" class="btn-change" v-if="condition">修改</a>
                    <a href="javascript:;" class="btn-set" v-else>设置</a>
                </div>
            </li>-->
            <li>
                <img src="~assets/images/icon-notice-succ-big.png" alt />
                <div class="set-item-title">手机绑定</div>
                <div class="set-item-explanation">您已绑定手机{{ phone }}，您可以通过该手机找回密码。</div>
                <div class="set-item-btn">
                    <router-link to="/center/setting/phone" class="btn-change">修改</router-link>
                </div>
            </li>
            <li>
                <img src="~assets/images/icon-notice-succ-big.png" alt />
                <div class="set-item-title">邮箱绑定</div>
                <div class="set-item-explanation">已绑定了邮箱{{ email }}</div>
                <div class="set-item-btn">
                    <router-link to="/center/setting/email" class="btn-change">修改</router-link>
                </div>
            </li>
            <li>
                <img src="~assets/images/icon-notice-succ-big.png" alt v-if="changeStatus" />
                <img src="~assets/images/icon-notice-big.png" alt v-else />
                <div class="set-item-title">密保问题</div>
                <div class="set-item-explanation">
                    是您找回登录密码的方式之一。
                    <br />建议您设置容易记住，且最不容易被他人获取的问题及答案，
                    <br />更有效保障您的密码安全。
                </div>
                <div class="set-item-btn">
                    <router-link
                        to="/center/setting/securityQuestion"
                        class="btn-change"
                        v-if="changeStatus"
                    >修改</router-link>
                    <router-link to="/center/setting/securityQuestion/set" class="btn-set" v-else>设置</router-link>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import { mapState } from "vuex";
import { api_findSecurityByKyc } from "api/center.js";
import { api_findNaturalInfo } from "api/portal.js";
export default {
    name: "setItem",
    computed: {
        ...mapState(["userInfo"])
    },
    methods: {
        init() {
            this.loading = true;
            let findSecurityByKycParams = {
                params: {}
            };
            let findNaturalInfoParams = {
                params: {}
            };
            api_findNaturalInfo(findNaturalInfoParams).then(res => {
                if (res.success) {
                    this.$store.commit("setLoginInfo", res.data);
                    localStorage.setItem(
                        "initVuex",
                        JSON.stringify(this.$store.state)
                    );
                    this.email = res.data.email;
                } else {
                    this.$message.error(res.msg);
                }
            });
            api_findSecurityByKyc(findSecurityByKycParams).then(res => {
                if (res.success) {
                    if (res.data === null) {
                        this.changeStatus = false;
                    } else {
                        this.changeStatus = true;
                    }
                    this.loading = false;
                } else {
                    this.loading = false;
                    this.$message.error(res.msg);
                }
            });
        }
    },
    data() {
        return {
            phone: "",
            email: "",
            condition: false,
            changeStatus: false,
            loading: false
        };
    },
    created() {
        this.init();
        this.phone =
            this.userInfo.loginInfo.phoneNo.substring(0, 3) +
            "****" +
            this.userInfo.loginInfo.phoneNo.substring(7);
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.set-item {
    padding: 0 20px;
    li {
        position: relative;
        display: flex;
        align-items: center;
        height: 100px;
        line-height: 100px;
        &:not(:last-child) {
            border-bottom: 1px solid #eaeaea;
        }
        img {
            width: 30px;
            height: 30px;
            margin-left: 13px;
        }
        .set-item-title {
            margin-left: 32px;
        }
        .set-item-explanation {
            margin-left: 38px;
            line-height: 24px;
            text-align: left;
            font-size: 14px;
            color: #999;
        }
        .set-item-btn {
            position: absolute;
            right: 6px;
        }
        .btn-change,
        .btn-set {
            display: block;
            width: 118px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 14px;
            border-radius: 6px;
        }
        .btn-change {
            border: 1px solid #3d86e9;
            color: #3d86e9;
        }
        .btn-set {
            border: 1px solid #cc3333;
            color: #cc3333;
        }
    }
}
</style>
