<template>
  <div class="drawer_info">
    <div class="drawer_title">{{ dataForm.id ? "修改" : "新增" }}</div>
    <el-form
      ref="dataForm"
      :model="dataForm"
      :rules="dataRule"
      @keyup.enter.native="validateForm('dataForm')"
      class="drawer_list"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item prop="username" label="用户名">
            <el-input
              v-model="dataForm.username"
              maxlength="100"
              placeholder="请输入用户名"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="realName" label="名称">
            <el-input
              v-model="dataForm.realName"
              maxlength="100"
              placeholder="请输入名称"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="gender" label="性别">
            <ren-radio-group
              v-model="dataForm.gender"
              dict-type="gender"
            ></ren-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="email" label="电子邮箱">
            <el-input
              v-model="dataForm.email"
              maxlength="30"
              placeholder="请输入电子邮箱"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="mobile" label="手机号码">
            <el-input
              v-model="dataForm.mobile"
              maxlength="11"
              placeholder="请输入手机号码码"
              clearable
              @blur="checkPhone()"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="roleIdList" label="角色配置" class="role-list">
            <el-select
              v-model="dataForm.roleIdList"
              multiple="true"
              placeholder="请选择角色配置"
              clearable
            >
              <el-option
                v-for="role in roleList"
                :key="role.id"
                :label="role.remark"
                :value="role.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :span="24"
          v-if="dataForm.roleIdList.includes('1602904851858067458')"
        >
          <el-form-item label="巡检类型" prop="userType">
            <el-select
              v-model="dataForm.userType"
              placeholder="请选择巡检类型"
              clearable
            >
              <el-option label="安保" value="1"></el-option>
              <el-option label="保洁" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :span="24"
          v-if="dataForm.roleIdList.includes('1602905166862880770')"
        >
          <el-form-item label="选择租户" prop="tenantId">
            <el-select
              v-model="dataForm.tenantId"
              filterable
              placeholder="请选择租户"
              clearable
            >
              <el-option
                v-for="item in tenantList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="status" label="状态" size="mini">
            <el-radio-group v-model="dataForm.status">
              <el-radio :label="0">停用</el-radio>
              <el-radio :label="1">正常</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="save_btn">
      <el-button type="primary" @click="validateForm('dataForm')"
        >提交</el-button
      >
      <el-button plain @click="resetForm('dataForm')">重置</el-button>
    </div>
  </div>
</template>

<script>
import { isEmail, isMobile } from "@/utils/validate";
export default {
  data() {
    return {
      id: "",
      oldMobile: "",
      roleList: [],
      tenantList: [],
      value: "",
      dataForm: {
        id: "",
        tenantId: "",
        username: "",
        realName: "",
        gender: 0,
        email: "",
        mobile: "",
        roleIdList: "",
        status: 1,
        userType: "",
      },
    };
  },
  computed: {
    dataRule() {
      return {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        gender: [
          {
            required: true,
            message: "请选择性别",
            trigger: "change",
          },
        ],
        realName: [
          {
            required: true,
            message: "真实姓名",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入电子邮箱",
            trigger: "blur",
          },
          { validator: isEmail, trigger: "blur" },
        ],
        mobile: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur",
          },
          { validator: isMobile, trigger: "blur" },
        ],
        roleIdList: [
          {
            required: true,
            message: "请选择角色配置",
            trigger: "change",
          },
        ],
        tenantId: [
          {
            required: true,
            message: "请选择租户",
            trigger: "change",
          },
        ],
        userType: [
          {
            required: true,
            message: "请选择巡检类型",
            trigger: "change",
          },
        ],
      };
    },
  },
  created() {
    this.getRoleList();
    this.getTenantList();
  },
  methods: {
    init() {
      this.resetForm("dataForm");
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },
    // 获取信息
    getInfo() {
      this.$http.get(`/sys/user/${this.dataForm.id}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data,
        };
        this.oldMobile = this.dataForm.mobile;
      });
    },
    // 获取角色列表
    getRoleList() {
      return this.$http.get("/sys/role/list").then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.roleList = res.data;
      });
    },
    // 获取租户列表
    getTenantList() {
      return this.$http
        .get("/tenant/tenantinfo/getTenantSearchBox")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.tenantList = res.data;
        });
    },
    // 手机号唯一校验
    checkPhone() {
      if (this.dataForm.mobile) {
        if (this.oldMobile != this.dataForm.mobile) {
          this.$http
            .get(`/sys/user/checkPhone`, {
              params: {
                mobile: this.dataForm.mobile,
              },
            })
            .then((res) => {
              if (res.data.code == 500) {
                this.dataForm.mobile = "";
                this.$message({
                  type: "error",
                  message: res.data.msg,
                });
              }
            });
        }
      }
    },
    //表单重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dataForm.id = this.id;
    },
    //表单验证
    validateForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitForm();
        } else {
          return false;
        }
      });
    },
    // 表单提交
    submitForm() {
      this.$http[!this.dataForm.id ? "post" : "put"]("/sys/user", {
        ...this.dataForm,
      }).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            type: "success",
            message: "保存成功",
          });
          this.$emit("refreshDataList");
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss">
.customWidth.alert {
  width: 50%;
  .el-dialog__title {
    border-left: 4px solid #ddd;
    padding-left: 8px;
    border-color: #5776e6;
  }
}
.mod-sys__user {
  .role-list {
    .el-select {
      width: 100%;
    }
  }
}
</style>
