<template>
  <div class="app-mian">
    <!-- 搜索栏 -->
    <div class="index">
      <el-form ref="queryForm" size="small" :inline="true" :model="queryParams">
        <el-form-item label="实训任务" prop="title" class="formIpt">
          <el-select placeholder="选择任务" clearable type="image" v-model="queryParams.trainingName">
            <el-option v-for="item in tasklist" :key="item.training_id" :label="item.training_name" :value="item.training_name"/>
          </el-select>
        </el-form-item>
        <el-form-item label="班级" prop="content" class="formIpt">
          <el-select placeholder="选择分类" clearable type="image" v-model="queryParams.classGrade">
            <el-option v-for="item in classeslist" :key="item" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="cateId">
          <el-date-picker v-model="queryParams.startTime" type="date" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="搜索" prop="status">
          <el-input placeholder="学号 / 姓名" clearable v-model="queryParams.name" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  icon="el-icon-search" size="mini" @click="getlist">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning"  icon="el-icon-search" size="mini" @click="getlist">导出</el-button>
        </el-form-item>
        <div class="weight"> 
          <el-form-item>
          <el-button type="warning"  icon="el-icon-search" size="mini" @click="centerDialogVisible=true">成绩权重设置</el-button>
        </el-form-item>
        </div>
      </el-form>
      <el-table v-loading="loading" :data="transactionlist" style="width: 100%" >
        <el-table-column prop="stuRank" label="排名" width="100" align="center" />
        <el-table-column prop="stuRank" label="实训任务名称" width="100" align="center" />
        <el-table-column prop="classGrade" label="班级" width="140" align="center" />
        <el-table-column prop="name" label="姓名" align="center" />
        <el-table-column prop="studentNumber" label="学号" align="center" />
        <el-table-column label="累计盈亏" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.cumulativeProfitLoss > 0" style="color: #f98133">{{scope.row.cumulativeProfitLoss }}</span>
            <span v-else-if="scope.row.profit < 0" style="color: #36b9b2">{{scope.row.cumulativeProfitLoss}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="yield" label="收益率" align="center" />
        <el-table-column prop="Simulation" label="模拟交易实训成绩"  align="center"/>
        <el-table-column prop="experiment" label="实验报告成绩" align="center" />
        <el-table-column prop="totalAssets" label="总成绩" align="center" />
        <el-table-column prop="address" label="操作" align="center" width="300">
          <el-button size="mini" type="warning"  @click="report">实验报告</el-button>
          <el-button size="mini" type="primary"  @click="trade">交易记录</el-button>
        </el-table-column>
      </el-table>
      <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.index"
      :limit.sync="queryParams.size"
      @pagination="getlist"
    />
    <el-dialog
    title="成绩权重设置"
    :visible.sync="centerDialogVisible"
    width="30%"
    append-to-body
    >
  <el-form :inline="true" >
  <el-form-item label="模拟交易收益评分：">
  <el-input  style="width: 100px;"  placeholder="审批人"  class="input__inner" ></el-input>
  </el-form-item>
  <el-form-item label="实验报告评分：">
  <el-input style="width: 100px;"  placeholder="审批人"   class="input__inner"></el-input>
  </el-form-item>
  <el-row>
    <el-col :span="24"><div class="record" style="margin-bottom: 20px;">模拟交易收益评分设置:</div></el-col>
  </el-row>
  <el-form-item label="收益率：">
  <el-input style="width: 160px;"  placeholder="审批人"  class="input"></el-input>
  </el-form-item>
  <el-form-item label="以上：">
  <el-input style="width: 160px;"  placeholder="审批人" class="input-a"></el-input>
  </el-form-item>
  <el-form-item label="收益率：">
  <el-input style="width: 120px;"  placeholder="审批人"  class="input"></el-input>
  </el-form-item>
  <el-form-item label="至：">
  <el-input style="width: 120px;"  placeholder="审批人"  class="input"></el-input>
  </el-form-item>
  <el-form-item >
  <el-input style="width: 120px;"  placeholder="审批人" class="input-a"></el-input>
  </el-form-item>
  <el-form-item label="收益率：">
  <el-input style="width: 120px;"  placeholder="审批人"  class="input"></el-input>
  </el-form-item>
  <el-form-item label="至：">
  <el-input style="width: 120px;"  placeholder="审批人"  class="input"></el-input>
  </el-form-item>
  <el-form-item >
  <el-input style="width: 120px;"  placeholder="审批人" class="input-a"></el-input>
  </el-form-item>
  <el-form-item label="收益率：">
  <el-input style="width: 160px;"  placeholder="审批人"  class="input"></el-input>
  </el-form-item>
  <el-form-item label="以下：">
  <el-input style="width: 160px;"  placeholder="审批人" class="input-a"></el-input>
  </el-form-item>
  </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="centerDialogVisible = false"
      >保 存</el-button>
      <el-button
        type="info"
        @click="centerDialogVisible = false"
      >取 消</el-button>
    </span>
  </el-dialog>
    </div>
  </div>
</template>
<script>
import * as home from '@/api/teacher/index.js'
export default {
  name: 'Index',
  data() {
    return {
      centerDialogVisible:false,
      loading:true,
      queryParams: {
       
        index: 1,
       
        size: 10,
      
      },
      tasklist:null,
      classeslist:null,
      transactionlist:[],
      total:0
    }
  },
  computed: {},
  created() {
    this.getlist()
    this.taskname()
    this.classGrade()
  },
  methods: {
    getlist() {
       this.loading=true
      home.findByConditions(this.queryParams).then((res) => {
        if(res.code !== 200) return
        this.transactionlist=res.data.list
        this.total=res.data.total
        // console.log(this.transactionlist,"this.transactionlist");
        this.loading=false
      })
    },
    taskname() {
    // 转换日期格式
      home.getTrainingName().then((res) => {
        if(res.code !== 200) return
          this.tasklist=res.data
      })
    },
    classGrade() {
      home.getClassGrade().then((res) => {
        if(res.code !== 200) return
        this.classeslist=res.data
      })
    },
    trade() {
      this.$tab.openPage('交易记录', '/student/transactionRecords/index')
    },
      report() {
          this.$tab.openPage('实验报告', '/teacher/report')
      }
  }
}
</script>
<style lang='scss'  scoped>
.row-bg {
  display: flex;
  width: 100% !important;
}
.index {
  position: relative;
  background: #ffff;
  border-radius: 4px;
  padding: 20px;
  .record{
    margin-bottom: 20px !important;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #1D2129;
  }
}
.weight{
  position: absolute;
  right: 0;
  top: 20px;
}
 .input__inner{
  display: flex;
  margin-right: 30px;;
 &::after{
 display: block;
 // display: none;
 content: '%' !important;
 margin-left: 10px;
}
}
.input{
display: flex;
&::after{
 display: block;
 // display: none;
 content: '%' !important;
 margin-left: 10px;
}

}
.input-a{
display: flex;
&::after{
 // display: none;
 content: '分' !important;
 margin-left: 10px;
}
}
</style>
