<template>
  <div class="operation-area-component">
    <div class="preview-list">
      <div id="previewBox">
        <template v-for="(item, index) in customComponents">
          <div
            v-if="isShow"
            :key="index"
            class="component-item"
            :class="selectIndex === index ? 'active' : ''"
            :data-index="item.index"
            @click="seletConfig(item, index)"
          >
            <div class="movie-icon" />
            <div class="component-title">
              {{ item.name }}
            </div>
            <div
              class="delete-icon"
              @click.stop="deleteSub(item.keyCode)"
            />
          </div>
        </template>
      </div>
      <div
        class="component-item add-component"
        :class="selectIndex === '' ? 'active' : ''"
        @click="seletConfig"
      >
        <div class="fixed-item">
          <i class="el-icon-plus" />
        </div>
        <div class="component-title">
          添加组件
        </div>
      </div>
      <div
        v-if="footerComponent"
        class="component-item"
        :class="selectIndex === 'Footer' ? 'active' : ''"
        @click="seletConfig({keyCode:'Footer'}, 'Footer')"
      >
        <div class="fixed-item">
          <i class="el-icon-position" />
        </div>
        <div class="component-title">
          底部导航
        </div>
      </div>
    </div>
    <div class="operation-container">
      <Allocation />
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import Allocation from './Allocation/index'
import dragula from 'dragula'
export default {
  name: 'OperationArea',
  components: {
    Allocation
  },
  data () {
    return {
      isShow: true,
      selectIndex: '',
      dragulaExp: null,
      customComponents: []
    }
  },
  computed: {
    ...mapState('creationCamp', ['diyComponents', 'footerComponent'])
  },
  watch: {
    'diyComponents.length': {
      handler () {
        this.getComponentsList()
      }
    }
  },
  created () {
    this.customComponents = JSON.parse(JSON.stringify(this.diyComponents))
  },
  mounted () {
    this.init()
  },
  methods: {
    ...mapMutations('creationCamp', ['diyComponentsSort', 'setCurrentComponentKeyCode', 'deleteComponent']),
    getComponentsList() {
      const currentKeyCodes = this.customComponents.map(component => component.keyCode)
      this.diyComponents.map(component => {
        const { keyCode } = component
        if (currentKeyCodes.indexOf(keyCode) === -1) {
          this.customComponents.push(component)
        }
      })
    },
    init () {
      this.dragulaExp = dragula([document.querySelector('#previewBox')]).on('dragend', (el) => {
        const previewList = document.querySelectorAll('#previewBox>.component-item')
        const newSortArray = []
        Array.prototype.slice.call(previewList).map((item, index) => {
          const currentIndex = item.dataset.index * 1
          newSortArray.push(currentIndex)
        })
        this.diyComponents.sort((a, b) => {
          return newSortArray.indexOf(a.index) - newSortArray.indexOf(b.index)
        })
      })
    },
    seletConfig (item, index) {
      this.selectIndex = index
      const { keyCode } = item || {}
      this.setCurrentComponentKeyCode(keyCode)
    },
    deleteSub (keyCode) {
      this.customComponents = this.customComponents.filter(component => {
        return keyCode !== component.keyCode
      })
      this.deleteComponent(keyCode)
    }
  }
}
</script>

<style lang="less" scoped>
.operation-area-component {
  display: flex;
  .preview-list {
    width: 140px;
    height: 500px;
    border: 1px solid #eee;
    background-color: #eef0f2;
    .component-item {
      position: relative;
      display: flex;
      align-items: center;
      height: 56px;
      padding: 0 10px;
      color: #383838;
      border-bottom: 1px solid #c5cddb;
      &.active {
        background-color: #fff;
        color: #212121;
        font-weight: 500;
        &::after {
          position: absolute;
          content: '';
          display: block;
          height: 100%;
          width: 4px;
          background: #5b99ea;
          top: 0;
          left: -1px;
        }
      }
      .movie-icon {
        width: 16px;
        height: 16px;
        margin-right: 10px;
        background-image: url('../../../../assets/CreationCamp/move.png');
        background-position: center;
        background-size: cover;
      }
      .component-title {
        flex: 1;
        font-size: 14px;
      }
      &:hover {
        background-color: #fff;
        .delete-icon {
          opacity: 1;
        }
      }
      .delete-icon {
        opacity: 0;
        width: 16px;
        height: 16px;
        background-image: url('../../../../assets/CreationCamp/delete.png');
        background-position: center;
        background-size: cover;
      }
    }
    .fixed-item {
      width: 16px;
      height: 16px;
      margin-right: 10px;
    }
    .add-component {
      color: #2e60f8 !important;
    }
  }
  .operation-container {
    width: 300px;
    overflow: auto;
    background-color: #fff;
    /deep/ .collapse-list {
      margin-bottom: 10px;
      .collapse-item {
        margin-top: 10px;
        background-color: #fff;
        border: 1px solid #c5cddb;
        .collapse-item-header {
          display: flex;
          align-items: center;
          height: 36px;
          background-color: #eef0f2;
          .header-icon {
            width: 32px;
            text-align: center;
            cursor: move;
          }
          .header-thumbnail {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 25px;
            font-size: 20px;
            img {
              max-width: 100%;
              max-height: 100%;
              vertical-align: middle;
              border-style: none;
            }
          }
          .header-name {
            margin-left: 10px;
            flex: 1;
          }
          .header-arrow {
            width: 32px;
            text-align: center;
            font-size: 16px;
            i {
              transition: all 0.3s;
              &.open {
                transform: rotate(-180deg);
              }
            }
          }
        }
        .collapse-item-content {
          padding: 20px 10px;
          .upload-widget {
            margin-bottom: 10px;
            .upload-uploader {
              width: 100%;
              height: 110px;
              /deep/ .el-upload {
                width: 100%;
              }
            }
            .upload-images {
              width: 100%;
              height: 110px;
            }
            .upload-btn {
              box-sizing: border-box;
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 110px;
              cursor: pointer;
              border: 2px dashed #2e60f8;
              border-radius: 2px;
              background-color: #f8f9fb;
              text-align: center;
              font-size: 20px;
              color: #2e60f8;
              i {
                color: #2e60f8;
                font-size: 20px;
              }
              .upload-title {
                margin-left: 10px;
                font-size: 14px;
              }
            }
          }
        }
      }
    }
    /deep/ .add-widget {
      height: 36px;
      line-height: 36px;
      font-size: 14px;
      background-color: #2e60f8;
      color: #fff;
      text-align: center;
      display: block;
      cursor: pointer;
      margin-bottom: 20px;
    }
  }
}
</style>
