//  大赛
<template>
   <div class="resource">
    <!-- <div class="header">
      <span>当前资源情况 {{ useResCount }}/{{ totalResCount }}</span>
    </div>  -->
    <div class="wo_padding">
    <div class="wo_list">
      <div class="list_left">
      <h4>智博杯</h4>
      <p class="time">2021年03月12日</p>
      </div>
      <div class="wo_right">
          <el-button type="danger" plain>危险按钮</el-button>
      </div>
      </div>
    </div>
     <el-table
      ref="tableda"
      stripe
      size="small"
      height="80%"
      :data="tableData"
      element-loading-text="拼命加载中"
      @selection-change="selectionLineChangeHandle"
       @row-click="handle" 
   
    >
      <el-table-column  
        v-for="(header, index) in headerData"
        :key="index"
        align="center"
        :prop="header.prop"
        :label="header.label"
        :sortable="header.sortable"
        :width="header.prop == 'index' ? 60 : ''"
      >
      </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
         <el-button  size="mini" type="text"  @click="particulars(scope.row['id'])" >查看题目</el-button>
        <!-- <el-button  size="mini"  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="mini"  type="danger"  @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
      </template>
    </el-table-column>
    </el-table>
       <div class="pagination">
      <Pagination
        :pagination-config="paginationConfig"
        @putPagination="getPagination"
      ></Pagination>
    </div>
    <!-- 查看详情列表 -->
     <el-dialog
      :close-on-click-modal="false"
      title="大赛列表"
      width="80%"
      :visible.sync="dialog.xq"
      class="dialog lg-dialog-2"
    >
    <div class="cq_content">
          <el-table
          ref="table"
          stripe
          size="small"
          height="100%"
          :data="dstable"
          element-loading-text="拼命加载中"
   
    >
      <el-table-column
        v-for="(header, index) in dsheaderData"
        :key="index"
        align="center"
        :prop="header.prop"
        :label="header.label"
        :sortable="header.sortable"
        :width="header.prop == 'index' ? 70 : ''"
      >
      </el-table-column>
   
    </el-table>
      
    </div>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialog.erOptions = false">Ok</el-button> -->
        <el-button @click="dialog.xq = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 查看详情列表结束 -->
   </div>

</template>
<script>
import Pagination from '@/components/Pagination'
import { formatType, formatStatus,parseTime } from '@/utils/index'
import { request } from '@/utils/request'
export default {
  name: 'IndexLayout',
   components: {
         Pagination
         },
  data() {
    return {
     paginationConfig: {
        hideSinglePage: false,
        page: 1,
        size: 15,
        sizeList: [10, 15, 30, 50],
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
      },
       dataonLineListSelections: [],
      tableData:[],
      dstable:[],
       dsheaderData: [],
      headerData: [], // 头部数据
      xqobjct:{},
      // loading:false
      dialog:{
      xq:false,
    }
    }
    
  },
  created() {
    
  },
  mounted() {
       this.addHeader();
       this.getResource() ;
  },
  methods: {
        addHeader(){
         const header = []
        header.push({ label: '用户ID', prop: 'uid' })
        header.push({ label: 'id', prop: 'id', sortable: 'custom' })
        header.push({ label: '标题', prop: 'title', sortable: 'custom' })
        header.push({ label: '状态', prop: 'status', sortable: 'custom' })
        header.push({ label: '开始报名时间', prop: 'appleStime', sortable: 'custom' })
        header.push({ label: '结束报名时间', prop: 'appleEtime', sortable: 'custom' })
        header.push({ label: '答题结束时间', prop: 'answerEtime', sortable: 'custom' })
        header.push({ label: '评审开始时间', prop: 'reviewStime', sortable: 'custom' })
        header.push({ label: '评审结束时间', prop: 'reviewEtime', sortable: 'custom' })
        header.push({ label: '简要说明', prop: 'content', sortable: 'custom' })
        header.push({ label: '地址', prop: 'addr', sortable: 'custom' })
        header.push({ label: '备注', prop: 'remark', sortable: 'custom' })
        // header.push({ label: '操作', prop: 'operation' })
        this.headerData = header;
        },
        dsHeader(){
         const header = []
        header.push({ label: 'id', prop: 'id', sortable: 'custom' })
        header.push({ label: '用户ID', prop: 'uid' })
        header.push({ label: '状态', prop: 'status', sortable: 'custom' })
        header.push({ label: '标题', prop: 'title', sortable: 'custom' })
        header.push({ label: '简要说明', prop: 'content', sortable: 'custom' })
        header.push({ label: '备注', prop: 'remark', sortable: 'custom' })
        header.push({ label: '求解器类型', width:200, prop: 'solverType', sortable: 'custom' })
        header.push({ label: '难度级别', prop: 'rank', sortable: 'custom' })
        header.push({ label: '业务类型', prop: 'businessType', sortable: 'custom' })
        header.push({ label: '选题方式', prop: 'selectionWay', sortable: 'custom' })
        header.push({ label: '分值', prop: 'score', sortable: 'custom' })
         header.push({ label: '大赛id', prop: 'megagameId', sortable: 'custom' })
        header.push({ label: '题目类型', prop: 'type', sortable: 'custom' })
        header.push({ label: '创建时间', prop: 'createTime', sortable: 'custom' })
        header.push({ label: '更新时间', prop: 'updateTime', sortable: 'custom' })
     
        // header.push({ label: '操作', prop: 'operation' })
        this.dsheaderData = header;
        },
        // 分页查询
        getPagination(data) {
      this.paginationConfig = data

    },
        // 获取大赛列表
 getResource() {
   const params = {
        transCode: 'D00006',
         page: this.paginationConfig.page,
        count: this.paginationConfig.size,
        uid:this.$store.getters.userId,
      }
      request(params)
        .then((res) => {
           res.rows.forEach((row) => {
             switch (row.status) {
            case "0":
              row.status = "新增";
              break;
            case "1":
           row.status ="发布";
              break;
            default:
          }
          });
          this.paginationConfig.total = res.total
          this.tableData=res.rows;
         
        })
        .catch((err) => {})
    },
    selectionLineChangeHandle(val){
// this.dataonLineListSelections=val;
// console.log(this.dataonLineListSelections);
    },
    handle(val){
      console.log(val);
    },
    particulars(id) {
        this.dsHeader()
      this.dialog.xq=true;
       // 查看资详情
      // const params = {
      //   transCode: 'D00007',
      //   id:id,
      // }
      // request(params)
      //   .then((res) => {
      //     this.xqobjct=res
      //     console.log(res);
         
      //   })
      //   .catch((err) => {})
      // 查询题目列表
      const params = {
        transCode: 'D00008',
        megaganmeId:id,
      }
      request(params)
        .then((res) => {
         res.rows.forEach((row) => {
             switch (row.status) {
            case "0":
              row.status = "新增";
              break;
            case "1":
           row.status ="发布";
              break;
            default:
          };
           switch (row.rank) {
            case "1":
              row.rank = "普通";
              break;
            case "2":
              row.rank ="一般";
              break;
               case "3":
              row.rank = "困难";
              break;
            case "4":
              row.rank ="发布";
              break;
               case "5":
              row.rank = "地狱）";
              break;
            default:
          };
           switch (row.businessType) {
            case "1":
              row.businessType = "航天";
              break;
            case "2":
             row.businessType ="船舶";
              break;
            default:
          };
           switch (row.selectionWay) {
            case "1":
              row.selectionWay = "必选题";
              break;
            case "2":
             row.selectionWay ="选做题";
              break;
            default:
          };
          switch (row.type) {
            case "1":
              row.type = "普通任务";
              break;
            case "2":
             row.type ="大赛任务";
              break;
            default:
          };
          });
          this.dstable=res.rows
          console.log(res);
         
        })
        .catch((err) => {})
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.resource {
  @include w_h(100%, 100%);
  background: $color_f;
  .el-table {
    color: $color_9;
    .operation:hover {
      color: #2cae00;
      cursor: pointer;
    }
  }
  .pagination {
    @include flex();
    padding: 20px 10px;
    font-size: 12px;
    color: $color_9;
  }
  .wo_padding{
    padding: 20px 50px;
    
    .wo_list{
      border-bottom:1px solid #F6F5F5;
      padding: 20px 0;
      position: relative;
      h1{
        font-size: 30px;
        color: #333;
      }
      p{
        padding: 10px 0;
        font-size: 16px;
        color: #999;
      }
      .wo_right{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);  
        right: 10px;
      }
    }
    
  }
}
</style>