<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"><el-button v-if="scope.row.state === 0" type="danger" @click="refund(scope.row)">退费</el-button></template>
        </el-table-column>
        <el-table-column prop="childName" label="小孩姓名" width="100" fixed />
        <el-table-column label="家长手机号码" width="110" fixed>
          <template slot-scope="scope">{{ scope.row.phoneNumber | fmtPhoneNumber }}</template>
        </el-table-column>
        <el-table-column prop="goHome" label="课后回家方式" width="100" fixed />
        <el-table-column label="状态" width="100" fixed>
          <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="gradeName" label="年级名称" />
        <el-table-column prop="className" label="班级名称" />
        <el-table-column prop="openCourseOrderId" label="订单标识" width="150" />
        <el-table-column prop="openCourseOrderItemId" label="订单项标识" width="150" />
        <el-table-column prop="transactionId" label="微信支付订单号" width="220" />
        <el-table-column prop="accountId" label="账号标识" width="150" />
      </el-table>
    </el-row>
  </el-drawer>
</template>

<script>
import openCourseApi from '@/api/openCourseApi'
import refundApi from '@/api/refundApi'
export default {
  name: 'OrderItemDrawer',
  components: {
  },
  props: {
    value: {
      type: Boolean
    },
    openCourse: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      tableData: [],
      normalNum: '', // 正常
      refundNum: '' // 退课
    }
  },
  computed: {
    selectVal: {
      get() {
        if (this.value) {
          this.list()
        }
        return this.value
      },
      set(newValue) {
        this.$emit('input', newValue)
      }
    }
  },
  mounted() {
  },
  methods: {
    refund(val) {
      const form = { 'openCourseOrderItemId': val.openCourseOrderItemId,
        'accountId': val.accountId,
        'remarks': '后台手动统一申请退课',
        'wxmpFormId': val.transactionId
      }
      refundApi.refund(form).then(data => {
        this.$message.success('退费提交成功')
        this.close()
      }).catch(e => {
        this.$message.error('退费审核中')
      })
    },
    close() {
      this.$emit('close')
    },
    list() {
      if (this.openCourse) {
        this.tableData = []
        openCourseApi.openCourseOrderItem(this.openCourse.id).then(data => {
          this.tableData = data

          this.normalNum = data.filter(item => item.state === 0).length
          this.refundNum = data.filter(item => item.state === -1).length
        })
      }
    }
  }
}
</script>

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