<template>
  <div>
    <router-view></router-view>

    <el-row :gutter="20">
      <el-col :span="6">
        <el-input v-model="searchOrganization" placeholder="请输入组织"></el-input>
      </el-col>
      <el-col :span="6">
        <el-input v-model="searchName" placeholder="请输入用户名"></el-input>
      </el-col>
      <el-col :span="6">
        <el-input v-model="searchPhone" placeholder="请输入手机号"></el-input>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-2">
      <el-col :span="24">
        <el-button type="primary" @click="handleAdd">新增</el-button>
        <el-button plain @click="dialogVisible=true">修改</el-button>
        <el-button type="danger" @click="handleDelete">删除</el-button>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button type="primary" @click="handleReset">重置</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%" class="mt-2" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="用户编号" width="120"></el-table-column>
      <el-table-column prop="account" label="账号" width="120"></el-table-column>
      <el-table-column prop="name" label="名称" width="120"></el-table-column>
      <el-table-column prop="organization" label="组织" width="120"></el-table-column>
      <el-table-column prop="phone" label="手机号" width="150"></el-table-column>
      <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
      <el-table-column prop="gender" label="性别" width="180"></el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
      <span>修改用户</span>
      <template #footer>
        <div>
          <el-form :model="formData">
            <el-form-item label="姓名">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="账号">
              <el-input v-model="formData.account"></el-input>
            </el-form-item>
            <el-form-item label="组织">
              <el-input v-model="formData.organization"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="formData.email"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="formData.gender"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="formData.phone"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input type="password" v-model="formData.password"></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="editFinished">确认修改</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import userService from "../../services/userService.js";
import { onMounted, ref, defineComponent } from 'vue';

interface User {
  id: number;
  account: string;
  name: string;
  organization: string;
  phone: string;
  email: string;
  gender: string;
}

export default defineComponent({
  setup() {

    const searchOrganization = ref('');
    const searchName = ref('');
    const searchPhone = ref('');


    const tableData = ref<User[]>([]);

    const selectedRows = ref<User[]>([]);


    const formData = ref({
      id: null,
      account: '',
      name: '',
      organization: '',
      email: '',
      gender: '',
      phone: '',
      password: '',
    });

    const dialogVisible = ref(false);

    const handleClose = (done: () => void) => {
      done();
    };

    const fetchData = async () => {
      try {
        const data = await userService.getAll();
        tableData.value = data;
      } catch (error) {
        console.error("Error fetching organization:", error);
      }
    };

    const handleSelectionChange = (rows) => {
      selectedRows.value = rows;
      if (rows.length === 1) {
        formData.value = { ...rows[0] };
      } else {
        formData.value = {
          id: null,
          account: '',
          name: '',
          organization: '',
          email: '',
          gender: '',
          phone: '',
          password: '',
        };
      }
    };

    const editFinished = async () => {
      try {
        await userService.update(formData.value);
        dialogVisible.value = false;
        fetchData();
      } catch (error) {
        console.error("Error updating user:", error);
      }
    };

    const handleAdd = () => {
      location.href = '/addUser';
    };

    const handleDelete = async () => {
      try{
        await userService.delete(formData.value);
        fetchData();
      }catch(error){

      }
    };


    const handleSearch = async () => {
      tableData.value =tableData.value.filter(
          (data) => {
            const isNameValid = searchName.value;
            const isOrganizationValid =searchOrganization.value;
            const isPhoneValid = searchPhone.value;
            // search.value && search.value.

            return (!isNameValid || data.name.toLowerCase().includes(searchName.value.toLowerCase())) &&
                (!isPhoneValid || data.phone.toLowerCase().includes(searchPhone.value.toLowerCase()) )&&
                (!isOrganizationValid || data.organization.toLowerCase().includes(searchOrganization.value.toLowerCase()))
          }
      )
    };


      const handleReset=()=>{
        location.href = '/userManagement';
      }

    onMounted(() => {
      fetchData();
    });

    return {
      tableData,
      handleAdd,
      formData,
      dialogVisible,
      handleClose,
      selectedRows,
      handleSelectionChange,
      editFinished,
      handleDelete,
      searchPhone,
      searchOrganization,
      searchName,
      handleSearch,
      handleReset
    };
  }
});
</script>

<style>
.mt-2 {
  margin-top: 20px;
}
</style>
