<template>
  <div class="page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
      </div>
      <div class="page-option">
        <q-btn-dropdown outline color="dark" label="添加教案">
          <q-list>
            <q-item clickable v-close-popup>
              <q-item-section>
                <q-item-label @click="EditTeachPlan(null)">新增教案</q-item-label>
              </q-item-section>
            </q-item>
            <q-item clickable v-close-popup>
              <q-item-section>
                <q-item-label @click="IsShowTeachUploadForm=true">上传教案</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-btn-dropdown>
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-tow-column-table"
        separator="none" title="教案信息" :data="data" :columns="columns" row-key="name">
        <template v-slot:body-cell-CoverImg="props">
          <q-td :props="props">
            <q-avatar square size="100px">
              <img :src="props.value" />
            </q-avatar>
          </q-td>
        </template>
        <template v-slot:body-cell-CourseIntro="props">
          <q-td :props="props">
            <span v-html="props.value"></span>
          </q-td>
        </template>
        <template v-slot:body-cell-Status="props">
          <q-td :props="props">
            <q-badge :color="props.value==1?'negative':'primary'" :label="props.value==0?'正常':'禁用'" />
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <q-btn flat size="xs" icon="iconfont icon-shanchu" color="accent" style="font-weight:400" label="删除"
              @click="deleteTeach(props.row)"></q-btn>
            <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
              @click="EditTeachPlan(props.row)" />
          </q-td>
        </template>
      </q-table>
      <teachplan-form v-if="IsShowTeachForm" :CourseId="CourseId" :save-obj="teachPlanObj" @close="closeTeachSaveForm"
        @success="refreshPage">
      </teachplan-form>
      <teachupload-form v-if="IsShowTeachUploadForm" :CourseId="CourseId" :save-obj="teachPlanObj"
        @close="closeTeachUploadForm" @success="refreshPage">
      </teachupload-form>
    </div>
  </div>
</template>

<script>
  import {
    queryTeachPlanPage,
    removeTeachPlanInfo
  } from '../../api/course/index'
  import teachplanForm from '../../components/course/teachplan-form'
  import teachuploadForm from '../../components/course/teachupload-form'

  export default {
    meta: {
      title: "教案管理"
    },
    components: {
      teachplanForm,
      teachuploadForm
    },
    data() {
      return {
        currentUrl: "",
        columns: [{
            name: 'PlanId',
            label: '教案编号',
            field: 'PlanId',
            align: 'left'
          },
          {
            name: 'PlanName',
            required: true,
            label: '教案名称',
            align: 'left',
            field: row => row.PlanName
          },
          {
            name: 'CreateByName',
            label: '创建人',
            field: 'CreateByName',
            align: 'left'
          },
          {
            name: 'UpdateTimeStr',
            label: '更新时间',
            field: 'UpdateTimeStr',
            align: 'left'
          },
          {
            name: 'Status',
            label: '状态',
            align: 'left',
            field: 'Status'
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'PlanId'
          }
        ],
        data: [],
        loading: true,
        msg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
          CourseId: 0,
        },
        CourseId: 0,
        pageCount: 0,
        IsShowTeachForm: false,
        IsShowTeachUploadForm: false,
        teachPlanObj: null,
      }
    },
    created() {
      if (this.$route.query.CourseId) {
        this.CourseId = this.$route.query.CourseId
        this.msg.CourseId = this.CourseId;
      }
    },
    mounted() {
      this.currentUrl = this.$route.path
      this.getteachplanList();
    },
    methods: {
      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getteachplanList();
      },
      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getteachplanList()
      },
      //获取菜单分页列表
      getteachplanList() {
        this.loading = true;
        queryTeachPlanPage(this.msg).then(res => {
          this.loading = false
          this.data = res.Data.PageData
          this.pageCount = res.Data.PageCount
        }).catch(() => {
          this.loading = false
        })
      },
      //刷新页面
      refreshPage() {
        this.IsShowTeachForm = false;
        this.IsShowTeachUploadForm = false;
        this.getteachplanList();
      },
      //新增修改菜单
      EditTeachPlan(obj) {
        if (obj) {
          this.teachPlanObj = obj
        } else {
          this.teachPlanObj = null
        }
        if (obj.PlanNodeType == 0) {
          this.IsShowTeachForm = true;
          this.IsShowTeachUploadForm = false;
        } else if (obj.PlanNodeType == 1) {
          this.IsShowTeachForm = false;
          this.IsShowTeachUploadForm = true;
        }
      },
      //关闭弹窗
      closeTeachSaveForm() {
        this.IsShowTeachForm = false
      },
      closeTeachUploadForm() {
        this.IsShowTeachUploadForm = false;
      },
      //删除教案
      deleteTeach(obj) {
        var that = this;
        var delMsg = {
          PlanId: obj.PlanId,
        };
        var tipMsg = "是否删除【" + obj.PlanName + "】教案?";;
        this.$q.dialog({
          title: '提示信息',
          message: tipMsg,
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          removeTeachPlanInfo(delMsg).then(res => {
            if (res.Code == 1) {
              that.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '操作成功',
                position: 'top'
              })
              that.getteachplanList();
            }
          })
        }).onCancel(() => {

        });
      }
    }
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass');

</style>
