<template>
  <div class="app-container">
    <div v-show="viewState == 1">
      <el-tabs
        class="my-tabs"
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane label="自主学习计划实施指导" name="roleList">
          <div class="container">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column
                label="序号"
                width="70px"
                type="index"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="teacherNo"
                label="教师工号"
                align="center"
              />
              <el-table-column
                prop="studentNo"
                label="学生学号"
                align="center"
              />
              <el-table-column
                prop="planContent"
                label="学习计划"
                align="center"
              />
              <el-table-column label="查看进度" width="200px" align="center">
                <!-- <template slot-scope="scope">
                  <el-button  type="primary" size="mini" @click="editRow(scope.row)">
                    查看进度
                  </el-button>
                </template> -->
                <template slot-scope="scope">
                  <el-button type="text" @click="lookstuder(scope.row)"
                    >查看学生</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <!-- 查看学生 -->
        <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="studentNo"
              label="学号"
            ></el-table-column>
            <el-table-column
              property="planContent"
              label="学习计划"
              width="200"
            ></el-table-column>
            <el-table-column
              property="planContentJd"
              label="学习进度"
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  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="form.planContent"
                  style="width: 300px"
                ></el-input>
              </td>
            </tr>
            <tr>
              <td>反馈意见</td>
              <td>
                <!-- <span>{{form.planContent}}</span> -->
                <el-input
                  v-model="form.planOpinion"
                  style="width: 300px"
                ></el-input>
              </td>
            </tr>
          </table>
          <div style="margin-top: 20px; text-align: center">
            <el-button type="primary" @click="save()">保存</el-button>
          </div>
        </el-dialog>
      </el-tabs>
    </div>
    <!-- <organizationManageInfo v-show="viewState ==4" ref="divInfo" @doback="resetState" /> -->
  </div>
</template>

<script>
import {
  selectSysPlanStudent,
  saveSysPlanSchedule,
  selectSysPlanComment,
} from "@/api/system/datamapping/datamapping.js";
// import organizationManageInfo from './organizationManageInfo.vue'
export default {
  components: {
    // organizationManageInfo,
  },
  data() {
    return {
      viewState: 1,
      activeName: "roleList",
      dialogTitle: "",
      editDialog: false,
      form: {
        sid:''
      },
      formBackup: Object.assign({}, this.form),
      tableData: [],
      userName: window.sessionStorage.getItem("userName"),
      sid: "",
      lookstuders: false,
      gridData: [],
    };
  },
  mounted() {
    this.getPageList();
  },
  methods: {
    getPageList() {
      // 获取列表
      selectSysPlanStudent({ userName: this.userName }).then((res) => {
        this.tableData = res.data;
        console.log(res);
      });
    },
    handleClick(tab, event) {
      if (tab.name == "addrole") {
        this.dialogTitle = "新增";
        this.roleForm = Object.assign({}, this.formBackup);
      } else {
        this.getPageList();
      }
    },
    save() {
      console.log("form", this.form);
      saveSysPlanSchedule(this.form).then((res) => {
        this.editDialog = false;
        this.getPageList();
        this.$message({
          message: res.msg,
          type: "success",
        });
      });

      this.reset();
    },
    reset() {
      this.form = {};
    },
    editRow(row) {
      this.dialogTitle = "反馈";
      this.editDialog = true;
      this.form = Object.assign({}, row);
    },
    // 查看学生
    lookstuder(row) {
      this.lookstuders = true;
      selectSysPlanComment({ sid: row.sid }).then((res) => {
        console.log(res.data);
        this.gridData = res.data;
      });
    },
    deleteRow(row) {
      this.form.sid=row.sid
      this.editDialog=true
      this.lookstuders = false;
      this.form = Object.assign({}, row);
    },
  },
};
</script>

<style scoped="scoped" lang="scss">
.my-tabs {
  margin-top: 10px;
}
</style>
