<template>
  <div class="userDrawer">
    <el-drawer :title="drawerTitle" :visible.sync="drawer" direction="rtl" size="40%" :close-on-click-modal="false"
      :wrapperClosable="false" :show-close="false">
      <el-form ref="userForm" :model="userForm" label-width="auto" :rules="rules" style="margin: 10px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="员工号:" prop="loginName">
              <el-input placeholder="请输入员工号" v-model.trim="userForm.loginName" v-if="!userFormDisabled"
                :disabled="drawerTitle != '新增用户'" size="small" clearable></el-input>
              <div v-else>{{ userForm.loginName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户姓名:" prop="username">
              <el-input placeholder="请输入用户姓名" :disabled="userFormDisabled" v-model.trim="userForm.username"
                v-if="!userFormDisabled" size="small" clearable></el-input>
              <div v-else>{{ userForm.username }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-alert title="注意:员工号一但设置就无法更改，请谨慎填写！" type="warning" show-icon size="mini" :closable="false"
              style="width: 400px">
            </el-alert>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号:" prop="phone">
              <el-input placeholder="请输入手机号" type="phone" v-model.trim="userForm.phone" :disabled="userFormDisabled"
                v-if="!userFormDisabled" size="small" clearable></el-input>
              <div v-else>{{ userForm.phone }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电子邮箱:" prop="email">
              <el-input placeholder="请输入电子邮箱" type="email" v-model.trim="userForm.email" :disabled="userFormDisabled"
                v-if="!userFormDisabled" size="small" clearable></el-input>
              <div v-else>{{ userForm.email }}</div>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12" v-if="drawerTitle == '新增用户'">
            <el-form-item label="密码:">
              <el-input
                placeholder="请输入密码"
                :disabled="userFormDisabled"
                type="password"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="drawerTitle == '新增用户'">
            <el-form-item label="确认密码:">
              <el-input
                placeholder="请确认密码"
                :disabled="userFormDisabled"
                type="password"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item label="所属口岸:" prop="portName">
              <el-select placeholder="请选择口岸" v-model="port" :disabled="userFormDisabled" size="small"
                style="width: 100%" multiple clearable>
                <el-option v-for="item in portNameList" :label="item.englishName" :value="item.englishName"
                  :key="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属角色:" prop="roleIds">
              <el-checkbox-group v-model="roleid" :disabled="userFormDisabled" @change="change">
                <el-checkbox v-for="item in roleList" :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注:" prop="remark">
              <el-input type="textarea" v-model="userForm.remark" placeholder="备注" :disabled="userFormDisabled"
                v-if="!userFormDisabled" size="small" clearable></el-input>
              <div v-else>{{ userForm.remark }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" size="mini" v-if="!userFormDisabled" :loading="loading" @click="submit">提交
          </el-button>
          <el-button type="primary" size="mini" @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import {
  getRoleList,
  addOrUpdateUser,
  portNameList,
} from "@/api/system/user.js";
export default {
  props: {
    drawerTitle: {
      type: String,
      default: "",
    },
    userFormDisabled: {
      type: Boolean,
      default: false,
    },
    drawer: {
      type: Boolean,
      default: false,
    },
    userData: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      userForm: {
        roleIds: [],
      },
      roleList: [],
      portNameList: [],
      port: [],
      roleid: [],
      ImageUploadUrl: "",
      dialogVisible: false,
      loading: false,
      rules: {
        loginName: [
          {
            required: true,
            message: "员工号不能为空",
            trigger: "blur",
          },
        ],
        username: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: "blur",
          },
        ],
        portName: [
          {
            required: true,
            message: "所属口岸不能为空",
            trigger: "blur",
          },
        ],
        phone: [
          {
            min: 11,
            max: 11,
            message: "请输入11位手机号码",
            trigger: "blur"
          },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: "请输入正确得手机号码"
          }
        ],
        email: [
          {
            pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
            message: "请输入正确得电子邮箱"
          }
        ]
      },
    };
  },
  created() {
  },
  watch: {
    drawer(val, oldVal) {
      if (val) {
        this.roleList = []
        this.selectRoleList();
        this.userForm = this.userData;
        if (this.userForm.roleIds) {
          this.roleid = this.userForm.roleIds;
        }
        if (this.userForm.portName) {
          this.port = this.userForm.portName;
        }
      } else {
        this.loading = false;
      }
    },
  },
  methods: {
    clearValidate(formName) {
      this.$refs[formName].clearValidate();
    },
    change(val) {
      this.roleid = val;
    },
    selectRoleList() {
      //角色列表
      getRoleList({ size: null, page: null })
        .then((res) => {
          if (res.code === 200) {
            res.data.list.map((item) => {
              if (item.valid == 1) {
                this.roleList.push(item);
              }
            });
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
      //获取口岸
      // this.portNameList = this.$store.state.user.portNames;
      portNameList()
        .then((res) => {
          if (res.code === 200) {
            this.portNameList = res.data;
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //关闭
    handleClose() {
      this.roleid = [];
      this.port = [];
      this.userForm = {
        roleIds: [],
      };
      this.clearValidate('userForm')
      this.$emit("handleClose", false);
    },

    //提交
    submit() {
      if (this.port.join(",").length > 0) {
        this.loading = true;
        this.userData.isValid ? "" : (this.userForm.isValid = 1);
        this.userForm.roleIds = this.roleid;
        this.userForm.portName = this.port.join(",");
        addOrUpdateUser(this.userForm)
          .then((res) => {
            this.loading = false;
            if (res.code === 200) {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.$emit("handleClose", false);
            } else {
              this.$message({
                message: res.msg,
                type: "warning",
              });
            }
          })
          .catch((err) => {
            this.loading = false;
            console.log(err);
          });
      } else {
        this.$message({
          message: "口岸不能为空",
          type: "warning",
        });
      }
    },
  },
};
</script>

<style>
</style>