<template>
  <div id="app" class="commonF FreeInfo" style="padding-bottom:20px">
    <div class="w1200">
        <el-row>
            <el-col class="Left" :span="6">
                <div style="border:1px solid #E0E0E0;margin-top:20px;">
                    <div class="imgDiv" style="padding-left:18px">
                        <img style="width:100%;height:100%" :src="dataInfo.couponImg" :onerror="defaultImg" alt="">
                    </div>
                    <p class="cee" style="padding:16px;font-size:20px">
                        {{dataInfo.couponsName}}
                    </p>
                    <p style="padding:6px 16px;font-size:14px"><span class="c99">日期</span><span class="c66" style="margin-left:20px">{{dataInfo.useDate | YMD}}</span></p>
                    
                </div>
                <div class="commomStyle">
                    <div class="titleDiv">
                        <!-- <span class="redSpan"></span> -->
                        <el-row>
                            <el-col :span="12"><span class="f18 pfR">订单总额</span></el-col>
                            <el-col :span="12"><span class="f18 cee">￥{{dataInfo.preferPrice}}</span></el-col>
                        </el-row>
                    </div>
                    <ul class="fysm" style="padding:20px;font-size:14px">
                        <el-row style="margin-bottom:7px">
                                <el-col :span="6">购买数量</el-col>
                                <el-col :span="12"><div class="dashDiv"></div></el-col>
                                <el-col style="text-align:center" :span="6">{{dataInfo.purchaseQuantity}}</el-col>
                            </el-row>
                        <div style="font-size:14px">
                            <el-row style="margin-bottom:7px">
                                <el-col :span="6">优惠金额</el-col>
                                <el-col :span="12"><div class="dashDiv"></div></el-col>
                                <el-col style="text-align:center" :span="6">￥{{dataInfo.discountMoney}}</el-col>
                            </el-row>
                            <el-row style="margin-bottom:7px">
                                <el-col :span="6">已收金额</el-col>
                                <el-col :span="12"><div class="dashDiv"></div></el-col>
                                <el-col style="text-align:center" :span="6">￥{{dataInfo.income}}</el-col>
                            </el-row>
                            
                            
                        </div>
                        
                    </ul>
                </div>
            </el-col>
            <el-col :span="1">
                &nbsp;
            </el-col>
            <el-col class="Right" :span="17">
                <div class="commomStyle">
                    <div class="titleDiv">
                        <span class="redSpan"></span>
                        <span v-if="oldModel.OrderStatus!=2" class="f18 pfR">订单编号：{{dataInfo.id}}</span>
                        <span class="f18 cee pfR" v-if="oldModel.OrderStatus==2">订单已取消</span>
                    </div>
                    <ul class="fysm" style="padding:20px;position:relative;font-size:14px">
                        <li>
                            <img src="../../assets/img/free/cp.png" alt="">
                            <span class="c88 marginSpan">门票</span>
                            <span>{{dataInfo.ticketName}}</span>
                        </li>
                        <li>
                            <img src="../../assets/img/free/gsmc.png" alt="">
                            <span class="c88 marginSpan">游玩时间</span>
                            <span>{{dataInfo.useDate | YMD}}</span>
                        </li>
                        <li>
                            <img src="../../assets/img/free/gmr.png" alt="">
                            <span class="c88" style="margin:0 29px 0 6px;">客户信息</span>
                            <span>{{dataInfo.contactCNName}}{{dataInfo.contactENName}}</span>
                        </li>
                        <li>
                            <img src="../../assets/img/free/yx.png" alt="">
                            <span class="c88 marginSpan">电子邮箱</span>
                            <span>{{dataInfo.contactEmail}}</span>
                        </li>
                        <li>
                            <img src="../../assets/img/free/dh.png" alt="">
                            <span class="c88 marginSpan">联系电话</span>
                            <span>{{dataInfo.contactMobile}}</span>
                        </li>
                        <li>
                            <img src="../../assets/img/free/dgrq.png" alt="">
                            <span class="c88 marginSpan">订购日期</span>
                            <span>{{dataInfo.order_date | YMD}}</span>
                        </li>
                        
                    </ul>
                   
                </div>
                
            </el-col>
        </el-row>
    </div>

  </div>
</template>
<script>
import moment from "moment"
export default {
 
  data () {
    return {
    defaultImg: 'this.src="' + require('../../assets/img/bg_c2@3x.png') + '"',
    dialogFormVisible:false,
    exitMsg:{
        orderId:'',
        cancel_type:"",
        cancel_desc:"",
        CancelBy:'',
    },
    msg:{
        ticketOrderID:'',
    },
    payInfoObj:{},
    oldModel:{},
    jo:{},
    DomainUrl:"",
    dataDetail:{
        tour_list:[],
    },
    IsCanOrder:-1,
    payInfoGo:{},
    ImgSrc:'',
    dataInfo:{},
    }
  },
  created(){
      if(this.$route.query.ID){
          this.msg.ticketOrderID=this.$route.query.ID;
          this.getDetails();
      }
      
      
  },
  filters:{
    YMD(date){
      return moment(date).format("YYYY-MM-DD");
    }
  },
  mounted() {
    
  },
  methods: {

   getDetails(){
        this.apiJavaPost("/api/erp/ticketCoupons/getTicketCouponsOrderDetail", this.msg, res => {
        this.loading = false;
        if (res.data.resultCode === 1) {
          this.dataInfo = res.data.data;
        } else {
          this.Error(res.data.message)
        }
      }, null);
    },
  }
}
</script>

<style>

.FreeInfo .Right .btnDiv span{
    display: block;
    width:272px;
    height:45px;
    line-height:45px;
    border:1px solid rgba(238, 68, 84, 1);
    border-radius:4px;
    margin-bottom:20px;
    text-align: center;
    cursor: pointer;
}
.FreeInfo .Right .btnDiv{
    position: absolute;
    top: 30px;
    right: 20px;
}
.FreeInfo .Right .fysm li{
    display: flex;
    align-items: center;
    margin-bottom:15px;
}
.FreeInfo .Right .marginSpan{
    margin:0 15px 0 6px;
}
.FreeInfo .Left .imgDiv{
    width:100%;
    height:194px;
    border-radius:3px;
    overflow: hidden;
}
.FreeInfo .Left .imgDiv img{
    width: auto!important;
}
.FreeInfo  .commomStyle{
    border:1px solid rgba(224, 224, 224, 1);
    width:100%;
    box-sizing: border-box;
    margin-top: 20px;
}
.FreeInfo  .commomStyle .titleDiv .redSpan{
    width:4px;
    height:20px;
    background:rgba(238,68,84,1);
    display: inline-block;
    position: absolute;
    left: 0;
    top: 15px;
}
.FreeInfo  .commomStyle .titleDiv{
    width:100%;
    height:50px;
    line-height:50px;
    border-bottom:1px solid rgba(224, 224, 224, 1);
    background: #EDF4FF;
    position: relative;
    padding-left: 20px;
    box-sizing: border-box;
}
.FreeInfo .Left .dashDiv{
    border-bottom: 1px dashed #999999;
    margin-top:10px;
}
</style>