<template>
  <div class="add-number">
    <el-form ref="ruleForm" :model="ruleForm" :key="key" :rules="rules" label-width="150px" label-position="left" class="rule-form">
      <el-form-item label="资方名称：" style="width: 100%">
        <el-input
          v-model="rowInfo.institutionName"
          placeholder="请输入资方名称"
          clearable
          disabled
        >
        </el-input>
      </el-form-item>
      <el-form-item label="贸易平台账号：" style="width: 100%" prop="loginName">
          <el-input
            v-model="ruleForm.loginName"
            placeholder="请输入贸易平台账号，例如:zifangdenglu"
            clearable
          >
          </el-input>
      </el-form-item>
      <el-form-item label="贸易平台密码：" style="width: 100%" prop="loginName">
        <div class="login-name-box">
          <el-input
            v-model="password"
            placeholder=""
            clearable
            style="width: calc(100% - 75px)"
            type="password"
            disabled
          >
          </el-input>
          <el-button type="primary" @click="resetPassword">重置</el-button>
        </div>
      </el-form-item>
    </el-form>
    <p style="color: #b8c7cc; font-size: 12px; "> 特别说明：初始登录密码为a123456，登录后请及时修改密码</p>
    <div class="submit-btn">
      <el-button type="primary" @click="onSubmit" style="width: 150px;">确定</el-button>
      <el-button @click="cancel" style="width: 150px;">取消</el-button>
    </div>
  </div>
</template>

<script>
module.exports = {
  props: {
    rowInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      password: 'a123456',
      ruleForm: {
        loginName: ''
      },
      rules: {
        loginName: [
          { required: true, message: '请输入贸易平台账号', trigger: 'blur' },
        ]
      },
      key: 0
    }
  },
  watch: {
    rowInfo: {
      handler() {
        this.ruleForm.loginName = this.rowInfo.loginName
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if(valid) {
            const params = {
              name: this.rowInfo.institutionName,
              ...this.ruleForm
            }
            this.$api.capitalManage.addRelationDisburseNumber(params).then(() => {
              this.$message.success('添加资方账号成功')
              this.$emit('modify-click', 'comfirm' )
            })
        }else {
          return false
        }
      })
    },
    cancel() {
      this.$emit('modify-click', 'close' )
    },
    resetPassword() {
      this.$confirm('确认重置密码么？', '重置密码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.capitalManage.relationDisbursResetPassword({ institutionName: this.rowInfo.institutionName }).then(() => {
          this.$message.success('重置密码成功')
        })
      })
    }
  },
}
</script>

<style scoped>
.add-number .submit-btn {
  margin-top: 200px;
}
.add-number .login-name-box {
  display: flex;
  justify-content: space-between;
}
</style>
