<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" style="padding-bottom: 30px">
      <el-form-item label="选择会员" prop="studentId">
        <student-select v-model="queryParams.studentId"/>
      </el-form-item>

      <el-form-item label="卡项类型" prop="cardTypeId">
        <el-select
          v-model="queryParams.cardTypeId"
          placeholder="状态"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in this.cardTypeOptions"
            :key="dict.cardTypeId"
            :label="dict.cardName"
            :value="dict.cardTypeId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="状态" prop="status">

        <el-select
          v-model="queryParams.status"
          placeholder="状态"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in this.statusOptions"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>

      </el-form-item>

      <el-form-item label="到期日期">
        <el-date-picker
          v-model="queryParams.expiryDate"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>
    <student-course-table ref="studentCourseTable"  :query-params="queryParams"/>
  </div>
</template>

<script>
import {
  select as cardTypeSelect
} from '@/api/school/sc/memberCardType'
import studentCourseTable from '@/views/school/student/components/studentMemberCard.vue'
import studentSelect from '@/components/sc/student/studentSelect'
import {getStudent} from "@/api/school/sc/student";
export default {
  name: 'studentMemberCard',

  components: {
    studentCourseTable,
    studentSelect
  },
  data() {
    return {
      loading: false,
      queryParams:{
        studentId:undefined,
        expiryDate:undefined,
        status:undefined,
        cardTypeId:undefined,
      },
      cardTypeOptions:[],
      statusOptions: [{
        value: 'ACTIVE',
        label: '激活'
      }, {
        value: 'INACTIVE',
        label: '未激活'
      }, {
        value: 'EXPIRED',
        label: '已过期'
      },
        {
          value: 'SUSPENDED',
          label: '已暂停'
        },
      ],
    }
  },
  created() {
      this.getMemberCardTypes()
  },
  methods: {
    getMemberCardTypes(){
      cardTypeSelect({}).then(response => {
        this.cardTypeOptions = response.data
      })
    },
    // 选择会员变更
    handleQuery() {

      this.$refs.studentCourseTable.loadData(this.queryParams.studentId)
    },
  }
}
</script>
