<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>