<template>
  <q-dialog v-model="persistent" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 800px;max-width:900px;max-height:450px;">
      <q-card-section>
        <div class="text-h6">选择模板</div>
      </q-card-section>
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" highlight-current-row height="300"
        style="width: 100%;" @selection-change="handleSelectionChange">
        <el-table-column label="操作" width="55">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.checked"></el-checkbox> 
　　　　　　　　<el-radio v-model="checked" :label="scope.row.ClassPlanId"></el-radio>
          </template>
        </el-table-column>
        <el-table-column label="创建日期" width="200">
          <template slot-scope="scope">{{ scope.row.CreateTime }}</template>
        </el-table-column>
        <el-table-column prop="name" label="模板名称">
          <template slot-scope="scope">{{ scope.row.LessonPlan }}</template>
        </el-table-column>
      </el-table>
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeCourseForm" />
        <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveCourseLoading"
          @click="saveCourse" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  import {
    GetClassLessPlanList
  } from '../../api/course/class'

  export default {
    data() {
      return {
        persistent: true,
        optionTitle: "",
        saveCourseLoading: false,
        tableData: [],
        checked: null, // 如果使用单选框,定义一个model值
        currentSelectItem: {} // 当前选中的值
      }
    },
    mounted() {
      this.initObj()
    },
    methods: {
      //初始化表单
      initObj() {
        GetClassLessPlanList({}).then(res => {
          console.log(res, '数据来了');
          if (res.Code == 1) {
            this.tableData = res.Data;
            this.tableData.forEach(x=>{
                x.checked = false;
            })
          }
        })
      },
      handleSelectionChange(row) {
        // el-radio单选框,不需要这一步
        this.tableData.forEach(item => {
          // 排他,每次选择时把其他选项都清除
          if (item.ClassPlanId !== row.ClassPlanId) {
            item.checked = false
          }
        })
        console.log(row)
        // 如果使用单选框,这里可以把当前选中的这一项先保存起来
        this.currentSelectItem = row
      }, 
      //选择保存
      saveCourse() {

      },
      //关闭弹窗
      closeCourseForm() {
        this.$emit('close')
        this.persistent = false
      },
    }
  }

</script>
