<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"><img style="width:100%;height:100%" :src="ImgSrc" :onerror="defaultImg" alt=""></div>
                    <p class="cee f20" style="padding:16px">
                        {{oldModel.ProductName}}
                    </p>
                    <p class="f14" style="padding:6px 16px"><span class="c99">日期</span><span class="c66" style="margin-left:20px">{{oldModel.StartDate}}</span></p>
                    <el-row class="f14" style="padding:6px 16px">
                        <el-col :span="4">
                            <span class="c99">人数</span>
                        </el-col>
                        <el-col class="c66" :span="20">
                            <p v-if="jo.price1_qty>0" style="margin-bottom:6px">成人 x {{jo.price1_qty}}</p>
                            <p v-if="jo.price2_qty>0" style="margin-bottom:6px">儿童 x {{jo.price2_qty}}</p>
                            <p v-if="jo.price3_qty>0" style="margin-bottom:6px">婴儿 x {{jo.price3_qty}}</p>
                            <p v-if="jo.price4_qty>0" style="margin-bottom:6px">老人 x {{jo.price4_qty}}</p>
                        </el-col>
                        
                    </el-row>
                </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">￥{{oldModel.TotalPrice}}</span></el-col>
                        </el-row>
                    </div>
                    <ul class="fysm f14" style="padding:20px">
                        <div v-if="oldModel.OldContent">
                            <el-row v-if="jo.price1_qty>0" style="margin-bottom:7px">
                                <el-col :span="6">成人 x {{jo.price1_qty}}</el-col>
                                <el-col :span="12"><div class="dashDiv"></div></el-col>
                                <el-col style="text-align:center" :span="6">{{oldModel.OldContent.price1_b2c}}</el-col>
                            </el-row>
                            <el-row v-if="jo.price2_qty>0" style="margin-bottom:7px">
                                <el-col :span="6">儿童 x {{jo.price2_qty}}</el-col>
                                <el-col :span="12"><div class="dashDiv"></div></el-col>
                                <el-col style="text-align:center" :span="6">{{oldModel.OldContent.price2_b2c}}</el-col>
                            </el-row>
                            <el-row v-if="jo.price3_qty>0" style="margin-bottom:7px">
                                <el-col :span="6">婴儿 x {{jo.price3_qty}}</el-col>
                                <el-col :span="12"><div class="dashDiv"></div></el-col>
                                <el-col style="text-align:center" :span="6">{{oldModel.OldContent.price2_b2c}}</el-col>
                            </el-row>
                            <el-row v-if="jo.price4_qty>0" style="margin-bottom:7px">
                                <el-col :span="6">老人 x {{jo.price4_qty}}</el-col>
                                <el-col :span="12"><div class="dashDiv"></div></el-col>
                                <el-col style="text-align:center" :span="6">{{oldModel.OldContent.price2_b2c}}</el-col>
                            </el-row>
                        </div>
                        <div class="f14" >
                            <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">￥{{oldModel.DiscountMoney}}</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">订单编号：{{oldModel.OrderID}}</span>
                        <span class="f18 cee pfR" v-if="oldModel.OrderStatus==2">订单已取消</span>
                    </div>
                    <ul class="fysm f14" style="padding:20px;position:relative">
                        <li>
                            <img src="../../../assets/img/free/cp.png" alt="">
                            <span class="c88 marginSpan">产品编号</span>
                            <span>{{jo.prod_no}}</span>
                        </li>
                        <li>
                            <img src="../../../assets/img/free/gsmc.png" alt="">
                            <span class="c88 marginSpan">产品名称</span>
                            <span>{{jo.prod_name}}</span>
                        </li>
                        <li>
                            <img src="../../../assets/img/free/gmr.png" alt="">
                            <span class="c88" style="margin:0 29px 0 6px;">购买人</span>
                            <span>{{jo.buyer_last_name}}{{jo.buyer_first_name}}</span>
                        </li>
                        <li>
                            <img src="../../../assets/img/free/yx.png" alt="">
                            <span class="c88 marginSpan">电子邮箱</span>
                            <span>{{jo.buyer_Email}}</span>
                        </li>
                        <li>
                            <img src="../../../assets/img/free/dh.png" alt="">
                            <span class="c88 marginSpan">联系电话</span>
                            <span>{{jo.buyer_tel_number}}</span>
                        </li>
                        <li>
                            <img src="../../../assets/img/free/dgrq.png" alt="">
                            <span class="c88 marginSpan">订购日期</span>
                            <span>{{jo.order_date}}</span>
                        </li>
                        
                    </ul>
                   
                </div>
                <div class="commomStyle">
                    <div class="titleDiv">
                        <span class="redSpan"></span>
                        <span class="f18 pfR">行程介绍</span>
                    </div>
                    <div style="padding:20px">
                            <div class="f12">
                                <div style="margin-bottom:20px;line-height:2">
                                    {{dataDetail.prod_desc}}
                                </div>
                                <p class="f14 pfR" style="color:#000000;margin-bottom:15px" v-if="dataDetail.tour_list.length>0">行程列表</p>
                                <div v-for="(item,index) in dataDetail.tour_list" :key="index+100">
                                    <p style="margin-top:10px">第{{item.tour_day}}天</p>
                                    <p style="padding:8px 0">说明{{item.tour_desc}}</p>
                                    <div v-if="item.photo_url&&item.photo_url!=''">
                                        <img style="width:100%;height: auto;display:block" :src="item.photo_url" alt="">
                                    </div>
                                </div>
                                <div v-if="dataDetail.meal_list">
                                    <p class="f14 pfR" style="color:#000000;margin-bottom:15px" v-if="dataDetail.meal_list.length>0">餐食列表</p>
                                    <div v-for="(item,index) in dataDetail.meal_list" :key="index+100">
                                        <p>行程第{{item.tour_day}}天提供餐食</p>
                                        <p style="padding:8px 0">
                                            <span>早餐：{{item.is_breakfast}}</span>
                                            <span>午餐：{{item.is_lunch}}</span>
                                            <span>晚餐：{{item.is_dinner}}</span>
                                        </p>
                                        
                                    </div>
                                </div>
                                
                                
                            </div>
                            
                        </div>
                </div>
                <div class="commomStyle">
                    <div class="titleDiv">
                        <span class="redSpan"></span>
                        <span class="f18 pfR">注意事项</span>
                    </div>
                    <div class="f12" style="padding:20px">
                        <p v-for="(item,index) in dataDetail.remind_list" :key="index+50"><span class="f26 pfR">.</span>{{item.remind_desc}}</p>
                        
                    </div>
                </div>
                <div v-if="dataDetail.prod_tips!=''" class="commomStyle">
                    <div class="titleDiv">
                        <span class="redSpan"></span>
                        <span class="f18 pfR">温馨提示</span>
                    </div>
                    <div class="f12" style="padding:20px">
                         <div>{{dataDetail.prod_tips}}</div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
    <el-dialog title="取消订单" width="400px" :visible.sync="dialogFormVisible">
        <el-form :model="exitMsg" label-width="80px">
            
            <el-form-item label="取消类型">
                <el-select size="small" v-model="exitMsg.cancel_type" placeholder="请选择取消类型">
                    <el-option label="行程变更或取消" value="MC001"></el-option>
                    <el-option label="重复订单" value="MC002"></el-option>
                    <el-option label="价格原因" value="MC003"></el-option>
                    <el-option label="个人因素" value="MC004"></el-option>
                    <el-option label="交通因素" value="MC005"></el-option>
                    <el-option label="交通因素" value="MC006"></el-option>
                    <el-option label="其他" value="MC999"></el-option>
                    
                </el-select>
            </el-form-item>
            <el-form-item label="取消原因" >
                <el-input v-model="exitMsg.cancel_desc" autocomplete="off" type="textarea" :rows="2"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
            <el-button size="small" type="danger" @click="ExitOrder">确 定</el-button>
        </div>
        </el-dialog>
  </div>
</template>
<script>

export default {
 
  data () {
    return {
    defaultImg: 'this.src="' + require('../../../assets/img/bg_c2@3x.png') + '"',
    dialogFormVisible:false,
    exitMsg:{
        orderId:'',
        cancel_type:"",
        cancel_desc:"",
        CancelBy:'',
    },
    msg:{
        orderId:'',
    },
    payInfoObj:{},
    oldModel:{},
    jo:{},
    DomainUrl:"",
    dataDetail:{
        tour_list:[],
    },
    IsCanOrder:-1,
    payInfoGo:{},
    ImgSrc:'',
    }
  },
  created(){
      if(this.$route.query.ID){
          this.msg.orderId=this.$route.query.ID;
      }
      this.getPayInfo();
      
  },
  mounted() {
    
  },
  methods: {  
    Exit(){
        let userInfo = this.getLocalStorage();
        this.dialogFormVisible=true;
        this.exitMsg.orderId=this.oldModel.OrderID;
        this.exitMsg.CancelBy = userInfo.customerId;
      },
    ExitOrder(){
          if(this.exitMsg.cancel_type==""){
              this.Error("请选择取消类型！");
              return;
          }
          this.dialogFormVisible=false;
          this.apipost(
        "dmc_post_Get_KKDayOrderCancel",
        this.exitMsg,
        res => {
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
            this.$emit('queryDays')
            this.exitMsg={
                orderId:'',
                cancel_type:"",
                cancel_desc:"",
                CancelBy:'',
            };
          } else {
            this.$message.error(res.data.message);
          }
        },
        null
      );
      },
   getPayInfo(){
       this.apipost(
        "dmc_post_Get_KKDayOrderQueryOrderDtl",
        this.msg,
        res => {
          if (res.data.resultCode == 1) {
              this.oldModel=res.data.data.oldModel;
              this.jo=res.data.data.jo;
              this.IsCanOrder=res.data.data.IsCanOrder;
              this.payInfoGo=res.data.data;
              if(this.oldModel.OldContent){
                  this.oldModel.OldContent=JSON.parse(this.oldModel.OldContent)
                  this.ImgSrc=this.oldModel.OldContent.ProductPic;
              }
              
              this.getDetails(this.oldModel.ProductNo);
          } else {
            this.$message.error(res.data.message);
          }
        },
        null
      );
   },
   getDetails(id){
        this.apiJavaPost(
            "/api/kkday/QueryProduct",
            {
            "prod_no": id ? id : "28474",
            "locale":"zh-cn" 
            },
            res => {
            if (res.data.data.result === "00") {
                this.DomainUrl=res.data.data.KkdayDomain;
                let data = res.data.data.prod
                this.dataDetail = data;
            } else {
                this.Error(res.data.data.result_msg)
            }
            },
            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>
