<template>
  <div class="questionpoint" style="z-index:99999">
    <el-dialog class="questionpoint-dialog" style="width:1200px;margin:0 auto;" title="知识点列表"
      :visible.sync="dialogVisible" @opened="dialogOpened" :close-on-click-modal="false">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
        class="sticky-column-table" separator="none" :data="data" :columns="columns"
        row-key="PointId" :selection="multiple?'multiple':'single'" :selected.sync="selectedArray">
        <template v-slot:top="props">
          <q-input @input="resetSearch" clearable style="width:50%;" standout="bg-primary text-white" v-model="msg.PointName" label="关键字"
            maxlength="20" @clear="resetSearch" />
          <q-space />
          <div class="page-option">
            <q-btn color="primary" class="q-mr-md" size="12px" icon="add" label="新增知识点"
              @click="IsShowPoint=true,clearMsg()">
              <q-popup-proxy>
                <q-banner v-if="IsShowPoint">
                  <div class="drop_NameDown" style="margin-top:20px;">
                    <q-input filled stack-label maxlength="100" v-model="setPointObj.PointName" :dense="false"
                      class="col-12 q-pb-lg" label="知识点名称" />
                  </div>
                  <q-card-actions align="right" class="bg-white" style="margin-top:20px;">
                    <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important"
                      @click="IsShowPoint=false" />
                    <q-btn label="确认" color="accent q-px-md" style="font-weight:400 !important" @click="savePoint()" />
                  </q-card-actions>
                </q-banner>
              </q-popup-proxy>
            </q-btn>
          </div>
        </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="edit" color="accent" style="font-weight:400" label="重命名"
              @click="isShowPointEdit=true,EditPoint(props.row)">
              <q-popup-proxy>
                <q-banner v-if="isShowPointEdit">
                  <div class="calenderDialog">
                    <div class="drop_NameDown" style="margin-top:20px;">
                      <q-input filled stack-label maxlength="100" v-model="setPointObj.PointName" :dense="false"
                        class="col-12 q-pb-lg" label="知识点名称" />
                    </div>
                    <q-card-actions align="right" class="bg-white">
                      <q-btn label="取消" flat color="grey-10" @click="isShowPointEdit=false"
                        style="font-weight:400 !important" />
                      <q-btn label="确认" color="accent q-px-md" style="font-weight:400 !important"
                        @click="savePoint()" />
                    </q-card-actions>
                  </div>
                </q-banner>
              </q-popup-proxy>
            </q-btn>
            <q-btn flat size="xs" icon="delete" color="negative" style="font-weight:400" @click="deletePoint(props.row)"
              label="删除" />
          </q-td>
        </template>
      </q-table>
      <div style="margin-top:20px;text-align:right">
        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important"
              @click="dialogVisible=false" />
        <q-btn label="选定" color="accent q-px-md" style="font-weight:400 !important;margin-left:10px;padding:0;" @click="SelectPoint" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    queryPointPageList,
    deleteQuestionPoint, //删除知识点
    addQuestionPoint, //保存知识点
  } from '../../api/question/question'

  export default {
    props: {
      //是否显示弹窗
      openDialog: {
        type: Boolean,
        default: false,
      },
      //课程编号
      CourseId: {
        type: String,
        default: 0,
      },
      //是否多选
      multiple: {
        type: Boolean,
        default: false,
      }
    },
    meta: {
      title: "知识点"
    },
    components: {

    },
    watch: {
      CourseId: {
        handler(newValue) {
          this.msg.CourseId = newValue;
          this.setPointObj.CourseId = newValue;
        },
        immediate: true
      },
      openDialog: {
        handler(newValue) {
          this.dialogVisible = newValue;
        },
        immediate: true
      },
      dialogVisible(newVal, oldVal) {
        if (!newVal) {
          this.$emit("closed");
        }
      },
    },
    data() {
      return {
        dialogVisible: false,
        columns: [{
            name: 'PointName',
            label: '知识点',
            field: 'PointName',
            align: 'left'
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'PointId'
          }
        ],
        data: [],
        loading: true,
        msg: {
          pageIndex: 1,
          pageSize: 5,
          rowsPerPage: 5,
          PointName: "",
          CourseId: 0
        },
        pageCount: 0,
        setPointObj: {
          PointId: 0, //知识点编号
          PointName: "", //知识点名称
          CourseId: 0, //课程编号
        },
        IsShowPoint: false, //是否选中新增知识点
        isShowPointEdit: false, //是否显示修改
        selectedArray: [],
      }
    },
    created() {

    },
    mounted() {
      this.currentUrl = this.$route.path
      this.getQuestionPointList()
    },
    methods: {
      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1
        this.loading = true
        this.getQuestionPointList()
      },
      //删除知识点
      deletePoint(item) {
        this.$q.dialog({
          title: "删除知识点",
          message: "你正在进行删除知识点行为，一旦执行无法找回，是否确认执行？",
          persistent: true,
          cancel: {
            label: "取消",
            flat: true
          },
          ok: {
            label: "确认",
            flat: true,
            focus: true
          }
        }).onOk(() => {
          deleteQuestionPoint({
            PointId: item.PointId
          }).then(res => {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '数据删除成功！',
              position: 'top'
            })
            this.getQuestionPointList()
          })
        });
      },
      //分页改变
      changePage(val) {
        this.msg.Status = this.StatusTemp ? this.StatusTemp.value : '-1'
        this.msg.pageIndex = val;
        this.loading = true
        this.getQuestionPointList()
      },
      //知识点分页列表
      getQuestionPointList() {
        queryPointPageList(this.msg).then(res => {
          this.loading = false
          this.data = res.Data.PageData
          this.pageCount = res.Data.PageCount
        }).catch(() => {
          this.loading = false
        })
      },
      //编辑知识点
      EditPoint(item) {
        this.setPointObj.PointId = item.PointId;
        this.setPointObj.PointName = item.PointName;
      },
      //保存知识点
      savePoint() {
        addQuestionPoint(this.setPointObj).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '数据保存成功！',
              position: 'top'
            })
            this.IsShowPoint = false;
            this.isShowPointEdit = false;
            this.clearMsg();
            this.getQuestionPointList()
          }
        });
      },
      //清空数据
      clearMsg() {
        this.setPointObj.PointId = 0;
        this.setPointObj.PointName = "";
      },
      dialogOpened() {

      },
      //选中知识点
      SelectPoint() {
        var tempArray = [];
        if (this.selectedArray && this.selectedArray.length > 0) {
          this.selectedArray.forEach(item => {
            tempArray.push({
              PointId: item.PointId,
              PointName: item.PointName
            });
          })
        }
        this.$emit("selected", tempArray);
        this.dialogVisible = false;
      },
    },
  }

</script>

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

</style>
