<template>
  <div class="app-container" v-loading="loading">
    <el-card class="box-card">
      <el-descriptions title="基本信息">
        <el-descriptions-item label="订单编号">{{detail.billNo | defaultValue}}</el-descriptions-item>
        <el-descriptions-item label="交易状态" :span="2">
          <dict-tag :value="detail.status" :options="dict.type.sm_transaction_bill_status" size="small"/>
        </el-descriptions-item>
        <el-descriptions-item label="交易金额">{{detail.money | money | defaultValue}} 元</el-descriptions-item>
        <el-descriptions-item label="到账金额">{{detail.arrivalAmount | money | defaultValue}} 元</el-descriptions-item>
        <el-descriptions-item label="手续费">{{detail.serviceCharge | money | defaultValue}} 元</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="box-card">
      <el-descriptions title="设备套餐信息">
        <el-descriptions-item label="设备编号">
          <device-link :id="detail.deviceId" :text="detail.deviceNo"/>
        </el-descriptions-item>
        <el-descriptions-item label="设备名称">
          <device-link :id="detail.deviceId" :text="detail.deviceName"/>
        </el-descriptions-item>
        <el-descriptions-item label="设备充值状态">
          <dict-tag :value="detail.deviceRechargeStatus" :options="dict.type.sm_transaction_bill_device_recharge_status" size="small"/>
        </el-descriptions-item>
        <el-descriptions-item label="套餐名称">{{detail.suitName | defaultValue}}</el-descriptions-item>
        <el-descriptions-item label="套餐时长">{{detail.suitTime | defaultValue}} {{suitTimeUnit(detail.suitTimeUnit)}}</el-descriptions-item>
        <el-descriptions-item label="套餐使用状态">
          <el-tag size="small" :type="suitUsingType[suitStatus]">{{suitUsingText[suitStatus]}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="套餐开始时间">{{detail.suitStartTime | defaultValue}}</el-descriptions-item>
        <el-descriptions-item label="套餐结束时间">{{detail.suitEndTime | defaultValue}}</el-descriptions-item>
        <el-descriptions-item label="套餐失效时间">{{detail.suitExpireTime | defaultValue}}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="box-card">
      <el-descriptions title="支付方信息">
        <el-descriptions-item label="用户名称">{{detail.userName | defaultValue}}</el-descriptions-item>
        <el-descriptions-item label="支付方式">
          <dict-tag :value="detail.channelId" :options="dict.type.channel_type" size="small"/>
        </el-descriptions-item>
        <el-descriptions-item label="支付时间">{{detail.payTime | defaultValue}}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="box-card">
      <el-descriptions title="收款方信息">
        <el-descriptions-item label="收款人">{{detail.mchName | defaultValue}}</el-descriptions-item>
        <el-descriptions-item label="收款人手机号">{{detail.mchMobile | defaultValue}}</el-descriptions-item>
        <el-descriptions-item label="店铺名称">{{detail.storeName | defaultValue}}</el-descriptions-item>
        <el-descriptions-item label="店铺地址">{{detail.storeAddress | defaultValue}}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="box-card">
      <el-tabs>
        <el-tab-pane label="退款信息" lazy>
          <div style="padding: 16px 20px 0;">
            <el-descriptions>
              <el-descriptions-item label="总计退款金额">{{detail.refundAmount | money | defaultValue}} 元</el-descriptions-item>
              <el-descriptions-item label="商户总计退款金额">{{detail.refundMchAmount | money | defaultValue}} 元</el-descriptions-item>
              <el-descriptions-item label="服务费总计退款金额">{{detail.refundServiceAmount | money | defaultValue}} 元</el-descriptions-item>
            </el-descriptions>
          </div>
          <mch-refund v-if="detail.billId != null" :query="{billId: detail.billId}"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { findLabel } from '@/utils'
import { mchGetBill } from '@/api/mch/bill'
import DeviceLink from '@/components/Business/Device/DeviceLink.vue'
import MchRefund from '@/views/mch/refund/index.vue'

export default {
  name: 'MchRechargeDetail',
  components: { MchRefund, DeviceLink },
  dicts: ['channel_type','sm_transaction_bill_status', 'sm_transaction_bill_device_recharge_status', 'time_unit'],
  computed: {
    // 时长单位
    suitTimeUnit() {
      return (unit) => {
        return findLabel(this.dict.type.time_unit, unit);
      }
    },
    // 套餐状态
    suitStatus() {
      if (this.detail.billId == null) {
        return 0;
      }
      let now = new Date().getTime();
      if (now < new Date(this.detail.suitStartTime).getTime()) {
        return 1;
      } else if (now < new Date(this.detail.suitEndTime).getTime()) {
        return 2;
      } else {
        return 3;
      }
    },
  },
  data() {
    return {
      loading: false,
      detail: {},
      id: null,
      suitUsingType: ['info', 'warning', 'success', 'danger'],
      suitUsingText: ['未知', '未生效', '使用中', '已失效']
    }
  },
  created() {
    this.id = this.$route.params.billId;
    this.getDetail();
  },
  methods: {
    getDetail() {
      mchGetBill(this.id).then(res => {
        this.detail = res.data;
      })
    }
  }
}
</script>
