<template>
  <div class="app-container">
    <recharge-table :view="view" :query="query" ref="table">
      <template v-slot:row-operator="d">
        <el-button
          size="small"
          type="text"
          icon="el-icon-view"
          @click="handleView(d.row)"
          v-has-permi="['system:bill:query']"
        >详情</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-s-promotion"
          @click="rechargeDevice(d.row.billId)"
          v-if="canRechargeDevice(d.row)"
        >设备充值</el-button>
        <el-button
          size="small"
          type="text"
          icon="el-icon-bank-card"
          @click="handleRefund(d.row)"
          v-has-permi="['system:bill:refund']"
          v-show="canRefund(d.row)"
        >退款</el-button>
        <el-button
          size="small"
          type="text"
          icon="el-icon-close"
          @click="handleClose(d.row)"
          v-has-permi="['system:bill:close']"
          v-show="canClose(d.row)"
        >结束订单</el-button>
      </template>
    </recharge-table>

    <!--退款对话框-->
    <refund-dialog :show.sync="showRefund" :bill-id="row.billId" :amount="row.money - row.refundAmount" @success="getList"/>

  </div>
</template>

<script>
import {
  refreshPayResult,
  rechargeDevice,
  closeBill
} from '@/api/system/recharge'
import { $recharge, $showColumns, $view } from '@/utils/mixins'
import RefundDialog from '@/views/system/recharge/components/RefundDialog.vue'
import RechargeTable from '@/views/system/recharge/components/RechargeTable.vue'

export default {
  name: "Recharge",
  mixins: [$showColumns, $view, $recharge],
  components: { RechargeTable, RefundDialog},
  props: {
    query: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      row: {},
      showRefund: false,
    };
  },
  created() {
    this.queryParams = {
      ...this.queryParams,
      ...this.query
    }

    // 隐藏搜索
    if (this.view != null) {
      this.showSearch = false;
    }

    // 根据当前视图隐藏部分列
    if (this.hasView(this.views.user)) {
      this.hideColumn(['userName'])
    } else if (this.hasView(this.views.mch)) {
      this.hideColumn(['mchName'])
    } else if (this.hasView(this.views.store)) {
      this.hideColumn(['storeId'])
    } else if (this.hasView(this.views.device)) {
      this.hideColumn(['deviceName'])
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 结束订单
    handleClose(row) {
      this.$confirm(`确定结束订单【${row.billNo}】吗？`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        closeBill({billId: row.billId, totalEle: null}).then(res => {
          if (res.code === 200) {
            this.$message.success("操作成功");
            this.getList();
          }
        })
      })
    },
    // 查看详情
    handleView(row) {
      this.$router.push(`/transaction/recharge/${row.billId}`)
    },
    // 处理退款
    handleRefund(row) {
      this.row = row;
      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>
