<template>
  <div class="root_container">
    <div class="header">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="班级ID">
          <el-input v-model="formData.classid" placeholder="请输入你的班级ID"></el-input>
        </el-form-item>
        <el-form-item label="Cookie">
          <el-input v-model="formData.cookie" placeholder="请输入你的Cookie信息" @change="onCookieChange"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="searchLoading" @click="onDoSearch">拉取课程列表</el-button>
        </el-form-item>
        <el-form-item>
          <span style="color:#606266;font-size:12px">共 {{ formData.length }} 条数据</span>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_container">
      <el-table :data="tableDatas" :height="tableHeight" border style="width: 100%" row-key="id" default-expand-all
        :tree-props="{ children: 'course_list', hasChildren: true }">
        <el-table-column prop="activity_id" label="ID" width="200">
        </el-table-column>
        <el-table-column prop="name" label="课程/任务名称">
        </el-table-column>
        <el-table-column prop="flag_status" label="学习状态" width="120">
          <template slot-scope="scope">
           <span v-if="scope.row.flag_status == '' || scope.row.flag_status == '未学'"  style="color: red">{{scope.row.flag_status == ''?'未学':scope.row.flag_status}}</span>
           <span v-if="scope.row.flag_status != '' && scope.row.flag_status != '未学'" style="color: green">{{scope.row.flag_status == ''?'未学':scope.row.flag_status}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="add_time" label="操作" width="200">
          <template slot-scope="scope">
            <div>
              <el-button v-if="scope.row.exam_flag && !scope.row.title_flag" size="small" type="primary" plain
                @click="onExam(scope.row.activity_module_id, scope.row.activity_register_id)">一键考试</el-button>
              <el-button v-if="scope.row.exam_flag && !scope.row.title_flag && scope.row.flag_status != ''" size="small"
                type="warning" plain @click="onExamResult(scope.row.exam_result_url)">查看结果</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getExamList, doExam } from "./../../api/exam/exam.js";
import { Message } from "element-ui";
export default {
  data() {
    return {
      searchLoading: false,
      formData: {
        length: 0,
        classid: "",
        cookie: ""
      },
      tableDatas: [],

      //记录高度
      tableHeight: -1,
    };
  },
  watch: {
    "$store.state.screenHeight": function (val) {
      this.tableHeight = val - 98 - 50 + "px";
    },
  },
  mounted: function () {
    this.tableHeight = this.$store.state.screenHeight - 98 - 50 + "px";
    this.formData.cookie = localStorage.getItem("ck")
  },
  methods: {
    //获取app列表
    obtainList() {
      getExamList(this.formData.classid, this.formData.cookie)
        .then((result) => {
          this.tableDatas = result.data.data;
          this.formData.length = this.tableDatas.length;
          this.searchLoading = false;
        })
        .catch((err) => {
          this.searchLoading = false;
         });
    },
    onDoSearch() {
      this.searchLoading = true;
      this.obtainList();
    },
    onCookieChange(){
      localStorage.setItem("ck",this.formData.cookie)
    },
    onExam(activityModuleId, activityRegisterId) {
      doExam(this.formData.classid, activityModuleId, activityRegisterId, this.formData.cookie)
        .then((result) => {
          if (result.data.code == 200) {
            Message.success("自动考试成功")
            this.obtainList();
          } else {
            Message.error(result.data.msg)
          }

        })
        .catch((err) => { });
    },
    onExamResult(url) {
      window.open(url);
    },
    onSeeResult(pro_id) {
      Message.warning("暂不开放");
    },
  },
};
</script>
<style lang="scss" scoped>
.root_container {
  position: relative;
}

.header {
  margin-left: 18px;
  margin-top: 18px;
}

.table_container {
  margin-left: 18px;
  margin-right: 18px;
}
</style>