<template>
  <div class="app-container">
    <el-form :model="form" ref="form" inline>
      <h3>基础信息</h3>
      <el-form-item label="订单号：" prop="name">{{form.orderNumber}}</el-form-item>
      <el-form-item label="所属商家：" prop="name">{{form.businessName}}</el-form-item>
      <el-form-item label="商品名称：" prop="name">{{form.businessProductName}}</el-form-item>
      <el-form-item label="订单属性：" prop="name"> {{form.orderType==0?"自购":form.orderType==1?"奖励":"--"}}</el-form-item>
      <el-form-item label="购买数量：" prop="name">{{form.buyQuantity}}（可使用 {{form.waitSum}} ）</el-form-item>
      <el-form-item label="销价格售：" prop="name">{{form.sellingPrice}}</el-form-item>
      <el-form-item label="应付金额：" prop="name">{{form.orderAmount}}</el-form-item>
      <el-form-item label="订单状态：" prop="name">
        <!-- {{dealStatus(form.orderStatus)}} -->
        <el-tag v-if="form.orderStatus==10">待使用</el-tag>
        <el-tag v-if="form.orderStatus==20&&form.refundStatus==0" type="success">已完成</el-tag>
        <el-tag v-if="form.orderStatus==30&&form.refundStatus==2" type="info">已退款</el-tag>
        <el-tag v-if="form.orderStatus==20&&form.refundStatus==1" type="info">已完成（有退款）</el-tag>
        <el-tag v-if="form.orderStatus==0" type="danger">待支付</el-tag>
        <el-tag v-if="form.orderStatus==30&&form.refundStatus!=2" type="info">已取消</el-tag>
      </el-form-item>
      <el-form-item label="下单人姓名：" prop="name">{{form.userNickname}}</el-form-item>
      <el-form-item label="下单人手机号：" prop="name">{{form.userPhone}}</el-form-item>
      <el-form-item label="下单时间：" prop="name">{{ parseTime(form.orderTime, '{y}-{m}-{d} {h}:{i}') }}</el-form-item>
      <el-form-item label="预约日期：" prop="name" v-if="form.reservationDate">{{form.reservationDate}}</el-form-item>
      <el-form-item label="预约场次：" prop="name" v-if="form.reservationTime">{{form.reservationTime}}</el-form-item>
      <h3>游客信息</h3>
      <el-form-item label="游客姓名：" prop="name">{{form.productVisitor.visitorName}}</el-form-item>
      <el-form-item label="游客手机号：" prop="name">{{form.productVisitor.visitorPhone}}</el-form-item>
      <el-form-item label="游客身份证号：" prop="name">{{form.productVisitor.visitorCardNumber}}</el-form-item>
      <h3>付款信息</h3>
      <el-form-item label="支付时间：" prop="name">{{ parseTime(form.payTime, '{y}-{m}-{d} {h}:{i}')||'--' }}</el-form-item>
      <el-form-item label="支付方式：" prop="name">微信支付</el-form-item>
      <el-form-item label="支付流水号：" prop="name">{{form.payOrder||'--'}}</el-form-item>
      <el-form-item label="实际支付金额：" prop="name">{{form.payAmount}}</el-form-item>
      <div v-if="!(form.orderStatus==30&&form.refundStatus!=2)&&form.orderStatus!=0">
        <h3>券码信息</h3>
        <el-table :data="couponList" stripe>
          <el-table-column prop="date" label="序号" width="80">
            <template slot-scope="scope">
              <div>
                {{  scope.$index + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="businessName" align="center" label="所属商家">
          </el-table-column>
          <el-table-column prop="businessProductName" align="center" label="商品名称">
          </el-table-column>
          <el-table-column prop="couponCode" align="center" label="券码">
          </el-table-column>
          <el-table-column prop="couponStatus" align="center" label="状态">
            <template slot-scope="{row}">
              <div v-for="(v,i) in couponStatusList" :key="i" :class="{active:row.couponStatus==20||row.couponStatus==21}" v-if="row.couponStatus==v.value" @click="goAfterSaleOrderDetails(row)">{{v.label}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="useTime" align="center" label="使用时间">
            <template slot-scope="{row}">
              {{ parseTime(row.useTime, '{y}-{m}-{d} {h}:{i}')||'--' }}
            </template>
          </el-table-column>
          <el-table-column prop="verificationSysUserName" align="center" label="核销人">
            <template slot-scope="{row}">
              {{ row.verificationSysUserName||'--' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" v-if="scope.row.couponStatus==0" type="text" @click="confirmWriteOff(scope.row)">确认核销</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="gameRecord.serialNumber">
          <h3>游戏信息</h3>
          <el-form-item label="游戏流水号：" prop="name">{{gameRecord.serialNumber}}</el-form-item>
          <el-form-item label="游戏时间：" prop="name">{{ parseTime(gameRecord.executeTime, '{y}-{m}-{d} {h}:{i}')||'--' }}</el-form-item>
          <el-form-item label="游戏结果：" prop="name">{{gameRecord.gameResult?'赢盘':'输盘'}}</el-form-item>
          <!-- <el-form-item label="累计消费金额：" prop="name">{{gameRecord.serialNumber}}</el-form-item> -->
        </div>
      </div>
      <div v-if="form.orderStatus==30&&form.refundStatus!=2">
        <h3>取消信息</h3>
        <el-form-item label="取消原因：" prop="name">{{form.cancelNote||'--'}}</el-form-item>
      </div>
    </el-form>
    <div class="form-footer">
      <el-button @click="back">返回</el-button>
    </div>
  </div>
</template>

<script>
import { businessProductOrderInfo, orderCouponList, verification } from '@/api/order.js'
import { gameRecordPage } from '@/api/game.js'

export default {
  data () {
    return {
      form: {},
      statusList: [
        { label: '待使用', value: 10, tag: "" },
        { label: '已完成', value: 20, tag: "success" },
        { label: '已退款', value: 3, tag: "info" },
        { label: '待支付', value: 0, tag: "danger" },
        { label: '已取消', value: 30, tag: "info" },
      ],
      couponStatusList: [
        { label: '待使用', value: 0 },
        { label: '已使用', value: 10 },
        { label: '已退款', value: 20 },
        { label: '退款中', value: 21 },
        { label: '已过期', value: 30 },
      ],
      couponList: [],
      gameRecord: {}
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.getDetails();
      this.getOrderCouponList();
    },
    dealStatus (status) {
      for (let i = 0; i < this.statusList.length; i++) {
        if (this.statusList[i].value == status) {
          return this.statusList[i].label
        }
      }
    },
    back () {
      this.$router.go(-1)
    },
    getDetails () {
      businessProductOrderInfo(this.$route.query.orderId).then(res => {
        this.form = res.data
        this.getGameRecordPage(res.data.orderNumber)
      })
    },
    // 获取券码信息
    getOrderCouponList () {
      orderCouponList({ orderId: this.$route.query.orderId }).then(res => {
        this.couponList = res.data
      })
    },
    // 获取游戏信息
    getGameRecordPage (relatedOrderNo) {
      gameRecordPage({ relatedOrderNo: relatedOrderNo }).then(res => {
        if (res.rows && res.rows.length > 0) {
          this.gameRecord = res.rows[0]
        }
      })
    },
    confirmWriteOff (item) {
      this.$modal.confirm('确定核销此券码吗？').then(() => {
        return verification({ couponId: item.couponId });
      }).then(() => {
        this.init();
        this.$modal.msgSuccess("核销成功");
      }).finally(() => {
      });
    },
    goAfterSaleOrderDetails (row = {}) {
      if (row.couponStatus == 20 || row.couponStatus == 21) {
        this.$router.push({
          path: '/order/afterSaleOrderDetails',
          query: { refundOrderId: row.refundOrderId }
        })
      }
    },
  }

}
</script>

<style lang='scss' scoped>
h3 {
  font-weight: 700;
}
.el-form--inline .el-form-item {
  width: 24%;
}
.active {
  color: rgb(64, 158, 255);
  cursor: pointer;
}
.form-footer {
  margin-top: 20px;
  text-align: center;
}
</style>