<template>
  <el-tabs
    class="my-tabs"
    v-model="activeName"
    type="card"
    @tab-click="handleClick"
  >
    <el-tab-pane label="成绩设置" name="roleList">
      <el-input
        placeholder="请输入班级"
        v-model="input"
        clearable
        style="width: 120px"
      >
      </el-input>
      <el-select
        v-model="id"
        class="addinputw"
        placeholder="请选择科目"
        style="width: 150px; margin-left: 20px"
      >
        <el-option
          v-for="(item, i) in formList"
          :key="i"
          :label="item.type"
          :value="item.id"
        />
      </el-select>
      <el-button style="margin-left: 20px" type="primary" @click="toLook()"
        >查询</el-button
      >
      <div class="container">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="name" label="教师姓名" align="center">
          </el-table-column>
          <el-table-column prop="infoId" label="教师工号" align="center">
          </el-table-column>
          <el-table-column label="查看" align="center" width="100px">
            <template slot-scope="scope">
              <el-button type="text" @click="lookstuder(scope.row)"
                >查看学生</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="editRow(scope.row)">
                添加
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          :total="page.total"
          :page.sync="page.current"
          :limit.sync="page.size"
          @pagination="pagination"
        />
        <el-dialog title="学生" :visible.sync="lookstuders">
          <el-table
            ref="multipleTable"
            :data="gridData"
            row-key="sid"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            border
          >
            <el-table-column
              property="studentName"
              label="姓名"
              width="200"
            ></el-table-column>
            <el-table-column
              property="studentNo"
              label="学号"
            ></el-table-column>
            <el-table-column property="calss" label="班级"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  size="mini"
                  @click.native.prevent="deleteRow(scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
        <!-- 编辑角色信息 -->
        <el-dialog
          :title="dialogTitle + '学生'"
          :visible.sync="editDialog"
          width="40%"
        >
          <table class="e-table" cellspacing="0">
            <tr>
              <td>教师姓名</td>
              <td>
                <el-input
                  v-model="teacher.teacherName"
                  style="width: 300px"
                ></el-input>
              </td>
            </tr>
            <tr>
              <td>教师工号</td>
              <td>
                <el-input
                  v-model="teacher.teacherNo"
                  style="width: 300px"
                ></el-input>
              </td>
            </tr>
            <tr>
              <td>学生姓名</td>
              <td>
                <el-select v-model="teacher.studentName" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.name"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td>学生学号</td>
              <td>
                <el-select v-model="teacher.studentNo" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.infoId"
                    :value="item.infoId"
                  >
                  </el-option>
                </el-select>
              </td>
            </tr>
          </table>
          <div style="margin-top: 20px; text-align: center">
            <el-button type="primary" @click="save()">保存</el-button>
            <!--<el-button @click="editDialog = false">关闭</el-button>-->
          </div>
        </el-dialog>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
  
  <script>
import {
  pageList,
  saveSysInfoShip,
  selectTeacherDownStudent,
  deleteSysInfoShip,
} from "@/api/system/sources/index.js";
import { selectScoreKM } from "@/api/system/userAdminister/index.js";
export default {
  data() {
    return {
      activeName: "roleList",
      dialogTitle: "",
      editDialog: false,
      lookstuders: false,
      form: {},
      id:'',
      formList:{},
      gridData: [],
      teacher: {
        teacherName: "",
        teacherNo: "",
      },
      formBackup: Object.assign({}, this.form),
      page: {
        total: 0, // 默认数据总数
        current: 1, // 默认开始页面
        size: 10, // 每页的数据条数
        type: "js",
      },
      pageStu: {
        total: 0, // 默认数据总数
        current: 1, // 默认开始页面
        size: 10, // 每页的数据条数
        type: "xs",
      },
      tableData: [],
      zylb: [],
      sourceList: [],
      options: {},
      value: "",
    };
  },
  mounted() {
    this.getPageList(this.page);
    this.getstuder();
    selectScoreKM().then((res) => {
      this.formList=res.data
    });
  },
  methods: {
    lookstuder(row) {
      this.lookstuders = true;
      selectTeacherDownStudent({ infoId: row.infoId }).then((res) => {
        console.log(res.data);
        this.gridData = res.data;
      });
    },
    pagination(val) {
      // 分页
      this.page.current = val.pageNum;
      this.page.size = val.pageSize;
      this.getPageList(this.page);
    },
    resetSearch() {
      // 重置
      this.page = {
        total: 0, // 默认数据总数
        current: 1, // 默认开始页面
        size: 10, // 每页的数据条数
        params: {
          name: "",
          psid: "",
          sourceId: "",
          sourceName: "",
        },
      };
      this.getPageList();
    },
    getstuder() {
      pageList(this.pageStu).then((res) => {
        this.options = res.data.records;
      });
    },
    getPageList(data) {
      // 获取列表
      pageList(data).then((res) => {
        console.log(res);
        this.tableData = res.data.records;
        this.page.total = res.data.total;
      });
    },
    handleClick(tab, event) {
      if (tab.name == "addrole") {
        this.dialogTitle = "新增";
        this.roleForm = Object.assign({}, this.formBackup);
      } else {
        this.getPageList();
      }
    },
    reset() {
      this.form = {};
    },
    editRow(row) {
      this.dialogTitle = "添加";
      this.editDialog = true;
      this.teacher.teacherName = row.name;
      this.teacher.teacherNo = row.infoId;
      this.form = Object.assign({}, row);
    },
    save() {
      saveSysInfoShip(this.teacher).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "添加成功!",
          });
        }
      });
      this.editDialog = false;
    },
    deleteRow(row) {
      this.$confirm("确定要删除该资源吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteSysInfoShip({ sid: row.sid }).then((res) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.lookstuders = false;
        });
      });
    },
  },
};
</script>
  
  <style scoped="scoped" lang="scss">
.my-tabs {
  margin-top: 10px;
}
</style>
  