<template>
  <div class="bill">
    <div class="container">
      <div class="handle-box">
        <div class="d-inlie-block mb-2">
          <el-date-picker v-model="search.startTime" class="width100" size="small" type="datetime"
                          placeholder="开始日期" default-time="00:00:00">
          </el-date-picker>
          <span>至</span>
          <el-date-picker v-model="search.endTime" class="width100" size="small" type="datetime"
                          placeholder="结束日期" default-time="00:00:00">
          </el-date-picker>
        </div>
        <el-select v-model="search.orderType" placeholder="请选择订单类型" size="small" class="mb-2" clearable>
          <el-option key="0" label="短信充值" value="0">
          </el-option>
          <el-option key="1" label="交租" value="1">
          </el-option>
          <el-option key="2" label="语音电话充值" value="2">
          </el-option>
          <el-option key="3" label="系统续费" value="3">
          </el-option>
        </el-select>
        <el-select v-model="search.payType" placeholder="请选择支付方式" size="small" class="mb-2" clearable>
          <el-option key="0" label="微信支付" value="0">
          </el-option>
          <el-option key="1" label="支付宝支付" value="1">
          </el-option>
          <el-option key="2" label="现金支付" value="2">
          </el-option>
          <el-option key="3" label="银联支付" value="3">
          </el-option>
          <el-option key="4" label="积分支付" value="4">
          </el-option>
        </el-select>
        <el-button type="primary" size="small" class="mb-2" @click="searchMethods" style="background: #FA8E00; border: none;">查询</el-button>
        <el-button type="primary" size="small" class="mb-2" @click="batchExport" style="background: #FA8E00; border: none;">批量导出</el-button>
      </div>
      <el-table :data="tableData" border stripe class="table" ref="multipleTable" header-cell-class-name="table-header" empty-text="无" :height="documentHeight">
        <el-table-column prop="createTime" label="日期">
        </el-table-column>
        <el-table-column prop="orderNo" label="订单号">
        </el-table-column>
        <el-table-column prop="totalFee" label="金额">
        </el-table-column>
        <el-table-column label="类型">
          <template slot-scope="scope">
            <span>{{scope.row.orderType==0?'短信充值':scope.row.orderType==1?'交租':scope.row.orderType==2?'语音电话费用充值':scope.row.orderType==3?'系统续费':'未知'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="支付方式">
          <template slot-scope="scope">
            <span>{{scope.row.payType==0?'微信支付':scope.row.payType==1?'支付宝支付':scope.row.payType==2?'现金支付':scope.row.payType==3?'银联支付':scope.row.payType==4?'积分支付':'未知'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderStatus" label="状态">
          <template slot-scope="scope">
            <span>{{scope.row.orderStatus==0?'支付成功':scope.row.orderStatus==1?'转入退款':scope.row.orderStatus==2?'未支付':scope.row.orderStatus==3?'已关闭':scope.row.orderStatus==4?'已撤销（付款码支付）':scope.row.orderStatus==5?'用户支付中（付款码支付）':scope.row.orderStatus==6?'支付失败(其他原因，如银行返回失败)':'支付失败'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="describe" label="备注">
        </el-table-column>
        <el-table-column label="操作" v-if="info.type === 0">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="drawback(scope.row.orderNo)" v-if="scope.row.orderStatus==0">退款</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="text-center mt-2">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                       :page-sizes="[20,100, 200, 300, 400]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                       :total="pageTotal">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import {httpGet} from "../../api";
import utils from "../../utils/util";

export default {
  name: "bill",
  data(){
    return{
      tableData:[],
      documentHeight:0,
      pageSize:20,
      pageTotal:0,
      pageNum:1,
      search:{
        startTime:'',
        endTime:''
      }
    }
  },
  created() {
    this.info = JSON.parse(localStorage.getItem('info'))
    this.getOrderList()
    this.documentHeight = document.documentElement.clientHeight - 300
  },
  mounted() {
  },
  methods:{
    // 订单列表
    getOrderList() {
      let q=utils.validObject(this.search)
      let data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        orderBy: "create_time desc",
        q:JSON.stringify(q)
      }
      httpGet(data, this.$api.getOrderList).then(res => {
        if (res.code == 200) {
          res.data.list.map(li => {
            li.totalFee = (li.totalFee / 100).toFixed(2)
          })
          this.tableData = res.data.list
          this.pageTotal = res.data.total
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 退款
    drawback(no){
      let url = `/v1/pay/refunds/${no}/退款`
      httpGet('',url).then(res=>{
        if(res.data.success){
          this.$message.success('退款成功')
          this.getUserlist()
          this.getOrderList()
        }else{
          this.$message.error(res.data.msg)
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getOrderList()
    },
    // 批量导出
    batchExport(){},
    // 查询
    searchMethods(){
      this.getOrderList()
    },
  }
}
</script>

<style scoped>

</style>
