<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%;" @row-click="singleElection">
        <el-table-column label="" width="65">
          <template slot-scope="scope">
            <el-radio class="radio" v-model="templateSelection" :label="scope.$index">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column label="创建日期" width="200">
          <template slot-scope="scope">{{getCreatTime(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: [],
        checkedRow: {},
        templateSelection: ''
      }
    },
    mounted() {
      this.initObj()
    },
    methods: {
      //初始化表单
      initObj() {
        GetClassLessPlanList({}).then(res => {

          if (res.Code == 1) {
            this.tableData = res.Data;
            this.tableData.forEach(x => {
              x.checked = false;
            })
          }
        })
      },
      singleElection(row) {
        this.templateSelection = this.tableData.indexOf(row);
        this.checkedRow = row;
      },
      //选择保存
      saveCourse() {
        if (JSON.stringify(this.checkedRow) != "{}") {
            this.$emit('success',this.checkedRow);
            this.closeCourseForm();
        } else {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择模板`
          })
        }
      },
      getCreatTime(time){
        return time.replace("T", " ");
      },
      //关闭弹窗
      closeCourseForm() {
        this.$emit('close')
        this.persistent = false
      },
    }
  }

</script>
