<template>
  <div
    class="grid-layout drag-handler-mobile"
    :class="{'is-active': isActive}"
    @click.capture="handleClick"
  >
    <div class="img-wrap">
      <snapshot-img :imageData="colConfig"></snapshot-img>
    </div>
  </div>
</template>

<script>
const SnapshotImg = () => import('@/components/portal/SnapshotImg.vue')

export default {
  name: 'MobileGridLayout',
  components: {SnapshotImg},
  props: {
    colConfig: {
      type: Object,
      default: () => {}
    },
    select: {
      type: Object,
      default: () => {}
    },
    colLayoutIndex: {
      type: Number
    },
    data: {
      type: Object,
      default: () => {}
    },
    hasKeyList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectWidget: this.select,
      num: 0,
      noDataImage: require('@/assets/nodata_images/drag.png')
    }
  },
  computed: {
    isActive() {   
      return this.selectWidget.key ==  this.colConfig.key
    },
  },

  watch: {
    select(val) {
      this.selectWidget = val
    },
    selectWidget: {
      handler(val) {
        this.$emit('update:select', val)
      },
      deep: true
    }
  },
  methods: {
    handleClick(e) {
      let currentIndex = this.data.mobileList.findIndex((item)=>item.key==this.hasKeyList[this.colLayoutIndex].key)
      this.selectWidget = this.data.mobileList[currentIndex]
      this.$emit('handleClick',this.colLayoutIndex)
    },
  }
}
</script>

<style lang="scss" scoped>
@mixin horizontalVerticalCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-layout {
  min-height: 108px;
  // border: 1px dashed #b5b5b5;
  margin-bottom: 12px;
  padding:2px 15px;
  box-sizing: border-box;
  .grid-row {
    min-height: 192px;
    margin: 8px !important;
  }

  .grid-col,
  .draggable-item,
  .widget-form-list {
    min-height: 192px;
  }

  .draggable-item {
    background: rgba(248, 248, 248, 0.39);
  }

  .draggable-content__header {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #e6e6e6;
    margin-bottom: 16px;
    background: #fff;

    .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);
  }

  .draggable-content__header {
    &:hover {
      box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
    }
  }
}

.no-column {
  @include horizontalVerticalCenter;

  .empty__col {
    width: 100%;
    height: 100%;
    @include horizontalVerticalCenter;
  }
}

.grid-layout_one {
  .grid-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.grid-layout_two,
.grid-layout_three {
  .grid-col {
    &:first-child {
      padding-left: 0 !important;
    }

    &:last-child {
      padding-right: 0 !important;
    }
  }
}

.is-active {
  border: 2px solid #409eff;
  position: relative;
  cursor:move;
  .button-group {
    position: absolute;
    top: 50%;
    right: -35px;
    z-index: 9999;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
  }

  .col-layout-delete,
  .col-layout-drag {
    border: 2px solid #409eff;
    width: 48px;
    height: 32px;
    padding: 0;
    line-height: 30px;
    background: #fff;
  }

  .col-layout-delete {
    margin-left: 0;
    border-left: none;
    border-radius: 0 2px 2px 0;
  }

  ::v-deep {
    .col-layout-drag {
      cursor: move;
      border-radius: 2px 0 0 2px;

      .icon-tuozhuai {
        font-weight: bold;
      }
    }
  }
}
.img-wrap{
  border-radius: 10px;
  overflow: hidden;
}
  // ::v-deep{
  //   .el-image{
  //     width:100%;
  //     height:100%;
  //     .el-image__inner{
  //       display: block;
  //       width: auto;
  //       height: auto;
  //       max-width: none;
  //       max-height: none;
  //       object-fit: none !important;
  //       object-position: center; /* 让原图居中显示 */
  //     }
  //   }
  // }
</style>