<template>
  <div class="app-container">
    <div class="box">
      <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">
          <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.orderUserPhone}}</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>
        <div v-if="form.productVisitor&&form.productVisitor.visitorName">
          <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>
        </div>
        <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>
        <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==21}" v-if="row.couponStatus==v.value">{{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="refundTime" align="center" label="退款时间">
            <template slot-scope="{row}">
              {{ parseTime(row.refundTime, '{y}-{m}-{d} {h}:{i}')||'--' }}
            </template>
          </el-table-column>
        </el-table>
        <h3>推广信息</h3>
        <el-form-item label="地推人员姓名：" prop="name">{{form.promoterUserName}}</el-form-item>
        <el-form-item label="地推手机号：" prop="name">{{form.promoterUserPhone}}</el-form-item>
        <el-form-item label="分佣比例：" prop="name">{{form.distributionRatio}}%</el-form-item>
        <el-form-item label="分佣状态：" prop="name">{{form.distributionStatus?'已结算':'待结算'}}</el-form-item>
        <el-form-item label="预期结算金额：" prop="name">{{form.expectAmount}}</el-form-item>
        <el-form-item label="实际结算金额：" prop="name">{{form.actualAmount||'--'}}</el-form-item>
        <el-form-item label="入账时间：" prop="name">{{ parseTime(form.updateTime, '{y}-{m}-{d} {h}:{i}')||'--' }}</el-form-item>
      </el-form>
      <el-button @click="back">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { orderInfo } from '@/api/distribute.js'
import { businessProductOrderInfo, orderCouponList } from '@/api/order.js'
export default {
  data () {
    return {
      form: {
        list: [],
      },
      couponList: [],
      couponStatusList: [
        { label: '待使用', value: 0 },
        { label: '已使用', value: 10 },
        { label: '已退款', value: 20 },
        { label: '退款中', value: 21 },
        { label: '已过期', value: 30 },
      ],
    }
  },
  created () {
    this.getOrderInfo(this.$route.query.distributionOrderId)
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    getOrderInfo (id) {
      orderInfo(id).then(res => {
        this.form = res.data;
        this.getDetails(res.data.orderId);
        this.getOrderCouponList(res.data.orderId)
      })
    },
    getDetails (orderId) {
      businessProductOrderInfo(orderId).then(res => {
        Object.assign(this.form, res.data);
        this.$forceUpdate()
      })
    },
    // 获取券码信息
    getOrderCouponList (orderId) {
      orderCouponList({ orderId: orderId }).then(res => {
        this.couponList = res.data
      })
    },
  }
}
</script>


<style lang='scss' scoped>
// .box {
//   width: 70%;
//   padding-left: 50px;
// }
h3 {
  font-weight: 700;
  font-size: 16px;
}
.el-form-item {
  width: 24%;
}
</style>