<style>
@import "../../../assets/css/newTravelManager.css";
</style>

<template>
  <div class="clearfix">
    <div class="TravelLeftMenu">
      <div class="TravelTopTitle">页面导航</div>
      <div class="TravelNavList" :class="{'TravelCked':ckedNav==1}" @click.prevent="custormAnchor('firstAnchor',1)">
        基础设置
      </div>
      <div class="TravelLine"></div>
      <div class="TravelNavList" :class="{'TravelCked':ckedNav==2}" @click.prevent="custormAnchor('sccondAnchor',2)">
        团期设置
      </div>
      <div class="TravelLine"></div>
      <div class="TravelNavList" :class="{'TravelCked':ckedNav==4}" @click.prevent="custormAnchor('fourthAnchor',4)">
        产品特点
      </div>
      <div class="TravelLine"></div>
      <div class="TravelNavList" :class="{'TravelCked':ckedNav==5}" @click.prevent="custormAnchor('fiveAnchor',5)">
        线路行程
      </div>
      <div class="TravelLine"></div>
      <div class="TravelNavList" :class="{'TravelCked':ckedNav==6}" @click.prevent="custormAnchor('sixAnchor',6)">补充信息
      </div>
      <div class="TravelLine"></div>
    </div>
    <div class="rightTravelInfo">
      <TravelConfig ref="TravelConfig" id="firstAnchor" @headCallBack="getConfig" :PostConfig="PostConfig"    :LineList="LineList"></TravelConfig>
      <TravelPrice ref="TravelPrice" id="sccondAnchor" @headCallBack="getPrice" :priceList="PriceList" :priceIsDirect="PostConfig.PriceIsDirect" :PostConfig="PostConfig"></TravelPrice>
      <TravelFeature ref="TravelFeature" id="fourthAnchor" @featureCallBack="getFeature" :FeatureData="FeatureData"></TravelFeature>
      <TravelDaysTrip ref="TravelDaysTrip" id="fiveAnchor" @headCallBack="getDaysTrip" :subArray="NoticeParameters" :subConfig="journeyList" v-bind:AllCityList="AllCityList" v-bind:StartCity="StartCity" :UseTypeArray="UseTypeArray"   :AirPickUp="AirPickUp" :AirSend="AirSend"></TravelDaysTrip>
      <TravelNotice ref="TravelNotice" id="sixAnchor" @headCallBack="getNotice" :subArray="NoticeParameters"  :NoticeData="NoticeData" v-bind:ShopList="ShopList" v-bind:SelfpayingList="SelfpayingList" v-bind:AllCityList="AllCityList"></TravelNotice>
      <div class="btnFixedDiv">
        <div class="toTop" @click="backTop">
          <i class="iconfont icon-huidaodingbu"></i>
        </div>
        <div class="DTSaveBtn" :class="{'disClick':!isSubmit}" @click="submitForm()">提交</div>
        <div class="DTSaveBtn" @click="goUrl('TravelControlList')">返回</div>
      </div>
    </div>
  </div>
</template>

<script>
import TravelConfig from "../TravelBasic/BasicComponent/TravelConfig.vue";
import TravelPrice from "../TravelBasic/BasicComponent/TravelPrice.vue";
import TravelFeature from "../TravelBasic/BasicComponent/TravelFeature";
import TravelDaysTrip from "../TravelBasic/BasicComponent/TravelDaysTrip_Direct";
import TravelNotice from "../TravelBasic/BasicComponent/TravelNotice";

export default {
  data() {
    return {
      ConfigId: 0, //地址栏查询参数
      NoticeParameters: {
        ConfigId: "0",
        LineID: "0", //线路
        LineteamId: "0", //系列
        CountryID: "", //国家
        IsDirect: 0 //是否直采
      },
      //行程
      FeatureData: {
        ID: 0,
        ConfigId: 0,
        FeatureType: 3,
        FeatureImg: "",
        FeatureContent: "", //自定义内容
        FeatureHtml: "", //行程特色(html)
        FeatureHtmlJson: "", //行程特色(Json数据)
        fileList: [],
        Title: "",
        Subtitle: "",
        LineName: "",
        DayList: []
      },
      //补充信息
      NoticeData: {
        FeeInclude: "",
        FeeNonInclude: "",
        ImportantTip: "",
        WarmTip: "",
        B2BRemark: "",
        ShopRemark: "",
        VisaRemark: ""
      },
      PostConfig: {
        ID: 0,
        StartCityId: 0,
        loading: true,
        LineId: 0,
        LineteamId: 0,
        Title: "",
        FSeat: "",
        CSeat: "",
        YSeat: "",
        //最低成团人数
        LowNum: "",
        //OP备注
        OpRemark: "",
        //产品经理备注
        ProductRecommend: "",
        //选择的系列的国家编号
        CountryID: "",
        RemoveChild: [], //移除的子项
        RemoveImg: [], //移除的图片
        PriceList: [],
        IsDirect: 0, //是否直采（0-否-1-是）
        PriceIsDirect: 1, //是否直采报价（1-否-2-是）
        fileList: [],
        PDFAlias: "",
        IsB2B: 0,
        IsB2C: 0,
        IsOrder: 0,
        IsSubstitution: 0
      }, //配置信息
      PostPrice: "", //报价信息
      PostFeature: "", //行程特色信息
      PostNotice: "", //行程特色其他内容
      PostDaysTrip: "", //每天的行程
      PriceList: [],
      //线路行程
      journeyList: {
        DayNum: "", //天数
        NightNum: "", //晚上
        ReturnArriveCityId: 0, //返回抵达城市
        StartCityId: 0, //集合城市
        //交通
        TrafficList: [],
        //景点
        ScenicList: [],
        //住宿
        HotelList: [],
        //餐饮
        DinnerList: [],
        //自由活动
        FreedomList: [],
        //温馨提示
        WarmTipList: [],
        RemoveChild: [], //移除的子项
        RemoveImg: [], //移除的图片
        //线路行程天数
        DayList: []
      },
      //购物店说明
      ShopList: [],
      //自费说明
      SelfpayingList: [],
      //防止重复提交
      isSubmit: true,
      ckedNav: 1,
      //所有的城市数据
      AllCityList: [],
      //线路
      LineList: [],
      OpenState: 2, //开团状态 1:已开团，2:未开团
      StartCity: [], //出发城市集合城市
      UseTypeArray: [], //用车类型
      AirPickUp: 0, //接机
      AirSend: 0 //送机
    };
  },
  components: {
    TravelConfig: TravelConfig,
    TravelPrice: TravelPrice,
    //TravelFlightList:TravelFlightList,
    TravelFeature: TravelFeature,
    TravelDaysTrip: TravelDaysTrip,
    TravelNotice: TravelNotice
  },
  methods: {
    /*获取组件配置信息*/
    getConfig(configObj) {
      this.PostConfig = configObj;
      this.NoticeParameters.LineID = this.PostConfig.LineId;
      this.NoticeParameters.LineteamId = this.PostConfig.LineteamId;
      this.NoticeParameters.CountryID = this.PostConfig.CountryID;
      this.NoticeParameters.IsDirect = this.PostConfig.IsDirect;
    },
    /*获取组件报价信息*/
    getPrice(priceObj) {
      this.PostPrice = priceObj;
    },
    /*获取行程特色内容对象*/
    getFeature(featureObj) {
      this.PostFeature = featureObj;
    },
    /*获取行程特色其他内容*/
    getNotice(noticeObj) {
      this.PostNotice = noticeObj;
    },
    /*获取每天的行程*/
    getDaysTrip(dayTripObj) {
      this.PostDaysTrip = dayTripObj;
    },
    /*保存数据*/
    SaveData() {
      //团队配置
      var postData = this.PostConfig;
      //配置编号
      postData.ID = this.ConfigId;
      //团期报价
      postData.PriceList = this.PostPrice;
      postData.Feature = this.PostFeature;
      postData.Feature.FeeInclude = this.PostNotice.FeeInclude;
      postData.Feature.FeeNonInclude = this.PostNotice.FeeNonInclude;
      postData.Feature.ImportantTip = this.PostNotice.ImportantTip;
      postData.Feature.WarmTip = this.PostNotice.WarmTip;
      postData.Feature.B2BRemark = this.PostNotice.B2BRemark;
      postData.Feature.ShopRemark = this.PostNotice.ShopRemark;
      postData.Feature.VisaRemark = this.PostNotice.VisaRemark;
      postData.DayNum = this.PostDaysTrip.DayNum;
      postData.NightNum = this.PostDaysTrip.NightNum;
      postData.ReturnArriveCityId = this.PostDaysTrip.ReturnArriveCityId;
      postData.StartCityId = this.PostDaysTrip.StartCityId;
      postData.DinnerList = this.PostDaysTrip.DinnerList;
      postData.FreedomList = this.PostDaysTrip.FreedomList;
      postData.HotelList = this.PostDaysTrip.HotelList;
      postData.ScenicList = this.PostDaysTrip.ScenicList;
      postData.TrafficList = this.PostDaysTrip.TrafficList;
      postData.WarmTipList = this.PostDaysTrip.WarmTipList;
      postData.RemoveImg = this.PostDaysTrip.RemoveImg;
      if (
        postData.TrafficList != null &&
        postData.TrafficList.length > 0 &&
        postData.TrafficList[0].SubTraffic != null &&
        postData.TrafficList[0].SubTraffic.length > 0
      ) {
        postData["ArriveCityId"] =
          postData.TrafficList[0].SubTraffic[0].ArrivalCityId;
      }
      if (postData.OpenState == 1) {
        postData["AfterOpenModify"] = true;
      }
     
      this.apipost(
        "travel_basic_get_SetConfig",
        postData,
        res => {
          if (res.data.resultCode == 1) {
            this.Success("操作成功!");

            this.$router.push({
              path: "BasicTravelControlList"
            });
          } else {
            this.Error(res.data.message);
            this.isSubmit = true;
            this.$refs.TravelFeature.del_show = true;
          }
        },
        err => {}
      );
    },
    //初始化幻灯片
    initFileList() {
      for (var i = 0; i < 5; i++) {
        var fileObj = this.$commonUtils.FileObject();
        this.PostConfig.fileList.push(fileObj);
        this.FeatureData.fileList.push(fileObj);
      }
    },
    initConfig(configId) {
      if (configId > 0) {
        let msg = {
          configId: configId
        };
        this.PostConfig.loading = true;
        this.apipost(
          "travel_basic_get_GetOpenTravelInfo",
          msg,
          res => {
            this.PostConfig.loading = false;
            if (res.data.resultCode == 1) {
              var tempData = res.data.data;
              if (tempData.Feature != null) {
                this.FeatureData.ID = tempData.Feature.ID;
                this.FeatureData.ConfigId = tempData.Feature.ConfigId;
                this.FeatureData.FeatureType = tempData.Feature.FeatureType;
                this.FeatureData.FeatureImg = tempData.Feature.FeatureImg;
                this.FeatureData.FeatureContent =
                  tempData.Feature.FeatureContent;
                //图片列表
                this.FeatureData.fileList = tempData.Feature.FeatureImgList;

                this.NoticeData.FeeInclude = tempData.Feature.FeeInclude;
                this.NoticeData.FeeNonInclude = tempData.Feature.FeeNonInclude;
                this.NoticeData.ImportantTip = tempData.Feature.ImportantTip;
                this.NoticeData.WarmTip = tempData.Feature.WarmTip;
                this.NoticeData.B2BRemark = tempData.Feature.B2BRemark;
                this.NoticeData.ShopRemark = tempData.Feature.ShopRemark;
                this.NoticeData.VisaRemark = tempData.Feature.VisaRemark;
              }

              if (tempData.PDFAlias !== null && tempData.PDFAlias !== "") {
                this.FeatureData.Title = tempData.PDFAlias;
              } else {
                this.FeatureData.Title = tempData.Title;
              }
              this.FeatureData.Subtitle = tempData.LtName;
              this.FeatureData.LineName = tempData.LineName;
              this.FeatureData.DayList = tempData.DayList;

              this.PostConfig.ID = tempData.ID;
              this.PostConfig.StartCityId = tempData.StartCityId;
              this.PostConfig.LineId = tempData.LineId;
              this.PostConfig.LineteamId = tempData.LineteamId;
              this.PostConfig.CountryID = tempData.CountryID;
              this.PostConfig.ImgCover = tempData.ImgCover;
              this.PostConfig.IsB2B = tempData.IsB2B;
              this.PostConfig.IsB2C = tempData.IsB2C;
              this.PostConfig.IsOrder = tempData.IsOrder;
              this.PostConfig.IsSubstitution = tempData.IsSubstitution;
              if (tempData.ImgCover != "") {
                if (tempData.ImgCoverList.length > 0) {
                  this.PostConfig.fileList = tempData.ImgCoverList;
                }
              }
              this.PostConfig.Title = tempData.Title;
              this.PostConfig.FSeat = tempData.FSeat;
              this.PostConfig.CSeat = tempData.CSeat;
              this.PostConfig.YSeat = tempData.YSeat;

              this.PostConfig.LowNum = tempData.LowNum;
              this.PostConfig.OpRemark = tempData.OpRemark;
              this.PostConfig.ProductRecommend = tempData.ProductRecommend;
              this.PostConfig.IsDirect = tempData.IsDirect;
              this.PostConfig.PriceIsDirect = tempData.PriceIsDirect;
              this.journeyList.DayNum = tempData.DayNum;
              this.journeyList.NightNum = tempData.NightNum;
              this.journeyList.ReturnArriveCityId = tempData.ReturnArriveCityId;
              this.journeyList.StartCityId = tempData.StartCityId;
              this.journeyList.DayList = tempData.DayList;

              if (tempData.PriceList != null) {
                this.PriceList = tempData.PriceList;
              }
              if (tempData.ShopList != null) {
                this.ShopList = tempData.ShopList;
              }
              if (tempData.SelfpayingList != null) {
                this.SelfpayingList = tempData.SelfpayingList;
              }
              if (tempData.LineList != null) {
                this.LineList = tempData.LineList;
              }
              if (tempData.AllCityList != null) {
                this.AllCityList = tempData.AllCityList;
              }
              if (tempData.StartCity != null) {
                this.StartCity = tempData.StartCity;
              }
              this.UseTypeArray = tempData.UseTypeArray;
              this.AirPickUp = tempData.AirPickUp;
              this.AirSend = tempData.AirSend;
              this.PostConfig["OpenState"] = this.OpenState;
              this.PostConfig.PDFAlias = tempData.PDFAlias;
            } else {
              this.isSubmit = true;
              this.Error(res.data.message);
            }
          },
          err => {
            this.isSubmit = true;
          }
        );
      }
    },
    //提交验证
    submitForm() {
      let travelConfigVal = this.$refs["TravelConfig"].validateForm();
      let travelPriceVal = this.$refs["TravelPrice"].validateForm();
      let travelDaysTripVal = this.$refs["TravelDaysTrip"].validateForm();
      if (!travelConfigVal) {
        this.Error("请完善配置信息");
      }
      if (!travelPriceVal) {
        this.Error("请完善团期信息");
      }
      if (!travelDaysTripVal) {
        this.Error("请完善行程信息");
      }
      if (travelConfigVal && travelPriceVal && travelDaysTripVal) {
        if (this.isSubmit) {
          this.isSubmit = false;
          this.$refs.TravelFeature.getHtml();
          this.SaveData();
        }
      }
    },
    //返回顶部
    backTop() {
      var timer = setInterval(function() {
        var scrollTop = document.getElementsByClassName("flexParent")[0]
          .scrollTop;
        var ispeed = Math.floor(-scrollTop / 6);
        if (scrollTop == 0) {
          clearInterval(timer);
        }
        document.getElementsByClassName("flexParent")[0].scrollTop =
          scrollTop + ispeed;
      }, 30);
    },
    goUrl(path) {
      this.$router.push({
        path: path,
        query: {
          cache: true
        }
      });
    },
    custormAnchor(anchorName, index) {
      // 找到锚点
      let anchorElement = document.getElementById(anchorName);
      // 如果对应id的锚点存在，就跳转到锚点
      if (anchorElement) {
        anchorElement.scrollIntoView();
      }
      this.ckedNav = index;
    },
    //滚动事件
    ScrollMethod() {
      var that = this;
      var s1, s2, s4, s5, s6;
      document
        .getElementsByClassName("flexParent")[0]
        .addEventListener("scroll", function() {
          if (document.getElementById("firstAnchor") != null) {
            s1 = document.getElementById("firstAnchor").offsetTop;
          }
          if (document.getElementById("sccondAnchor") != null) {
            s2 = document.getElementById("sccondAnchor").offsetTop;
          }
          if (document.getElementById("fourthAnchor") != null) {
            s4 = document.getElementById("fourthAnchor").offsetTop;
          }
          if (document.getElementById("fiveAnchor") != null) {
            s5 = document.getElementById("fiveAnchor").offsetTop;
          }
          if (document.getElementById("sixAnchor") != null) {
            s6 = document.getElementById("sixAnchor").offsetTop;
          }

          if (s1 >= this.scrollTop - 50 && s1 <= this.scrollTop + 50) {
            that.ckedNav = 1;
          } else if (s2 >= this.scrollTop - 50 && s2 <= this.scrollTop + 50) {
            that.ckedNav = 2;
          } else if (s4 >= this.scrollTop - 50 && s4 <= this.scrollTop + 50) {
            that.ckedNav = 4;
          } else if (s5 >= this.scrollTop - 50 && s5 <= this.scrollTop + 50) {
            that.ckedNav = 5;
          } else if (s6 >= this.scrollTop - 50 && s6 <= this.scrollTop + 50) {
            that.ckedNav = 6;
          }
        });
    }
  },
  mounted() {
    this.initFileList();
    this.ConfigId = this.$route.query.configId;
    this.OpenState = this.$route.query.openState;
    this.NoticeParameters.ConfigId = this.ConfigId;
    if (this.ConfigId > 0) {
      this.initConfig(this.ConfigId);
    } else {
      this.PostConfig.loading = false;
      this.apipost(
        "travel_get_GetCommonTravelInfo",
        {},
        res => {
          this.PostConfig.loading = false;
          if (res.data.resultCode == 1) {
            var tempData = res.data.data;
            if (tempData.LineList != null) {
              this.LineList = tempData.LineList;
            }
            if (tempData.AllCityList != null) {
              this.AllCityList = tempData.AllCityList;
            }
            if (tempData.StartCity != null) {
              this.StartCity = tempData.StartCity;
            }
            this.UseTypeArray = tempData.UseTypeArray;
            this.AirPickUp = tempData.AirPickUp;
            this.AirSend = tempData.AirSend;
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    }
    this.ScrollMethod();
  }
};
</script>