<template>
  <div class="formal_examination">
    <div
      v-if="show"
      class="alert"
    >
      <div class="label">当前无考试</div>
      <div
        @click="refresh"
        class="refresh"
      >刷新</div>
    </div>
    <template>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          v-for="(item,index) of table_cols"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
          <div slot-scope="scope">
            <span
              v-if="item.prop== 'yes'"
              class="yes"
            >{{scope.row[[item.prop]]}}</span>
            <span
              v-else-if="item.prop=='no'"
              class="no"
            >{{scope.row[[item.prop]]}}</span>
            <span v-else>{{scope.row[[item.prop]]}}</span>
          </div>

        </el-table-column>

        <el-table-column width="139">
          <template slot="header">
            <div class="center">操作</div>
          </template>
          <template slot-scope="scope">
            <div class="center">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                icon="el-icon-edit"
              >进入答题</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>{{dialog.msg}}</span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          :disabled="dialog.btn"
          type="primary"
          @click="Enter"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Home from '@/api/home';
const Table = () => import("@/components/Table/index")
export default {
  components: { Table },
  data () {
    return {
      // 对话框
      dialogVisible: false,
      dialog: {
        id: '',
        msg: "",
        btn: true,
      },
      show: false,
      table_cols: [
        {
          label: "名称",
          prop: 'name',
          width: "340"
        }, {
          label: "科目",
          prop: 'subject',
          width: "150"
        },
        {
          label: "开始时间",
          prop: 'exam_time',
          width: "190"
        },
        {
          label: "结束时间",
          prop: 'exam_end_time',
          width: "190"
        },
        {
          label: "时长（分钟）",
          prop: 'duration',
          width: "150"
        }],
      tableData: []
    }
  },
  created () {
    this.Request();
  },
  methods: {
    Enter () {
      sessionStorage.setItem("formal", JSON.stringify({
        practise: this.dialog.id,
        end_time: this.dialog.end_time
      }))
      this.$router.push({
        path: "/formalexam"
      })
    },
    handleClick (data) {
      console.log(data)
      let time = (new Date(data.exam_time) - new Date()) / 1000;
      this.dialog = {
        id: data.id,
        end_time: data.exam_end_time,
        msg: time > 0 ? `距离考试时间还有${Math.floor(time / 60 / 60)}时${Math.floor((time - Math.floor(time / 60 / 60) * 60 * 60) / 60)}分${Math.floor(time % 60)}秒` : !data.submit_time ? "是否进入考试？" : '你已经交卷了！',
        btn: time > 0 || data.submit_time ? true : false
      }
      this.dialogVisible = true;
    },
    Request () {
      Home.formal_examination().then(res => {
        try {
          let { data } = res;
          if (data.length == 0) {
            this.show = true;
            return false;
          } else {
            this.show = false;
          }
          this.tableData = data;
        } catch (err) {
          console.error(`数据处理错误：${err}`)
        }
      })
    },
    refresh () {
      this.Request();
    }
  },
}
</script>
<style lang="less" scoped>
.formal_examination {
  .center {
    text-align: center;
  }
  .alert {
    width: 100%;
    background-color: #67c23a;
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    box-sizing: border-box;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    margin-bottom: 10px;
    .refresh {
      cursor: pointer;
    }
  }
}
</style>