<template>
  <div class="card h-full w-full">
    <iframe class="w-full h-full" :src="thirdLink" frameborder="0"></iframe>
    <!-- <div class="flex justify-between mt-5 mb-7">
      <el-form
        ref="ruleFormRef"
        label-position="top"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="年级" prop="area_id">
          <el-select clearable>
            <el-option value="无" />
          </el-select>
        </el-form-item>
        <el-form-item label="班级" prop="uo_id_1">
          <el-select clearable>
            <el-option value="无" />
          </el-select>
        </el-form-item>
      </el-form>
      <div>
        <el-button class="_" size="small" type="primary" @click="initData">
          查询
        </el-button>
        <br />
        <el-button
          size="small"
          type="primary"
          plain
          class="mt-10px _"
          @click="handleReset(ruleFormRef)"
        >
          重置
        </el-button>
      </div>
    </div>

    <div class="flex justify-between mt-5 mb-7">
      <div>
        <el-button class="_" type="primary" @click="addShow = true">
          新增
        </el-button>
        <el-button class="_" type="primary"> 导出 </el-button>
      </div>
      <div class="flex items-center space-x-4">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            <img class="w-28px cursor-pointer" :src="img1" alt="" />
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>导出Csv文件</el-dropdown-item>
              <el-dropdown-item>导出Excel文件</el-dropdown-item>

            </el-dropdown-menu>
          </template>
</el-dropdown>
<el-dropdown trigger="click">
  <span class="el-dropdown-link">
    <img class="w-28px cursor-pointer" :src="img2" alt="" />
  </span>
  <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                ><el-checkbox class="mr-10px" /> 编号</el-dropdown-item
              >
              <el-dropdown-item
                ><el-checkbox class="mr-10px" />班级名称</el-dropdown-item
              >
              <el-dropdown-item
                ><el-checkbox class="mr-10px" />专业</el-dropdown-item
              >
              <el-dropdown-item
                ><el-checkbox class="mr-10px" />专业</el-dropdown-item
              >
              <el-dropdown-item
                ><el-checkbox class="mr-10px" />邀请码</el-dropdown-item
              >
              <el-dropdown-item
                ><el-checkbox class="mr-10px" />学生数</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
</el-dropdown>

<el-button class="_" type="danger"> 删除 </el-button>
</div>
</div>

<el-table :data="tableData" style="width: 100%">
  <el-table-column type="selection" width="55" />
  <el-table-column prop="id" label="编号" show-overflow-tooltip />
  <el-table-column
    prop="grade"
    label="年级"
    show-overflow-tooltip
    width="auto" />
  <el-table-column prop="class" label="班级" show-overflow-tooltip />
  <el-table-column prop="time" label="创建时间" show-overflow-tooltip />
  <el-table-column prop="year" label="入学年份" show-overflow-tooltip />
  <el-table-column prop="master" label="班主任" show-overflow-tooltip />
  <el-table-column prop="stu_num" label="学生数" show-overflow-tooltip />
  <el-table-column label="操作" width="150">
    <template #default="{ row }">
          <div class="flex items-center space-x-4">
            <img class="cursor-pointer" src="/images/edit.png"  @click="addShow = true"/>
            <img class="cursor-pointer" src="/images/delete.png" />
          </div>
        </template>
  </el-table-column>
</el-table>

<div class="flex_center mt-6">
  <el-pagination
    v-model:current-page="form_query.page"
    v-model:page-size="form_query.limit"
    layout="total, prev, pager, next, jumper"
    :total="total"
    :prev-icon="PrevIcon"
    :next-icon="NextIcon"
    @current-change="handleQuery" />
</div>
<el-dialog v-model="addShow" width="40%" title="新增/编辑">
  <div class="w-full text-center">
    <img class="px-10 w-full" :src="imgSrc" alt="" />
  </div>
</el-dialog> -->
  </div>
</template>
<script setup>
import imgSrc from "@/assets/img/staticImg/add.png";
import img1 from "@/assets/img/staticImg/export.png";
import img2 from "@/assets/img/staticImg/code.png";
import PrevIcon from "@/components/EpPagination/PrevIcon.vue";
import NextIcon from "@/components/EpPagination/NextIcon.vue";

import { user } from '~/store/index'
const thirdLink = getThirdFrameLink('https://qqyxtweb.bozedu.net/#/basedata/classmanager')

const form_query = reactive({
  page: 1,
  limit: 5,
});

let total = $ref(100);
let tableData = $ref([
  {
    id: "26511234",
    grade: "一年级",
    class: "一班",
    time: "2011-12-23 11:12",
    year: "2011",
    master: "黄书",
    stu_num: "21",
  },
  {
    id: "26511234",
    grade: "一年级",
    class: "二班",
    time: "2011-12-23 11:12",
    year: "2011",
    master: "陈飞",
    stu_num: "21",
  },
  {
    id: "26511234",
    grade: "一年级",
    class: "三班",
    time: "2011-12-23 11:12",
    year: "2011",
    master: "沈教师",
    stu_num: "21",
  },
  {
    id: "26511234",
    grade: "一年级",
    class: "四班",
    time: "2011-12-23 11:12",
    year: "2011",
    master: "菜菜",
    stu_num: "21",
  },
  {
    id: "26511234",
    grade: "一年级",
    class: "五班",
    time: "2011-12-23 11:12",
    year: "2011",
    master: "缓缓",
    stu_num: "21",
  },
]);

let addShow = $ref(false);
</script>
<style lang="scss" scoped>
@use "~/styles/input-search.scss";
@use "~/styles/button.scss";
@use "~/styles/table.scss";
@use "~/styles/message-box.scss";
@use "~/styles/dialog.scss";
@use "~/styles/pagination.scss";

.el-button--small {
  height: 34px;
  padding: 6px 22px;
  border-radius: 10px;

  &.is-plain {
    background: none;
    color: #3f8cff;
  }
}
</style>
