<template>
  <div class="bbsl-common-page">
    <div class="basicDataOne">
      <div class="examinees oneItem_box">
        <div>
          考试次数： <span>{{ jobStatisticals.recordCount }}</span>
        </div>
      </div>
      <div class="examinees oneItem_box">
        <div>
          及格次数： <span>{{ jobStatisticals.passCount }}</span>
        </div>
      </div>
      <div class="examinees oneItem_box">
        <div>
          缺考次数： <span>{{ jobStatisticals.lackCount }}</span>
        </div>
      </div>
      <div class="examinees oneItem_box">
        <div>
          作弊次数： <span>{{ jobStatisticals.zbCount }}</span>
        </div>
      </div>
    </div>
    <div class="basicDataTwo">
      <div class="examinees  twoItem_one">
        <div class="title" style="color: #ff8c19;">
          最新成绩<span @click="toKscjMenu"
            >更多<i class="el-icon-arrow-right"></i
          ></span>
        </div>
        <div class="content">
          <div class="item">
            <i class="el-icon-document"></i>
            <span>试卷名称</span>
            <span>{{ this.newResults ? newResults.paperName : '' }}</span>
          </div>
          <div class="item">
            <i class="el-icon-view"></i>
            <span>试卷状态</span>
            <span>{{ this.newResults ? newResults.statusName : '' }}</span>
          </div>
          <div class="item">
            <i class="el-icon-document-checked"></i>
            <span>总分</span>
            <span>{{ this.newResults ? newResults.totalScore : '' }}</span>
          </div>
          <div class="item">
            <i class="el-icon-edit-outline"></i>
            <span>得分</span>
            <span>{{ this.newResults ? newResults.sysScore : '' }}</span>
          </div>
          <div class="item">
            <i class="el-icon-time"></i>
            <span>用时</span>
            <span>{{ this.newResults ? newResults.answerTime : '' }}</span>
          </div>
          <div class="item">
            <i class="el-icon-date"></i>
            <span>交卷时间</span>
            <span>{{ this.newResults ? newResults.endTime : '' }}</span>
          </div>
        </div>
      </div>
      <!-- <div class="examinees  twoItem_two">
				<div class="title" style="color: #1dbfa7;">最新收藏 <span>更多<i class="el-icon-arrow-right"></i></span></div>
				<div class="content">
					<div class="icon">
						<i class="el-icon-tickets"></i>
					</div>
					<div class="right_main">
						<span>做高数试卷</span>
						<div></div>
						<div>收藏名称</div>
					</div>
				</div>
				<div class="footer">
					<div class="left">
						<div>收藏类型</div>
						<span>刷题</span>
					</div>
					<el-divider direction="vertical"></el-divider>
					<div class="right">
						<div>收藏时间</div>
						<span>2022-10-17 16:00:00</span>
					</div>
				</div>
			</div> -->
      <div class="examinees  twoItem_three">
        <div class="title" style="color: #1289fe;">
          通知公告<span @click="toNoticeDetails"
            >更多<i class="el-icon-arrow-right"></i
          ></span>
        </div>
        <div class="content">
          <li
            v-for="(item, index) in this.notices"
            :key="index"
            class="notice"
            @click="addDialog(item)"
          >
            {{ item.title }}
          </li>
        </div>
      </div>
    </div>
    <div class="center-content">
      <div class="exam-name">
        训练保障汇总
      </div>
      <div class="chart-content">
        <div class="chart-content-item">
          <div class="chart-value">
            <kzzcChart />
          </div>
        </div>
      </div>
    </div>
    <div ref="basicDataThree" class="basicDataThree">
      <div class="myPaper">
        <el-table
          ref="multipleSelection"
          v-loading="loading"
          :cell-style="{'text-align': 'center'}"
          :data="tableData"
          :header-cell-style="{'text-align': 'center'}"
          :max-height="tableHeight - 75"
          :style="{width: '100%'}"
          size="mini"
          @row-dblclick="handleDbClick"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index" width="55"></el-table-column>
          <el-table-column
            label="试卷名称"
            min-width="160"
            prop="paperName"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="课目"
            prop="subjectName"
            show-overflow-tooltip
            width="160"
          >
          </el-table-column>
          <el-table-column
            label="考试场地"
            min-width="100"
            prop="roomName"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="试卷状态"
            min-width="100"
            prop="paperStatusName"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="总分"
            min-width="80"
            prop="totalScore"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="总时长(分)"
            min-width="100"
            prop="timeLength"
            show-overflow-tooltip
            sortable
          >
          </el-table-column>
          <el-table-column
            label="题目总数"
            min-width="100"
            prop="totalNumber"
            show-overflow-tooltip
            sortable
          >
          </el-table-column>
          <el-table-column
            label="试卷开始时间"
            min-width="150"
            prop="planStartTime"
            show-overflow-tooltip
            sortable
          >
          </el-table-column>
          <el-table-column
            label="试卷结束时间"
            min-width="150"
            prop="planEndTime"
            show-overflow-tooltip
            sortable
          >
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="150">
            <template #default="scope">
              <el-dropdown
                split-button
                v-charge
                @click="toPreview(scope.row)"
                @command="
                  command => {
                    handleClick(command, scope.row)
                  }
                "
              >
                <span
                  v-if="
                    scope.row.status == 1 ||
                      (scope.row.status == 8 && scope.row.paperStatus == 1)
                  "
                  >开始考试</span
                >
                <span v-if="scope.row.status == 2 && scope.row.paperStatus == 1"
                  >继续考试</span
                >
                <!-- {{scope.row.status==1?'开始考试':scope.row.status>=3?'查看记录':scope.row.paperStatus == 1?'开始考试':'' }} -->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-if="scope.row.status == 1 && scope.row.paperStatus == 2"
                    command="0"
                  >
                    申请补考
                  </el-dropdown-item>
                  <el-dropdown-item v-if="scope.row.status > 2" command="1"
                    >查看试卷
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <!-- <el-button @click="preview(scope.row)" size="small">预览试卷</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          ref="paginationPanel"
          :current-page="queryParam.pageBean.page"
          :page-size="queryParam.pageBean.pageSize"
          :page-sizes="[20, 30, 40, 50]"
          :total="total"
          align="right"
          background
          class="bb-pagination"
          layout="prev, pager, next,total, sizes, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
      <!-- 	<div class="examinees threeItem_one">
				<div class="title" style="margin-bottom: 10px;">正在进行的考试</div>
				<el-table size="mini" :data="tableData" :style="{width: '100%'}" :max-height="tableMaxHeight"
					:cell-style="{'text-align': 'center'}" :header-cell-style="{'text-align': 'center'}">
					<el-table-column prop="name" label="考试名称" min-width="100" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="time" label="考试时间" min-width="280" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="num" label="未完成人数" min-width="80" show-overflow-tooltip>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="mini" @click="toTestMonitor">考试监控</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination align="right" background class="bbsl-pagination" ref="paginationPanel"
				  @size-change="handleSizeChange" @current-change="handleCurrentChange"
				  :current-page="queryParam.pageBean.page" :page-sizes="[20, 30, 40, 50]"
				  :page-size="queryParam.pageBean.pageSize" layout="prev, pager, next,total, sizes, jumper" :total="total">
				</el-pagination>
			</div>
			<div class="examinees threeItem_two">
				<div class="title" style="margin-bottom: 10px;">我的任务</div>
				<el-table size="mini" :data="tableDataTwo" :style="{width: '100%'}" :max-height="tableMaxHeight"
					:cell-style="{'text-align': 'center'}" :header-cell-style="{'text-align': 'center'}">
					<el-table-column prop="name" label="任务名称" min-width="70" show-overflow-tooltip align="center">
					</el-table-column>
					<el-table-column prop="type" label="任务类型" min-width="70" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="time" label="任务时间 " show-overflow-tooltip>
					</el-table-column>
					<el-table-column label="操作" min-width="70">
						<template slot-scope="scope">
							<el-button size="mini" @click="startTest">开始考试</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination align="right" background class="bbsl-pagination" ref="paginationPanel"
				  @size-change="handleSizeChange" @current-change="handleCurrentChange"
				  :current-page="queryParam.pageBean.page" :page-sizes="[20, 30, 40, 50]"
				  :page-size="queryParam.pageBean.pageSize" layout="prev, pager, next,total, sizes, jumper" :total="total">
				</el-pagination>
			</div>
		 -->
    </div>
    <el-dialog
      :before-close="handleClose"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      title="公告详情"
      width="50%"
    >
      <div class="content">
        <span v-html="content"></span>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span> -->
    </el-dialog>
  </div>
</template>

<script>
import {TableMixin} from '@/mixins/tableMixin'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import myTaskMenu from '@/api/examination/myTaskMenu.js'
import kzzxMenu from '@/api/examination/kzzxMenu.js'
import kzzcChart from './components/kzzcChart.vue'
export default {
  name: 'kzzxMenu',
  components: {kzzcChart},
  mixins: [TableMixin],
  data() {
    return {
      activeNames: ['1'],
      tableData: [],
      tableDataTwo: [
        {
          name: '任务1',
          type: '测试类型',
          time: '2022-10-20 15:87:00'
        }
      ],
      ksztList: [],
      sjztList: [],
      jobStatisticals: {},
      newResults: {},
      notices: [],
      content: '',
      dialogVisible: false,
      tableHeight: 0
    }
  },
  created() {
    this.getJobStatistical()
    this.getMyResultsQuery()
    this.getNotice()
    this.loadData()
    this.ksztList = dictUtils.getDictItemsFromCache('kszt') || []
    this.sjztList = dictUtils.getDictItemsFromCache('sjzt') || []
  },
  mounted() {},
  methods: {
    addDialog(val) {
      this.content = val.content
      this.dialogVisible = true
    },
    handleClose(done) {
      this.dialogVisible = false
    },
    handleChange(val) {
      console.log(val)
    },
    //获取次数
    getJobStatistical() {
      kzzxMenu.jobStatistical({}, res => {
        if (res) {
          this.jobStatisticals = res
        }
      })
    },
    //获取最新成绩
    getMyResultsQuery() {
      kzzxMenu.myResultsQuery(
        {
          pageBean: {
            pageSize: 1,
            page: 1
          },
          sorter: [
            {
              direction: 'DESC',
              property: 'endTime'
            }
          ]
        },
        res => {
          if (res.rows[0]) {
            this.newResults = res.rows[0]
            this.ksztList.forEach(k => {
              if (this.newResults.status === k.value) {
                this.newResults.statusName = k.name
              }
            })
          }
        }
      )
    },
    //通知公告
    getNotice() {
      kzzxMenu.notice(
        {
          pageBean: {
            pageSize: 5,
            page: 1
          },
          sorter: [
            {
              direction: 'DESC',
              property: 'createTime'
            }
          ]
        },
        res => {
          if (res.rows) {
            this.notices = res.rows
          }
        }
      )
    },
    // 获取list
    async loadData(page) {
      if (page) {
        this.queryParam.pageBean.page = page
      }
      this.loading = true
      this.tableData = []
      this.queryParam.querys = [
        {
          group: 'main',
          operation: 'IN',
          parentGroup: '',
          property: 's.status_',
          relation: 'AND',
          value: '1,2,8'
        }
      ]
      await myTaskMenu.myPaper(this.queryParam, res => {
        this.total = res.total
        this.tableData = res.rows
        this.tableData.forEach(t => {
          this.ksztList.forEach(k => {
            if (t.status == k.value) {
              t.statusName = k.name
            }
          })
          this.sjztList.forEach(k => {
            if (t.paperStatus == k.value) {
              t.paperStatusName = k.name
            }
          })
        })
        this.$set(this.tableData)
        this.loading = false
        this.tableHeight = this.$refs.basicDataThree.clientHeight
        console.log()
        console.log(this.tableHeight)
      })
    },
    //开始考试
    toPreview(val) {
      this.$router.push({
        name: 'previewTestPaper',
        params: {
          id: val.id
        }
      })
    },
    handleClick(command, val) {
      console.log(command, val)
      if (command == 0) {
        myTaskMenu.applyExamPaper(val.id, res => {
          if (res.state) {
            this.$message({
              message: '申请成功',
              type: 'success'
            })
          }
        })
      }
    },
    //更多
    toKscjMenu() {
      this.$router.push({
        name: 'myCjMenu'
      })
    },
    toNoticeDetails() {
      this.$router.push({
        name: 'noticeDetails'
      })
    },
    //考试监控
    toTestMonitor() {
      this.$router.push({
        name: 'testMonitor'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.bb-pagination {
  margin-top: 10px;
}
.exam-name {
  font-size: 18px;
  font-weight: 400;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  &::before {
    content: '';
    display: block;
    width: 2px;
    height: 15px;
    margin-right: 4px;
    background: #3296fa;
  }
}
.center-content {
  background: #fff;
  border-radius: 5px;
  padding: 16px;
  margin: 10px 0;
  .chart-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .chart-content-item {
      flex: 1;

      padding: 16px;
      &:last-child {
        margin: 0;
      }

      .chart-value {
        height: 260px;
      }
    }
  }
}
.bbsl-common-page {
  background-color: #ebeef5;
  overflow: auto;
}

.title {
  display: flex;
  justify-content: space-between;
  font-weight: bold;

  span {
    font-weight: 100;
  }
}

.basicDataOne {
  height: 10%;
  display: flex;
  align-items: center;

  .oneItem_box {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-right: 10px;
    height: 100%;

    div {
      font-weight: 500;
      font-size: 24px;
    }

    span {
      font-weight: bold;
      font-size: 30px;
    }
  }

  .oneItem_box:nth-child(1) {
    // background: linear-gradient(to bottom right, #e1ebff, #fff);
    background: linear-gradient(to bottom right, #d4f5f0, #fff);

    span {
      color: #1289fe;
    }
  }

  .oneItem_box:nth-child(2) {
    background: linear-gradient(to bottom right, #d4f5f0, #fff);

    span {
      color: #1dbfa7;
    }
  }

  .oneItem_box:nth-child(3) {
    // background: linear-gradient(to bottom right, #fff5ec, #fff);
    background: linear-gradient(to bottom right, #d4f5f0, #fff);

    span {
      color: #ff8c19;
    }
  }

  .oneItem_box:nth-child(4) {
    // background: linear-gradient(to bottom right, #EEB4B4, #fff);
    background: linear-gradient(to bottom right, #d4f5f0, #fff);
    margin: 0;

    span {
      color: red;
    }
  }
}

.basicDataTwo {
  height: 20%;
  display: flex;
  align-items: center;
  margin: 10px 0;

  .twoItem_one {
    width: 75%;
    height: 100%;
    margin-right: 10px;
    padding: 20px 30px;
    background: linear-gradient(to bottom right, #fff5ec, #fff);

    .content {
      height: calc(100% - 17px);
      display: flex;
      align-items: center;
      justify-content: space-around;

      .item {
        height: 70%;
        text-align: center;
        display: flex;
        flex-direction: column;

        i {
          color: #ff8c19;
          font-size: 26px;
        }

        span:nth-of-type(1) {
          color: #999999;
        }

        span:nth-of-type(2) {
          font-size: 26px;
          color: #ff8c19;
        }
      }
    }
  }

  .twoItem_two {
    width: 25%;
    height: 100%;
    margin: 0 10px;
    padding: 20px 30px;
    background: linear-gradient(to bottom right, #d4f5f0, #fff);

    .content {
      height: 50%;
      padding: 10px 0;
      box-sizing: border-box;
      display: flex;

      .icon {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        border-radius: 50%;
        background-color: #8cded1;

        i {
          line-height: 90px;
          color: #1dbfa7;
          font-size: 40px !important;
        }
      }

      .right_main {
        position: relative;
        left: 20px;
        margin: 10px 10px 10px 20px;
        width: 50%;
        height: 90px;
        display: flex;
        flex-direction: column;

        span {
          font-size: 20px;
          color: #1dbfa7;
        }

        div:nth-of-type(1) {
          margin: 0;
          padding: 0;
          width: 100px;
          height: 1px;
          background-color: #55edd6;
          overflow: hidden;
        }

        div:nth-of-type(2) {
          font-size: 17px;
          color: rgb(161, 153, 153);
        }
      }
    }

    .footer {
      height: calc(50% - 27px);
      margin-top: 10px;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: space-around;

      div {
        color: #999999;
      }

      span {
        color: #1dbfa7;
      }
    }
  }

  .twoItem_three {
    width: 25%;
    height: 100%;
    padding: 20px 30px;
    background: linear-gradient(to bottom right, #e1ebff, #fff);

    .content {
      margin-top: 10px;

      li {
        padding-bottom: 5px;
        color: #999999;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
      }
    }
  }
}

.basicDataThree {
  max-height: calc(70% - 20px);
  background-color: #fff;
  border-radius: 20px;
  padding: 20px;
  box-sizing: border-box;

  .myPaper {
    width: 100%;
    height: 100%;
  }
}

.examinees {
  margin: 10px auto;
  background-color: #fff;
  border-radius: 15px;
  // box-shadow: 0px 0px 0.625vw 0 rgb(162, 157, 157);
  position: relative;
  box-sizing: border-box;
}

.notice {
  cursor: pointer;
  color: #999999 !important;
}

.notice:hover {
  color: #000 !important;
}

::v-deep .el-dialog__header {
  padding: 10px;
}

::v-deep .el-dialog__body {
  padding: 20px 30px;
}
</style>
