<template>
  <div>
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-4">
          <q-input
            @input="resetSearch"
            clearable
            filled
            v-model="msg.ClassName"
            label="课程名称"
            @clear="resetSearch"
            maxlength="20"
          />
        </div>
        <!-- <div class="col-4">
          <select-tree
            :treeData="TreeCategoryList"
            :defaultArray="returnString"
            nodeKey="CateId"
            :multiple="true"
            labelKey="CateName"
            childrenKey="ChildList"
            tipText="课程系列"
            @getChild="getChild"
          ></select-tree>
        </div> -->
        <div class="col-4">
          <q-select
            @input="resetSearch"
            filled
            v-model="msg.CourseSubject"
            :options="CourseSubjectList"
            option-label="SubjectName"
            option-value="Id"
            emit-value
            map-options
            label="所属科目"
            clearable
          />
        </div>
      </div>
    </div>
    <q-table
      :pagination="msg"
      selection="single"
      :selected.sync="selection"
      no-data-label="暂无相关数据"
      flat
      class="sticky-tow-column-table sticky-two-header-table"
      separator="none"
      :data="dataList"
      :columns="columns"
      row-key="ClassId"
      @update:selected="emitSel"
      table-class="table"
    >
     <template v-slot:body-cell-CourseName="props">
        <q-td :props="props">
            {{ props.row.CourseName }}
        </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>
    </q-table>
  </div>
</template>

<script>
import {
  queryCoursePage,
  queryCourseCategoryTree,
  deleteCourseInfo,
  querySaleplatList,
  getCourseSubject
} from "../../../../api/course/index";
import {
  getClassPruductList //获取日语培训列表
} from "../../../../api/sale/sale";
// import selectTree from "../../../../components/common/select-tree";
export default {
  components: {
    // selectTree
  },
  props: {
    select: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selection: [],
      columns: [
        {
          name: "CourseName",
          label: "课程",
          field: "CourseName",
          align: "left"
        },
        {
          name: "CourseSubjectName",
          required: true,
          label: "所属科目",
          align: "left",
          field: row => row.CourseSubjectName
        },
        // {
        //   name: "CateName",
        //   required: true,
        //   label: "系列",
        //   align: "left",
        //   field: row => row.CateName
        // },
        {
          name: "SellPrice",
          required: true,
          label: "直客价",
          align: "left",
          field: row => row.SellPrice.toFixed(2)
        }
      ],
      // msg: {
      //   pageIndex: 1,
      //   pageSize: 10,
      //   rowsPerPage: 10,
      //   CourseName: "",
      //   QCateIds: "",
      //   IsQPrice: 1,
      //   Status: "0",
      //   Saleplat: 0,
      //   CourseSubject: "", //所属科目
      //   ClassScrollType :2
      // },
      msg: {
        pageIndex: 1,
        pageSize: 8,
        rowsPerPage: 0,
        ClassName: "", //班级名称
        StartTime: "", //开始时间
        EndTime: "", //结束时间
        School_Id: "", //关联校区
        CouseId: 0, //课程id
        Teacher_Id: 0, //教师id
        Q_CanApply: "0", //是否可以报名 1是
        JoinStartTime: "", //报名截止日期开始
        JoinEndTime: "", //报名截止日期结束
        ClassNo: "", //班号
        CourseSubject: "", //所属科目
        CourseName:"",
        ClassScrollType :2,
        IsQuerySalePlat:1
      },
      CourseSubjectList: [],
      //课程分类树形列表
      TreeCategoryList: [],
      returnString: [], //默认值
      dataList: [],
      pageCount: 0
    };
  },
  mounted() {
    this.selection = this.select;
    this.getCourseList();
    this.queryCourseSubject();
    // this.getCategorytree();
  },
  methods: {
    emitSel(val) {
      this.$emit("select", val);
    },
    //获取课程分页列表
    getCourseList() {
      getClassPruductList(this.msg).then(res => {
        this.dataList = res.Data.PageData;
        this.pageCount = res.Data.PageCount;
      });
    },

    // 课程翻页
    changePage(val) {
      this.msg.pageIndex = val;
      this.getCourseList();
    },
    //获取分页列表
    // getCourseList() {
    //   this.loading = true;
    //   queryCoursePage(this.msg)
    //     .then(res => {
    //       this.loading = false;
    //       this.dataList = res.Data.PageData;
    //       this.pageCount = res.Data.PageCount;
    //     })
    //     .catch(() => {
    //       this.loading = false;
    //     });
    // },
    //重新查询
    resetSearch() {
      this.msg.pageIndex = 1;
      this.getCourseList();
    },
    //翻页
    // changePage(val) {
    //   this.msg.pageIndex = val;
    //   this.getCourseList();
    // },
    getCategorytree() {
      this.TreeCategoryList = [];
      var qMsg = {};
      queryCourseCategoryTree(qMsg).then(res => {
        this.TreeCategoryList = res.Data;
      });
    },
    queryCourseSubject() {
      getCourseSubject({}).then(res => {
        if (res.Code == 1) {
          this.CourseSubjectList = res.Data;
        }
      });
    },
    //分类改变
    getChild(cateObj) {
      var tempStr = "";
      if (cateObj && cateObj != "") {
        tempStr = cateObj;
      }
      this.msg.QCateIds = tempStr;
      this.msg.pageIndex = 1;
      this.getCourseList();
    }
  }
};
</script>
<style>
.table {
  max-height: 400px;
}

.table::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.table::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 2px;
}

.table::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 10px;
}

.table::-webkit-scrollbar-thumb:hover {
  background: #999;
}

.table::-webkit-scrollbar-corner {
  background: #204754;
}
</style>
