<template>
  <vxe-modal
    resize
    v-model="showModal"
    @hide="onHide"
    title="用户选择"
    width="900px"
    show-maximize
    show-footer
    esc-closable
  >
    <el-form inline :model="searchParam">
      <el-row :gutter="12">
        <el-col :span="8">
          <el-form-item class="w-full" label="用户名称：" prop="username">
            <el-input v-model="searchParam.username" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="w-full" label="昵称：" prop="nickName">
            <el-input v-model="searchParam.nickName" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="w-full" label="状态：" prop="status">
            <el-select v-model="searchParam.status">
              <el-option label="启用" value="enable" />
              <el-option label="禁用" value="disable" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="search"> 搜索 </el-button>
            <el-button :icon="Delete" @click="reset"> 重置 </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <vxe-table ref="xTable" :data="tableData" :loading="loading">
      <vxe-column type="checkbox" width="50" />
      <vxe-column field="username" title="用户账号" minWidth="120" />
      <vxe-column field="nickName" title="昵称" minWidth="120" />
      <vxe-column field="phone" title="手机号" width="140" />
      <vxe-column field="status" title="状态" width="120">
        <template #default="{ row }">
          <el-tag :type="row.status == 'enable' ? 'primary' : 'danger'">{{
            row.status == 'enable' ? '启用' : '禁用'
          }}</el-tag>
        </template>
      </vxe-column>
    </vxe-table>
    <Pagination
      :pageable="pageable"
      :handleSizeChange="handleSizeChange"
      :handleCurrentChange="handleCurrentChange"
    />
    <template #footer>
      <el-button type="default" @click="showModal = false">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确认</el-button>
    </template>
  </vxe-modal>
</template>

<script setup name="UserModal">
  import { ref, onMounted } from 'vue';
  import { ElMessage } from 'element-plus';
  import { getUserPage } from '@/api/user';
  import { Search, Delete } from '@element-plus/icons-vue';
  import Pagination from '@/components/Pagination/index.vue';
  import { useProTable } from '@/hooks/useProTable';

  const emits = defineEmits(['confirm']);

  const showModal = ref(false);
  const xTable = ref(null);

  const {
    pageable,
    tableData,
    search,
    searchParam,
    reset,
    loading,
    handleSizeChange,
    handleCurrentChange,
  } = useProTable(getUserPage, {}, true);

  const handleConfirm = async () => {
    const checkedList = xTable.value.getCheckboxRecords();
    if (!checkedList.length) {
      return ElMessage({
        type: 'warning',
        message: '请选择有效数据！',
        plain: true,
      });
    }
    emits('confirm', checkedList);
    showModal.value = false;
  };
  const onHide = () => {};
  const openModal = () => {
    showModal.value = true;
  };

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

  defineExpose({
    openModal,
  });
</script>
