<style>
  .WebSiteEdit {
    width: 100%;
    height: calc(100% - 54px);
    min-width: 0;
    background-color: #f3f3f3;
  }

  .WebSiteContent {
    height: 100%;
    display: flex;
    width: 100%;
  }

  .WebSite_Left {
    background-color: #dadadacc;
    padding: 20px;
    overflow-y: auto;
    width: 250px;
    height: calc(100% + 54px);
    margin-top: -54px;
    top: 0;
  }

  .WebSite_right {
    margin-right: 20px;
    flex: 1;
    position: relative;
    overflow-y: auto;
    border: 1px solid #d1d1d1;
    border-top: none;
    padding-top: 15px;
  }

  [flex] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
  }

  [flex~="box:first"]>:first-child,
  [flex~="box:last"]>:last-child,
  [flex~="box:justify"]>:first-child,
  [flex~="box:justify"]>:last-child {
    width: auto;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0
  }

  .WebSite_right_preview {
    width: 100%;
    /* overflow-y: auto;
    min-height: 725px;
    height: 725px; */
    /* margin: 0 20px; */
    height: 100%;
    background-color: #ddd;
  }

  .WebSiteEdit .temp-list-wrap {
    margin-top: 20px;
  }

  .WebSiteEdit .temp-list-wrap img {
    display: block;
    width: 210px;
  }

  .WebSiteEdit .temp-list-wrap div {
    margin-bottom: 20px;
    cursor: move;
  }

  .WebSiteEdit .temp-list-item {
    position: relative;
  }

  .WebSiteEdit .temp-font {
    position: absolute;
    width: 210px;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 20px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .WebSite_item {
    display: flex;
    border-bottom: 1px solid #f6f6f6;
    background-color: #fff;
    padding-bottom: 5px;
  }

  .diy-component-preview .WebSite_item .temp-img {
    flex-basis: calc(60% - 60px);
    cursor: move;
  }

  .temp-img img {
    display: block;
    width: 100%;
    user-select: none;
    pointer-events: none;
  }

  .WebSite_item .temp-info {
    padding: 15px 20px 0;
    flex-basis: 40%;
    background-color: #fff;
  }

  .WebSite_item .temp-title {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
  }

  .temp-subtitle {
    margin: 0;
    width: 280px;
    padding-top: 2px;
    font-size: 15px;
    font-weight: 700;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .diy-component-edit {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 465px;
    right: 0;
    background: #fff;
    padding: 20px;
    overflow: auto;
    min-width: 650px;
    padding-right: 20%;
  }

  .group-tool {
    margin-top: 20px;
  }

  .Movie_sj {
    color: #333;
    font-size: 14px;
    margin-left: 20px;
  }

  .ui-sortable-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    flex-basis: 40px;
    background-color: #eee;
    cursor: move;
  }

  .ui-sortable-handle i {
    font-size: 25px;
  }

</style>
<template>
  <div class="WebSiteEdit">
    <div class="WebSiteContent">
      <div class="WebSite_right" draggable="true" @drop="drop($event,0)">
        <div class="WebSite_right_preview" @drop="drop($event,0)">
          <div v-for="(item,index) in dataList" draggable="true" @drop="drop($event,index)"
            @dragstart="handleDragStart($event, item)" @dragover.prevent="handleDragOver($event, item)"
            @dragenter="handleDragEnter($event, item)" @dragend="handleDragEnd($event, item)" :key="index">
            <div class="diy-component-preview">
              <div class="WebSite_item">
                <div class="ui-sortable-handle">
                  <i class="iconfont icon-Arrowsdowntopmove"></i>
                </div>
                <div class="temp-img">
                  <img v-if="item.plugData&&item.plugData.CoverImg" :src="item.plugData.CoverImg" alt="" />
                </div>
                <div class="temp-info">
                  <h2 class="temp-title">{{item.plugData.Title}}</h2>
                  <h3 class="temp-subtitle">
                    <template v-if="item.Id=='white_label_video'">
                      {{item.plugData.Describe}}
                    </template>
                  </h3>
                  <div class="group-tool">
                    <template v-if="item.Id=='white_label_other'&&item.plugData.Type==6">
                    </template>
                    <template v-else>
                      <el-button type="primary" size="small" @click="showDialog(item)">{{$t('pub.edit')}}</el-button>
                    </template>
                    <el-button type="danger" size="small" @click="deletePlug(index)">{{$t('objFill.v101.shanchu')}}</el-button>
                    <span class="Movie_sj">{{$t('Operation.Op_shangjia')}}</span>
                    <el-switch v-model="item.isShelves" @change="getSearchCount(item)" :active-value="1" :inactive-value="0" active-color="#13ce66"
                      inactive-color="#dcdfe6"></el-switch>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="WebSite_Left">
        <el-select v-model="templateId" @change="getTemplateDetails()">
          <el-option :label="$t('pub.pleaseSel')" :value="0" :key="0">
          </el-option>
          <el-option v-for="item in templateList" :label="item.TemplateName" :value="item.Id" :key="item.Id">
          </el-option>
        </el-select>
        <div class="temp-list-wrap">
          <div v-for="(subItem,subIndex) in detailsList" class="temp-list-item" :key="subIndex" draggable="true"
            @dragstart="dragLeftStart($event,subItem)" @dragend="dragendLeft($event,subItem)">
            <img v-if="subItem.TemplateData&&subItem.TemplateData.CoverImg" :src="subItem.TemplateData.CoverImg"
              :alt="subItem.SubTemplateName" />
            <div class="temp-font">{{subItem.SubTemplateName}}</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :title="commonTitle" :visible.sync="isShowDialog" width="1000px">
      <!--视频-->
      <plugvideodialog v-if="currentEditItem.Id=='white_label_video'" :plugData="currentEditItemData"></plugvideodialog>
      <!--轮播图-->
      <sliderdialog v-if="currentEditItem.Id=='white_label_slider'" :plugData="currentEditItemData"></sliderdialog>
      <!-- 图片 -->
      <picturedialog v-if="currentEditItem.Id=='white_label_picture'" :plugData="currentEditItemData"></picturedialog>
      <!-- 二维码 -->
      <qrcodedialog v-if="currentEditItem.Id=='white_label_qrcode'" :plugData="currentEditItemData"></qrcodedialog>
      <!-- 背景图 -->
      <backgrounddialog v-if="currentEditItem.Id=='white_label_background_article'" :plugData="currentEditItemData">
      </backgrounddialog>
      <!-- 出团表 -->
      <groupdialog v-if="currentEditItem.Id=='group'" :plugData="currentEditItemData"></groupdialog>

      <!-- 段落标题   -->
      <sectiondialog v-if="currentEditItem.Id=='white_label_paragraph_title'" :plugData="currentEditItemData">
      </sectiondialog>
      <!-- 段落链接 -->
      <paragraphLinkdialog v-if="currentEditItem.Id=='white_label_link_paragraph'" :plugData="currentEditItemData">
      </paragraphLinkdialog>
      <!-- 图片链接 -->
      <imglinkdialog v-if="currentEditItem.Id=='white_label_link_picture'" :plugData="currentEditItemData">
      </imglinkdialog>
      <!-- 挑选自有行程 图片 -->
      <b2bdialog v-if="currentEditItem.Id=='b2b'" :plugData="currentEditItemData"></b2bdialog>
      <!-- 挑选自有行程 段落链接 -->
      <b2blinkdialog v-if="currentEditItem.Id=='b2b_LinkP'" :plugData="currentEditItemData"></b2blinkdialog>
      <!-- 挑选自有行程 图片链接 -->
      <linkpicturedialog v-if="currentEditItem.Id=='b2b_LinkPicture'" :plugData="currentEditItemData">
      </linkpicturedialog>
      <!-- 搜寻区块 banner -->
      <bannerdialog v-if="currentEditItem.Id=='search_b'" :plugData="currentEditItemData"></bannerdialog>
      <!-- 搜寻区块 轮播淡出 -->
      <searchfdialog v-if="currentEditItem.Id=='search_sf'" :plugData="currentEditItemData"></searchfdialog>
      <!-- 搜寻区块 轮播横 -->
      <searchsdialog v-if="currentEditItem.Id=='search_s'" :plugData="currentEditItemData"></searchsdialog>
      <!-- 搜寻区块 其他 -->
      <searcheldialog v-if="currentEditItem.Id=='search_el'" :plugData="currentEditItemData"></searcheldialog>
      <!-- 自定版型 其他 -->
      <otherdialog v-if="currentEditItem.Id=='white_label_other'" :plugData="currentEditItemData"></otherdialog>
      <!-- 首页组件1 -->
      <indexNav v-if="currentEditItem.Id=='index_nav'" :plugData="currentEditItemData"> </indexNav>
      <!-- 首页组件2 -->
      <indexSlider1 v-if="currentEditItem.Id=='index_slider1'" :plugData="currentEditItemData"> </indexSlider1>
      <!-- 首页组件3 -->
      <indexRoll1 v-if="currentEditItem.Id=='index_roll1'" :plugData="currentEditItemData"> </indexRoll1>
      <!-- 首页组件4 -->
      <indexRoll2 v-if="currentEditItem.Id=='index_roll2'" :plugData="currentEditItemData"> </indexRoll2>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowDialog = false" size="small">{{$t('pub.cancelBtn')}}</el-button>
        <el-button type="danger" size="small" @click="setSubPlugData()">{{$t('pub.sureBtn')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import plugvideodialog from "../WebSet/plug-in/video_dialog.vue"
  import sliderdialog from "../WebSet/plug-in/slider_dialog.vue"
  import picturedialog from "../WebSet/plug-in/picture_dialog.vue"
  import qrcodedialog from "../WebSet/plug-in/qrcode_dialog.vue"
  import backgrounddialog from "../WebSet/plug-in/background_dialog.vue"
  import sectiondialog from "../WebSet/plug-in/sectionTitle_dialog.vue"
  import paragraphLinkdialog from "../WebSet/plug-in/paragraphLink_dialog.vue"
  import imglinkdialog from "../WebSet/plug-in/imglink_dialog.vue"
  import b2bdialog from "../WebSet/plug-in/b2b_dialog.vue"
  import b2blinkdialog from "../WebSet/plug-in/b2blink_dialog.vue"
  import linkpicturedialog from "../WebSet/plug-in/linkpicture_dialog.vue"
  import groupdialog from "../WebSet/plug-in/group_dialog.vue"
  import bannerdialog from "../WebSet/plug-in/banner_dialog.vue"
  import searchfdialog from "../WebSet/plug-in/searchf_dialog.vue"
  import searchsdialog from "../WebSet/plug-in/searchs_dialog.vue"
  import searcheldialog from "../WebSet/plug-in/searchel_dialog"
  import otherdialog from "../WebSet/plug-in/other_dialog"
  import indexNav from "../WebSet/home/indexNav"
  import indexSlider1 from "../WebSet/home/indexSlider1"
  import indexRoll1 from "../WebSet/home/indexRoll1"
  import indexRoll2 from "../WebSet/home/indexRoll2"
  export default {
    props: ["templateData"],
    data() {
      return {
        //模板列表
        templateList: [],
        //模板编号
        templateId: 0,
        //数据列表
        dataList: [],
        //模板详情列表
        detailsList: [],
        isShowDialog: false,
        //当前编辑项插件数据
        currentEditItemData: {},
        //当前编号的插件
        currentEditItem: {},
        dragging: null,
        commonTitle: '',
        dragObj: {},
        tempCountry:[
          {
            name:this.$t('objFill.v101.FinancialModule.riben'),
            val:1
          },
          {
            name:this.$t('objFill.v101.hanguo'),
            val:2
          },
          {
            name:this.$t('objFill.v101.aozhou'),
            val:3
          },
          {
            name:this.$t('objFill.v101.dongnanya'),
            val:4
          },
          {
            name:this.$t('objFill.v101.ouzhou'),
            val:5
          },
          {
            name:this.$t('objFill.v101.zhongguodlu'),
            val:6
          },
          {
            name:this.$t('objFill.v101.FinancialModule.taiwan'),
            val:7
          },
          {
            name:this.$t('objFill.v101.beimei'),
            val:8
          },
          {
            name:this.$t('objFill.v101.zhongdongyafei'),
            val:9
          }
        ],
        countryId:1,
        isDraggable: true,
        realTemplateList:[]
      };
    },
    created() {},
    components: {
      plugvideodialog,
      sliderdialog,
      picturedialog,
      qrcodedialog,
      backgrounddialog,
      groupdialog,
      sectiondialog,
      paragraphLinkdialog,
      imglinkdialog,
      b2bdialog,
      b2blinkdialog,
      linkpicturedialog,
      bannerdialog,
      searchfdialog,
      searchsdialog,
      searcheldialog,
      otherdialog,
      indexNav,
      indexSlider1,
      indexRoll1,
      indexRoll2,
    },
    methods: {
      changeCountry(){
        if(this.countryId=="1"){
          this.templateList=this.realTemplateList
        }else{
          this.templateList=[]
          this.Error(this.$t('objFill.v101.gaimobzzwhu'))
        }
        this.templateId=0
        this.detailsList=[]
      },
      dragendLeft(e, item) {
        var obj = {
          Id: item.TemplateKey,
          plugData: item.TemplateData,
          isShelves: 0
        };
        this.dragObj=obj;
        this.drop(e,this.dataList.length);
      },
      //右边上下拖动开始
      handleDragStart(e, item) {
        if (this.isDraggable) {
          this.dragging = item;
        }
      },
      handleDragEnd(e, item) {
        if (this.isDraggable) {
          this.dragging = null
        }
      },
      //首先把div变成可以放置的元素，即重写dragenter/dragover
      handleDragOver(e) {
        if (this.isDraggable) {
          e.dataTransfer.dropEffect = 'move' // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
        }
      },
      handleDragEnter(e, item) {
        if (this.isDraggable) {
          e.dataTransfer.effectAllowed = "move" //为需要移动的元素设置dragstart事件
          if (item === this.dragging) {
            return
          }
          const newItems = [...this.dataList]
          const src = newItems.indexOf(this.dragging)
          const dst = newItems.indexOf(item)
          newItems.splice(dst, 0, ...newItems.splice(src, 1))
          this.dataList = newItems
        }
      },
      //右边上下拖动结束
      //显示弹窗
      showDialog(item) {
        this.isShowDialog = true;
        this.currentEditItem = item;
        this.commonTitle = item.plugData.Title;
        this.currentEditItemData = JSON.parse(JSON.stringify(item.plugData));
        if(!this.currentEditItemData.BottomList) this.$set(this.currentEditItemData,'BottomList',[])
        if(!this.currentEditItemData.MBgColor) this.$set(this.currentEditItemData,'MBgColor','')
        if(!this.currentEditItemData.MLogo) this.$set(this.currentEditItemData,'MLogo','')
      },
      //获取数据
      setSubPlugData() {
        this.isShowDialog = false;
        this.currentEditItem.plugData = JSON.parse(JSON.stringify(this.currentEditItemData));
      },
      //删除插件
      deletePlug(index) {
        var that = this;
        this.Confirm(that.$t('objFill.v101.hote.shifysccsj'), function () {
          that.dataList.splice(index, 1);
        })
      },
      //从左拖动到右边开始
      dragLeftStart(ev, item) {
        this.isDraggable = false;
        var obj = {
          Id: item.TemplateKey,
          plugData: item.TemplateData,
          isShelves: 0
        };
        this.dragObj = obj;
        if (this.dataList.length == 0) {
          if (!this.isDraggable) {
            this.dataList.push(this.dragObj);
            this.isDraggable = true;
          }
        }
      },
      //从左拖动到右边结束
      drop(ev, index) {
        if (!this.isDraggable) {
          this.dataList.splice(index, 0, JSON.parse(JSON.stringify(this.dragObj)));
        }
        this.dragObj = {};
        this.isDraggable = true;
      },
      //获取下拉框
      getTemplate() {
        this.apipost(
          "ws_get_GetTemplateList", {},
          res => {
            if (res.data.resultCode == 1) {
              this.realTemplateList = res.data.data;
              this.templateList=this.realTemplateList
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //获取模板详情
      getTemplateDetails() {
        this.apipost(
          "ws_get_GetTemplateDetailsList", {
            TemplateId: this.templateId
          },
          res => {
            if (res.data.resultCode == 1) {
              this.detailsList = res.data.data;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //数据改变
      initData(tempData) {
        this.dataList = tempData;
      },
      //遍历搜寻框只能上架一个
      getSearchCount(item){
        var isCount=0;
        this.dataList.forEach(x=>{
          if((x.Id=='search_s'|| x.Id=='search_sf' )&&x.isShelves==1){
            isCount++;
          }
        })
        if(isCount>1){
          this.Error(this.$t('objFill.v101.souxlubbhycz'));
          item.isShelves=0
        }
        this.$forceUpdate();
      }
    },
    mounted() {
      this.getTemplate();
    },
    watch: {
      dataList: {
        handler: function (val, oldVal) {
          this.$emit("getNewTemplateData", JSON.parse(JSON.stringify(this.dataList)));
        },
        deep: true
      },
    }
  };

</script>