<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"
        v-loading="PostConfig.loading"
        :LineList="LineList"
      ></TravelConfig>
      <TravelPrice
        ref="TravelPrice"
        id="sccondAnchor"
        @headCallBack="getPrice"
        :priceList="PriceList"
        :priceIsDirect="PostConfig.PriceIsDirect"
        :OfferList="OfferList"
        :PostConfig="PostConfig"
      ></TravelPrice>
      <TravelFeature
        ref="TravelFeature"
        id="fourthAnchor"
        @featureCallBack="getFeature"
        :FeatureData="FeatureData"
      ></TravelFeature>
      <!-- <newFeature :data='FeatureData' v-if='FeatureData.ID!=0'></newFeature> -->
      <TravelDaysTrip
        ref="TravelDaysTrip"
        id="fiveAnchor"
        @headCallBack="getDaysTrip"
        :subArray="NoticeParameters"
        :subConfig="journeyList"
        :isOpenGroup="true"
        :IsDirect="PostConfig.IsDirect"
        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"
        v-bind:CountryID="PostConfig.CountryID"
      ></TravelNotice>
      <div class="btnFixedDiv">
        <div class="toTop" @click="backTop">
          <i class="iconfont icon-huidaodingbu"></i>
        </div>
        <div class="DTSaveBtn" :class="{'disClick':!isSubmit}" @click="submitForm()">{{submitText}}</div>
        <div class="DTSaveBtn" @click="goUrl('TravelControlList')">返回</div>
        <div class="DTSaveBtn" @click="getJourney()">预览</div>
      </div>
    </div>

    <el-dialog
      custom-class="ComTeamPlan_info_box"
      :title="tripTitle"
      :visible.sync="outerVisible"
      center
    >
      <commonTeamInfo :subConfig="journeyList" ref="comDialog"></commonTeamInfo>
    </el-dialog>
  </div>
</template>

<script>
import TravelConfig from "../TravelGroupControl/TravelConfig.vue";
import TravelPrice from "../TravelGroupControl/TravelPrice.vue";
import TravelFeature from "../TravelGroupControl/TravelFeature";
import TravelDaysTrip from "../travelLineTrip/TravelDaysTrip_Direct";
import TravelNotice from "../TravelGroupControl/TravelNotice";
import commonTeamInfo from "../../commonPage/commonTeamInfo.vue";
import newFeature from './travelFeature/index';

export default {
  data() {
    return {
      ConfigId: 0, //地址栏查询参数
      tripTitle: "",
      outerVisible: false,
      submitText: "提交",
      NoticeParameters: {
        ConfigId: "0",
        LineID: "0", //线路
        LineteamId: "0", //系列
        CountryID: "", //国家
        IsDirect: 0 //是否直采
      },
      //行程
      FeatureData: {
        ID: 0,
        ConfigId: 0,
        FeatureType: 3,
        FeatureImg: "",
        FeatureContent: "", //自定义内容
        FeatureHtml: "", //行程特色(html)
        FeatureHtmlImage: "", //行程特色(image)
        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: 0, //是否直采报价（1-否-2-是）
        fileList: [],
        PDFAlias: "",
        LtName: "",
        IsB2B: 0,
        IsB2C: 0,
        IsOrder: 0,
        IsSubstitution: 0,
        CreateBy:0,
      }, //配置信息
      PostPrice: "", //报价信息
      PostFeature: "", //行程特色信息
      PostNotice: "", //行程特色其他内容
      PostDaysTrip: "", //每天的行程
      PriceList: [],
      //线路行程
      journeyList: {
        DayNum: "", //天数
        NightNum: "", //晚上
        ReturnArriveCityId: 0, //返回抵达城市
        //交通
        TrafficList: [],
        //景点
        ScenicList: [],
        //住宿
        HotelList: [],
        //餐饮
        DinnerList: [],
        //自由活动
        FreedomList: [],
        //温馨提示
        WarmTipList: [],
        RemoveChild: [], //移除的子项
        RemoveImg: [], //移除的图片
        //线路行程天数
        DayList: []
      },
      //购物店说明
      ShopList: [],
      //自费说明
      SelfpayingList: [],
      //防止重复提交
      isSubmit: true,
      ckedNav: 1,
      //所有的城市数据
      AllCityList: [],
      //线路
      LineList: [],
      //报价单信息
      OfferList: [],
      OpenState: 2, //开团状态 1:已开团，2:未开团
      StartCity: [], //出发城市集合城市
      UseTypeArray: [], //用车类型
      AirPickUp: 0, //接机
      AirSend: 0 //送机
    };
  },
  components: {
    TravelConfig: TravelConfig,
    TravelPrice: TravelPrice,
    //TravelFlightList:TravelFlightList,
    TravelFeature: TravelFeature,
    TravelDaysTrip: TravelDaysTrip,
    TravelNotice: TravelNotice,
    commonTeamInfo: commonTeamInfo,
    newFeature
  },
  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) {
      priceObj.forEach(objItem => {
        var SaleBranchId = "";
        if (objItem.SaleBranchIdArray.length > 0) {
          objItem.SaleBranchIdArray.forEach(subItem => {
            SaleBranchId += subItem + ",";
          });
        }
        if (SaleBranchId != "") {
          var str = SaleBranchId.substr(0, SaleBranchId.length - 1);
          objItem.SaleBranchId = str;
        }
      });
      this.PostPrice = priceObj;
    },
    /*获取行程特色内容对象*/
    getFeature(featureObj) {
      this.PostFeature = featureObj;
    },
    /*获取行程特色其他内容*/
    getNotice(noticeObj) {
      this.PostNotice = noticeObj;
    },
    /*获取每天的行程*/
    getDaysTrip(dayTripObj) {
      this.PostDaysTrip = dayTripObj;
    },
    /*保存数据*/
    SaveData() {
      this.submitText = "保存中";
      //团队配置
      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.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_post_SetConfig",
        postData,
        res => {
          this.PostConfig.loading = false;
          if (res.data.resultCode == 1) {
            this.Success("操作成功!");
            this.$router.push({
              path: "TravelControlList",
              query: {
                cache: true
              }
            });
          } else if (res.data.resultCode == 10009) {
            //表单重复提交不处理
          } else {
            this.Error(res.data.message);
            this.isSubmit = true;
            this.submitText = "提交";
            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_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.FeatureData.FeatureHtmlJson=tempData.Feature.FeatureHtmlJson && tempData.Feature.FeatureHtmlJson!=''?JSON.parse(tempData.Feature.FeatureHtmlJson):null

                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.$refs.TravelFeature.init();

              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.LtName = tempData.LtName;
              this.PostConfig.CreateBy=tempData.CreateBy;
              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.IsB2B = tempData.IsB2B;
              this.PostConfig.IsB2C = tempData.IsB2C;
              this.PostConfig.IsOrder = tempData.IsOrder;
              this.PostConfig.IsSubstitution = tempData.IsSubstitution;

              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.OfferList != null) {
                this.OfferList = tempData.OfferList;
              }
              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.Error(res.data.message);
            }
          },
          err => {}
        );
      }
    },
    //提交验证
    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;
          //团队配置
          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;
          this.$refs.TravelFeature.getHtml(postData);
          let that=this
          setTimeout(()=>{
            that.SaveData()
          },1500)
        }
      }
    },
    //返回顶部
    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;
          }
        });
    },
    //预览
    getJourney() {
      //根据ID 获取行程内容
      var that = this;
      this.tripTitle = this.PostConfig.Title;
      this.$nextTick(() => {
        that.$refs.comDialog.GetTrip();
      });
      that.outerVisible = true;
    }
  },
  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);
    }
    this.ScrollMethod();
  }
};
</script>