/*新增子账户*/
<template>
  <div>
    <transition name="marsk-fade">
      <div v-show="addConfig.isShow" class="marsk" />
    </transition>
    <transition name="slide-fade">
      <div v-show="addConfig.isShow" class="action-add">
        <div class="operation">
          <i class="el-icon-circle-close" @click="close" />
        </div>
        <p class="title">新增子账户</p>

        <el-form
          ref="addForm"
          class="add-form"
          :model="addForm"
          :rules="addRules"
          label-position="left"
        >
          <el-form-item prop="name">
            <el-input
              ref="name"
              v-model="addForm.name"
              type="text"
              size="small"
              name="name"
              placeholder="请设置用户名"
            >
              <span slot="prefix" class="solt">用户名</span>
              <span slot="suffix" class="solt">@{{ account }}</span>
            </el-input>
          </el-form-item>

          <el-form-item prop="pwd">
            <el-input
              ref="pwd"
              v-model="addForm.pwd"
              :type="addForm.pwdType"
              size="small"
              name="pwd"
              placeholder="请输入密码"
            >
              <span slot="prefix" class="solt">密码</span>
              <svg-icon
                slot="suffix"
                :icon-class="
                  addForm.pwdType === 'password' ? 'eye' : 'eye-open'
                "
                @click="showPwd"
              />
            </el-input>
          </el-form-item>
          <el-form-item prop="spwd">
            <el-input
              ref="spwd"
              v-model="addForm.spwd"
              :type="addForm.spwdType"
              size="small"
              name="spwd"
              placeholder="请确认密码"
            >
              <span slot="prefix" class="solt">确认密码</span>
              <svg-icon
                slot="suffix"
                :icon-class="
                  addForm.spwdType === 'password' ? 'eye' : 'eye-open'
                "
                @click="showSpwd"
              />
            </el-input>
          </el-form-item>
          <el-form-item prop="userName">
            <el-input
              ref="userName"
              v-model="addForm.userName"
              type="text"
              size="small"
              name="userName"
              placeholder="请输入姓名"
            >
            <span slot="prefix" class="solt">姓名</span>
            </el-input>
          </el-form-item>
          <el-form-item prop="mobile">
            <el-input
              ref="mobile"
              v-model="addForm.mobile"
              type="text"
              size="small"
              name="mobile"
              placeholder="请输入手机号码"
            >
            <span slot="prefix" class="solt">手机号码</span>
            </el-input>
          </el-form-item>
          <el-button
            type="danger"
            size="small"
            class="next-btn"
            @click.native.prevent="sure"
            >确认</el-button
          >
        </el-form>
      </div>
    </transition>
  </div>
</template>

<script>
import { validName, validPwd,validMobile } from '@/utils/validate'
import { request, enPassword } from '@/utils/request'
export default {
  name: 'Add',
  props: {
    addConfig: {
      isShow: {
        type: Boolean,
        default: () => false,
      },
    },
  },
  data() {
    const validateName = (rule, value, callback) => {
      if (value) {
        if (!validName(value)) {
          callback(new Error('用户名不允许输入‘@’和‘空格’'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请设置用户名'))
      }
    }
    const validateMobile = (rule, value, callback) => {
      if (value) {
        if (!validMobile(value)) {
          callback(new Error('请输入正确的手机号码’'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请输入手机号码'))
      }
    }
    const validatePwd = (rule, value, callback) => {
      if (value) {
        if (!validPwd(value)) {
          callback(new Error('6~18位,字母开头，只能包含字母、数字和下划线'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请输入密码'))
      }
    }
    const validateSpwd = (rule, value, callback) => {
      if (value) {
        if (value !== this.addForm.pwd) {
          callback(new Error('两次密码不一致'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请再次输入密码'))
      }
    }
    return {
      account: this.$store.getters.name,
      addForm: {
        name: '',
        pwd: '',
        spwd: '',
        mobile:'',
        userName:'',
        pwdType: 'password',
        spwdType: 'password',
      },
      addRules: {
        name: [{ required: true, trigger: 'blur', validator: validateName }],
        mobile:[{ required: true, trigger: 'blur', validator: validateMobile }],
        userName:[{ required: true, message: '请输入姓名', trigger: 'blur' }],
        pwd: [
          // { required: true, trigger: 'blur', validator: validatePwd }
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 8, message: '密码长度为6到8位', trigger: 'blur' },
        ],
        spwd: [{ required: true, trigger: 'blur', validator: validateSpwd }],
      },
    }
  },
  methods: {
    // 点击关闭
    close() {
      this.addForm = {
        name: '',
        pwd: '',
        spwd: '',
        pwdType: 'password',
        spwdType: 'password',
        mobile:'',
        userName:'',

      }
      this.$emit('putAdd', false)
    },
    // 切换显示密码
    showPwd() {
      this.addForm.pwdType =
        this.addForm.pwdType === 'password' ? '' : 'password'
      this.$nextTick(() => {
        this.$refs.pwd.focus()
      })
    },
    // 切换显示二次密码
    showSpwd() {
      this.addForm.spwdType =
        this.addForm.spwdType === 'password' ? '' : 'password'
      this.$nextTick(() => {
        this.$refs.spwd.focus()
      })
    },
    // 点击确定
    sure() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          const params = {
            transCode: 'C00017',
            userName: this.addForm.name,
            password: enPassword(this.addForm.pwd),
            adminName:this.addForm.userName,
            mobnub:this.addForm.mobile
          }
          request(params)
            .then((res) => {
              this.addForm = {
                name: '',
                pwd: '',
                spwd: '',
                mobile:'',
                userName:'',
                pwdType: 'password',
                spwdType: 'password',
              }
              this.$message.success(
                `恭喜你，成功新增子账户‘ ${res.loginName} '!`
              )
              this.$emit('putAdd', true)
            })
            .catch((err) => {})
        } else {
          return false
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';

.marsk-fade-enter-active,
.marsk-fade-leave-active {
  transition: all 0.5s;
}
.marsk-fade-enter,
.marsk-fade-leave-to {
  opacity: 0;
}
.marsk {
  @include position(fixed, 0, 0, 0, 0, 1000);
  background: rgba(4, 112, 204, 0.05);
}

.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(7.48rem);
}
.action-add {
  @include position(absolute, 50%, auto, 55%, auto, 1001);
  @include w_h(400px);
  padding: 60px;
  transform: translate(-50%, -50%);
  background: $color_f;
  box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.04);
  .operation {
    @include position(absolute, 5px, auto, auto, 5px, 1);
    font-size: 24px;
    color: $color_9;
    &:hover {
      cursor: pointer;
      color: $color_b;
    }
  }
  .title {
    margin-bottom: 30px;
    font-size: 18px;
    text-align: center;
    font-weight: 700;
    color: $color_3;
  }
  .add-form {
    @include w_h(100%);
    .solt {
      padding: 0 6px;
      font-size: 12px;
      color: $color_9;
    }
    .next-btn {
      margin: 10px auto;
      @include w_h();
    }
  }
}
</style>

<style lang="scss">
@import '@/styles/variables.scss';
@supports (-webkit-mask: none) and (not (cater-color: $color_9)) {
  .add-form .el-input input {
    font-size: 12px;
    color: $color_6;
  }
}
.add-form {
  .el-input {
    &__inner:focus {
      border-color: $color_9;
    }
    &--prefix .el-input__inner {
      padding-left: 65px;
    }
    &--suffix .el-input__inner {
      padding-right: 120px;
    }
  }
}
</style>
