<template>
  <div class="app-container">
    <form-search :searchformShow="{'gradeid':'','semester':'','catalogId':'1'}"
                 @handleQuery="handleQuery"></form-search>
    <!--     <form-search :searchData="searchData" @handleQuery="handleQuery"></form-search>-->

    <!--    <el-card class="box-card" style="margin-bottom:30px">-->
    <!--      <el-row :gutter="24">-->
    <!--        <el-col :span="12">-->
    <!--          <div>竞赛入口<span style="font-size:12px;color:#999;margin-left:10px">共有3个内容</span></div>-->
    <!--        </el-col>-->
    <!--      </el-row>-->
    <!--    </el-card>-->

    <el-row :gutter="10">
      <el-col style="margin-bottom: 20px;padding-bottom: 20px;border-bottom: 1px solid #dbdbdb;">
        <span style="margin-right: 15px;">竞赛信息</span>
        <span style="font-size: 10px;color: #999;">共有{{total}}个内容</span>
      </el-col>
      <el-col :span="6" v-for="item in dataList">
        <el-card class="box-card" style="margin-bottom:30px">
          <div style="position:relative; ">
            <el-image :src="require('@/assets/images/unsign.png')"
                      fit="scale-down"
                      style="width: 100px;height: 100px;position:absolute;top: -28px;right: -27px;z-index: 6;" v-if="item.state == 1 || item.state == 7"></el-image>
            <el-image :src="require('@/assets/images/signing.png')" fit="scale-down"
                      style="width: 100px;height: 100px;position:absolute;top: -28px;right: -27px;z-index: 6;" v-else></el-image>

            <el-image :error="errorEvent(item)" :src="item.logo" fit="scale-down" style="width: 100%;"></el-image>
            <div style="position:relative ">
              <div
                :title="item.name + '（' + (item.state == 1 || item.state == 7 ? '未报名' : '已报名') + '）'"
                style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;padding-right:20px;line-height:40px;">
                {{item.name}}（{{item.state == 1 || item.state == 7 ? '未报名' : '已报名'}}）
              </div>
              <span class='el-icon-star-off' style="color:#E6A23C;position: absolute;top:10px;right:0"></span>
              <div style="font-size:12px;color:#999;line-height:32px;display: flex;justify-content: space-between;">
                <div>
                  <span>{{item.passCount || 0}}/</span>
                  <span style="color:#333">{{item.needCount}}</span>
                </div>
                <!--                <div>截止时间：{{item.roundEndTime}}</div>-->
                <div>截止时间：{{item.endTime}}</div>
              </div>
              <el-button @click="detail(item)" round>查看详情</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>


<script>
  import { getCompetitionList } from '@/api/webApi/competition'

  export default {
    data() {
      return {
        total: 0,  // 遮罩层
        loading: true,
        // 显示搜索条件
        showSearch: true,
        // 菜单表格树数据
        dataList: [],
        // 菜单树选项
        menuOptions: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        // 显示状态数据字典
        visibleOptions: [],
        // 菜单状态数据字典
        statusOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 20
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          menuName: [
            { required: true, message: '菜单名称不能为空', trigger: 'blur' }
          ],
          orderNum: [
            { required: true, message: '菜单顺序不能为空', trigger: 'blur' }
          ],
          path: [
            { required: true, message: '路由地址不能为空', trigger: 'blur' }
          ]
        },
        currentPage: 5
      }
    },
    created() {
      console.log('++++++++++++++++')
      console.log(this.$router)
      console.log(this.$route)
      console.log('*******************')
      this.getList()
//  this.getDicts("sys_show_hide").then(response => {
//    this.visibleOptions = response.data;
//  });
//  this.getDicts("sys_normal_disable").then(response => {
//    this.statusOptions = response.data;
//  });
    },
    mounted() {
    },
    methods: {
      detail(item) {
        if (item.state == 1 || item.state == 7) {
        // if (this.$route.name == 'Competition_1' || this.$route.name == 'Competition_2' || this.$route.name == 'Competition_3' || this.$route.name == 'Competition_4') {
          this.$router.push({ path: '/competitioninfo/index', query: { competitionId: item.competitionId } })
        } else {
          this.$router.push({ path: '/competition/detail', query: { competitionId: item.competitionId } })
        }
      },
      // 选择图标
      selected(name) {
        this.form.icon = name
      },
      /** 查询列表 */
      getList() {
        this.loading = true
        // 同步是1，预习是2，难度是3
        let competitionCata;
        if (this.$route.name == 'Index') {
          competitionCata = 1;
        } else if (this.$route.name == 'Index_2') {
          competitionCata = 2;
        } else { // Index_3
          competitionCata = 3;
        }
        let Ajax = {
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
          gradeId: this.queryParams.gradeId,
          termId: this.queryParams.semester,
          subjectId: this.queryParams.catalogId == 1 ? this.queryParams.subjectId : '',
          subjects: this.queryParams.catalogId == 2 ? this.queryParams.subjectId : '',
          competitionCata: competitionCata
        }
        getCompetitionList(Ajax).then(response => {
          this.dataList = response.rows
          this.total = response.total
          this.loading = false
        }).catch(err => {
          this.loading = false
        })
      },
      // 表单重置
      reset() {
        this.form = {}
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      handleQuery(data) {
        console.log(data)
        this.queryParams.catalogId = data.catalogId
        this.queryParams.semester = data.semester
        this.queryParams.gradeId = data.gradeid //年级
        this.queryParams.pharseId = data.pharseId //阶段
        this.queryParams.subjectId = data.catalogId_subjectid //科目
        this.getList()
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.handleQuery()
      },

      // 图片加载失败
      errorEvent(item) {
        item.logo = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      }
    }
  }
</script>


<style>
</style>
