<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>退费管理
    </h2>
    <div class="m-core">
      <!-- 搜索类型 -->
      <el-form :inline="true"
               class="searchForm"
               v-model.trim="searchForm">
        <el-form-item prop='organId'>
          <el-select class='multiple'
                     v-model.trim="searchForm.organId"
                     clearable
                     filterable
                     placeholder="请选择分部">
            <el-option v-for="(item,index) in organList"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker style="width:410px;"
                          v-model.trim="orderDate"
                          type="daterange"
                          value-format="yyyy-MM-dd"
                          @change="searchOrderDate"
                          range-separator="至"
                          start-placeholder="申请开始日期"
                          end-placeholder="申请结束日期"
                          :picker-options="{
        firstDayOfWeek: 1
    }">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="search"
                     type="danger">搜索</el-button>
          <el-button @click="onReSet"
                     type="primary">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <div class="tableWrap">
        <el-table :data='tableList'
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column align='center'
                           width="150"
                           prop="createTime"
                           label="申请时间">
            <template slot-scope="scope">
              <div>
                {{scope.row.createTime | dateForMinFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="orderNo"
                           label="原订单编号">
          </el-table-column>
          <el-table-column align='center'
                           prop="studentPaymentOrder.expectAmount"
                           label="应付金额">
            <template slot-scope="scope">
              <div>
                {{scope.row.studentPaymentOrder.expectAmount | moneyFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="studentPaymentOrder.actualAmount"
                           label="实付金额">
            <template slot-scope="scope">
              <div>
                {{scope.row.studentPaymentOrder.actualAmount | moneyFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="user.username"
                           label="学员姓名">
          </el-table-column>
          <el-table-column align='center'
                           prop="remark"
                           label="退费说明">
          </el-table-column>
          <el-table-column align='center'
                           prop="expectAmount"
                           label="预退费金额">
            <template slot-scope="scope">
              <div>
                {{scope.row.expectAmount| moneyFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="actualAmount"
                           label="实退费金额">
            <template slot-scope="scope">
              <div>
                {{scope.row.actualAmount| moneyFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           label="退费状态">
            <template slot-scope="scope">
              {{ scope.row.status | returnStatus }}
            </template>
          </el-table-column>
          <el-table-column align='center'
                           label="操作">
            <template slot-scope="scope"
                      v-if="scope.row.status == 'WAIT_PAYMENT'">
              <el-button @click="onBackMoney(scope.row)"
                         v-permission="'vipGroupManage/applyRefundAudit'"
                         type="text">退费</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="pageInfo.total"
                    :page.sync="pageInfo.page"
                    :limit.sync="pageInfo.limit"
                    :page-sizes="pageInfo.page_size"
                    @pagination="getList" />
      </div>
      <el-dialog title="退费确认"
                 :visible.sync="backStatus"
                 @close="onFormClose('ruleForm')"
                 width="500px">
        <el-form :model="form"
                 :rules="rules"
                 ref="ruleForm">
          <el-form-item label="退费路径"
                        prop="name"
                        :label-width="formLabelWidth">
            <el-input disabled
                      value="余额"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="退费金额"
                        prop="amount"
                        :label-width="formLabelWidth">
            <el-input v-model.trim.number="form.amount"
                      autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer"
              class="dialog-footer">
          <el-button type="danger"
                     @click="onTeachingSubmit('ruleForm', 'REJECT')">拒绝退费</el-button>
          <el-button type="primary"
                     @click="onTeachingSubmit('ruleForm', 'DONE')">确认退费</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import { studentRefundsQueryPage, applyRefundAudit } from '@/api/orderManager'
import { getEmployeeOrgan } from '@/api/buildTeam'
import store from '@/store'
export default {
  components: { pagination },
  name: 'backMoney',
  data () {
    return {
      orderDate: null,
      searchForm: {
        startTime: null,
        endTime: null,
        organId: null
      },
      tableList: [],
      organList: [],
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      backStatus: false,
      formLabelWidth: '100px',
      form: {
        id: null,
        amount: null,
      },
      rules: {
        amount: [{ required: true, type: 'number', message: '请输入金额', trigger: 'blur' }],
      },
    }
  },
  mounted () {
    getEmployeeOrgan().then(res => {
      if (res.code == 200) {
        this.organList = res.data;
      }
    })

    var now = new Date();
    var startDate = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())).toISOString().slice(0, 10);
    var endDate = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())).toISOString().slice(0, 10);
    this.orderDate = [];
    this.orderDate.push(startDate)
    this.orderDate.push(endDate)
    this.getList()
  },
  methods: {
    search () {
      this.pageInfo.page = 1;
      this.getList()
    },
    onTeachingSubmit (formName, status) { // 添加数据
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form.status = status
          applyRefundAudit(this.form).then(res => {
            if (res.code == 200) {
              this.$message.success('操作成功')
              this.backStatus = false
              this.getList()
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          return false;
        }
      })
    },
    getList () {
      let params = this.searchForm
      params.rows = this.pageInfo.limit
      params.page = this.pageInfo.page
      if (this.orderDate?.length > 0) {
        params.startTime = this.orderDate[0]
        params.endTime = this.orderDate[1]
      } else {
        params.startTime = null
        params.endTime = null
      }
      studentRefundsQueryPage(params).then(res => {
        let result = res.data
        if (res.code == 200) {
          this.tableList = result.rows
          this.pageInfo.total = result.total
        }
      })
    },
    searchOrderDate (value) {
      if (value) {
        this.searchForm.startTime = value[0] + ' 00:00:00'
        this.searchForm.endTime = value[1] + ' 23:59:59'
      } else {
        this.searchForm.startTime = null
        this.searchForm.endTime = null
      }
    },
    onReSet () {
      this.orderDate = null
      this.searchForm = {
        startTime: null,
        endTime: null
      }
    },
    onFormClose (formName) { // 关闭弹窗重置验证
      this.$refs[formName].clearValidate()
    },
    onBackMoney (row) { // 退费
      this.backStatus = true
      this.form = {
        id: row.id,
        amount: row.expectAmount
      }
      // applyRefundAudit()
    }
  }
}
</script>
<style lang="scss">
</style>