<template>
  <div>
    <Dec :content="content" />
    <div class="blend">
      <div class="top-box">
        <el-button type="primary" @click="creattest">创建考试</el-button>
      </div>
      <el-row style="height:calc(100% - 56px);">
        <el-col :span="6" style="height:100%;border-right:1px solid #eee">
          <ListBox
            ref="listbox"
            title="考试"
            title-bg="#ccc"
            :data="listData"
            active-color="rgb(64, 158, 255)"
            :acitve-index="1"
            @clicklist="clicklist"
            @removelist="removelist"
            @submitname="submitname"
          />
        </el-col>
        <el-col :span="18" style="padding:10px;height:100%;">
          <p style="margin:0;line-height:40px;font-size:12px;">考试时间：2020年5月1日~2020年5月3日<el-button size="small" icon="el-ump-daochu" style="float:right">批量导出考场名单</el-button></p><div style="clear:both" />

          <div class="class-room">
            <div class="class-item" @mousemove="hoverIndex = 0" @mouseout="hoverIndex = -1" @click="listDetail('1234')">
              <el-row>
                <el-col :span="7" style="font-size:80px;"><i class="el-ump-banjiguanli" /></el-col>
                <el-col :span="17">
                  <p>考场号：001</p>
                  <p>考场人数：30人</p>
                  <p>可见范围：全校可见</p>
                  <div v-show="hoverIndex==0" class="btn-group">
                    <i class="el-ump-daochu " />
                    <i class="el-icon-delete" @click.self="delet($event,'1234')" />
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="class-item" @mousemove="hoverIndex = 1" @mouseout="hoverIndex = -1">
              <el-row>
                <el-col :span="7" style="font-size:80px;"><i class="el-ump-banjiguanli" /></el-col>
                <el-col :span="17">
                  <p>考场号：002</p>
                  <p>考场人数：30人</p>
                  <p>可见范围：全校可见</p>
                  <div v-show="hoverIndex==1" class="btn-group">
                    <i class="el-ump-daochu danger" />
                    <i class="el-icon-delete" />
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="class-item" @mousemove="hoverIndex = 2" @mouseout="hoverIndex = -1">
              <el-row>
                <el-col :span="7" style="font-size:80px;"><i class="el-ump-banjiguanli" /></el-col>
                <el-col :span="17">
                  <p>考场号：003</p>
                  <p>考场人数：30人</p>
                  <p>可见范围：全校可见</p>
                  <div v-show="hoverIndex==2" class="btn-group">
                    <i class="el-ump-daochu danger" />
                    <i class="el-icon-delete" />
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="class-item" @mousemove="hoverIndex = 3" @mouseout="hoverIndex = -1">
              <el-row>
                <el-col :span="7" style="font-size:80px;"><i class="el-ump-banjiguanli" /></el-col>
                <el-col :span="17">
                  <p>考场号：002</p>
                  <p>考场人数：30人</p>
                  <p>可见范围：全校可见</p>
                  <div v-show="hoverIndex==3" class="btn-group">
                    <i class="el-ump-daochu danger" />
                    <i class="el-icon-delete" />
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!--创建考试-->
    <el-dialog
      title="创建混班考试"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="随机划分考场" name="first">
          <el-form ref="random" :model="random" label-width="100px">
            <el-form-item label="考试名称">
              <el-input v-model="random.name" style="width:350px;" />
            </el-form-item>
            <el-form-item label="考试时间">
              <el-date-picker
                v-model="random.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width:350px;"
              />
            </el-form-item>
            <el-form-item label="选择年级">
              <el-select v-model="random.grade" placeholder="请选择" style="width:350px;">
                <el-option value="1">一年级</el-option>
                <el-option value="2">二年级</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择班级">
              <el-select v-model="random.classes" multiple placeholder="请选择" style="width:350px;">
                <el-option value="1">1班</el-option>
                <el-option value="2">2班</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="每个考场人数">
              <el-input v-model="random.number" style="width:350px;" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="按考试成绩划分考场" name="second">
          <el-form ref="result" :model="result" label-width="100px">
            <el-form-item label="考试名称">
              <el-input v-model="result.name" style="width:350px;" />
            </el-form-item>
            <el-form-item label="考试时间">
              <el-date-picker
                v-model="result.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width:350px;"
              />
            </el-form-item>
            <el-form-item label="选择年级">
              <el-select v-model="result.grade" placeholder="请选择" style="width:350px;">
                <el-option value="1">一年级</el-option>
                <el-option value="2">二年级</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择班级">
              <el-select v-model="result.classes" multiple placeholder="请选择" style="width:350px;">
                <el-option value="1">1班</el-option>
                <el-option value="2">2班</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="导入成绩">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <el-link type="primary" style="margin-left:35px;">下载成绩单模板</el-link>
              </el-upload>
            </el-form-item>
            <el-form-item label="每个考场人数">
              <el-input v-model="result.number" style="width:350px;" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Dec from '@/components/Dec'
import ListBox from '@/components/ListBox'
export default {
  name: 'Blend',
  components: {
    Dec,
    ListBox
  },
  data() {
    return {
      content: '考室信息短期有效，支持随机快速创建或自定义上传',
      value: 0,
      searchtext: '',
      hoverIndex: -1,
      dialogVisible: false,
      dialogVisible1: true,
      activeName: 'first',
      listData: [
        { id: 0, name: '2020年上学期中考试2020年上学期中考试' },
        { id: 1, name: '2020年入学考试' }
      ],
      random: {
        name: '',
        date: '',
        grade: '',
        classes: '',
        number: ''
      },
      result: {
        name: '',
        date: '',
        grade: '',
        classes: '',
        number: ''
      }
    }
  },
  methods: {
    search() {
      console.log(1)
    },
    clicklist(index) {
      console.log(index)
    },
    removelist(index) {
      console.log(index)
    },
    submitname(index) {
      this.listData[index].edit = false
    },
    creattest() {
      this.dialogVisible = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    listDetail(id) {
      this.$router.push({ path: '/classes/blendDetail', query: { id }})
      console.log(id)
    },
    delet(event, id) {
      event.stopPropagation()
      console.log(id)
    }
  }
}
</script>
<style scoped>
.blend{
    max-width: 1100px;
    height:calc(100vh - 115px);
    margin:0 auto;
    background: #fff;
    margin-top:15px;
    padding:20px;
}
.top-box{
    padding-bottom: 15px;
    border-bottom: 1px solid #ccc;
}
.class-item{
    width:49%;
    float: left;
    border:1px solid #888;
    padding:10px 0;
    border-radius: 20px;
    margin-bottom:5px;
    position: relative;
}
.class-item:nth-child(2n+1){
    margin-right:2%;
}
.class-item p span{
    font-size: 12px;
    color:#888;
}
.class-item .left20{
    margin-left: 20px;
}
.class-item .left30{
    margin-left: 30px;
}
.btn-group{
    font-size: 20px;
    position: absolute;
    top:0px;
    right:20px;
}
.btn-group i{
    cursor: pointer;
    margin-right: 5px;
}
.class-room{
    height:calc(100% - 32px);
    overflow: auto;
}
</style>
