<template>
  <div>
    <back-box>
      <template slot="title">
        <span>已归档答题卡</span>
      </template>
    </back-box>
    <div class="answer-header">
      <div class="sel-box">
        <el-select
          class="sel"
          v-model="query.classId"
          placeholder="选择班级"
          @change="changClazz"
        >
          <el-option
            v-for="item in classList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          class="sel"
          v-model="query.subjectName"
          placeholder="选择科目"
          @change="_QueryData()"
        >
          <el-option
            v-for="item in subjectList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          class="sel"
          v-model="query.tagId"
          placeholder="选择类型"
          @change="_QueryData()"
        >
          <el-option
            v-for="item in typeList"
            :key="item.label"
            :label="item.label"
            :value="item.value"
            >{{ item.label }}
          </el-option>
        </el-select>
        <el-input
          placeholder="试卷名称"
          v-model="query.title"
          class="input-with-select"
          @keyup.enter.native="_QueryData(true)"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="_QueryData(true)"
          ></el-button>
        </el-input>
      </div>
    </div>
    <ul class="content" v-if="tableData && tableData.length">
      <li class="item" v-for="item in tableData" :key="item.id">
        <div class="pic-box">
          <p class="i-box"><i class="fa fa-map-o"></i></p>
          <p class="ids">{{ item.id }}</p>
        </div>
        <div class="info">
          <p class="title">
            {{ item.title }}
            <span class="label" v-if="!!item.tag">{{ item.tag }}</span>
          </p>
          <p class="num">
            总题数：{{ item.questionNum }}
            <em class="s-line">|</em>
            预计时长：{{ item.examsDuration }}
          </p>
          <p class="person">
            {{ item.realName }}<em class="s-line">|</em
            ><span class="date">{{ item.modifiedTime }}</span>
          </p>
        </div>
        <div class="btn-box">
          <el-tooltip effect="dark" content="复制" placement="bottom">
            <el-button
              class="edit"
              type="info"
              size="mini"
              circle
              icon="el-icon-copy-document"
              @click="toAdd(item)"
            ></el-button>
          </el-tooltip>
        </div>
      </li>
    </ul>
    <div class="pagination-box">
      <el-pagination
        small=""
        layout="total,prev, pager, next"
        :hide-on-single-page="true"
        :total="total"
        @current-change="changePage"
        :current-page="page"
        :page-size="size"
      >
      </el-pagination>
    </div>
    <el-empty
      v-if="!loading && tableData.length == 0"
      content="没有更多数据"
      :image-size="100"
    ></el-empty>
  </div>
</template>

<script>
export default {
  name: "examinationPaperArchiving",
  data() {
    return {
      code: "",
      role: "",
      loading: false,
      query: {
        classId: "",
        subjectName: "",
        tagId: "",
        title: "",
      },
      classList: [],
      subjectList: [],
      typeList: [],
      tableData: null,
      total: 0,
      page: 1,
      size: 20,
    };
  },
  async created() {
    this.code = localStorage.getItem("csCode") || "";
    this.role =
      this.$store.getters.info.showRole ||
      this.$store.getters.info.permissions[0].role;
    await this._QueryClassList();
    if (!this.query.classId) {
      return;
    }
    await this._QuerySubjectList();
    this._QueryData();
    this._QueryTypeList();
  },
  methods: {
    toAdd(item) {
      this.$router.push({
        path: "/examinationPaperAdd",
        query: {
          type: 2,
          paperId: item.id,
        },
      });
    },
    changePage(page) {
      this.page = page;
      this._QueryData(this.query.title);
    },
    //切换班级
    async changClazz() {
      await this._QuerySubjectList();
      this._QueryData(false);
    },
    // 查找答题卡类型
    async _QueryTypeList() {
      if (!this.query.classId) return;
      let fetchTypeNames =
        this.role == "ROLE_PERSONAL"
          ? this.$request.pPaperTagList
          : this.$request.fetchTypeNames;

      const { data, status, info } = await fetchTypeNames({
        classId: this.query.classId,
        status: 1,
        type: 0,
      });
      if (status === 0) {
        this.typeList =
          data.list.map((item) => {
            return {
              value: item.tagId,
              label: item.tag,
            };
          }) || [];
        this.typeList.unshift({
          value: "",
          label: "请选择标签",
        });
      } else {
        this.$message.error(info);
      }
    },
    // 查找班级
    async _QueryClassList() {
      this.loading = true;
      let fetchClassList =
        this.role == "ROLE_PERSONAL"
          ? this.$request.pClassList
          : this.$request.fetchClassList;

      const { data, status, info } = await fetchClassList({ status: 1 });
      if (status === 0) {
        if (!!data.list) {
          this.classList =
            data.list?.map((item) => {
              return {
                value: this.role == "ROLE_PERSONAL" ? item.id : item.classId,
                label: item.className,
              };
            }) || [];
          this.query.classId = this.classList[0]?.value;
        }
      } else {
        this.$message.error(info);
      }
    },
    // 查找科目
    async _QuerySubjectList() {
      if (!this.query.classId) return;
      let fetchSubjectList =
        this.role == "ROLE_PERSONAL"
          ? this.$request.pSubjectList
          : this.$request.fetchSubjectList;

      const { data, status, info } = await fetchSubjectList({
        classId: this.query.classId,
        status: 1,
      });
      if (status === 0) {
        this.subjectList =
          data.subjectNames?.map((item) => {
            return {
              value: item,
              label: item,
            };
          }) || [];
        this.query.subjectName = this.subjectList[0]?.value;
      } else {
        this.$message.error(info);
      }
    },
    async _QueryData(type) {
      if (!this.query.classId) return;
      this.loading = true;
      //获取答题卡列表
      let query = {};
      if (!type) {
        this.query.title = "";
        query = { ...this.query };
      } else {
        query = { title: this.query.title };
        this.query.tagId = "";
        // this.query.subjectName = "";
      }
      query.classId = this.query.classId;
      query.subjectName = this.query.subjectName;
      for (let key in query) {
        if (!query[key]) {
          query[key] = null;
        }
      }
      if (!query.classId) {
        this.total = 0;
        this.tableData = [];
        this.loading = false;
        return;
      }
      this.loading = true;
      let fetchPaperList =
        this.role == "ROLE_PERSONAL"
          ? this.$request.pPaperList
          : this.$request.fetchPaperList;

      const { data, status, info } = await fetchPaperList({
        ...query,
        status: 1,
        page: this.page,
        size: this.size,
        status: 3,
      });
      this.loading = false;
      if (status === 0) {
        this.total = data.total;
        this.tableData = (data.list && [...data.list]) || [];
      } else {
        this.$message.error(info);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  margin: 0 20px;
  background: #f8f8f8;
  padding: 12px;
  border-radius: 20px;
  .item {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 12px;
    border-radius: 20px;
    background: #fff;
    margin-bottom: 12px;
    &:last-of-type {
      margin-bottom: 0;
    }
    .pic-box {
      width: 80px;
      height: 80px;
      border-radius: 10px;
      margin-right: 10px;
      flex-shrink: 0;
      background: #d7d7d7;
      text-align: center;
      color: #fff;
      font-weight: 500;
      .i-box {
        padding-top: 10px;
        font-size: 32px;
        margin-bottom: 3px;
      }
    }
    .info {
      min-height: 80px;
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .s-line {
        padding: 0 5px;
        color: #e2e2e2;
      }
      .title {
        font-size: 16px;
        color: #222;
        font-weight: 500;
        .label {
          display: inline-block;
          font-size: 12px;
          color: #2e9afe;
          line-height: 16px;
          padding: 0 10px;
          border: 1px solid #2e9afe;
          border-radius: 10px;
          transform: translateY(-2px);
        }
      }
      .person {
        color: #666;
      }
    }
    .clazz {
      font-size: 14px;
      font-weight: 500;
      position: relative;
      position: relative;
      &.active {
        color: #667ffd;
      }
      .el-icon-success {
        position: absolute;
        right: 0;
        top: -5px;
        color: #667ffd;
      }
      &:last-of-type {
        .el-icon-success {
          right: -18px;
        }
      }
    }
    .btn-box {
      flex-shrink: 0;
      .edit {
        margin-right: 12px;
      }
    }
  }
}
.answer-header {
  .sel-box {
    .sel {
      min-width: 160px;
    }
    :deep(.el-cascader__tags) {
      flex-wrap: nowrap;
    }
  }
}
</style>