<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="edit('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="edit('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="edit('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" center>
      <el-form :model="accountForm" label-width="160px" size="small">

        <el-form-item label="登录密码：">
          <el-input v-model="accountForm" style="width: 300px"></el-input>
        </el-form-item>

        <el-form-item label="平台登录账号：">
          <el-input v-model="accountForm.name" :disabled="true" style="width: 300px;margin-right:20px;"></el-input>
          <el-button type="primary" icon="el-icon-edit" @click="edit('accountForm')">修改账号</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit('accountForm')">确 定</el-button>
      </span>
    </el-dialog>
    <!--修改登录密码 对话框-->
    <el-dialog title="修改登录密码" :visible.sync="isLogin" center>
      <span>需要注意的是内容是默认不居中的</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit('loginForm')">确 定</el-button>
      </span>
    </el-dialog>
    <!--修改支付密码 对话框-->
    <el-dialog title="修改支付密码" :visible.sync="isPay" center>
      <span>需要注意的是内容是默认不居中的</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit('payForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Setpsd",
    data() {
      return {
        isAccount: false,
        isLogin: false,
        isPay: false,
        setForm: {
          name: '',
          loginpsd: '******',
          paypsd: '******'
        },
        accountForm: {

        },
        loginForm: {

        },
        payForm: {

        }
      }
    },
    mounted() {

    },
    methods: {
      // 修改
      edit(formName) {
        // 账号
        if(formName === 'accountForm') {
          this.isAccount = true;
        }
        // 登录密码
        if(formName === 'loginForm') {
          this.isLogin = true;
        }
        // 支付密码
        if(formName === 'payForm') {
          this.isPay = true;
        }
      },
      submit(formName) {
        if(formName === 'accountForm') {
          this.isAccount = false;
        }
        // 登录密码
        if(formName === 'loginForm') {
          this.isLogin = false;
        }
        // 支付密码
        if(formName === 'payForm') {
          this.isPay = false;
        }
      },
      cancel() {
        this.isAccount = false;
        this.isLogin = false;
        this.isPay = false;
      },
    }
  }
</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>
