<template>
  <div class="app-container">
    <recharge-table :view="view" :query="query" ref="table" :list-api="incomeBillList">
      <template v-slot:row-operator="d">
        <el-button
          size="small"
          type="text"
          icon="el-icon-view"
          @click="handleView(d.row)"
        >详情</el-button>
        <el-button
          size="small"
          type="text"
          icon="el-icon-refresh"
          @click="refreshPayResult([d.row.billId])"
          v-if="canRefresh(d.row)"
        >刷新支付结果</el-button>
        <el-button
          size="small"
          type="text"
          icon="el-icon-refresh"
          @click="rechargeDevice(d.row.billId)"
          v-if="canRechargeDevice(d.row)"
        >手动设备充值</el-button>
        <el-button
          size="small"
          type="text"
          icon="el-icon-refresh"
          @click="handleRefund(d.row)"
          v-show="canRefund(d.row)"
        >订单退款</el-button>
      </template>
    </recharge-table>

    <!-- 退款 -->
    <el-dialog :visible.sync="showRefund" title="退款" width="400px">
      <el-form :model="refundForm" :rules="refundRules">
        <el-form-item label="退款金额" prop="refundAmount">
          <el-input-number v-model="refundForm.refundAmount" placeholder="请输入退款金额" /> 元
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitRefund" :loading="refundLoading">确 定</el-button>
        <el-button @click="showRefund = false" >取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  getBill,
  delBill,
  addBill,
  updateBill,
  refreshPayResult,
  rechargeDevice
} from '@/api/system/recharge'
import { incomeBillList, mchRefundBill } from '@/api/mch/bill'
import { $view } from '@/utils/mixins'
import RechargeTable from '@/views/system/recharge/components/RechargeTable.vue'

export default {
  name: "MchRecharge",
  mixins: [$view],
  components: { RechargeTable},
  props: {
    query: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      refundRules: {
        refundAmount: [
          { required: true, type: 'number', message: "退款金额不能为空", trigger: "blur" }
        ]
      },
      showRefund: false,
      refundForm: {},
      refundLoading: false,
    };
  },
  computed: {
    canRefresh() {
      return (row) => {
        return row.status === '0' || row.status === '6';
      }
    },
    canRechargeDevice() {
      return (row) => {
        return row.status === '2' && row.deviceRechargeStatus !== '1';
      }
    },
    canRefund() {
      return (row) => {
        return row.status === '2' && row.money > 0;
      }
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    incomeBillList,
    submitRefund() {
      this.refundLoading = true;
      mchRefundBill(this.refundForm.billId, this.refundForm.refundAmount).then(res => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.showRefund = false;
          this.getList();
        }
      }).finally(() => {
        this.refundLoading = false;
      })
    },
    handleView(row) {
      this.$router.push(`/bill/recharge/${row.billId}`)
    },
    handleRefund(row) {
      this.refundForm = {
        billId: row.billId,
        refundAmount: row.money,
      }
      this.showRefund = true;
    },
    rechargeDevice(id) {
      rechargeDevice(id).then(res => {
        if (res.code === 200) {
          this.getList();
          this.$message.success("操作成功");
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    refreshPayResult(ids) {
      refreshPayResult(ids).then(res => {
        if (res.code === 200) {
          this.getList();
          this.$message.success("刷新成功");
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    /** 查询充值记录列表 */
    getList() {
      this.$refs.table.getList();
    },
  }
};
</script>
