<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col>
        <!-- 查询 -->
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入姓名"
              clearable
              style="width: 200px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="queryParams.phone"
              placeholder="请输入手机号"
              clearable
              style="width: 200px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="园所" prop="school_id">
            <el-select
               v-model="queryParams.school_id"
               placeholder="请选择园所名称"
               clearable
               filterable
               remote
               style="width: 200px"
            >
               <el-option v-for="s in schoolList" :key="s._id" :label="s.name" :value="s._id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="班级" prop="grade">
            <el-select v-model="queryParams.grade" placeholder="请选择班级" clearable style="width: 200px">
              <el-option label="小班" :value="0" />
              <el-option label="中班" :value="1" />
              <el-option label="大班" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            <!-- <el-button type="success" icon="Plus" @click="handleAdd">新增</el-button> -->
          </el-form-item>
        </el-form>

        <!-- 表格 -->
        <el-table v-loading="loading" :data="userList">
          <el-table-column
            type="index"
            label="序号"
            width="60"
            align="center"
            :index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
          />
          <el-table-column label="姓名" prop="name" align="center" />
          <el-table-column label="用户名" prop="user_name" align="center" />
          <el-table-column label="性别" prop="gender" align="center">
            <template #default="{ row }">
              <span>{{ row.gender == 1 ? "男" : row.gender == 2 ? "女" : "未知" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="手机号" prop="phone" align="center" />
          <el-table-column label="园所" prop="school_id" align="center">
            <template #default="{ row }">
              <span>{{ getSchoolName(row.school_id) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="班级" prop="grade" align="center">
            <template #default="{ row }">
              <span v-if="row.grade==0">小班</span>
              <span v-else-if="row.grade==1">中班</span>
              <span v-else-if="row.grade==2">大班</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="remark" align="center" />
          <el-table-column label="操作" align="center" width="160">
            <template #default="{ row }">
              <!-- <el-button link type="primary" icon="Edit" @click="handleEdit(row)">编辑</el-button> -->
              <!-- <el-button link type="primary" icon="Delete" @click="handleDelete(row)"></el-button> -->
              <el-tooltip content="删除" placement="top">
                <el-button
                  link
                  type="primary"
                  icon="Delete"
                  @click="handleDelete(row)"
                  v-hasPermi="['system:user:remove']"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />

        <!-- 新增/编辑 弹窗 -->
        <el-dialog v-model="open" title="家长信息" width="600px">
          <el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="用户名" prop="user_name">
              <el-input v-model="form.user_name" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-select v-model="form.gender" placeholder="请选择">
                <el-option label="男" value="1" />
                <el-option label="女" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="园所" prop="school_id">
              <el-select v-model="form.school_id" placeholder="请选择园所">
                <el-option v-for="s in schoolList" :key="s._id" :label="s.name" :value="s._id" />
              </el-select>
            </el-form-item>
            <el-form-item label="班级" prop="grade">
              <el-select v-model="form.grade" placeholder="请选择">
                <el-option label="小班" :value="0" />
                <el-option label="中班" :value="1" />
                <el-option label="大班" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
            </el-form-item>
          </el-form>
          <template #footer>
            <el-button @click="open=false">取消</el-button>
            <el-button type="primary" @click="submitForm">确定</el-button>
          </template>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance();

const userList = ref([]);
const schoolList = ref([]);
const loading = ref(false);
const total = ref(0);
const open = ref(false);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: "",
    phone: "",
    school_id: "",
    grade: "",
  },
  rules: {
    name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
    phone: [
      { required: true, message: "手机号不能为空", trigger: "blur" },
      { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号", trigger: "blur" }
    ]
  }
});

const { queryParams, form, rules } = toRefs(data);

function getSchoolName(id) {
  const s = schoolList.value.find((x) => x._id === id);
  return s ? s.name : "";
}

/** 查询家长列表 */
async function getList() {
  loading.value = true;
  const filter = { where: {
   delete: 0,
  } };
  if (queryParams.value.name) filter.where.name = queryParams.value.name;
  if (queryParams.value.school_id) filter.where.school_id = queryParams.value.school_id;
  if (queryParams.value.phone) filter.where.phone = queryParams.value.phone;
  if (queryParams.value.grade !== undefined && queryParams.value.grade !== null && queryParams.value.grade !== "") {
   filter.where.grade = queryParams.value.grade;
   }

  const { data } = await proxy.$models.wx_user.list({
    filter,
    pageSize: queryParams.value.pageSize,
    pageNumber: queryParams.value.pageNum,
    getCount: true,
    envType: "prod"
  });

  userList.value = data.records || [];
  total.value = data.total || 0;
  loading.value = false;

  console.log(data, 'data');
}

/** 查询园所列表 */
async function getSchoolList() {
  const { data } = await proxy.$models.wx_school.list({
    filter: {},
    envType: "prod",
  });
  schoolList.value = data.records || [];
}

/** 搜索 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置 */
function resetQuery() {
  queryParams.value = { pageNum: 1, pageSize: 10, name: "", phone: "", school_id: "", grade: "" };
  getList();
}

// /** 新增 */
// function handleAdd() {
//   form.value = {};
//   open.value = true;
// }

/** 编辑 */
// function handleEdit(row) {
//   form.value = { ...row };
//   open.value = true;
// }

/** 删除 */
async function handleDelete(row) {
  try {
    await proxy.$modal.confirm(`是否确认删除用户编号为 "${row._id}" 的数据项？`);
    const { data } = await proxy.$models.wx_user.update({
      data: { delete: 1 },
      filter: { where: { _id: { $eq: row._id } } },
      envType: "prod",
    });

    if (data.count > 0) {
      proxy.$modal.msgSuccess("删除成功");
      getList();
    } else {
      proxy.$modal.msgWarning("删除失败，未找到对应记录");
    }
  } catch (err) {
    console.error(err);
  }
}

/** 提交表单 */
async function submitForm() {
  await proxy.$refs.formRef.validate();
  if (form.value._id) {
    await proxy.$models.wx_user.update({ data: form.value, envType: "prod" });
    proxy.$modal.msgSuccess("修改成功");
  } else {
    await proxy.$models.wx_user.add({ data: form.value, envType: "prod" });
    proxy.$modal.msgSuccess("新增成功");
  }
  open.value = false;
  getList();
}

getSchoolList();
getList();
</script>

<style lang='scss' scoped>
</style>