<template>
  <div class="userDrawer">
    <el-drawer
      :data="userData"
      :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="mini"
              ></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="mini"
              ></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="mini"
              ></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="mini"
              ></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-checkbox-group v-model="port" :disabled="userFormDisabled">
                <el-checkbox
                  v-for="item in portNameList"
                  :label="item.englishName"
                  :key="item.id"
                  >{{ item.englishName }}</el-checkbox
                >
              </el-checkbox-group> -->
              <el-select
                placeholder="不限"
                v-model="port"
                :disabled="userFormDisabled"
                size="mini"
                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="mini"
              ></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",
          },
        ],
      },
    };
  },
  created() {
    this.selectRoleList();
  },
  watch:{
    drawer(val,oldVal){
      if(val){
        this.userForm = this.userData;
        if (this.userForm.roleIds) {
          this.roleid = this.userForm.roleIds;
        }
        if (this.userForm.portName) {
          this.port = this.userForm.portName;
        }
      }
    }
  },
  methods: {
    change(val){
      this.roleid = val;
    },
    selectRoleList() {
      //角色列表
      getRoleList({ size: null, page: null })
        .then((res) => {
          if (res.code === 200) {
            this.roleList = res.data.list;
          } 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.$emit("handleClose", false);
    },

    //提交
    submit() {
      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);
        });
    },
  },
};
</script>

<style>
</style>