<template>
  <div class="replaceAdmin-wrap common-set-wrap">
    <nav-crumb :navpath="navpath"></nav-crumb>
    <div class="right-content">
      <div class="right-box" :style="{ height: $store.state.bgHeight }">
        <el-steps :active="active" finish-status="success" align-center>
          <el-step title="获取验证码"></el-step>
          <el-step title="绑定新的超级管理员"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
        <div class="w-514 replaceAdmin-wrap-form m-t-45">
          <el-form v-if="active == 0" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
            <el-form-item label="当前绑定账号" prop="name" class="">
              <el-input v-model="ruleForm.name" disabled placeholder="" class="w-280"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone" class="">
              <el-input v-model="ruleForm.phone" disabled placeholder="" class="w-280"></el-input><el-button class="m-l-20 v-align-b" type="primary" plain :disabled="disableBtn" @click="sendCode(ruleForm.phone)">{{ !disableBtn && !!countNum ? '获取验证码' : countNum }} </el-button>
            </el-form-item>
            <el-form-item label="验证码" prop="code" class="">
              <el-input v-model="ruleForm.code" placeholder="请输入验证码" class="w-280"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
            </el-form-item>
          </el-form>
          <!-- 新绑定 -->
          <el-form v-show="active == 1" :model="newRuleForm" :rules="newRules" ref="newRuleForm" label-width="140px" class="demo-ruleForm">
            <el-form-item label="新绑定超级管理员" prop="name" class="">
              <el-input v-model="newRuleForm.name" placeholder="请输入手机号/姓名" class="w-280"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="newFormLoad" @click="newSubmitForm('newRuleForm')">提 交</el-button>
              <el-button @click="submitFormBack" plain>上一步</el-button>
            </el-form-item>
          </el-form>
          <!-- 提交成功 -->
          <div class="replaceAdmin-wrap-success" v-if="active == 2">
            <div class="icon-outer"><i class="el-icon-success"></i></div>
            <p class="font-w-500">操作成功</p>
          </div>
        </div>
      </div>
    </div>
    <vue-gic-footer></vue-gic-footer>
  </div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import { _debounce } from '@/common/js/public';
export default {
  name: 'replaceAdmin',
  data() {
    return {
      // 面包屑参数
      navpath: [
        {
          name: '首页',
          path: '/index'
        },
        {
          name: '设置',
          path: '/companyAddress'
        },
        {
          name: '更换超级管理员',
          path: ''
        }
      ],
      subNavText: '更换超级管理员,需要先验证当前超级管理员身份',

      active: 0,

      ruleForm: {
        name: '11',
        phone: 1334444444,
        code: ''
      },
      rules: {
        name: [{ required: true, message: '请输入当前绑定账号', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },

      disableBtn: false, // 发验证码
      countNum: 60,

      // 新绑定
      newFormLoad: false,
      newRuleForm: {
        name: ''
      },
      newRules: {
        name: [{ required: true, message: '请输入手机号/姓名', trigger: ['blur', 'change'] }]
      }
    };
  },
  computed: {},
  methods: {
    /**
     * 倒计时
     */
    countDown() {
      const that = this;
      let time = setInterval(function() {
        if (that.countNum === 0) {
          clearInterval(time);
          that.countNum = 60;
          that.disableBtn = false;
          return false;
        }
        that.countNum--;
      }, 1000);
    },

    /**
     * 发验证码
     */
    sendCode: _debounce(function(phone) {
      const that = this;
      that.disableBtn = true;
      let handle = String(phone).substr(0, 3) + '****' + phone.substr(7, 11);
      that.countDown();
      that.$message({
        message: '验证码已发送到您的手机：+86 ' + handle,
        type: 'success'
      });
    }, 500),

    /**
     * 发验证码---api
     */
    /* eslint-disable */
    postSendCode() {},

    /**
     * 保存
     */
    submitForm: _debounce(function(formName) {
      const that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          if (that.active++ > 2) {
            that.active == 2;
          }
          that.$nextTick(function() {
            console.log(that.$refs['newRuleForm']);
            // that.newRuleForm.name = ' ';
            // that.$refs['newRuleForm'].resetFields();
          });
        } else {
          return false;
        }
      });
    }, 500),

    /**
     * 新绑定---提交
     */
    newSubmitForm: _debounce(function(formName) {
      const that = this;
      that.newRuleForm.name = that.newRuleForm.name.replace(/(^\s+)|(\s+$)/g, '');
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.active++;
        } else {
          return false;
        }
      });
    }, 500),

    /**
     * 新绑定---上一步
     */
    submitFormBack() {
      const that = this;
      that.$refs['newRuleForm'].resetFields();
      !!that.active ? that.active-- : '';
    },

    /**
     * 获取当前用户信息
     */
    getCurrentUser() {
      const that = this;
      let userData = JSON.parse(localStorage.getItem('userInfo'));
      that.ruleForm.phone = userData.phoneNumber;
    }
  },
  mounted() {
    const that = this;
    that.getCurrentUser();
  },
  components: {
    navCrumb
  }
};
</script>
<style lang="less" scoped>
.right-content {
  /*width: 100%;*/
  padding: 24px;
  min-height: calc(100% - 240px);
  .right-box {
    background: #fff;
    min-height: 500px;
    padding: 24px;

    .w-280 {
      width: 280px;
    }

    .w-514 {
      width: 514px;
    }

    .m-l-20 {
      margin-left: 20px;
    }

    .m-t-45 {
      margin-top: 45px;
    }

    .v-align-b {
      vertical-align: bottom;
    }

    .text-center {
      text-align: center;
    }

    .replaceAdmin-wrap-form {
      margin: 45px auto 0;
    }

    .replaceAdmin-wrap-success {
      text-align: center;
      i {
        font-size: 50px;
        color: #67c23a;
      }

      p {
        margin-top: 24px;
        font-size: 20px;
        color: #303133;
      }
    }
  }
}
</style>
