<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" :disabled="disableBtn" @click="sendCode(ruleForm.phone)">获取验证码</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-if="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 type="primary" @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 strLength from '@/common/js/strlen';
import showMsg from '@/common/js/showmsg';
import errMsg  from '@/common/js/error';
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, // 发验证码

      // 新绑定
      newFormLoad: false,
      newRuleForm: {
        name: '',
      },
      newRules: {
        name: [
          { required: true, message: '请输入手机号/姓名', trigger: 'change' },
        ]
      }
    }
  },
  computed: {

  },
  methods: {
    /**
     * 发验证码
     */
    sendCode: _debounce(function(phone) {
      const that = this;
      that.disableBtn = true;

    },500),

    /**
     * 发验证码---api
     */
    postSendCode() {
      const that = this

    },

    /**
     * 保存
     */
    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.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>
