<template>
  <el-drawer :visible="selectVal" direction="rtl" size="80%" destroy-on-close @close="close">
    <!--    <el-row slot="title">
      <el-row>{{openCourse.name}} （{{openCourse.id}}）</el-row>
    </el-row>

    <el-row>
      <el-row>{{openCourse.schoolYear}}&nbsp;学年&nbsp;&nbsp;{{openCourse.semester}}&nbsp;学期&nbsp;{{openCourse.schoolName}}</el-row>
      <el-row>每周<el-tag>{{openCourse.cycle}}</el-tag>&nbsp;&nbsp;（{{openCourse.hours}}）</el-row>
      <el-row>
        <label>在读：<el-tag type="success">{{normalNum || '-'}}</el-tag>个</label>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <label>退课：<el-tag type="danger">{{refundNum || '-'}}</el-tag>个</label>
      </el-row>
    </el-row>-->

    <el-row style="padding: 10px 0px;">
      <el-table :data="tableData" style="width: 100%;" highlight-current-row stripe>
        <el-table-column label="小孩姓名" width="100" fixed>
          <template slot-scope="scope">{{ scope.row.childName }}</template>
        </el-table-column>
        <el-table-column label="家长手机号码" width="110" fixed>
          <template slot-scope="scope">{{ scope.row.phoneNumber | fmtPhoneNumber }}</template>
        </el-table-column>
        <el-table-column label="课后回家方式" width="100" fixed>
          <template slot-scope="scope">{{ scope.row.goHome }}</template>
        </el-table-column>
        <el-table-column label="开课名称" prop="name" width="150" />
        <el-table-column label="开课价格" prop="price" />
        <el-table-column label="星期" prop="cycle" />
        <el-table-column label="时间段" prop="hours" width="100" />
        <el-table-column label="订单状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.state === 0" type="success">支付成功</el-tag>
            <el-tag v-if="scope.row.state === -1" type="danger">已退费</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createAt" label="生成订单时间" width="140" />
        <el-table-column label="学年">
          <template slot-scope="scope">{{ scope.row.schoolYear }}</template>
        </el-table-column>
        <el-table-column prop="semester" label="学期">
          <template slot-scope="scope">{{ scope.row.semester }}</template>
        </el-table-column>
        <el-table-column prop="schoolName" label="学校名称" width="150">
          <template slot-scope="scope">{{ scope.row.schoolName }}</template>
        </el-table-column>
        <el-table-column label="年级名称">
          <template slot-scope="scope">{{ scope.row.gradeName }}</template>
        </el-table-column>
        <el-table-column label="班级名称">
          <template slot-scope="scope">{{ scope.row.className }}</template>
        </el-table-column>
        <el-table-column prop="id" label="订单标识" width="150" />
        <el-table-column prop="accountId" label="账号标识" width="150" />
      </el-table>
    </el-row>
  </el-drawer>
</template>

<script>
import guardianApi from '@/api/guardian/guardianApi'

export default {
  name: 'OrderItemDrawer',
  components: {

  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    openCourse: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableData: []
    }
  },
  computed: {
    selectVal: {
      get() {
        if (this.value) {
          this.list()
        }
        return this.value
      },
      set(newValue) {
        this.$emit('input', newValue)
      }
    }
  },
  mounted() {
  },
  methods: {
    close() {
      this.$emit('close')
    },
    list() {
      if (this.openCourse) {
        this.tableData = []
        guardianApi.findByAccountId(this.openCourse).then(data => {
          this.tableData = data
        })
      }
    }
  }
}
</script>

<style>
  .el-drawer__open .el-drawer.rtl {
    overflow-y: auto;
  }
</style>
