<!--
 * @Author: wj 1454560336@qq.com
 * @Date: 2023-11-01 14:21:43
 * @LastEditors: wenjie 1454560336@qq.com
 * @LastEditTime: 2024-08-29 14:15:40
 * @FilePath: \admin-manage\src\views\operationManage\orderManage\payDetail.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<template>
  <div class="payDetail app-container">
    <div class="title">付款信息</div>

    <el-table
      :data="tableData"
      tooltip-effect="dark"
      border
      v-loading="loading"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="订单编号"
        prop="orderNo"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="paymentTime"
        align="center"
        label="付款时间"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ formatData(scope.row).paymentTime}}
        </template>
      </el-table-column>
      <el-table-column
        prop="payAmount"
        align="center"
        label="实付金额"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="paymentWay"
        align="center"
        label="支付方式"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ formatData(scope.row).paymentWay |filterPay}}
        </template>
      </el-table-column>
      <el-table-column
        prop="orderType"
        align="center"
        label="状态"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ scope.row.goodsList[0] | filterType }}
        </template>
      </el-table-column>
    </el-table>

    <div class="title">订单信息</div>

    <el-table
      :data="tableData"
      tooltip-effect="dark"
      border
      v-loading="loading"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="订单编号"
        prop="orderNo"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        align="center"
        label="下单时间"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{timeFormat(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="payAmount"
        align="center"
        label="订单金额"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="discountAmount"
        align="center"
        label="使用优惠券"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="discountAmount"
        align="center"
        label="优惠金额"
        show-overflow-tooltip
      >
      </el-table-column>
    </el-table>

    <div class="title" v-if="isStudy">研学用户信息</div>
    <el-table
      :data="persons"
      tooltip-effect="dark"
      v-if="isStudy"
      border
      v-loading="loading"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="类型"
        prop="label"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="userName"
        align="center"
        label="名称"
        show-overflow-tooltip
      >
    
      </el-table-column>
      <el-table-column
        prop="phone"
        align="center"
        label="电话"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="idCard"
        align="center"
        label="身份证"
        show-overflow-tooltip
      >
      </el-table-column>
    
    </el-table>
  </div>
</template>

<script>
import { orderDetail,getReserve } from "@/api/order";
  import {timeFormat} from '@/utils/index'

export default {
  data() {
    return {
      loading: false,
      dialogFormVisible: false,
      form: {
        name: "",
      },
      options: [
        {
          value: "0",
          label: "退还给用户",
        },
        {
          value: "1",
          label: "退还给商家",
        },
        {
          value: "2",
          label: "平台没收",
        },
        {
          value: "3",
          label: "失败",
        },
      ],
      tableData: [],
      persons:[],
      isStudy:false
    };
  },
  filters: {
    filterType: function(val) {
				if(val.refundLog&&val.refundLog.refund == 'REFUSAL_REFUND'&&!val.change){
					return '拒绝退款'
				}
        else if(val.jobFlowMap == 'Hotel'&&val.extend.orderInfo){
					return val.extend.orderInfo.orderStatus
				}
				else if(val.goodsState == 'APPLY_REFUND'){
					return '退款审核中'
				}else if(val.goodsState == 'CLOSE'){
					return '关闭订单'
				}else if(val.goodsState == 'REFUNDED'){
					return '已退款'
				}else if(val.goodsState == 'REFUSAL_REFUND'){
					return '拒绝退款'
				}else if(val.goodsState == 'APPLY_REFUNDING'){
					return '退款中'
				}else if(val.goodsState == 'USED'){
					if(val.jobFlowMap == 'YPP'){
						return '已出票'
					}else{
						return '订单已完成'
					}
				}else if(val.goodsState == 'WAIT_PAYMENT'){
					return '待付款'
				}else if(val.goodsState == 'WAIT_USE'){
					if(val.jobFlowMap == 'YPP'){
						return '出票中'
					}else{
						return '待使用'
					}
				}else{
					return ''
				}
			},
    filterPay(val) {
      if (val == "wx.unifiedOrder") {
        return "微信支付";
      } else if (val == "trade.create") {
        return "支付宝支付";
      } else if (val == "uac.miniOrder") {
        return "云闪付支付";
      }else if (val == 'wx.miniPreOrder'){
        return '银联支付'
      } else {
        return "-";
      }
    },
  },
  methods: {
    formatData(row){
        if(row.goodsList[0].jobFlowMap == 'XiaoJu'){
          if(row.goodsList[0].extend.hasOwnProperty('notifyOrderInfo')){
            return {
              paymentTime:row.goodsList[0].extend.notifyOrderInfo.payTime,
              paymentWay:'-'
            }
          }else{
            return {
              paymentTime:'-',
              paymentWay:''
            }
          }
        }else if(row.goodsList[0].jobFlowMap == 'Activity'){
          return {
            paymentTime:row.payment?row.payment.paymentTime:'',
            paymentWay:row.payment?row.payment.paymentWay:'',
          }
        }else{
          return {
            paymentTime:row.payment?row.payment.paymentTime:'',
            paymentWay:row.payment?row.payment.paymentWay:'',
          }
        }
    },
    timeFormat(val) {
      return timeFormat(val);
    },
    orderDetail(id) {
      this.loading = true
      orderDetail(id).then((res) => {
        this.loading = false
        if (res.state == "Success") {
          this.tableData = [res.content];
          // 判断是否为研学订单
          if(res.content?.goodsList[0]?.goodsInfo?.isStudy){
            getReserve(id).then(res=>{
              this.persons.push({
                label:'预定人',
                userName:res.content.reserveName,
                phone:res.content.reservePhone,
                idCard:'/'
              })
							this.persons = this.persons.concat(res.content.persons.map(e=>{
                e.label = '出游人'
                return e
              }))
							this.isStudy = true
						})
          }
        }
      });
    },
  },
  created() {
    // this.tableData = [JSON.parse(localStorage.getItem("orderItem"))];
    this.orderDetail(this.$route.query.orderNo);
  },
};
</script>

<style lang="scss" scoped>
.payDetail {
  .form-label {
    margin-left: 80px;
  }

  .apply {
    padding: 15px;
    border-radius: 4px;
    background: #f3f3f3;
    margin-bottom: 20px;
    position: relative;
    .btn {
      position: absolute;
      top: 15px;
      right: 15px;
    }
    .top-info {
      display: flex;
      align-items: center;
      .sub-title {
        font-size: 14px;
        font-weight: bold;
      }
      .time {
        color: #999;
        font-size: 12px;
        margin-left: 10px;
      }
    }
    .info {
      display: flex;
      align-items: center;
      line-height: 34px;
      .label {
        font-size: 14px;
      }
      .money {
        font-size: 14px;
        color: #0052d9;
      }
    }
    .reason {
      font-size: 14px;
      line-height: 24px;
    }
  }
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    font-size: 14px;
    .lable {
      white-space: nowrap;
    }
    .value {
      flex: 1;
    }
  }

  .title {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 15px;
    margin-top: 30px;
    color: #666;
  }
}
</style>
