<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">
          <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>
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-8">
          <p class="yueke-title">已选课程：<font class="yueke-CourseName" v-for="(item,index) in selection"
              :key="`s_`+index">
              <span>{{index+1}}、</span>
              {{item.CourseName}}
            </font>
          </p>
        </div>
      </div>
    </div>

    <q-table :pagination="msg" :selection="mode==2?'multiple':'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"
      :selected-rows-label="getSelectedString" 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 {
    getCourseSubject
  } from "../../../../api/course/index";
  import {
    getClassPruductList //获取日语培训列表
  } from "../../../../api/sale/sale";

  export default {
    components: {
    },
    props: {
      select: {
        type: Array,
        default: () => []
      },
      mode: {
        type: Number, //1:约课，2：班课,3-Vip
        default: 1
      },
    },
    data() {
      return {
        selection: [],
        columns: [{
            name: "CourseName",
            label: "课程",
            field: "CourseName",
            align: "left"
          },
          {
            name: "CourseSubjectName",
            required: true,
            label: "所属科目",
            align: "left",
            field: row => row.CourseSubjectName
          },
          {
            name: "SellPrice",
            required: true,
            label: "售价",
            align: "left",
            field: row => row.SellPrice.toFixed(2)
          },
          {
            name: "SellPriceType",
            required: true,
            label: "价格类型",
            align: "left",
            field: row => row.SellPriceType == 1 ? '课程总价' : (row.SellPriceType == 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,
          QIsVipCourse: 0,
        },
        CourseSubjectList: [],
        dataList: [],
        pageCount: 0
      };
    },
    mounted() {
      this.selection = this.select;
      this.getCourseList();
      this.queryCourseSubject();
    },
    methods: {
      // 多选
      getSelectedString() {
        return this.selection.length === 0 ? '' :
          `${this.selection.length} record${this.selection.length > 1 ? 's' : ''} selected of ${this.dataList.length}`
      },
      emitSel(val) {
        this.$emit("select", val);
      },
      //获取课程分页列表
      getCourseList() {
        if (this.mode == 2) {
          this.msg.QIsVipCourse = 1;
        } else if (this.mode == 3) {
          this.msg.QIsVipCourse = 2;
        }
        getClassPruductList(this.msg).then(res => {
          this.dataList = res.Data.PageData;
          this.pageCount = res.Data.PageCount;
        });
      },
      // 课程翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getCourseList();
      },
      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getCourseList();
      },
      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;
  }

  .yueke-title {
    margin-top: 0;
    margin-bottom: 0;
  }

  .yueke-CourseName {
    margin-right: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 5px;
    margin-bottom: 0;
  }

  .yueke-CourseName span {
    color: #2961fe;
  }

</style>
