<template>
  <div class="formcon">
    <div class="formtop">
      <div class="left">
        <el-form-item label="账号：" prop="userName">
          <el-input
            :disabled="id != 'none'"
            :maxlength="INPUTLENGTH"
            show-word-limit
            v-model="form.userName"
          ></el-input>
        </el-form-item>

        <el-form-item label="用户昵称：" prop="nickName">
          <el-input
            v-model="form.nickName"
            :maxlength="INPUTLENGTH"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="单位名称：" prop="unit">
          <el-input
            v-model="form.unit"
            :maxlength="INPUTLENGTH * 5"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="联系电话：" prop="phone">
          <el-input
            :maxlength="INPUTLENGTH"
            show-word-limit
            v-model="form.phone"
          ></el-input>
        </el-form-item>

        <el-form-item label="是否启用：" v-if="form.roleKey != 'sys_admin'">
          <el-switch v-model="form.isEnabled"> </el-switch>
        </el-form-item>
      </div>
      <div class="right">
        <el-form-item label="用户角色：" prop="roleId">
          <el-input
            v-model="form.roleName"
            disabled
            v-if="form.isAdmin === 1"
          ></el-input>

          <el-select
            v-model="form.roleId"
            placeholder="请选择"
            style="width: 100%"
            v-else
          >
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="真实姓名：" prop="realName">
          <el-input
            v-model="form.realName"
            :maxlength="INPUTLENGTH"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="通讯地址：" prop="address">
          <el-input
            v-model="form.address"
            :maxlength="INPUTLENGTH * 5"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="性别：" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
    </div>

    <div class="formbom" v-if="id != 'none'">
      <el-form-item>
        <el-button @click="resetPass" type="primary" class="reset" size="mini"
          >重置密码</el-button
        >
      </el-form-item>
    </div>
  </div>
</template>

<script>
import { resetPass } from "@/configue/api";

export default {
  name: "userEdit",
  props: ["data", "rule", "roleList"],
  data() {
    return {
      id: this.$route.params.id,
      form: this.data,
      radio: "选中且禁用",
      thumbUrl: this.$serverName + "cms/goods/upload/thumb",
      fileUrl: this.$serverName + "cms/goods/upload/model",
    };
  },
  methods: {
    resetPass() {
      this.confirm("该操作将重置此用户密码，是否继续？", () => {
        resetPass({ id: this.id }, () => {
          this.$alert("重置成功（默认密码123456）", "提示", {
            confirmButtonText: "确定",
            callback: () => {
              window.reload();
            },
          });
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.formcon {
  width: 100%;
  .formtop,
  .formbom {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    position: relative;
    > div {
      width: 40%;
      &:first-of-type {
        margin-right: 5%;
      }
    }
  }
  .formbom {
    align-items: center;
  }
}
</style>
