<template>
  <div @contextmenu.prevent="handleContextmenu">
    <!-- <el-row :gutter="gutter">
          <el-col :xs="8" :sm="6" :lg="5" :xl="4" v-for="(item,index) in items" :key="index">
          </el-col>
    </el-row>-->
    <el-button type="primary" @click="test">测试</el-button>
    <el-row type="flex" justify="center">
      <el-col :span="20">
        <el-row class="list" ref="wrapper">
          <div
            class="list-item"
            :style="{
              'margin-right':
                (index + 1) % itemNumber == 0 ? 0 : marginRight + 'px',
              width: itemWidth + 'px',
            }"
            v-for="(item, index) in items"
            :key="index"
          >
            <slot name="card" :itemProp="item"></slot>
          </div>
        </el-row>
      </el-col>
    </el-row>
    <contextMenu
      :contextVisible="contextVisible"
      :eventPosition="eventPosition"
      @changeSize="changeSize"
      @changeVisible="changeVisible"
    />
  </div>
</template>
<script>
import contextMenu from "./BaseContextMenu.vue";
export default {
  components: {
    contextMenu,
  },
  props: {
    items: {
      type: Array,
      required: true,
    },
    gutter: {
      type: Number,
      default: 10,
    },
  },
  computed: {
    surplus() {
      return this.wrapperWidth % this.itemWidth;
    },
    itemNumber() {
      return Math.floor(this.wrapperWidth / this.itemWidth);
    },
    marginRight() {
      return Math.round((this.surplus / (this.itemNumber - 1)) * 100) / 100;
    },
  },
  mounted() {
    this.wrapperWidth = this.$refs.wrapper.$el.clientWidth - 1;
    window.onresize = () => {
      console.log("敞口在滨化");
      this.wrapperWidth = this.$refs.wrapper.$el.clientWidth - 1;
    };
    // console.log("this.items", this.items);
    // console.log("this.gutter", this.gutter);
  },
  data() {
    return {
      wrapperWidth: "",
      itemWidth: "300",
      contextVisible: false,
      eventPosition: {
        left: 0,
        top: 0,
      },
    };
  },
  methods: {
    test() {
      console.log("this.$refs.wrapper", this.$refs.wrapper);
      console.log("this.wrapperWidth", this.wrapperWidth);
      console.log("this.itemWidth", this.itemWidth);
      console.log("this.surplus", this.surplus);
      console.log("this.itemNumber", this.itemNumber);
      console.log("this.marginRight", this.marginRight);
    },
    handleContextmenu(event) {
      console.log("鼠标右击", event);
      this.contextVisible = true;
      this.eventPosition = {
        left: event.clientX,
        top: event.clientY,
      };
    },
    changeVisible(msg) {
      this.contextVisible = msg;
    },
    changeSize(size) {
      console.log("size", size);
      this.itemWidth = size;
    },
    handleGetBig() {
      console.log("大图标关闭");
      this.$emit("changeVisible", false);
    },
    handleGetMedium() {
      console.log("中等图标关闭");
      this.$emit("changeVisible", false);
    },
    handleGetSmall() {
      console.log("小图标关闭");
      this.$emit("changeVisible", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  .list-item {
    float: left;
  }
}
</style>