<template>
  <container mode="container-xxs">
    <div class="yo-form">
      <h4 class="h4">安全设置</h4>
      <a-progress
        :percent="[33.33, 66.67, 100][popSecurityLevel - 1]"
        :stroke-color="strokeColor"
        :stroke-width="15"
        class="mb-md"
        status="active"
        stroke-linecap="square"
      >
        <span slot="format">
          帐号安全级别:
          <span class="text-success" v-if="popSecurityLevel === 3">强</span>
          <span class="text-warning" v-else-if="popSecurityLevel === 2">中</span>
          <span class="text-error" v-else>弱</span>
        </span>
      </a-progress>
      <a-list :data-source="data" bordered item-layout="vertical">
        <a-list-item :extra="item.extra" slot="renderItem" slot-scope="item">
          <template v-if="item.done">
            <span class="text-success" slot="actions">
              <a-icon class="mr-xxs" type="check-circle" />已设置
            </span>
            <a @click="item.action" slot="actions">修改</a>
          </template>
          <template v-else>
            <span class="text-warning" slot="actions">
              <a-icon class="mr-xxs" type="exclamation-circle" />未设置
            </span>
            <a @click="item.action" slot="actions">设置</a>
          </template>
          <a-list-item-meta :description="item.description" :title="item.title" />
        </a-list-item>
      </a-list>
    </div>
    <br />

    <yo-modal-form
      :action="$api.sysUserUpdatePwd"
      @ok="onSetPasswordSuccess"
      ref="password-form"
      success-message="密码修改成功"
      title="修改密码"
    >
      <password />
    </yo-modal-form>

    <phone @ok="showSafety" ref="phone" />
    <mail @ok="showSafety" ref="mail" />
  </container>
</template>
<style lang="less" scoped>
@import (reference) '~@/assets/style/app.less';
.ant-progress {
  width: 400px;
  /deep/.ant-progress-inner {
    border-radius: @border-radius-base;
    background-color: @white;
  }
}
</style>
<script>
import { doLogout } from '@/common/login';

import Password from './password';
import phone from './phone';
import mail from './mail';

export default {
  components: {
    Password,
    phone,
    mail,
  },

  data() {
    return {
      data: [],
    };
  },

  computed: {
    popSecurityLevel() {
      // 计算帐号安全级别
      return (
        Math.floor(((this.data.filter((p) => p.done).length - 1) * 3 + this.$root.global.info.securityLevel * 3) / 5) ||
        1
      );
    },
    strokeColor() {
      return [
        {
          from: '#e280bf',
          to: '#e91010',
        },
        {
          from: '#e9ce10',
          to: '#ff974d',
        },
        {
          from: '#108ee9',
          to: '#87d068',
        },
      ][this.popSecurityLevel - 1];
    },
  },

  created() {
    this.showSafety();
  },

  methods: {
    onSetPasswordSuccess() {
      doLogout();
    },
    showSafety() {
      const info = this.$root.global.info;
      this.data = [];
      // 登录密码
      this.data.push({
        title: '登录密码',
        description:
          '安全性高的密码可以使帐号更安全。建议您定期更换密码，设置一个包含字母，符号或数字中至少两项且长度超过6位的密码。',
        extra: (
          <div>
            当前密码强度：
            {
              [
                <span class="text-error">弱</span>,
                <span class="text-warning">中</span>,
                <span class="text-success">强</span>,
              ][info.securityLevel - 1]
            }
          </div>
        ),
        done: true,
        action: () => {
          this.$refs['password-form'].onOpen({});
        },
      });

      // 手机绑定
      this.data.push({
        title: '手机绑定(发送验证码到手机,未实现)',
        description: (
          <div>
            手机号可以直接用于登录、找回密码等。
            {info.phone && (
              <span>
                您已绑定了手机<b>{info.phone}</b>
              </span>
            )}
          </div>
        ),
        done: !!info.phone,
        action: () => {
          this.$refs.phone.OnOpen();
        },
      });

      // 邮箱绑定
      this.data.push({
        title: '安全邮箱(发送验证码到邮箱,未实现)',
        description: (
          <div>
            安全邮箱可以直接用于登录、找回密码等。
            {info.email && (
              <span>
                您已绑定了邮箱<b>{info.email}</b>
              </span>
            )}
          </div>
        ),
        done: !!info.email,
        action: () => {
          this.$refs.mail.OnOpen();
        },
      });
    },
  },
};
</script>