<template>
  <div class="diy-wrap" :class="'diy-wrap_' + masterPageIndex" :style="{ background: viewModel.setting ? viewModel.setting.background : '' }" id="wrap" v-if="viewModel">
    <draggable v-model="viewModel.widgets" @change="dragEnd">
      <div v-for="(widget, index) in viewModel.widgets" :key="index" class="widgets-box">
        <layout-item v-if="!widget.layout" :widget="widget" @removeWidget="removeWidget" @editWidget="editWidget" @handleCheck="handleCheck" :removeIndex="index" ref="layoutitem"></layout-item>
        <div class="layout-box ">
          <div v-if="widget.layout === 'tab-layer'" :class="'tab-box-' + widget.options.align" @click="handleLayoutCheck(widget, index)">
            <div class="swiper-tab" v-if="widget.columns.length !== 0">
              <div v-for="(tab, tabIndex) in widget.columns" :key="tabIndex" class="swiper-tab_item " :class="{ active: tabIndex === tabLayoutIndex }" @click="tapTab(tabIndex)">{{ tab.option.name }}</div>
            </div>
            <div class="tab-box-content" v-if="widget.columns.length !== 0">
              <swiper :current="tabLayoutIndex" class="swiper-box tabs_swiper">
                <swiper-item v-for="(tablayout, layoutIndex) in widget.columns" :key="layoutIndex" class="tabs_swiper-item">
                  <div class="tab_swiper-masker" />
                  <draggable v-model="tablayout.widgets" v-show="auxiliaryRemove">
                    <div v-for="(tabWidget, tabWidgetIndex) in tablayout.widgets" :key="tabWidgetIndex">
                      <layout-item :widget="tabWidget" @removeWidget="removeWidget" @editWidget="editWidget" @handleCheck="handleCheck" :removeIndex="{ widgetIndex: index, tablayout: layoutIndex, tabWidgetIndex: tabWidgetIndex }"></layout-item>
                    </div>
                  </draggable>
                  <div class="diy-new-block" @dblclick="addWidget(masterPageIndex, true, index, layoutIndex)">
                    双击给容器加新模块
                  </div>
                </swiper-item>
              </swiper>
            </div>
          </div>
          <div v-if="widget.layout === 'grid-layer'">
            <div :style="'display:flex;justify-content:' + widget.options.justify === 'start' || widget.options.justify === 'end' ? 'flex-' + widget.options.justify : widget.options.justify + ';' + flexAlign(widget.options.aligin)">
              <div v-for="(tablayout, layoutIndex) in widget.columns" :key="layoutIndex" :style="'padding-left:' + widget.options.gutter + 'px;padding-right:' + widget.options.gutter + 'px;width:' + tablayout.option.sapn * 4.1666 + '%'">
                <draggable v-model="tablayout.widgets" v-show="auxiliaryRemove">
                  <div v-for="(tabWidget, tabWidgetIndex) in tablayout.widgets" :key="tabWidgetIndex">
                    <layout-item :widget="tabWidget" @removeWidget="removeWidget" @editWidget="editWidget" @handleCheck="handleCheck" :removeIndex="{ widgetIndex: index, tablayout: layoutIndex, tabWidgetIndex: tabWidgetIndex }"></layout-item>
                  </div>
                </draggable>
              </div>
            </div>
          </div>
          <div class="layou-widget-actions">
            <span class="layou-widget-actions-span" @click="handleLayoutCheck(widget, index)">
              容器属性
            </span>
            <span class="layou-widget-actions-span" @click="removeWidget(index)">
              删除容器
            </span>
          </div>
        </div>
      </div>
    </draggable>
    <div class="diy-new-block" @dblclick="addWidget(masterPageIndex, false)">
      双击添加新模块 <span v-if="masterPageIndex > 0">母版页编号:{{ masterPageIndex }}</span>
    </div>
    <view class="diy-widget-wrap_tabbar" v-if="viewModel.setting.showFoot">
      <zk-tabbar ref="zktabbar"></zk-tabbar>
      <div class="diy-dottedbox" />
      <div class="diy-widget-actions">
        <span class="diy-widget-actions-span" @click="eidtTabBar()">编辑</span>
        <span class="diy-widget-actions-span" @click="postMessage('pageSet', viewModel)" v-if="false">设置</span>
      </div>
    </view>
  </div>
</template>

<script>
import ala from '@/service/ala'
import draggable from 'vuedraggable'
import layoutItem from './layout-item'
import serivce from './service'

export default {
  name: 'diy',
  components: {
    layoutItem,
    draggable
  },
  props: {
    masterPageIndex: {
      default: 0,
      type: Number
    }
  },
  data() {
    return {
      auxiliaryRemove: true,
      widgetsMask: -1,
      tabLayoutIndex: 0,
      theme: {},
      option: {},
      viewModel: {
        widgets: [],
        setting: {
          showFoot: false
        }
      },
      checkedWidgetIndex: -1,
      tabSwiperItem: -1,
      isClickContent: false
    }
  },
  onLoad(option) {
    this.option = option
  },
  mounted() {
    this.initListener()
    this.postMessage('clientIframeLoadRequest')
  },
  methods: {
    flexAlign(direction) {
      if (direction === 'top') {
        return 'align-items: flex-start'
      }
      if (direction === 'middle') {
        return 'align-items: center'
      }
      if (direction === 'bottom') {
        return 'align-items: flex-end'
      }
    },
    tapTab(index) {
      this.tabLayoutIndex = index
    },
    async initWidget(data) {
      this.viewModel = {
        ...data,
        masterPageIndex: this.masterPageIndex
      }
      ala.vuexSet('diyClientHost', data.clientHost)
      this.viewModel = ala.filerPageInfo(this.viewModel)

      serivce.setTabbar(this, this.viewModel)
      this.postMessage('clientIframeLoadSuccessful', true)
    },
    initListener() {
      window.addEventListener('message', event => {
        const { type, data } = event.data || {}
        switch (type) {
          case 'initWidget':
            this.initWidget(data)
            break
          case 'initTheme':
            this.initTheme(data)
            break
          case 'selectWidget':
            this.handleCheck(data)
            break
          case 'changeStyleCss':
            this.updateStyle('css', data)
            break
          case 'changeBorder':
            this.updateStyle('border', data)
            break
          case 'changeTheme':
            this.updateStyle('widgetTheme', data)
            break
          case 'changeVariable':
            this.updateVariable(data)
            break
          case 'widgetList':
            this.postMessage('widgetList', this.viewModel.widgets)
            break
          case 'addLayout':
            this.addLayout(data)
            break
          case 'removeWidget':
            this.removeWidgetAndSave(data)
            break
          case 'editLayouColumns':
            this.editLayouColumns(data)
            break
          case 'switchWidget':
            this.switchWidget(data)
        }
      })
    },
    editLayouColumns(data) {
      this.viewModel.widgets[data.layoutIndex].columns = data.layoutAttribute.columns
    },
    handleCheck(value) {
      uni.$emit('layoutItemCheck', value.index)
      this.postMessage('selectWidget', value)
    },
    handleLayoutCheck(widget, index) {
      let data = {
        isLayout: true,
        layoutModel: widget,
        layoutIndex: index
      }
      this.postMessage('checkWidgetLayout', data)
    },
    addLayout(widget) {
      this.viewModel.widgets.push(widget)
    },
    postMessage(type, data) {
      parent.postMessage({ type, data }, '*')
    },
    initTheme(data) {
      var bgColor = JSON.parse(data.tabBarSetting).backGround
      this.$refs.zktabbar.$emit('diyTab', JSON.parse(data.tabBarSetting))
      this.$refs.zktabbar.backgroundColor = bgColor
    },
    updateStyle(type, data) {
      const { viewModel, checkedWidgetIndex } = this
      if (checkedWidgetIndex === -1) return
      const currentWidget = viewModel.widgets[checkedWidgetIndex]
      if (currentWidget.style === null) {
        currentWidget.style = {}
      }
      this.$set(currentWidget.style, type, data)
    },
    // 删除容器或模块
    removeWidgetAndSave(removeData) {
      if (typeof removeData === 'number') {
        this.viewModel.widgets.splice(removeData, 1)
      }
      if (typeof removeData === 'object') {
        if (typeof removeData.removeIndex === 'number') {
          this.viewModel.widgets.splice(removeData.removeIndex, 1)
        } else {
          this.auxiliaryRemove = false
          this.viewModel.widgets[removeData.removeIndex.widgetIndex].columns[removeData.removeIndex.tablayout].widgets.splice(removeData.removeIndex.tabWidgetIndex, 1)
          this.auxiliaryRemove = true
        }
      }
      this.postMessage('diySave')
    },
    removeWidget(removeData) {
      this.postMessage('deleteWidgetAndSave', removeData)
    },
    editWidget(widget) {
      this.postMessage('editWidget', widget)
    },
    async addWidget(masterPageIndex, isLayout, widgetIndex, layoutIndex) {
      var para = {
        masterPageIndex: masterPageIndex,
        isLayout: isLayout,
        widgetIndex: widgetIndex,
        layoutIndex: layoutIndex
      }
      this.postMessage('showDialogWidget', para)
    },
    eidtTabBar() {
      var widget = {
        name: 'zk-tabbar',
        widgetId: '5dc201f5c8267a146475c41d'
      }
      this.postMessage('editWidget', widget)
    },
    updateVariable(vars) {},
    async dragEnd() {
      this.postMessage('dragWidgetAndSave')
    },
    switchWidget(data) {
      this.initWidget(data)
    }
  }
}
</script>

<style lang="scss" scoped>
// #ifndef APP-PLUS
// app-plus-css
@import './style.scss';
// app-plus-css
// #endif
</style>
