<template>
  <div class="index">
    <!-- 提示 -->
    <div
      v-for="(item,index) in alerts"
      :key='index'
      @click="AlertClick(item)"
    >
      <el-alert
        :type="item.type"
        show-icon
        effect="dark"
        :closable="false"
      >
        <div
          slot='title'
          class="title"
          v-html="item.title"
        ></div>
      </el-alert>
    </div>
    <!-- 类别 -->
    <div class="types">
      <div
        class="item"
        v-for="(item,index) in types"
        :key="index"
        href="javascript:;"
        @click="TypeFunc(item.success)"
      >
        <i :class="[item.icon]"></i>
        <p>{{item.title}}</p>
      </div>
    </div>
  </div>
</template>
<script>
import Home from '@/api/home'
export default {
  data () {
    return {
      timer: null,
      // 弹框
      alerts: [],
      types: [
        {
          title: "知识库", icon: "iconfont icon-shuben", success: function (_self) {
            _self.$router.replace("/knowledgebase")
          }
        },
        {
          title: "习题练习", icon: "iconfont icon-xiti", success: function (_self) {
            _self.$router.replace("/practice")
          }
        },
        {
          title: "模拟考试", icon: "iconfont icon-monikaoshi", success: function (_self) {
            _self.$router.replace("/mockexamination")
          }
        },
        {
          title: "正式考试", icon: "iconfont icon-zhengshikaoshi", success: function (_self) {
            _self.$router.replace("/formalexamination")
          }
        },
        {
          title: "考试记录", icon: "iconfont icon-kaoshijilu", success: function (_self) {
            _self.$router.replace("/examinationrecord")
          }
        },
        {
          title: "错题集", icon: "iconfont icon-cuotiji", success: function (_self) {
            _self.$router.replace("/wrongquestion")
          }
        }]
    }
  },
  created () {
    this.Request();
  },
  mounted () {
  },
  methods: {
    Request () {
      Home.index().then(res => {
        try {
          let { data } = res;
          data = data.map(item => {
            let obj = { title: `<a style='color:#fff; text-decoration: none;' href='javascript:;'>${item.name}</a>`, type: item.id == '' ? 'success' : "warning", end_time: item.exam_end_time, id: item.id };
            return obj
          })
          this.alerts = data;
        } catch (err) {
          console.error(`数据处理错误：${err}`)
        }
      })
    },
    // 提示点击事件
    AlertClick (data) {
      if (data.id == '') return false;
      sessionStorage.setItem("formal", JSON.stringify({
        practise: data.id,
        end_time: data.end_time
      }))
      this.$router.push({
        path: "/formalexam"
      })
      return false
    },
    // 分类列表点击事件
    TypeFunc (func) {
      let _self = this;
      func(_self)
    }
  },

}
</script>
<style lang="less" scoped>
.el-alert {
  margin-bottom: 5px;
}
.types {
  margin: 50px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  .item {
    width: 133px;
    height: 170px;
    text-align: center;
    color: #777;
    box-sizing: border-box;
    padding-top: 54px;
    background-color: #c1d8e5;
    border-radius: 5px;
    &:hover {
      background-color: #1abc9c;
      color: #fff;
    }
    i {
      font-size: 33px;
      color: #3867b7 !important;
    }
    p {
      margin: 5px 0;
      font-size: 14px;
    }
  }
}
</style>