<style>
  .TripDownLoadCommon {
    height: 350px;
    text-align: center
  }

  .TripDownLoadCommon>label {
    cursor: pointer;
    vertical-align: middle;
  }

  .TripDownLoadCommon>label input {
    vertical-align: middle;
  }

  .TripDownLoadCommon .TripBtn {
    color: #fff;
    width: 90px;
    height: 30px;
    background: #E95252;
    border: 1px solid #E95252;
    cursor: pointer;
    border-radius: 15px;
  }

  .TripDownLoadCommon input[type="checkbox"]+label::before {
    content: "\A0";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    border-radius: 4px;
    background-color: white;
    text-indent: .15em;
    line-height: 15px;
    color: white;
    border: 1px solid #e95252;
  }

  .TripDownLoadCommon input[type="checkbox"]:checked+label::before {
    content: "\2713";
    background-color: #e95252;
  }

  .TripDownLoadCommon input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
  }

  .TripDownLoadCommon input[type="checkbox"]:focus+label::before {
    box-shadow: none;
  }

  .TripDownLoadCommon input[type="checkbox"]:disabled+label::before {
    background-color: gray;
    box-shadow: none;
    color: #555;
  }

</style>
<template>
  <div class="TripDownLoadCommon">
    <table style="width:380px" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th colspan="2">
          {{$t('salesModule.ChoiceNeed')}}
        </th>
      </tr>
      <tbody v-if="downType==1">
        <tr height="36">
          <td width="50%"><input id="vshowA" v-model="TripLayer.vshowA" type="checkbox" /><label
              for="vshowA">{{$t('fnc.jcxinxi')}}</label></td>
          <td width="50%"><input id="vshowB" v-model="TripLayer.vshowB" type="checkbox" /><label
              for="vshowB">{{$t('salesModule.FlighInfo')}}</label></td>
        </tr>
        <tr height="36">
          <td><input id="vshowC" v-model="TripLayer.vshowC" type="checkbox" /><label
              for="vshowC">{{$t('salesModule.TripSpecial')}}</label></td>
          <td><input id="vshowD" v-model="TripLayer.vshowD" type="checkbox" /><label
              for="vshowD">{{$t('salesModule.TripAP')}}</label></td>
        </tr>
        <tr height="36">
          <td><input id="vshowE" v-model="TripLayer.vshowE" type="checkbox" /><label
              for="vshowE">{{$t('fnc.fyshuoming')}}</label></td>
          <td><input id="vshowF" v-model="TripLayer.vshowF" type="checkbox" /><label
              for="vshowF">{{$t('salesModule.ShoppDetail')}}</label></td>
        </tr>
        <tr height="36">
          <td><input id="vshowG" v-model="TripLayer.vshowG" type="checkbox" /><label
              for="vshowG">{{$t('salesModule.OrderKnow')}}</label></td>
          <td><input id="vshowH" v-model="TripLayer.vshowH" type="checkbox" /><label
              for="vshowH">{{$t('salesModule.VisaInfo')}}</label></td>
        </tr>
        <tr height="36">
          <td><input id="vshowI" v-model="TripLayer.vshowI" type="checkbox" /><label
              for="vshowI">{{$t('salesModule.THBZ')}}</label></td>
          <td><input id="vshowJ" v-model="TripLayer.vshowJ" type="checkbox" /><label
              for="vshowJ">{{$t('salesModule.YXBS')}}</label></td>
        </tr>
        <tr height="36">
          <td><input id="vshowK" v-model="TripLayer.vshowK" type="checkbox" /><label
              for="vshowK">{{$t('salesModule.JDTP')}}</label></td>
        </tr>
      </tbody>
      <tbody v-if="downType==2">
        <tr height="36">
          <td width="50%"><input id="vshowA" v-model="TripLayer.vshowA" type="checkbox" /><label
              for="vshowA">{{$t('fnc.jcxinxi')}}</label></td>
          <td width="50%"><input id="vshowL" v-model="TripLayer.vshowL" type="checkbox" /><label
              for="vshowL">{{$t('salesModule.JHDD')}}</label></td>
        </tr>
        <tr height="36">
          <td><input id="vshowM" v-model="TripLayer.vshowM" type="checkbox" /><label
              for="vshowM">{{$t('salesModule.TravelInfo')}}</label></td>
          <td><input id="vshowB" v-model="TripLayer.vshowB" type="checkbox" /><label
              for="vshowB">{{$t('salesModule.FlighInfo')}}</label></td>
        </tr>
        <tr height="36">
          <td><input id="vshowC" v-model="TripLayer.vshowC" type="checkbox" /><label
              for="vshowC">{{$t('salesModule.TripSpecial')}}</label></td>
          <td><input id="vshowD" v-model="TripLayer.vshowD" type="checkbox" /><label
              for="vshowD">{{$t('salesModule.TripAP')}}</label></td>
        </tr>
        <tr height="36">
          <td><input id="vshowE" v-model="TripLayer.vshowE" type="checkbox" /><label
              for="vshowE">{{$t('fnc.fyshuoming')}}</label></td>
          <td><input id="vshowF" v-model="TripLayer.vshowF" type="checkbox" /><label
              for="vshowF">{{$t('salesModule.ShoppDetail')}}</label></td>
        </tr>
        <tr height="36">
          <td><input id="vshowG" v-model="TripLayer.vshowG" type="checkbox" /><label
              for="vshowG">{{$t('salesModule.OrderKnow')}}</label></td>
          <td><input id="vshowH" v-model="TripLayer.vshowH" type="checkbox" /><label
              for="vshowH">{{$t('salesModule.VisaInfo')}}</label></td>
        </tr>
        <tr height="36">
          <td><input id="vshowI" v-model="TripLayer.vshowI" type="checkbox" /><label
              for="vshowI">{{$t('salesModule.THBZ')}}</label></td>
          <td><input id="vshowJ" v-model="TripLayer.vshowJ" type="checkbox" /><label
              for="vshowJ">{{$t('salesModule.YXBS')}}</label></td>
        </tr>
        <tr height="36">
          <td><input id="vshowK" v-model="TripLayer.vshowK" type="checkbox" /><label
              for="vshowK">{{$t('salesModule.JDTP')}}</label></td>
          <td><input id="vshowLLR" v-model="TripLayer.vshowLLR" type="checkbox" /><label
              for="vshowLLR">{{$t('salesModule.EmergencyContact')}}</label></td>
        </tr>
        <!-- <tr height="36">
          <td style="padding-left:28px;"><input id="vshowO" v-model="TripLayer.vshowO" type="checkbox" /><label
              for="vshowO">显示视频图片</label></td>
          <td></td>
        </tr> -->
      </tbody>
      <tr height="66">
        <td colspan="2" align="center">
          <input type="button" class="TripBtn" @click="goUrlR();" :value="$t('pub.sureBtn')" />
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
  export default {
    props: ["tripObj", "downType"],
    data() {
      return {
        TripLayer: {},
        TripPath: "confirmationOrderDownLoadNew"
      };
    },
    methods: {
      goUrlR() {
        let obj = this.tripObj;
        var unionfid = 0;
        if (obj.unionfid) {
          unionfid = obj.unionfid;
        }
        var downMsg = {
          configId: obj.configId,
          cityId: obj.cityId,
          tcid: obj.tcid,
          orderId: obj.orderId,
          unionfid: unionfid,
          vshowA: this.TripLayer.vshowA,
          vshowB: this.TripLayer.vshowB,
          vshowC: this.TripLayer.vshowC,
          vshowD: this.TripLayer.vshowD,
          vshowE: this.TripLayer.vshowE,
          vshowF: this.TripLayer.vshowF,
          vshowG: this.TripLayer.vshowG,
          vshowH: this.TripLayer.vshowH,
          vshowI: this.TripLayer.vshowI,
          vshowJ: this.TripLayer.vshowJ,
          vshowK: this.TripLayer.vshowK,
          vshowL: this.TripLayer.vshowL,
          vshowM: this.TripLayer.vshowM,
          vshowN: this.TripLayer.vshowN,
          vshowLLR: this.TripLayer.vshowLLR,
          vshowO: this.TripLayer.vshowO,
          vshowTCNUM: true,
          isopOperation: obj.isopOperation,
        };
        let routeData = this.$router.resolve({
          name: this.TripPath,
          query: downMsg
        })
        window.open(routeData.href, '_blank');
        this.$emit("headCallBack");
      },
      getFeatureType() {
        var postMsg = {
          TCID: this.tripObj.tcid
        }
        this.apipost('travel_get_GetTravelFeatureType', postMsg, res => {
          if (res.data.resultCode == 1) {
            if (res.data.data == 8) {
             
            }
          }
        }, err => {})
      }
    },
    mounted() {
      this.getFeatureType();
    },
    created() {
      this.TripLayer.vshowA = true;
      this.TripLayer.vshowB = true;
      this.TripLayer.vshowC = true;
      this.TripLayer.vshowD = true;
      this.TripLayer.vshowE = true;
      this.TripLayer.vshowF = true;
      this.TripLayer.vshowG = true;
      this.TripLayer.vshowH = true;
      this.TripLayer.vshowI = true;
      this.TripLayer.vshowJ = true;
      this.TripLayer.vshowK = true;
      if (this.downType === 2) {
        this.TripLayer.vshowL = true;
        this.TripLayer.vshowM = true;
        this.TripLayer.vshowLLR = true;
      } else {
        this.TripLayer.vshowL = false;
        this.TripLayer.vshowM = false;
        this.TripLayer.vshowLLR = false;
      }
      this.TripLayer.vshowO = false;
    },
    watch: {
      tripObj: {
        //深度监听，可监听到对象、数组的变化
        handler: function (val, oldVal) {
          this.getFeatureType();
        },
        deep: true
      },
    }
  };

</script>
