<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <p class="fs18">修改密码</p>
      </div>
      <el-form :model="setForm" label-width="160px" size="small" class="set-form">

        <el-form-item label="平台登录账号：">
          <el-input v-model="setForm.name" :disabled="true" style="width: 300px;margin-right:20px;"></el-input>
          <el-button type="primary" icon="el-icon-edit" @click="editAccount('accountForm')">修改账号</el-button>
        </el-form-item>

        <el-form-item label="登录密码：">
          <el-input v-model="setForm.loginpsd" :disabled="true" style="width: 300px;margin-right:20px;"></el-input>
          <el-button type="primary" icon="el-icon-edit" @click="editLogin('loginForm')">修改密码</el-button>
        </el-form-item>

        <el-form-item>
          <p class="tipsGray">平台登陆账号和密码用于登陆开放平台，建议您定期修改</p>
        </el-form-item>

        <div style="width: 320px;margin:30px 160px 50px;">
          <el-divider></el-divider>
        </div>

        <el-form-item label="支付密码：">
          <el-input v-model="setForm.paypsd" :disabled="true" style="width: 300px;margin-right:20px;"></el-input>
          <el-button type="primary" icon="el-icon-edit" @click="editPay('payForm')">修改密码</el-button>
        </el-form-item>

        <el-form-item>
          <p class="tipsGray">支付密码用于提现，请妥善保管您的支付密码，切勿告诉其他人，以免财产造成损失！</p>
        </el-form-item>
      </el-form>
    </el-card>
    <!--修改账号 对话框-->
    <el-dialog title="修改登录账号" :visible.sync="isAccount" width="50%">
      <el-form :model="accountForm" :rules="accountRules" ref="accountForm" label-width="200px" size="small">

        <el-form-item label="登录密码：" prop="loginpsd">
          <el-input v-model="accountForm.loginpsd" placeholder="请输入登录密码" style="width: 300px"></el-input>
        </el-form-item>

        <el-form-item label="新手机号：" prop="newTelphone">
          <el-input v-model="accountForm.newTelphone" placeholder="请输入新的手机号码"
                    style="width: 300px;margin-right:20px;"></el-input>
          <el-button type="primary" icon="el-icon-edit" @click="getAccountCode()" v-if="isAccountCode">获取验证码</el-button>
          <el-button type="info" style="width: 109px" :disabled="true" v-if="!isAccountCode">倒计时 {{ accountCountDown }}
            S
          </el-button>
        </el-form-item>

        <el-form-item label="短信验证码：" prop="verification">
          <el-input v-model="accountForm.verification" placeholder="请输入短信验证码" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel('accountForm')">取 消</el-button>
        <el-button type="primary" @click="submitAccount('accountForm')">确 定</el-button>
      </span>
    </el-dialog>
    <!--修改登录密码 对话框-->
    <el-dialog title="修改登录密码" :visible.sync="isLogin" width="50%">
      <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-width="200px" size="small">

        <el-form-item label="新密码：" prop="newLoginpsd">
          <el-input v-model="loginForm.newLoginpsd" plackeholder="请输入新密码" style="width: 300px" show-password></el-input>
        </el-form-item>

        <el-form-item label="确认新密码：" prop="newLoginpsdCheck">
          <el-input v-model="loginForm.newLoginpsdCheck" plackeholder="请输入新密码" style="width: 300px"
                    show-password></el-input>
        </el-form-item>

        <el-form-item label="短信验证码：" prop="loginVerificationCode">
          <el-input v-model="loginForm.loginVerificationCode" placeholder="请输入手机158****8888的验证码"
                    style="width: 300px;margin-right:20px;"></el-input>
          <el-button type="primary" icon="el-icon-edit" @click="getLoginCode()" v-if="isLoginCode">获取验证码</el-button>
          <el-button type="info" style="width: 109px" :disabled="true" v-if="!isLoginCode">倒计时 {{ loginCountDown }} S
          </el-button>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel('loginForm')">取 消</el-button>
        <el-button type="primary" @click="submitLogin('loginForm')">确 定</el-button>
      </span>
    </el-dialog>
    <!--修改支付密码 对话框-->
    <el-dialog title="修改支付密码" :visible.sync="isPay" width="50%">
      <el-form :model="payForm" :rules="payRules" ref="payForm" label-width="200px" size="small">

        <el-form-item label="新密码：" prop="newPaypsd">
          <el-input v-model="payForm.newPaypsd" plackeholder="请输入新密码" style="width: 300px" show-password></el-input>
        </el-form-item>

        <el-form-item label="确认新密码：" prop="newPaypsdCheck">
          <el-input v-model="payForm.newPaypsdCheck" plackeholder="请输入新密码" style="width: 300px"
                    show-password></el-input>
        </el-form-item>

        <el-form-item label="短信验证码：" prop="payVerificationCode">
          <el-input v-model="payForm.payVerificationCode" placeholder="请输入手机158****8888的验证码"
                    style="width: 300px;margin-right:20px;"></el-input>
          <el-button type="primary" icon="el-icon-edit" @click="getPayCode()" v-if="isPayCode">获取验证码</el-button>
          <el-button type="info" style="width: 109px" :disabled="true" v-if="!isPayCode">倒计时 {{payCountDown}} S
          </el-button>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel('payForm')">取 消</el-button>
        <el-button type="primary" @click="submitPay">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {changeTelphone, getTelphoneCode} from '@/api/module/settings'

  export default {
    name: "Setpsd",
    data() {
      // 手机号码格式校验
      let checkTel = (rule, value, callback) => {
        const reg = /^1[3456789]\d{9}$/;
        if (value === '') {
          callback(new Error('手机号码不能为空'));
        } else if (!reg.test(value)) {
          callback(new Error('手机号码格式不对,请重新输入'));
        } else {
          callback();
        }
      };
      // 校验新 登录密码
      let checkNewPsd = (rule, value, callback) => {
        const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
        if (value === '') {
          callback(new Error('密码不能为空'));
        } else if (!reg.test(value)) {
          callback(new Error('密码为8-16位，由数字和字母组成'));
        } else {
          callback();
        }
      };
      // 二次输入 登录密码
      let checkNewPsdAgain = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('密码不能为空'));
        } else if (value !== this.loginForm.newLoginpsd) {
          callback(new Error('两次密码不一致，请检查后重新输入'));
        } else {
          callback();
        }
      };
      // 校验 支付密码
      let checkPayPsd = (rule, value, callback) => {
        const reg = /^[0-9]{6}$/;
        if (value === '') {
          callback(new Error('密码不能为空'));
        } else if (!reg.test(value)) {
          callback(new Error('密码位8位数字'));
        } else {
          callback();
        }
      };
      // 二次输入 登录密码
      let checkPayPsdAgain = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('密码不能为空'));
        } else if (value !== this.payForm.newPaypsd) {
          callback(new Error('两次密码不一致，请检查后重新输入'));
        } else {
          callback();
        }
      };
      return {
        isAccount: false,
        isLogin: false,
        isPay: false,
        isAccountCode: true,
        isLoginCode: true,
        isPayCode: true,
        accountCountDown: '',
        loginCountDown: '',
        payCountDown: '',
        setForm: {
          name: '',
          loginpsd: '******',
          paypsd: '******'
        },
        accountForm: {
          loginpsd: '',
          newTelphone: '',
          verification: ''
        },
        accountRules: {
          loginpsd: [{required: true, message: '登录密码不能为空', trigger: 'blur'}],
          newTelphone: [{required: true, validator: checkTel, trigger: 'blur'}],
          verification: [{required: true, message: '验证码不能为空', trigger: 'blur'}],
        },
        loginForm: {
          newLoginpsd: '',
          newLoginpsdCheck: '',
          loginVerificationCode: ''
        },
        loginRules: {
          newLoginpsd: [{required: true, validator: checkNewPsd, trigger: 'blur'}],
          newLoginpsdCheck: [{required: true, validator: checkNewPsdAgain, trigger: 'blur'}],
          loginVerificationCode: [{required: true, message: '验证码不能为空', trigger: 'blur'}]
        },
        payForm: {
          newPaypsd: '',
          newPaypsdCheck: '',
          payVerificationCode: '',
        },
        payRules: {
          newPaypsd: [{required: true, validator: checkPayPsd, trigger: 'blur'}],
          newPaypsdCheck: [{required: true, validator: checkPayPsdAgain, trigger: 'blur'}],
          payVerificationCode: [{required: true, message: '验证码不能为空', trigger: 'blur'}],
        }
      }
    },
    mounted() {
      this.setForm.name = this.$store.state.user.name;
    },
    methods: {
      // 修改 账号
      editAccount() {
        this.isAccount = true;
      },
      // 修改 登录密码
      editLogin() {
        this.isLogin = true;
      },
      // 修改 支付密码
      editPay() {
        this.isPay = true;
      },
      // 获取验证码
      getAccountCode() {
        // 先校验
        if (this.accountForm.loginpsd === '') {
          this.$refs.accountForm.validateField('loginpsd');
          return;
        }
        //
        const telphoneReg = /^1[3456789]\d{9}$/;
        if (!telphoneReg.test(this.accountForm.newTelphone)) {
          this.$refs.accountForm.validateField('newTelphone');
          return;
        }
        const TIME_COUNT = 60;
        // let count =
        if (!this.timer) {
          this.accountCountDown = TIME_COUNT;
          this.isAccountCode = false;
          this.timer = setInterval(() => {
            if (this.accountCountDown > 0 && this.accountCountDown <= TIME_COUNT) {
              this.accountCountDown--;
            } else {
              this.isAccountCode = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }
      },
      // 修改登录密码的 获取校验码 loginCountDown
      getLoginCode() {
        let loginpsdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
        if (this.loginForm.newLoginpsd === '' || !loginpsdReg.test(this.loginForm.newLoginpsd)) {
          this.$refs.loginForm.validateField('newLoginpsd');
          return;
        }

        if (this.loginForm.newLoginpsdCheck === '' || this.loginForm.newLoginpsdCheck !== this.loginForm.newLoginpsd) {
          this.$refs.loginForm.validateField('newLoginpsdCheck');
          return;
        }

        const TIME_COUNT = 60;
        if (!this.timer) {
          this.loginCountDown = TIME_COUNT;
          this.isLoginCode = false;
          this.timer = setInterval(() => {
            if (this.loginCountDown > 0 && this.loginCountDown <= TIME_COUNT) {
              this.loginCountDown--;
            } else {
              this.isLoginCode = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }
      },
      // 修改支付密码，获取手机验证码
      getPayCode() {
        let paypsdReg = /^[0-9]{6}$/;
        if (this.payForm.newPaypsd === '' || !paypsdReg.test(this.payForm.newPaypsd)) {
          this.$refs.payForm.validateField('newPaypsd');
          return;
        }

        if (this.payForm.newPaypsdCheck === '' || this.payForm.newPaypsdCheck !== this.payForm.newPaypsd) {
          this.$refs.payForm.validateField('newPaypsdCheck');
          return;
        }

        const TIME_COUNT = 60;
        if (!this.timer) {
          this.payCountDown = TIME_COUNT;
          this.isPayCode = false;
          this.timer = setInterval(() => {
            if (this.payCountDown > 0 && this.payCountDown <= TIME_COUNT) {
              this.payCountDown--;
            } else {
              this.isPayCode = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }
        // 获取手机验证码
        // getTelphoneCode(this.loginForm).then(res => {
        //
        // });
      },
      // 平台登录账号  确定
      submitAccount(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            // 接口
            changeTelphone(this.accountForm).then(res => {
              console.log('修改手机号返回结果', res);
            });

            this.clearAccountCodeDown();
            this.isAccount = false;
          }
        });
      },
      // 登录密码  确定
      submitLogin(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {

            this.clearAccountCodeDown();
            this.isLogin = false;
          }
        });
      },
      // 支付密码 确定
      submitPay(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {

            this.isPay = false;
          }
        });
      },
      // 取消
      cancel(formName) {
        // 清空倒计时
        this.clearAccountCodeDown();
        if (formName === 'accountForm') {
          this.isAccount = false;
          this.$refs[formName].resetFields();
        } else if (formName === 'loginForm') {
          this.isLogin = false;
          this.$refs[formName].resetFields();
        } else if (formName === 'payForm') {
          this.isPay = false;
          this.$refs[formName].resetFields();
        }
      },

      // 强制清空倒计时
      clearAccountCodeDown() {
        this.isAccountCode = true;
        this.isLoginCode = true;
        this.isPayCode = true;
        this.accountCountDown = '';
        this.loginCountDown = '';
        this.payCountDown = '';
      }
    }
  }
</script>

<style lang="scss" type="text/stylus" scoped>
  .card-cont {
    margin: 50px 0;
  }

  .set-form {
    width: 90%;
    margin: 40px 0 30px 100px;

    /deep/ .el-form-item {
      margin-top: 18px !important;
    }
  }

  .tipsGray {
    font-size: 14px;
    color: #C9C9C9;
  }
</style>
