<template>
  <el-row>
    <el-row>
      <el-form ref="searchForm" :model="searchForm" label-width="80px">
        <search-white-board :show-more="true" @search="list">
          <div slot="base">
            <el-row style="line-height: 40px; text-align: right;">
              <!-- <el-col :span="2"><label class="search-label">机构</label></el-col>
              <el-col :span="5">
                <select-organ v-model="searchForm.organIds" />
              </el-col> -->
            </el-row>
          </div>

          <div slot="more">
            <el-row style="line-height: 40px; text-align: right;">
              <el-col :span="2"><label class="search-label">小孩姓名</label></el-col>
              <el-col :span="5"><el-input v-model.trim="searchForm.childName" placeholder="请输入小孩姓名" clearable /></el-col>
              <el-col :span="2" :offset="1"><label class="search-label">手机号码</label></el-col>
              <el-col :span="5"><el-input v-model.trim="searchForm.phoneNumber" placeholder="请输入手机号码" clearable /></el-col>
              <el-col :span="2" :offset="1"><label class="search-label">课程</label></el-col>
              <el-col :span="5"><el-input v-model.trim="searchForm.openCourseName" placeholder="请输入课程" clearable /></el-col>
            </el-row>
            <el-row style="line-height: 40px; text-align: right;">
              <el-col :span="2"><label class="search-label">账号标识</label></el-col>
              <el-col :span="5">
                <el-input v-model.trim="searchForm.guardianId" placeholder="请输入账号标识" clearable />
              </el-col>
              <el-col :span="2" :offset="1"><label class="search-label">微信单号</label></el-col>
              <el-col :span="5">
                <el-input v-model.trim="searchForm.transactionId" placeholder="请输入微信单号" clearable />
              </el-col>
              <el-col :span="2" :offset="1"><label class="search-label">审核状态</label></el-col>
              <el-col :span="5">
                <el-select v-model="searchForm.state" placeholder="请选择审核状态" filterable style="width: 100%;" @change="list">
                  <el-option v-for="item in constants.SEARCH_OPEN_COURSE_REFUND_ENUM" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-col>
            </el-row>
            <el-row style="line-height: 40px; text-align: right;">
              <el-col :span="2"><label class="search-label">学年</label></el-col>
              <el-col :span="5">
                <select-school-year v-model="searchForm.schoolYear" clearable filterable @change="list" />
              </el-col>
              <el-col :span="2" :offset="1"><label class="search-label">学期</label></el-col>
              <el-col :span="5">
                <select-semester v-model="searchForm.semester" clearable filterable @change="list" />
              </el-col>
              <el-col :span="2" :offset="1"><label class="search-label">学校</label></el-col>
              <el-col :span="5">
                <select-school v-model="searchForm.schoolId" :clearable="true" :filterable="true" @change="searchChangeSchool" />
              </el-col>
            </el-row>
            <el-row style="line-height: 40px; text-align: right;">
              <el-col :span="2"><label class="search-label">年级</label></el-col>
              <el-col :span="5">
                <el-select v-model="searchForm.gradeName" placeholder="请选择年级" clearable filterable style="width: 100%;" @change="list">
                  <el-option v-for="item in constants.GRADE_NAME_LIST" :key="item" :label="item" :value="item" />
                </el-select>
              </el-col>
              <el-col :span="2" :offset="1"><label class="search-label">班级</label></el-col>
              <el-col :span="5">
                <el-select v-model="searchForm.className" placeholder="请选择班级" clearable filterable style="width: 100%;" @change="list">
                  <el-option v-for="item in constants.CLASS_NAME_LIST" :key="item" :label="item" :value="item" />
                </el-select>
              </el-col>
            </el-row>
          </div>
        </search-white-board>
      </el-form>
    </el-row>

    <el-row>
      <white-board>
        <el-row style="text-align: right;">
          <el-col :span="21">&nbsp;</el-col>
          <el-col :span="3">
            <el-button icon="el-icon-plus" type="success" plain @click="dialogVisible = true">导出Excel</el-button>
          </el-col>
        </el-row>

        <el-row style="padding: 10px 0px;">
          <el-table :data="tableData" style="width: 100%;" highlight-current-row stripe>
            <el-table-column prop="childName" label="小孩姓名" width="100" />
            <el-table-column label="家长手机号码" width="110">
              <template slot-scope="scope">{{ scope.row.phoneNumber | fmtPhoneNumber }}</template>
            </el-table-column>
            <el-table-column prop="openCourseName" label="课程" width="150" />
            <el-table-column label="课程价格" width="100">
              <template slot-scope="scope">
                <el-tag>{{ scope.row.openCoursePrice | moneyFormat }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="审核状态">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.state === -1" type="danger">未通过</el-tag>
                <el-tag v-if="scope.row.state === 0">待审核</el-tag>
                <el-tag v-if="scope.row.state === 1" type="success">已通过</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="schoolYear" label="学年" />
            <el-table-column prop="semester" label="学期" />
            <el-table-column prop="schoolName" label="学校名称" />
            <el-table-column label="年级名称">
              <template slot-scope="scope">{{ scope.row.gradeName | formatGradeName }}</template>
            </el-table-column>
            <el-table-column label="班级名称">
              <template slot-scope="scope">{{ scope.row.className | formatClassName }}</template>
            </el-table-column>
            <el-table-column prop="id" label="订单标识" width="150" />
            <el-table-column prop="transactionId" label="微信支付订单号" width="220" />
            <el-table-column prop="refundId" label="微信退款单号" width="220" />
            <el-table-column prop="guardianId" label="账号标识" width="150" />
            <el-table-column prop="applyRemarks" label="申请备注" />
            <el-table-column prop="createAt" label="申请时间" width="140" />
            <el-table-column prop="passedRemarks" label="审核备注" />
            <el-table-column prop="passedAt" label="审核时间" width="140" />
            <el-table-column label="操作" fixed="right">
              <template slot-scope="scope">
                <div v-if="scope.row.state === 0">
                  <el-button type="primary" plain @click="openAuditRefund(scope.$index, scope.row)">审核</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-row>

        <el-row>
          <el-pagination :current-page="searchForm.page" :page-sizes="[10, 20, 50, 100]" :page-size="50" layout="total, sizes, prev, pager, next, jumper" :total="total" small @size-change="changeSizeChange" @current-change="changeCurrentChange" />
        </el-row>
      </white-board>
    </el-row>

    <el-dialog :visible.sync="dialogVisible">
      <el-divider />
      <label slot="title" style="float: left;">导出Excel</label>

      <el-row style="text-align: left;">
        <el-col :span="20" :offset="2">
          <el-form ref="exportForm" :model="exportForm" :rules="exportFormRules" label-width="80px">
            <el-form-item label="学年" prop="schoolYear">
              <select-school-year v-model="exportForm.schoolYear" clearable filterable />
            </el-form-item>
            <el-form-item label="学期" prop="semester">
              <select-semester v-model="exportForm.semester" clearable filterable />
            </el-form-item>
            <el-form-item label="学校" prop="schoolId">
              <select-school v-model="exportForm.schoolId" :clearable="true" :filterable="true" />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-divider />
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="exportExcel">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="approvalDialogVisible">
      <el-divider />
      <label slot="title" style="float: left;">审核</label>

      <el-row style="text-align: left;">
        <el-col :span="20" :offset="2">
          <el-form ref="approvalForm" :model="approvalForm" :rules="approvalFormRules" label-width="120px">

            <el-form-item label="微信退课单号" prop="refundId">
              <el-input v-model.trim="approvalForm.refundId" placeholder="请输入微信退课单号" clearable />
            </el-form-item>
            <el-form-item label="审核备注" prop="remarks">
              <el-input v-model.trim="approvalForm.remarks" placeholder="请输入审核备注" clearable />
            </el-form-item>
            <el-form-item label="审核状态" prop="state">
              <el-select v-model="approvalForm.state" placeholder="请选择审核状态" filterable>
                <el-option v-for="item in constants.SEARCH_OPEN_COURSE_REFUND_ENUM" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-divider />
        <el-button @click="approvalDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAuditRefund">确 定</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>

<script>
import { SelectSchool } from '@/components/school'
import { SelectOrgan } from '@/components/organ'
import { SelectSchoolYear, SelectSemester } from '@/components/school-year-semester'
import refundApi from '@/api/refundApi'

export default {
  name: 'Order',
  components: {
    'select-school': SelectSchool,
    'select-organ': SelectOrgan,
    'select-school-year': SelectSchoolYear,
    'select-semester': SelectSemester
  },
  data() {
    return {
      searchForm: {
        childName: '',
        phoneNumber: '',
        openCourseName: '',
        guardianId: '',
        transactionId: '',
        state: '0',
        schoolYear: '',
        semester: '',
        schoolId: '',
        gradeName: '',
        className: '',
        organIds: [],

        page: 1,
        size: 50
      },
      total: 0,
      tableData: [],

      /* 导出Excel弹框标识 */
      dialogVisible: false,
      exportForm: {
        schoolYear: '', // 学年
        semester: '', // 学期
        schoolId: '' // 学校
      },
      exportFormRules: {
        schoolYear: [{ required: true, message: '请选择学年', trigger: 'blur' }],
        semester: [{ required: true, message: '请选择学期', trigger: 'blur' }],
        schoolId: [{ required: true, message: '请选择学校', trigger: 'blur' }]
      },

      /* 审核 */
      approvalDialogVisible: false,
      approvalForm: {
        openCourseRefundId: '', // 申请退课标识
        state: '1', // 状态
        remarks: '', // 审核备注
        refundId: '' // 微信退课单号
      },
      approvalFormRules: {
        state: [{ required: true, message: '请选择状态', trigger: 'blur' }],
        remarks: [{ required: true, message: '请输入审核备注', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.list()
  },
  methods: {
    searchChangeSchool(o) {
      if (o) {
        this.searchForm['schoolId'] = o.id
      } else {
        this.searchForm['schoolId'] = ''
      }

      this.list()
    },
    list() {
      this.tableData = []
      refundApi.page(this.searchForm).then(data => {
        this.total = data.total
        this.tableData = data.data
      })
    },
    changeSizeChange(val) {
      this.searchForm.size = val
      this.list()
    },
    changeCurrentChange(val) {
      this.searchForm.page = val
      this.list()
    },
    exportExcel() {
      this.$refs['exportForm'].validate((valid) => {
        if (!valid) {
          return
        }

        refundApi.exportExcel(this.exportForm).then(data => {
          this.dialogVisible = false
          this.$refs['exportForm'].resetFields()
        })
      })
    },
    openAuditRefund(index, row) {
      this.approvalForm['openCourseRefundId'] = row.id // 申请退课标识
      this.approvalDialogVisible = true
    },
    handleAuditRefund() {
      this.$refs['approvalForm'].validate((valid) => {
        if (!valid) {
          return
        }

        refundApi.auditRefund(this.approvalForm).then(data => {
          this.list()

          this.approvalDialogVisible = false
          this.$refs['approvalForm'].resetFields()
        })
      })
    }
  }
}
</script>

<style scoped>
</style>
