<template>
  <div>
    <el-dialog :close-on-click-modal="false" :visible.sync="diaShow" width="360px">
      <div v-show="exportType == 1">
        <div class="down-item">
          <p class="tit">是否将学生表现折线图一起导出</p>
          <el-radio-group v-model="downType" @change="changeDownType">
            <el-radio :label="1">不导出</el-radio>
            <el-radio :label="2">导出</el-radio>
          </el-radio-group>
        </div>
        <div class="down-item" v-show="downType == 2">
          <p class="tit">选择要导出的学生</p>
          <el-radio-group v-model="exportType">
            <el-radio :label="1">导出全部</el-radio>
            <el-radio :label="2">导出制定学生</el-radio>
          </el-radio-group>
        </div>
      </div>
      <ul v-show="exportType == 2">
        <p class="export-tit">选择学生</p>
        <el-table :data="exportStudent" @selection-change="handleSelectionChange" :max-height="300">
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="studentName" label="姓名" align="center"></el-table-column>
          <el-table-column prop="classRank" label="班名" align="center"></el-table-column>
          <el-table-column prop="correctRate" label="总正确率" align="center"><template slot-scope="scoped">{{
            scoped.row.correctRate }}%</template></el-table-column>
        </el-table>
      </ul>
      <div class="dialog-footer" slot="footer">
        <el-button v-show="downType == 2" size="small" type="primary" round @click="exportData(10)">导出前十</el-button>
        <el-button size="small" type="primary" round @click="exportData(0)">确 定</el-button>
        <el-button size="small" type="danger" round @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "exportDia",
  props: {
    diaShow: Boolean,
    exportStudent: Array
  },
  data() {
    return {
      downType: 1,
      exportType: 1,
      multipleSelection: [],
    }
  },
  watch: {
    diaShow: function (nVal) {
      if (nVal) {
        this.downType = 1
      }
    }
  },
  methods: {
    changeDownType() {
      this.exportType = 1
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    exportData(length) {
      let studentIds = []
      if (length) {
        studentIds = this.exportStudent.slice(0, 10).map(item => {
          return item.studentId
        })
      } else {
        studentIds = this.multipleSelection.map(item => {
          return item.studentId
        })
      }
      this.$emit('exportData', { studentIds: studentIds })
    },
    cancel() {
      if (this.exportType == 2) {
        this.exportType = 1
      } else {
        this.$emit('cancel')
      }
    }
  }
}
</script>