<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">{{$t('sm.Date')}}</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">{{$t('admin.admin_personNumber')}}</span>
              </el-col>
              <el-col class="c66" :span="20">
                <p v-if="jo.price1_qty>0" style="margin-bottom:6px">{{$t('salesModule.Adult')}} x {{jo.price1_qty}}</p>
                <p v-if="jo.price2_qty>0" style="margin-bottom:6px">{{$t('sm.ertong')}} x {{jo.price2_qty}}</p>
                <p v-if="jo.price3_qty>0" style="margin-bottom:6px">{{$t('Operation.Op_baby')}} x {{jo.price3_qty}}</p>
                <p v-if="jo.price4_qty>0" style="margin-bottom:6px">{{$t('sm.laoren')}} 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">{{$t('objFill.v101.Rest.dindanzonge')}}</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">{{$t('salesModule.Adult')}} 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">{{$t('sm.ertong')}} 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">{{$t('Operation.Op_baby')}} 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">{{$t('sm.laoren')}} 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">{{$t('sm.youhuijine')}}</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">{{$t('fnc.ddbianhao')}}：{{oldModel.OrderID}}</span>
              <span class="f18 cee pfR" v-if="oldModel.OrderStatus==2">{{$t('objFill.v101.Rest.dindanyiqx')}}</span>
            </div>
            <ul class="fysm f14" style="padding:20px;position:relative">
              <li>
                <img src="../../../assets/img/free/cp.png" alt="">
                <span class="c88 marginSpan">{{$t('hotel.table_productCode')}}</span>
                <span>{{jo.prod_no}}</span>
              </li>
              <li>
                <img src="../../../assets/img/free/gsmc.png" alt="">
                <span class="c88 marginSpan">{{$t('hotel.product_name')}}</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;">{{$t('objFill.v101.activity.goumairen')}}</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">{{$t('objFill.dianziyx')}}</span>
                <span>{{jo.buyer_Email}}</span>
              </li>
              <li>
                <img src="../../../assets/img/free/dh.png" alt="">
                <span class="c88 marginSpan">{{$t('restaurant.res_ContactNumber')}}</span>
                <span>{{jo.buyer_tel_number}}</span>
              </li>
              <li>
                <img src="../../../assets/img/free/dgrq.png" alt="">
                <span class="c88 marginSpan">{{$t('objFill.v101.Rest.dingouriqi')}}</span>
                <span>{{jo.order_date}}</span>
              </li>

            </ul>

          </div>
          <div class="commomStyle">
            <div class="titleDiv">
              <span class="redSpan"></span>
              <span class="f18 pfR">{{$t('objFill.v101.Rest.xingchengjs')}}</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">{{$t('objFill.v101.Rest.xingchenglb')}}
                </p>
                <div v-for="(item,index) in dataDetail.tour_list" :key="index+100">
                  <p style="margin-top:10px">{{$t('tips.di')}}{{item.tour_day}}{{$t('hotel.hotel_day')}}</p>
                  <p style="padding:8px 0">{{$t('fnc.shuoming')}}{{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">{{$t('objFill.v101.Rest.canshilieb')}}
                  </p>
                  <div v-for="(item,index) in dataDetail.meal_list" :key="index+100">
                    <p>{{$t('objFill.v101.Rest.xingchengdi')}}{{item.tour_day}}{{$t('objFill.v101.Rest.tiantigcans')}}</p>
                    <p style="padding:8px 0">
                      <span>{{$t('objFill.zaocan')}}：{{item.is_breakfast}}</span>
                      <span>{{$t('objFill.wucan')}}：{{item.is_lunch}}</span>
                      <span>{{$t('objFill.wancan')}}：{{item.is_dinner}}</span>
                    </p>

                  </div>
                </div>


              </div>

            </div>
          </div>
          <div class="commomStyle">
            <div class="titleDiv">
              <span class="redSpan"></span>
              <span class="f18 pfR">{{$t('hotel.hotel_attention')}}</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">{{$t('Operation.Op_Warmprompt')}}</span>
            </div>
            <div class="f12" style="padding:20px">
              <div>{{dataDetail.prod_tips}}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog :title="$t('sm.exitOrder')" width="400px" :visible.sync="dialogFormVisible">
      <el-form :model="exitMsg" label-width="80px">

        <el-form-item :label="$t('sm.exitType')">
          <el-select size="small" v-model="exitMsg.cancel_type" :placeholder="$t('sm.qxzqxlx')">
            <el-option :label="$t('sm.xingchengbghqx')" value="MC001"></el-option>
            <el-option :label="$t('sm.chongfuOrder')" value="MC002"></el-option>
            <el-option :label="$t('sm.Priceyy')" value="MC003"></el-option>
            <el-option :label="$t('sm.gerenys')" value="MC004"></el-option>
            <el-option :label="$t('sm.jiaotongys')" value="MC005"></el-option>
            <el-option :label="$t('sm.jiaotongys')" value="MC006"></el-option>
            <el-option :label="$t('active.cl_qita')" value="MC999"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item :label="$t('sm.exityy')">
          <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">{{$t('pub.cancelBtn')}}</el-button>
        <el-button size="small" type="danger" @click="ExitOrder">{{$t('pub.sureBtn')}}</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(this.$t('sm.qxzqxlx'));
          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>