<template>
  <div class="user-containter">
    <el-form :inline="true">
      <el-form-item label="账号">
        <el-input placeholder="账号模糊查询"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
      </el-form-item>
    </el-form>
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary" @click="handleAdd">添加用户</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border>
      <el-table-column type="selection"></el-table-column>
      <el-table-column
        v-for="i in tableColumn"
        :label="i.label"
        :prop="i.prop"
        :width="i.width"
        align="center"
      >
        <template #default="scope" v-if="i.prop == 'avatar'">
          <el-avatar :src="scope.row.avatar"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px" align="center" fixed="right">
        <template #default="scope">
          <el-button type="text" @click="handleEditPwd(scope.row)"
            >修改密码</el-button
          >
          <el-divider direction="vertical" />
          <el-button type="text" @click="handleEdit(scope)">编辑</el-button>
          <el-divider direction="vertical" />
          <el-popconfirm title="确认删除?" @confirm="handleDelete(scope)">
            <template #reference>
              <el-button type="text">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer v-model="showDrawer" :title="drawerTitle">
      <el-form
        class="form"
        ref="form"
        :rules="rules"
        :model="formData"
        size="large"
        label-position="right"
        label-width="80px"
      >
        <el-form-item
          v-for="item in formColumn"
          :prop="item.prop"
          :label="item.label"
        >
          <el-input
            v-if="item.type == 'input'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
          >
          </el-input>
          <el-upload v-if="item.type == 'avatar'">
            <img class="avatar" :src="formData[item.prop]" />
          </el-upload>
          <el-date-picker
            v-if="item.type == 'date'"
            v-model="formData[item.prop]"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          ></el-date-picker>
          <el-select
            v-if="item.type == 'select'"
            v-model="formData[item.prop]"
            multiple
            style="width: 300px"
          >
            <el-option
              v-for="i in roles"
              :key="i.id"
              :label="i.roleName"
              :value="i.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="showDrawer = false">关闭</el-button>
          <el-button type="primary" @click="handleSubmit">{{
            drawerTitle
          }}</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-dialog v-model="showDialog" title="修改密码" width="30%">
      <el-form
        :model="editPwdData"
        ref="editPwdRef"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="用户账号">
          <el-input v-model="editPwdData.account" :disabled="true" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="editPwdData.password"
            type="password"
            show-password
            clearable
            placeholder="请输入密码"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="handlePwdAdd">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import {
  addUser,
  getUserInfo,
  editUser,
  deleteUser,
  getAllRole,
  findRoleByUser,
  editPassWord,
} from "@/services/api/user/userAPI";
const showDialog = ref(false);
const editPwdRef = ref();
const editPwdData = ref({
  password: "",
  account: "",
});

const tableColumn = reactive([
  {
    label: "用户账号",
    prop: "fauthAccount",
    width: "180",
  },
  {
    label: "用户名",
    prop: "name",
    width: "180",
  },
  {
    label: "工号",
    prop: "fworkNo",
    width: "180",
  },
  {
    label: "工作地点",
    prop: "fworkAddr",
    width: "180",
  },
  {
    label: "状态",
    prop: "fstate",
    width: "180",
  },
  {
    label: "职位",
    prop: "fposition",
    width: "180",
  },
  {
    label: "入职日期",
    prop: "finductionDate",
    width: "155px",
  },
  {
    label: "英文名",
    prop: "fenglishName",
    width: "180",
  },
  {
    label: "部门",
    prop: "fdept",
    width: "180",
  },
  {
    label: "头像",
    prop: "avatar",
    width: "180",
  },
  {
    label: "创建人",
    prop: "fcreator",
    width: "180",
  },
  {
    label: "创建日期",
    prop: "fdate",
    width: "155px",
  },
]);

let tableData = ref([]);

const form = ref();
const formColumn = reactive([
  {
    label: "用户账号",
    prop: "fauthAccount",
    type: "input",
    placeholder: "请输入用户账号",
  },
  {
    label: "用户名",
    prop: "name",
    type: "input",
    placeholder: "请输入用户名",
  },
  {
    label: "用户介绍",
    prop: "introduction",
    type: "input",
    placeholder: "请输入用户介绍",
  },
  {
    label: "工号",
    prop: "fworkNo",
    type: "input",
    placeholder: "请输入工号",
  },
  {
    label: "工作地点",
    prop: "fworkAddr",
    type: "input",
    placeholder: "请输入工作地点",
  },
  {
    label: "状态",
    prop: "fstate",
    type: "input",
    placeholder: "请输入状态",
  },
  {
    label: "角色分配",
    prop: "roles",
    type: "select",
    placeholder: "分配角色",
  },
  {
    label: "职位",
    prop: "fposition",
    type: "input",
    placeholder: "请输入职位",
  },
  {
    label: "手机",
    prop: "fphone",
    type: "input",
    placeholder: "请输入手机",
  },
  {
    label: "邮箱",
    prop: "fmail",
    type: "input",
    placeholder: "请输入邮箱",
  },
  {
    label: "入职日期",
    prop: "finductionDate",
    type: "date",
    placeholder: "请输入入职日期",
  },
  {
    label: "英文名",
    prop: "fenglishName",
    type: "input",
    placeholder: "请输入英文名",
  },
  {
    label: "部门",
    prop: "fdept",
    type: "input",
    placeholder: "请输入部门",
  },
  {
    label: "头像",
    prop: "avatar",
    type: "avatar",
  },
]);
const rules = reactive({
  fauthAccount: [
    { required: true, message: "请输入用户账号", trigger: "blur" },
  ],
  name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入登录密码", trigger: "blur" }],
});
let formData: any = ref({});

let drawerTitle = ref("");
let showDrawer = ref(false);

let roles = ref<any>([]);

function init() {
  getUserInfo().then((res) => {
    if (res.code == 200) {
      tableData.value = res.data.records;
    }
  });
  getAllRole().then((res) => {
    if (res.code == 200) {
      roles.value = res.data;
    }
  });
}

function handleEditPwd(row: any) {
  editPwdData.value.password = "";
  editPwdData.value.account = row.fauthAccount;
  showDialog.value = true;
}

function handlePwdAdd() {
  editPwdRef.value?.validate((valid: boolean) => {
    if (valid) {
      editPassWord(editPwdData.value).then((res: any) => {
        if (res.code === 200) {
          showDialog.value = false;
        }
      });
    }
  });
}

function handleEdit(scope: any) {
  formData.value = {};
  let params = {
    userId: scope.row.userId,
  };
  findRoleByUser(params).then((res) => {
    if (res.code == 200) {
      formData.value.roles = res.data;
    }
  });
  for (let i in scope.row) {
    formData.value[i] = scope.row[i];
  }
  for (let j in formColumn) {
    if (formColumn[j].prop == "password") {
      formColumn.splice(Number(j), 1);
      break;
    }
  }
  for (let k in formData.value) {
    if (k == "password") {
      delete formData[k];
      break;
    }
  }
  drawerTitle.value = "编辑";
  showDrawer.value = true;
}

function handleAdd() {
  formData.value = {};
  formColumn.splice(1, 0, {
    label: "登录密码",
    prop: "password",
    type: "input",
    placeholder: "请输入登录密码",
  });
  drawerTitle.value = "添加";
  showDrawer.value = true;
}

function handleSubmit() {
  if (drawerTitle.value == "添加") {
    form.value.validate((valid: boolean) => {
      if (valid) {
        addUser(formData.value).then((res) => {
          if (res.code == 200) {
            init();
            showDrawer.value = false;
          }
        });
      }
    });
  }
  if (drawerTitle.value == "编辑") {
    form.value.validate((valid: boolean) => {
      if (valid) {
        editUser(formData.value).then((res) => {
          if (res.code == 200) {
            init();
            showDrawer.value = false;
          }
        });
      }
    });
  }
}

function handleDelete(scope: any) {
  let params = {
    userId: scope.row.userId,
  };
  deleteUser(params).then((res) => {
    if (res.code == 200) {
      init();
    }
  });
}

init();
</script>
<style scoped>
.user-containter {
  padding: 20px;
}

.form {
  overflow-x: hidden;
  overflow-y: auto;
  height: calc(100vh - 120px);
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  align-items: center;
}
</style>
