<script setup lang="ts">
import DialogData from "@/views/training/components/DialogData.vue";

defineOptions({
  name: "TrainingIndex",
  inheritAttrs: false,
});
import { CaretBottom } from "@element-plus/icons-vue";
import { watch } from "vue";
import { useUserStore } from "@/store/modules/user";
import { ClassList } from "@/api/school/types";
const userStore = useUserStore();
watch(
  () => userStore.schoolId,
  (newValue, oldValue) => {
    console.log(newValue, oldValue);
  }
);
let studentType = ref("");
let classNumber = ref("");
let trainingType = ref("");
const classData = ref<ClassList[]>([
  {
    id: 0,
    school_id: 0,
    name: "全部班级",
  },
]);
const tableData = ref<any>([
  {
    number: 1,
    name: "学生A",
    type: "智脑水舞",
    phone: "15814111616",
    date: "2023-08-22",
    times: "1分12秒",
    cls: "向日葵小班",
  },
]);
let dialogVisible = ref(false);
</script>

<template>
  <div class="training-container">
    <!-- 学生查找 -->
    <div class="training-search">
      <el-select
        v-model="studentType"
        placeholder="正式学生/体验用户"
        size="large"
        :suffix-icon="CaretBottom"
      >
        <el-option key="1" value="1" label="正式学生"></el-option>
        <el-option key="2" value="2" label="体验用户"></el-option>
      </el-select>
      <el-select
        v-model="classNumber"
        placeholder="请选择班级名称"
        size="large"
        :suffix-icon="CaretBottom"
      >
        <el-option
          v-for="item in classData"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-select
        v-model="trainingType"
        placeholder="请选择训练方式"
        size="large"
        :suffix-icon="CaretBottom"
      >
        <el-option
          key="1"
          value="1"
          label="专注模式（脑机专注力训练）"
        ></el-option>
        <el-option key="2" value="2" label="智脑水舞"></el-option>
        <el-option key="2" value="2" label="智脑恐龙"></el-option>
        <el-option key="2" value="2" label="智脑碰碰车"></el-option>
        <el-option key="2" value="2" label="智脑SUV"></el-option>
        <el-option key="2" value="2" label="智脑积木"></el-option>
        <el-option key="2" value="2" label="智脑UFO"></el-option>
        <el-option
          key="2"
          value="2"
          label="放松模式（脑机放松度训练，即正念）"
        ></el-option>
      </el-select>
      <!--			<el-input-->
      <!--						v-model="studentInfo"-->
      <!--						size="large"-->
      <!--						placeholder="请输入学生名称或手机号码"-->
      <!--			/>-->
      <!--			<el-button size="large" type="primary">查找</el-button>-->
    </div>
    <!-- 学生数据 -->
    <div class="list-table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="number" label="序号" align="center" />
        <el-table-column prop="name" label="学生名称" align="center" />
        <el-table-column prop="phone" label="手机号码" align="center" />
        <el-table-column prop="type" label="训练方式" align="center" />
        <el-table-column prop="date" label="训练时间" align="center" />
        <el-table-column prop="times" label="训练时长" align="center" />
        <el-table-column prop="cls" label="所在班级" align="center" />
        <el-table-column />
        <el-table-column label="操作" align="center">
          <el-button text class="table-btn" @click="dialogVisible = true">
            报告详情
          </el-button>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <el-dialog v-model="dialogVisible">
    <DialogData data="1sdgfsdaf" />
  </el-dialog>
</template>

<style lang="scss" scoped>
.training-container {
  position: relative;
  padding: 20px 30px;
}
.training-search {
  margin-bottom: 20px;
  font-size: 16px;
  .el-select {
    width: 200px;
    margin: 0 20px 0 0;
  }
  .el-input {
    width: 250px;
    margin: 0;
  }
  :deep(.el-input__inner) {
    font-size: 16px;
  }
  .el-button {
    font-size: 16px;
    padding: 0 26px;
    margin: 0 20px;
    border-radius: 12px;
  }
}
:deep(.el-input__wrapper) {
  background: #ffffff;
  border-radius: 12px;
}
:deep(.el-input__wrapper) {
  box-shadow: none !important;
}
:deep(.el-select) {
  --el-select-input-focus-border-color: none !important;
}
:deep(.el-select .el-input__wrapper.is-focus) {
  box-shadow: none !important;
}
:deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
  box-shadow: none !important;
}
:deep(.el-table th.el-table__cell) {
  background: #e9ebee;
}
.list-table {
  background: #ffffff;
  border-radius: 25px;
  overflow: hidden;
  .table-btn {
    display: inline-block;
    height: 38px;
    line-height: 38px;
    padding: 0 15px;
    background: #4284f2;
    border-radius: 10px;
    color: #ffffff;
    &.disabled {
      background: #bfbfbf;
      cursor: not-allowed;
    }
  }
}
</style>
