<template>
  <div class="design-panel">
    <template v-if="layoutType !== 1">
      <div class="design-header__wrap">
        <div class="design-header__left">
          <el-checkbox-group v-model="data.topBottomLayout" @change="handleCheckboxChange">
            <el-checkbox label="headerCol">顶部栏</el-checkbox>
            <el-checkbox label="bottomCol">底部栏</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="design-header__right">
          <div
            v-for="item in headerConfig"
            class="design-header__right-item"
            :key="item.key"
            :class="{'checked-layout': data.main.layoutCol === item.key}"
            @click="handleCheckLayout(item.key)"
          >
            <div class="item-text">{{ item.value }}</div>
            <i :class="item.iconClassName" class="layout-icon"></i>
          </div>
        </div>
      </div>
      <div class="design-container">
        <div
          class="header-draggable__wrap"
          v-if="data.topBottomLayout.includes('headerCol')"
        >
          <draggable
            v-model="data.header"
            v-bind="{
              group: 'form',
              ghostClass: 'ghost',
              animation: 200,
              handle: '.drag-handler'
            }"
            class="header-draggable"
          >
            <transition-group
              name="fade"
              tag="div"
              class="widget-form-list"
              :class="{'widget-form__bg': layoutType === 1}"
            >
              <template v-for="(element, index) in data.header">
                <div class="draggable-content__header" :key="index">
                  <div class="title drag-handler">{{ element.name }}</div>

                  <div class="btn-group">
                    <el-button
                      type="text"
                      title="移除"
                      @click="deleteColumn(index, 'header')"
                    >
                      <i class="el-icon-close"></i>
                    </el-button>
                  </div>
                </div>
              </template>
              <div key="empty" class="empty__col" v-if="data.header.length < 1">
                <el-image :src="noDataImage"></el-image>
                <p class="no-data-text">拖拽栏目进行门户设计</p>
              </div>
            </transition-group>
          </draggable>
        </div>
        <div
          class="draggable-layout"
          :class="{
            'has-header-layout': data.topBottomLayout.includes('headerCol'),
            'has-bottom-layout': data.topBottomLayout.includes('bottomCol'),
            'header-and-bottom':
              data.topBottomLayout.includes('bottomCol') &&
              data.topBottomLayout.includes('headerCol')
          }"
        >
          <template v-for="it in layoutMain">
            <draggable
              v-model="data.main[it.key]"
              v-bind="{
                group: 'form',
                ghostClass: 'ghost',
                animation: 200,
                handle: '.drag-handler'
              }"
              v-if="it.proportion"
              :key="it.key"
              class="draggable-item"
              :class="`${it.key}-draggable_${it.proportion}`"
            >
              <transition-group
                name="fade"
                tag="div"
                class="widget-form-list"
                :class="{'widget-form__bg': layoutType === 1}"
              >
                <template v-for="(element, index) in data.main[it.key]">
                  <div class="draggable-content__header" :key="index">
                    <div class="title drag-handler">{{ element.name }}</div>

                    <div class="btn-group">
                      <el-button
                        type="text"
                        title="移除"
                        @click="deleteColumn(index, it.key, 'main')"
                      >
                        <i class="el-icon-close"></i>
                      </el-button>
                    </div>
                  </div>
                </template>
                <div
                  class="empty__col"
                  :key="it.key"
                  v-if="
                    !data.topBottomLayout.includes('headerCol') &&
                      it.key === 'left' &&
                      data.main.left.length < 1
                  "
                >
                  <el-image :src="noDataImage"></el-image>
                  <p class="no-data-text">拖拽栏目进行门户设计</p>
                </div>
              </transition-group>
            </draggable>
          </template>
        </div>
        <div
          class="bottom-draggable__wrap"
          v-if="data.topBottomLayout.includes('bottomCol')"
        >
          <draggable
            v-model="data.bottom"
            v-bind="{
              group: 'form',
              ghostClass: 'ghost',
              animation: 200,
              handle: '.drag-handler'
            }"
            class="bottom-draggable"
          >
            <transition-group
              name="fade"
              tag="div"
              class="widget-form-list"
              :class="{'widget-form__bg': layoutType === 1}"
            >
              <template v-for="(element, index) in data.bottom">
                <div class="draggable-content__header" :key="index">
                  <div class="title drag-handler">{{ element.name }}</div>
                  <div class="btn-group">
                    <el-button
                      type="text"
                      title="移除"
                      @click="deleteColumn(index, 'bottom')"
                    >
                      <i class="el-icon-close"></i>
                    </el-button>
                  </div>
                </div>
              </template>
            </transition-group>
          </draggable>
        </div>
      </div>
    </template>
    <div class="mobile-design" v-else>
      <div class="mobile-design__header">
        <el-image :src="mobileHeaderImg"></el-image>
      </div>
      <draggable
        v-model="data.mobileList"
        v-bind="{
          group: 'form',
          ghostClass: 'ghost',
          animation: 200,
          handle: '.drag-handler'
        }"
        class="mobile-draggable"
      >
        <transition-group
          name="fade"
          tag="div"
          class="widget-form-list"
          :class="{'widget-form__bg': layoutType === 1}"
        >
          <template v-for="(element, index) in data.mobileList">
            <div class="draggable-content__header" :key="index">
              <div class="title drag-handler">{{ element.name }}</div>

              <div class="btn-group">
                <el-button
                  type="text"
                  title="移除"
                  @click="deleteColumn(index, 'mobileList')"
                >
                  <i class="el-icon-close"></i>
                </el-button>
              </div>
            </div>
          </template>
          <div key="empty" class="empty__col" v-if="data.mobileList.length < 1">
            <el-image :src="noDataImage"></el-image>
            <p class="no-data-text">拖拽栏目进行门户设计</p>
          </div>
        </transition-group>
      </draggable>
    </div>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
export default {
  name: 'design-panel',
  components: {
    Draggable
  },
  props: ['data', 'select', 'layoutType'],
  data() {
    return {
      selectWidget: this.select,
      headerConfig: [
        {
          key: 'two',
          value: '90:30',
          iconClassName: 'icon-a-90'
        },
        {
          key: 'three',
          value: '30:30:30',
          iconClassName: 'icon-a-30'
        },
        {
          key: 'equal-two',
          value: '60:60',
          iconClassName: 'icon-a-60'
        }
      ],
      layoutMain: [
        {
          key: 'left',
          proportion: 'two'
        },
        {
          key: 'center'
        },
        {
          key: 'right',
          proportion: 'one'
        }
      ],
      noDataImage: require('@/assets/nodata_images/drag.png'),
      mobileHeaderImg: require('@/assets/img/mobile-design-header.png'),
      currentLayout:'two',
    }
  },
  watch: {
    select(val) {
      this.selectWidget = val
    },
    selectWidget: {
      handler(val) {
        this.$emit('update:select', val)
      },
      deep: true
    },
    'data.main.layoutCol'(val) {
      this.setLayoutMainConfig(val)
    }
  },
  mounted() {
    document.body.ondrop = function(event) {
      let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
      if (isFirefox) {
        event.preventDefault()
        event.stopPropagation()
      }
    }
  },
  methods: {
    handleCheckLayout(key) {
      const keyList = ['two', 'equal-two']
      if (keyList.includes(key)&&!keyList.includes(this.currentLayout)) {
        this.$confirm(
          '改变当前布局将会导致部分栏目丢失，是否确认切换布局？',
          '提示',
          {
            type: 'warning'
          }
        )
          .then(() => {
            this.currentLayout = key
            this.handleLayoutChange(key)
          })
          .catch(() => {})
      } else {
        this.handleLayoutChange(key)
        this.currentLayout = key
      }
    },
    handleLayoutChange(key) {
      this.setLayoutMainConfig(key)
      this.$set(this.data.main, 'layoutCol', key)
      this.$set(this.data.main, 'center', [])
    },
    handleCheckboxChange(val){
      if(val.length === 0){
        this.$set(this.data,'header',[])
        this.$set(this.data,'bottom',[])
      }else if(val.length === 1){
        val[0] === 'header' ? this.$set(this.data,'bottom',[]) : this.$set(this.data,'header',[])
      }
    },
    handleSelectWidget(index) {
      this.selectWidget = this.data.list[index]
    },
    setLayoutMainConfig(key) {
      const keyMap = {
        two: 'two',
        three: 'one',
        'equal-two': 'one'
      }
      this.$set(this.layoutMain[0], 'proportion', keyMap[key])
      this.$set(this.layoutMain[1], 'proportion', key === 'three' ? 'one' : '')
    },
    deleteColumn(index, type, main = '') {
      this.$emit('delete-column', index, type, main)
    },
    handleAdd(e, type) {
      const isHeader = type === 'header' && this.data.header.length > 1
      const isBottom = type === 'bottom' && this.data.bottom.length > 1
      if (isHeader || isBottom) {
        this.$emit('delete-column', e.newIndex, type, '')
        return this.$message.warning(
          `${type === 'header' ? '顶部栏' : '底部栏'}只能放一个栏目`
        )
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.design-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  // padding-top: 40px;

  .design-container {
    background: #fff;
    height: calc(100% - 136px);
    margin: 16px 24px 0;
    overflow: auto;
    .header-draggable__wrap,
    .bottom-draggable__wrap {
      margin: 0 24px;
      border: 1px dashed #b5b5b5;
      .widget-form-list {
        min-height: 80px;
        padding: 8px;
        .draggable-content__header {
          margin-top: 12px;
        }
      }
    }
    .header-draggable__wrap {
      margin-top: 32px;
    }
    .bottom-draggable__wrap {
      margin-bottom: 32px;
    }
    .draggable-layout {
      display: flex;
      height: calc(100% - 64px);
      margin: 24px;
      padding-top: 8px;
      .draggable-item {
        border: 1px dashed #b5b5b5;
        .widget-form-list {
          height: 100%;
          padding: 8px;
          .draggable-content__header {
            margin-bottom: 16px;
          }
          .empty__col {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 71px;
            .no-data-text {
              margin: 0;
              padding-left: 32px;
              font-size: 18px;
              color: #333;
            }
          }
        }
      }
      .left-draggable_two {
        flex: 2;
        margin-right: 24px;
      }

      .left-draggable_one,
      .center-draggable_one,
      .right-draggable_one {
        flex: 1;
      }
      .left-draggable_one,
      .center-draggable_one {
        margin-right: 24px;
      }
    }
    .has-header-layout {
      padding-top: 0;
    }
    .has-header-layout,
    .has-bottom-layout {
      height: calc(100% - 64px - 98px - 32px);
    }
    .header-and-bottom {
      height: calc(100% - 2 * 154px);
    }
  }
  ::v-deep {
    .design-header__wrap {
      display: flex;
      height: 120px;
      align-items: center;
      background: #fff;
      margin: 0 24px;
      .design-header__right {
        display: flex;
        flex: 1;
        justify-content: center;
        .design-header__right-item {
          margin-right: 88px;
          cursor: pointer;
          text-align: center;
          .layout-icon {
            font-size: 42px;
            padding: 8px 10px;
            background: #ececec;
            color: #fff;
          }
          .item-text {
            color: #333;
            padding-bottom: 8px;
          }
        }
        .checked-layout {
          .layout-icon {
            color: #409eff;
            background: #fff;
            border: 1px solid #409eff;
          }
        }
      }
      .design-header__left {
        flex-basis: 200px;
        padding-left: 24px;
        .el-checkbox {
          display: block;
          padding-bottom: 12px;
          .el-checkbox__label {
            color: #333;
          }
        }
      }
    }

    .el-card__header {
      cursor: move;
    }
    .col-layout__wrap {
      display: flex;
      height: 100%;
      .layout-left {
        flex: 2;
        background: #fff;
        margin-right: 20px;
      }
      .layout-right {
        flex: 1;
        background: #fff;
      }
    }
  }
  .widget-form-list {
    .empty__col {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 71px;
      .no-data-text {
        margin: 0;
        padding-left: 32px;
        font-size: 18px;
        color: #333;
      }
    }
  }
  .header-draggable__wrap {
    .widget-form-list {
      .empty__col {
        padding-top: 0px;
        height: 80px;
      }
    }
  }
  .draggable-content__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #e6e6e6;
    .title {
      flex: 1;
      color: #222222;
      font-size: 18px;
      padding: 16px 18px;
      font-weight: bold;
      cursor: move;
      &::before {
        position: relative;
        top: 3px;
        display: inline-block;
        content: '';
        width: 4px;
        height: 19px;
        margin-right: 10px;
        background: #409eff;
      }
    }
    .btn-group {
      padding: 5px 18px;
    }
    i {
      font-size: 14px;
      color: #666666;
    }
  }
  .ghost {
    background: rgb(171, 209, 228);
  }
}
.mobile-design {
  background: url('../../assets/img/mobile-android.png') no-repeat;
  background-size: 100% 100%;
  background-color: #f5f5f5;
  width: 380px;
  height: 800px;
  border-radius: 55px;
  padding: 17px 0;
  scrollbar-width: 0;
  -ms-overflow-style: none;
  box-sizing: border-box;
  margin: 0 auto;
  &::-webkit-scrollbar {
    width: 0;
  }
  .mobile-draggable {
    height: calc(100% - 343px);
  }
  .widget-form-list {
    background: none;
    height: calc(100% - 40px);
    .draggable-content__header {
      margin-bottom: 16px;
      background: #fff;
      border: none;
      border-radius: 10px;
    }
    .empty__col {
      background: #fff;
      height: 160px;
      border: 1px dashed #b5b5b5;
      padding-top: 0;
      .no-data-text {
        font-size: 16px;
      }
    }
  }
  ::v-deep {
    .mobile-design__header {
      text-align: center;
      .el-image {
        width: 350px;
        border-radius: 26px 26px 0 0;
      }
    }
  }
}
.mobile-widget {
  background: $--background-color-base;
  width: 315px;
  margin: 10px auto;
  border-radius: 36px;
}
.form-empty {
  position: absolute;
  text-align: center;
  width: 300px;
  font-size: 20px;
  top: 200px;
  left: 50%;
  margin-left: -150px;
  color: #ccc;
}
.widget-form__bg {
  width: 315px;
  margin: 0px auto;
  border-radius: 36px;
  padding: 10px;
}
</style>
