<style>
  .WebSiteTrip {
    width: calc(100% - 250px);
    height: 100%;
    /* overflow-x: hidden;
    overflow-y: auto; */
    transition: width .3s ease;
  }

  .WebSiteTrip .layout_preview_inner {
    width: 100%;
    max-width: 800px;
    margin: 30px auto;
    background-color: #ddd;
    border: 1px solid #d1d1d1;
  }

  .WebSiteTrip .layout_box_header {
    background-color: #fff;
    border-bottom: 1px solid #f4f4f4;
    color: #444;
    display: block;
    padding: 10px;
  }

  .WebSiteTrip .layout_box_title {
    display: inline-block;
    font-size: 18px;
    margin: 0;
    line-height: 1;
    font-weight: 500;
  }

  .WebSiteTrip .layout_preview_list {
    min-height: 155px;
  }

  .WebSiteTrip .layout_temp_item {
    position: relative;
    display: flex;
    border-bottom: 1px solid #f6f6f6;
    background-color: #fff;
  }

  .WebSiteTrip .layout_full_temp {
    /* flex-basis: calc(100% - 40px); */
    padding: 20px;
    width: 100%;
  }

  .WebSiteTrip .layout_temp_title {
    font-size: 16px;
    margin: 0;
    font-weight: 500;
    color: #666;
  }

  .WebSiteTrip .layout_move_div {
    position: absolute;
    right: -31px;
    top: 0px;
    width: 30px;
    height: 65px;
  }

  .WebSiteTrip .layout_common_move {
    width: 30px;
    height: 30px;
    background-color: #47bf8c;
    text-align: center;
    line-height: 30px;
    color: #fff;
    cursor: pointer;
    margin-bottom: 5px;
  }

</style>
<template>
  <!--行程內容頁(行程内容页)-->
  <div class="WebSiteTrip">
    <el-form label-width="80px">
      <div class="layout_preview_inner">
        <div class="layout_box_header">
          <h1 class="layout_box_title">行程內容頁 功能開關</h1>
          <div style="float:right;margin-top:-6px;">
            <el-button type="primary" size="small" @click="saveData()">保存</el-button>
            <el-button type="primary" size="small" @click="goTripList()">預覽</el-button>
          </div>
        </div>
        <div class="layout_preview_list">
          <div class="layout_temp_item">
            <div class="layout_full_temp">
              <h2 class="layout_temp_title">行程頁背版</h2>
              <div style="padding-top:10px;font-size:14px;">
                <span>預設：</span>
                <el-radio v-if="TripBgImgItem&&TripBgImgItem.plugData" v-model="TripBgImgItem.plugData.IsShowBgImg"
                  :label="1">開啟</el-radio>
                <el-radio v-if="TripBgImgItem&&TripBgImgItem.plugData" v-model="TripBgImgItem.plugData.IsShowBgImg"
                  :label="0">關閉</el-radio>
              </div>
              <template v-if="TripBgImgItem&&TripBgImgItem.plugData&&TripBgImgItem.plugData.IsShowBgImg==1">
                <img :src="DefaultBgImg" style="width:100%;" />
              </template>
            </div>
          </div>
          <div class="layout_temp_item">
            <div class="layout_full_temp">
              <el-form-item label="動態橫幅">
                <el-select v-if="TripBottonItem&&TripBottonItem.plugData" style="width:100%"
                  v-model="TripBottonItem.plugData.TripBottonStyle">
                  <el-option v-for="(item,index) in TripBottonStyleArray" :key="index" :label="item.Name"
                    :value="item.Id">
                  </el-option>
                </el-select>
              </el-form-item>
              <img v-if="getBottonStyleImg()" :src="getBottonStyleImg()" style="width:100%;" />
            </div>
          </div>
        </div>
      </div>
      <div class="layout_preview_inner">
        <div class="layout_preview_list">
          <div class="layout_box_header">
            <h1 class="layout_box_title">行程內容頁 版面順序調整</h1>
          </div>
          <template v-for="(item,index) in OtherList">
            <!-- 标题 -->
            <div class="layout_temp_item" v-if="item.Id=='TripTitleItem'" :key="index+1">
              <div class="layout_full_temp">
                <h2 class="layout_temp_title">標題</h2>
                <img :src="DefaultTitleImg" alt="" style="width:100%" />
              </div>
              <div class="layout_move_div">
                <div class="layout_common_move" v-if="index!=0" @click="MoveData(index,1)">
                  <i class="iconfont icon-shangyi"></i>
                </div>
                <div class="layout_common_move" v-if="index!=OtherList.length-1" @click="MoveData(index,2)">
                  <i class="iconfont icon-xiayi1"></i>
                </div>
              </div>
            </div>
            <!-- 行程资讯 -->
            <div class="layout_temp_item" v-if="item.Id=='TripListItem'" :key="index+100">
              <div class="layout_full_temp">
                <el-form-item>
                  <span style="font-size: 12px;color: #888;font-weight: 400;">(無設定團位時則不顯示)</span>
                </el-form-item>
                <el-form-item label="行程資訊">
                  <el-select v-model="item.plugData.TripListStyle" style="width:100%">
                    <el-option v-for="(item,index) in TripListStyleArray" :key="index" :label="item.Name"
                      :value="item.Id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <img v-if="getListStyleImg(item)" :src="getListStyleImg(item)" style="width:100%;" />
                <div class="layout_move_div">
                  <div class="layout_common_move" v-if="index!=0" @click="MoveData(index,1)">
                    <i class="iconfont icon-shangyi"></i>
                  </div>
                  <div class="layout_common_move" v-if="index!=OtherList.length-1" @click="MoveData(index,2)">
                    <i class="iconfont icon-xiayi1"></i>
                  </div>
                </div>
              </div>
            </div>
            <!-- 每日行程 -->
            <div class="layout_temp_item" v-if="item.Id=='TripDayItem'" :key="index+110">
              <div class="layout_full_temp">
                <h2 class="layout_temp_title">每日行程</h2>
                <div style="margin:10px 0;font-size:14px;">
                  <span>預設：</span>
                  <el-radio v-model="item.plugData.TripDayIsOpen" :label="1">展開</el-radio>
                  <el-radio v-model="item.plugData.TripDayIsOpen" :label="0">收合</el-radio>
                </div>
                <el-select v-model="item.plugData.TripDayStyle" style="width:100%">
                  <el-option v-for="(item,index) in TripDayStyleArray" :key="index" :label="item.Name" :value="item.Id">
                  </el-option>
                </el-select>
                <img v-if="getDayStyleImg(item)" :src="getDayStyleImg(item)" style="width:100%;margin-top:10px;" />
                <div class="layout_move_div">
                  <div class="layout_common_move" v-if="index!=0" @click="MoveData(index,1)">
                    <i class="iconfont icon-shangyi"></i>
                  </div>
                  <div class="layout_common_move" v-if="index!=OtherList.length-1" @click="MoveData(index,2)">
                    <i class="iconfont icon-xiayi1"></i>
                  </div>
                </div>
              </div>
            </div>
            <!-- 立即预定 -->
            <div class="layout_temp_item" v-if="item.Id=='OrderItem'" :key="index+120">
              <div class="layout_full_temp">
                <div class="layout_temp_title">立即預訂<span
                    style="font-size: 12px;color: #888;font-weight: 400;">(無設定團位時則不顯示)</span></div>
                <img :src="DefaultOrderImg" style="width:100%;" />
                <div class="layout_move_div">
                  <div class="layout_common_move" v-if="index!=0" @click="MoveData(index,1)">
                    <i class="iconfont icon-shangyi"></i>
                  </div>
                  <div class="layout_common_move" v-if="index!=OtherList.length-1" @click="MoveData(index,2)">
                    <i class="iconfont icon-xiayi1"></i>
                  </div>
                </div>
              </div>
            </div>
            <!-- 行程特色 -->
            <div class="layout_temp_item" v-if="item.Id=='TripFeatureItem'" :key="index+130">
              <div class="layout_full_temp">
                <h2 class="layout_temp_title">行程特色</h2>
                <div style="margin:10px 0;font-size:14px;">
                  <span>預設：</span>
                  <el-radio v-model="item.plugData.TripFeatureIsOpen" :label="1">展開</el-radio>
                  <el-radio v-model="item.plugData.TripFeatureIsOpen" :label="0">收合</el-radio>
                </div>
                <img :src="DefaultFeatureImg" style="width:100%;" />
                <div class="layout_move_div">
                  <div class="layout_common_move" v-if="index!=0" @click="MoveData(index,1)">
                    <i class="iconfont icon-shangyi"></i>
                  </div>
                  <div class="layout_common_move" v-if="index!=OtherList.length-1" @click="MoveData(index,2)">
                    <i class="iconfont icon-xiayi1"></i>
                  </div>
                </div>
              </div>

            </div>
            <!-- 注意事项 -->
            <div class="layout_temp_item" v-if="item.Id=='NoticeItem'" :key="index+140">
              <div class="layout_full_temp">
                <h2 class="layout_temp_title">注意事項</h2>
                <div style="margin:10px 0;font-size:14px;">
                  <span>預設：</span>
                  <el-radio v-model="item.plugData.NoticeItemIsOpen" :label="1">展開</el-radio>
                  <el-radio v-model="item.plugData.NoticeItemIsOpen" :label="0">收合</el-radio>
                </div>
                <img :src="DefaultNoticeImg" style="width:100%;" />
                <div class="layout_move_div">
                  <div class="layout_common_move" v-if="index!=0" @click="MoveData(index,1)">
                    <i class="iconfont icon-shangyi"></i>
                  </div>
                  <div class="layout_common_move" v-if="index!=OtherList.length-1" @click="MoveData(index,2)">
                    <i class="iconfont icon-xiayi1"></i>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        DefaultBgImg: "http://imgfile.oytour.com/static/websiteimg/scene_cover.jpg", //默认背景图片
        DefaultTitleImg: "http://imgfile.oytour.com/static/websiteimg/topic1.png", //默认行程标题图片
        DefaultFeatureImg: "http://imgfile.oytour.com/static/websiteimg/feature1.png", //默认行程特色图片
        DefaultNoticeImg: "http://imgfile.oytour.com/static/websiteimg/note1.png", //默认注意事项图片
        DefaultOrderImg: "http://imgfile.oytour.com/static/websiteimg/order1.png", //默认订单图片
        //颜色
        TripBottonStyleArray: [{
            Id: 1,
            Name: "顏色：溫暖",
            Img: "http://imgfile.oytour.com/static/websiteimg/anchor_orange.jpg"
          },
          {
            Id: 2,
            Name: "顏色：海洋",
            Img: "http://imgfile.oytour.com/static/websiteimg/anchor_blue.jpg"
          },
          {
            Id: 3,
            Name: "顏色：自然",
            Img: "http://imgfile.oytour.com/static/websiteimg/anchor_green.jpg"
          },
          {
            Id: 4,
            Name: "顏色：神秘",
            Img: "http://imgfile.oytour.com/static/websiteimg/anchor_dark.jpg"
          },
          {
            Id: 5,
            Name: "顏色：青檸",
            Img: "http://imgfile.oytour.com/static/websiteimg/anchor_yellow.jpg"
          },
        ],
        //行程列表
        TripListStyleArray: [{
            Id: 1,
            Name: "行程資訊：月曆",
            Img: "http://imgfile.oytour.com/static/websiteimg/info1.png"
          },
          {
            Id: 2,
            Name: "行程資訊：列表",
            Img: "http://imgfile.oytour.com/static/websiteimg/info2.png"
          },
        ],
        //每日行程
        TripDayStyleArray: [{
            Id: 1,
            Name: "每日行程：版本1",
            Img: "http://imgfile.oytour.com/static/websiteimg/daily1.png"
          },
          {
            Id: 2,
            Name: "每日行程：版本2",
            Img: "http://imgfile.oytour.com/static/websiteimg/daily2.png"
          },
        ],
        //背景图配置
        TripBgImgItem: {},
        //行程按钮项
        TripBottonItem: {},
        //其他项
        OtherList: [],
        postMsg: {
          Id: 0,
          //行程数据
        },
        CurrentUserInfo:{}
      };
    },
    mounted() {
      let userInfo = this.getLocalStorage();
      this.CurrentUserInfo = userInfo;
      this.getData();
    },
    methods: {
      //上移下移
      MoveData(index, type) {
        var currentItem = this.OtherList[index];
        //上移
        if (type == 1) {
          if (index != 0) {
            var upItem = this.OtherList[index - 1];
            this.$set(this.OtherList, index - 1, currentItem);
            this.$set(this.OtherList, index, upItem);
          }
        }
        //下移
        else {
          if (index != this.OtherList.length - 1) {
            var downItem = this.OtherList[index + 1];
            this.$set(this.OtherList, index + 1, currentItem);
            this.$set(this.OtherList, index, downItem);
          }
        }
      },
      //获取按钮样式图片
      getBottonStyleImg() {
        var str = "";
        if (this.TripBottonItem && this.TripBottonItem.plugData) {
          var bottomStyleItem = this.TripBottonStyleArray.find(member => {
            return member.Id == this.TripBottonItem.plugData.TripBottonStyle;
          });
          if (bottomStyleItem) {
            str = bottomStyleItem.Img
          }
        }
        return str;
      },
      //获取行程列表样式图片
      getListStyleImg(item) {
        var str = "";
        var listStyleItem = this.TripListStyleArray.find(member => {
          return member.Id == item.plugData.TripListStyle;
        });
        if (listStyleItem) {
          str = listStyleItem.Img
        }
        return str;
      },
      //每日行程图片
      getDayStyleImg(item) {
        var str = "";
        var dayStyleItem = this.TripDayStyleArray.find(member => {
          return member.Id == item.plugData.TripDayStyle;
        });
        if (dayStyleItem) {
          str = dayStyleItem.Img
        }
        return str;
      },
      //获取配置
      getData() {
        this.apipost(
          "ws_get_GetHomeAboutTrip", {},
          res => {
            if (res.data.resultCode == 1) {
              var tempData = res.data.data;
              if (tempData) {
                if (tempData.Id) {
                  this.postMsg.Id = tempData.Id;
                }
                if (tempData.TripDataList && tempData.TripDataList.length > 0) {
                  this.TripBgImgItem = {};
                  this.TripBottonItem = {};
                  this.OtherList = [];
                  tempData.TripDataList.forEach(item => {
                    if (item.Id == "TripBgImgItem") {
                      this.TripBgImgItem = JSON.parse(JSON.stringify(item));
                    } else if (item.Id == "TripBottonItem") {
                      this.TripBottonItem = JSON.parse(JSON.stringify(item));
                    } else {
                      this.OtherList.push(JSON.parse(JSON.stringify(item)));
                    }
                  });
                }
              }
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //保存数据
      saveData() {
        var tempArray = [];
        tempArray.push(this.TripBgImgItem);
        tempArray.push(this.TripBottonItem);
        this.OtherList.forEach(item => {
          tempArray.push(item);
        })
        var msg = {
          Id: this.postMsg.Id,
          TripDataList: tempArray
        }
        this.apipost(
          "ws_post_SetTripData", msg,
          res => {
            if (res.data.resultCode == 1) {
              this.getData();
              this.Success(res.data.message);
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //预览b2b行程
      goTripList(){
        var B2BDomain = this.CurrentUserInfo.B2BDomain;
        window.open(this.$tripUtils.GetB2BUrl(B2BDomain,0,10101));
      },
    }
  }

</script>
