<template>
  <div class="app-container">
    <form-search
      :searchformShow="{ gradeid: '', userSubject: '', semester: '', exam: '' }"
      @handleQuery="handleQuery"
      @resetQuery="resetQuery"
    ></form-search>
    <el-row :gutter="10" style="display: flex; flex-wrap: wrap">
      <el-col
        class="evaluation-card-wrapper"
        :xs="12"
        :sm="8"
        :md="8"
        :lg="6"
        :xl="6"
        v-for="item in menuList"
        :key="item.evaluationId"
      >
        <evaluation-card
          :pointer-enable="false"
          :title="item.name"
          :sub-title="item.subjectName"
          :state-options="mxGlobal.MergeEvalOpenStates(item.stateStr)"
          :state="item.stateStr"
          :proportion="`${item.valid}/${item.total}`"
        >
          <mx-seperator style="margin: 15px -10px" />
          <div class="text-center">
            <el-button
              type="primary"
              v-hasPermi="['accurateTeaching:appraisal:openExamination']"
              @click="unfold(item)"
              size="mini"
              round
              >开启测评</el-button
            >
            <el-button type="warning" size="mini" round @click="preview(item)"
              >预览</el-button
            >
          </div>
        </evaluation-card>
      </el-col>
    </el-row>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog
      v-if="dialogVisible"
      :title="title"
      :visible.sync="dialogVisible"
      width="500px"
    >
      <evaluation-setting
        :evaluationId="evaluationId"
        :disabledList="disabledList"
        @openSuccess="openSuccess"
      />
    </el-dialog>
    <el-dialog
      class="mx-paper-preview"
      v-if="previewDialogVisible"
      width="1175px"
      :visible.sync="previewDialogVisible"
    >
      <paper :evaluationId="previewEvaluationId" />
    </el-dialog>
  </div>
</template>

<script>
import { getEvaluationsForOpen } from "@/api/webApi/front";
import paper from "@/views/evaluating/components/paper";
import EvaluationSetting from "@/views/accurateTeaching/components/EvaluationSetting";
export default {
  components: { paper, EvaluationSetting },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 菜单表格树数据
      menuList: [],
      // 菜单树选项
      menuOptions: [],
      // 是否显示弹出层
      queryParams: {
        pageNum: 1,
        pageSize: 20,
      },
      // 查询参数
      total: 0,
      // 开启
      title: "",
      evaluationId: "",
      disabledList: [],
      dialogVisible: false,
      // 预览
      previewDialogVisible: false,
      previewEvaluationId: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    unfold(row) {
      this.checkList = [];
      this.form = {};
      this.evaluationId = row.evaluationId;
      this.disabledList = row.classIds || [];
      this.title = row.name;

      this.dialogVisible = true;
    },
    preview(row) {
      this.previewEvaluationId = row.evaluationId;
      this.previewDialogVisible = true;
    },
    openSuccess() {
      this.dialogVisible = false;

      this.getList();
    },
    /** 查询菜单列表 */
    getList() {
      let catalogId = "";
      if (this.$route.name == "Index") {
        catalogId = 1;
      } else if (this.$route.name == "Course") {
        catalogId = 4;
      }
      this.loading = true;
      this.queryParams.catalogId = catalogId;
      getEvaluationsForOpen(this.queryParams).then((response) => {
        this.menuList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },

    resetQuery() {
      (this.queryParams = {
        pageNum: 1,
        pageSize: 20,
      }),
        this.getList();
    },

    /** 搜索按钮操作 */
    handleQuery(data) {
      this.queryParams.gradeId = data.gradeid;
      //this.queryParams.classId = data.clbum
      this.queryParams.subjectId = data.userSubject;
      this.queryParams.typeId = data.exam;
      this.queryParams.termId = data.semester;
      this.queryParams.pageNum = 1;
      this.getList();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style scoped>
/deep/ .el-dialog__body {
  padding-top: 0;
}
/deep/ .el-dialog__header {
  padding-right: 40px;
}
/deep/ .mx-paper-preview .el-dialog {
  border-radius: 16px;
}
/deep/ .mx-paper-preview .el-dialog__header {
  height: 0;
  padding: 0;
  background-image: url('../../../assets/images/preview_paper_bg.png');
}
/deep/ .mx-paper-preview .el-dialog__body {
  padding: 0;
}
</style>
