<!--
  Copyright © 2026 Qiantong Technology Co., Ltd.
  qModel Model Platform(Open Source Edition)
   *
  License:
  Released under the Apache License, Version 2.0.
  You may use, modify, and distribute this software for commercial purposes
  under the terms of the License.
   *
  Special Notice:
  All derivative versions are strictly prohibited from modifying or removing
  the default system logo and copyright information.
  For brand customization, please apply for brand customization authorization via official channels.
   *
  More information: https://qmodel.qiantong.tech/business.html
   *
  ============================================================================
   *
  版权所有 © 2026 江苏千桐科技有限公司
  qModel 模型平台（开源版）
   *
  许可协议：
  本项目基于 Apache License 2.0 开源协议发布，
  允许在遵守协议的前提下进行商用、修改和分发。
   *
  特别说明：
  所有衍生版本不得修改或移除系统默认的 LOGO 和版权信息；
  如需定制品牌，请通过官方渠道申请品牌定制授权。
   *
  更多信息请访问：https://qmodel.qiantong.tech/business.html
-->

<template>
  <div class="app-container" ref="app-container">
    <div class="pagecont-top" v-show="showSearch" style="padding-bottom:15px">
      <div class="infotop" >
        <div class="infotop-title mb15">小强</div>
        <el-row :gutter="20">
               <el-col :span="8">
                  <div class="infotop-row border-top">
                     <div class="infotop-row-lable">学号</div>
                     <div class="infotop-row-value">{{ userform.xh }}</div>
                  </div>
               </el-col>
               <el-col :span="8">
                  <div class="infotop-row border-top">
                     <div class="infotop-row-lable">姓名</div>
                     <div class="infotop-row-value">{{ userform.name }}</div>
                  </div>
               </el-col>
               <el-col :span="8">
                  <div class="infotop-row border-top">
                     <div class="infotop-row-lable">性别</div>
                     <div class="infotop-row-value">{{ userform.sex }}</div>
                  </div>
               </el-col>
               <el-col :span="8">
                  <div class="infotop-row">
                     <div class="infotop-row-lable">年级</div>
                     <div class="infotop-row-value">
                      <el-tag  type="primary">{{ userform.nj }}</el-tag>
                     </div>
                  </div>
               </el-col>
               <el-col :span="8">
                  <div class="infotop-row">
                     <div class="infotop-row-lable">班级名称</div>
                     <div class="infotop-row-value">{{ userform.bjmc}}</div>
                  </div>
               </el-col>
               <el-col :span="8">
                  <div class="infotop-row">
                     <div class="infotop-row-lable">出生日期</div>
                     <div class="infotop-row-value">{{ userform.csrq}}</div>
                  </div>
               </el-col>
               <el-col :span="8">
                  <div class="infotop-row">
                     <div class="infotop-row-lable">年龄</div>
                     <div class="infotop-row-value">{{ userform.eage}}</div>
                  </div>
               </el-col>
               <el-col :span="8">
                  <div class="infotop-row">
                     <div class="infotop-row-lable">备注</div>
                     <div class="infotop-row-value">{{ userform.bz}}</div>
                  </div>
               </el-col>
            </el-row>

        <!-- <el-form-item>
          <el-button type="primary" @click="handleQuery" @mousedown="(e) => e.preventDefault()">
            <i class="iconfont-mini icon-a-zu22377 mr5"></i>查询
          </el-button>
          <el-button @click="resetQuery" @mousedown="(e) => e.preventDefault()">
            <i class="iconfont-mini icon-a-zu22378 mr5"></i>重置
          </el-button>
        </el-form-item> -->
      </div>
    </div>

    <div  class="pagecont-bottom">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="家长管理" name="1">
                <div class="justify-between mb15">
                    <el-row :gutter="15" class="btn-style">
                        <el-col :span="1.5">
                            <el-button type="primary" plain @click="handleAdd" v-hasPermi="['user:userType:add']"
                                    @mousedown="(e) => e.preventDefault()">
                            <i class="iconfont-mini icon-xinzeng mr5"></i>新增
                            </el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button type="warning" plain @click="handleExport" v-hasPermi="['user:userType:export']"
                                    @mousedown="(e) => e.preventDefault()">
                            <i class="iconfont-mini icon-download-line mr5"></i>导出
                            </el-button>
                        </el-col>
                    </el-row>
                    <div class="justify-end top-right-btn">
                        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
                    </div>
                </div>
                <el-table stripe height="374px" v-loading="loading" :data="userTypeList" @selection-change="handleSelectionChange" :default-sort="{ prop: 'createTime', order: 'descending' }">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column v-if="columns[0].visible" label="ID" align="center" prop="id" />
                    <el-table-column v-if="columns[1].visible" label="类型名称" align="center" prop="name">
                        <template #default="scope">
                        {{ scope.row.name || '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column v-if="columns[2].visible" label="是否有效" align="center" prop="validFlag">
                        <template #default="scope">
                        {{ scope.row.validFlag || '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column v-if="columns[3].visible" label="删除标志" align="center" prop="delFlag">
                        <template #default="scope">
                        {{ scope.row.delFlag || '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column v-if="columns[4].visible" label="创建人" align="center" prop="createBy">
                        <template #default="scope">
                        {{ scope.row.createBy || '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column v-if="columns[5].visible" label="创建人id" align="center" prop="creatorId">
                        <template #default="scope">
                        {{ scope.row.creatorId || '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column v-if="columns[6].visible" label="创建时间" align="center" prop="createTime" width="180" sortable>
                        <template #default="scope">
                        <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="columns[7].visible" label="更新人" align="center" prop="updateBy">
                        <template #default="scope">
                        {{ scope.row.updateBy || '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column v-if="columns[8].visible" label="更新人id" align="center" prop="updatorId">
                        <template #default="scope">
                        {{ scope.row.updatorId || '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column v-if="columns[9].visible" label="更新时间" align="center" prop="updateTime" width="180" sortable>
                        <template #default="scope">
                        <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="columns[10].visible" label="备注" align="center" prop="remark">
                        <template #default="scope">
                        {{ scope.row.remark || '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="240">
                        <template #default="scope">
                        <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                                    v-hasPermi="['user:userType:edit']">修改</el-button>
                        <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"
                                    v-hasPermi="['user:userType:remove']">删除</el-button>
                        </template>
                    </el-table-column>

                    <template #empty>
                        <div class="emptyBg">
                        <img src="@/assets/system/images/no_data/noData.png" alt="" />
                        <p>暂无记录</p>
                        </div>
                    </template>
                </el-table>

                <pagination
                    v-show="total>0"
                    :total="total"
                    v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize"
                    @pagination="getList"
                />
            </el-tab-pane>
            <el-tab-pane label="教师信息" name="2">教师信息</el-tab-pane>
            <el-tab-pane label="发展评价" name="3">发展评价</el-tab-pane>
            <el-tab-pane label="健康档案" name="4">健康档案</el-tab-pane>
            <el-tab-pane label="学期评估" name="5">学期评估</el-tab-pane>
            <el-tab-pane label="学期评价" name="6">学期评价</el-tab-pane>
        </el-tabs>
    </div>

    <!-- 添加或修改用户类型对话框 -->
    <el-dialog :title="title" v-model="open" width="800px" :append-to="$refs['app-container']" draggable destroy-on-close>
      <template #header="{ close, titleId, titleClass }">
        <span role="heading" aria-level="2" class="el-dialog__title">
          {{ title }}
        </span>
      </template>
      <el-form ref="userTypeRef" :model="form" :rules="rules" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="类型名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入类型名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否有效" prop="validFlag">
                <el-input v-model="form.validFlag" placeholder="请输入是否有效" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="删除标志" prop="delFlag">
                <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
          </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="mini" @click="cancel">取 消</el-button>
          <el-button type="primary" size="mini" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="UserType">
  import { listUserType, getUserType, delUserType, addUserType, updateUserType } from "@/api/example/user/userType";

  const { proxy } = getCurrentInstance();

  const userTypeList = ref([]);

  const activeName = ref('1')

    const handleClick = (tab, event) => {
      console.log(tab, event)
    }

  // 列显隐信息
  const columns = ref([
        { key: 0, label: "ID", visible: true },
        { key: 1, label: "类型名称", visible: true },
        { key: 2, label: "是否有效", visible: true },
        { key: 3, label: "删除标志", visible: true },
        { key: 4, label: "创建人", visible: true },
        { key: 5, label: "创建人id", visible: true },
        { key: 6, label: "创建时间", visible: true },
        { key: 7, label: "更新人", visible: true },
        { key: 8, label: "更新人id", visible: true },
        { key: 9, label: "更新时间", visible: true },
        { key: 10, label: "备注", visible: true }
  ]);

  const open = ref(false);
  const loading = ref(true);
  const showSearch = ref(true);
  const ids = ref([]);
  const single = ref(true);
  const multiple = ref(true);
  const total = ref(0);
  const title = ref("");

  const data = reactive({
    userform: {
        xh:"4564646",
        name:"小强",
        sex:"男",
        nj:"小班",
        bjmc:"火箭班",
        csrq:"2022-12-06",
        eage:"2岁",
        bz:"",
    },
    form: {},
    queryParams: {
      pageNum: 1,
      pageSize: 10,
        id: null,
        name: null,
        validFlag: null,
        delFlag: null,
        createBy: null,
        creatorId: null,
        createTime: null,
        updateBy: null,
        updatorId: null,
        updateTime: null,
        remark: null
    },
    rules: {
    }
  });

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

  /** 查询用户类型列表 */
  function getList() {
    loading.value = true;
    // listUserType(queryParams.value).then(response => {
      var response={
        data:{}
      }
    response.data= {
        rows: [
            {
                "id": 1,
                "name": "测试模版",
                "content": "${test}测试模版",
                "category": 0,
                "msgLevel": 0,
                "validFlag": true,
                "delFlag": false,
                "createBy": "",
                "creatorId": 1,
                "createTime": "2024-11-01",
                "updateBy": null,
                "updatorId": 1,
                "updateTime": "2024-11-08",
                "remark": null
            },
            {
                "id": 2,
                "name": "测试",
                "content": "2",
                "category": 0,
                "msgLevel": 0,
                "validFlag": true,
                "delFlag": false,
                "createBy": "admin",
                "creatorId": 1,
                "createTime": "2024-11-20",
                "updateBy": null,
                "updatorId": null,
                "updateTime": "2024-11-20",
                "remark": null
            }
        ],
        total: 2
    },
            userTypeList.value = response.data.rows;
      total.value = response.data.total;
      loading.value = false;
    // });
  }

  // 取消按钮
  function cancel() {
    open.value = false;
    reset();
  }

  // 表单重置
  function reset() {
    form.value = {
        id: null,
        name: null,
        validFlag: null,
        delFlag: null,
        createBy: null,
        creatorId: null,
        createTime: null,
        updateBy: null,
        updatorId: null,
        updateTime: null,
        remark: null
    };
    proxy.resetForm("userTypeRef");
  }

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

  /** 重置按钮操作 */
  function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
  }

  // 多选框选中数据
  function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
  }

  /** 新增按钮操作 */
  function handleAdd() {
    reset();
    open.value = true;
    title.value = "添加用户类型";
  }

  /** 修改按钮操作 */
  function handleUpdate(row) {
    reset();
    const _id = row.id || ids.value
    getUserType(_id).then(response => {
      form.value = response.data;
      open.value = true;
      title.value = "修改用户类型";
    });
  }

  /** 提交按钮 */
  function submitForm() {
    proxy.$refs["userTypeRef"].validate(valid => {
      if (valid) {
        if (form.value.id != null) {
          updateUserType(form.value).then(response => {
            proxy.$modal.msgSuccess("修改成功");
            open.value = false;
            getList();
          });
        } else {
          addUserType(form.value).then(response => {
            proxy.$modal.msgSuccess("新增成功");
            open.value = false;
            getList();
          });
        }
      }
    });
  }

  /** 删除按钮操作 */
  function handleDelete(row) {
    const _ids = row.id || ids.value;
    proxy.$modal.confirm('是否确认删除用户类型编号为"' + _ids + '"的数据项？').then(function() {
      return delUserType(_ids);
    }).then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {});
  }

  /** 导出按钮操作 */
  function handleExport() {
    proxy.download('example/userType/export', {
      ...queryParams.value
    }, `userType_${new Date().getTime()}.xlsx`)
  }

  getList();
</script>