<template>
  <div>
    <div style="display: flex;justify-content: space-between;">
      <div class="title">
        {{ boxTitle }}
      </div>
      <slot name="titleRight"></slot>
      <!-- <el-button
        type="primary"
        size="small"
        style="margin: 10px;"
        @click="cutImgFn"
        >裁切</el-button
      > -->
    </div>
    <div class="scrollbarBox">
      <slot v-if="$slots.mainContent" name="mainContent"></slot>
      <!-- <el-checkbox-group
        v-if="imglist.length"
        v-model="checkList"
        style="display: flex;flex-wrap:nowrap"
      >
        <el-checkbox
          v-for="img in imglist"
          :key="img.designId"
          :class="{
            imgchecked: checkList.includes(img),
          }"
          :label="img"
        >
          <div class="img-item" @click.stop.prevent="selectImg(img)">
            <img style="width: 140px" :src="img.productionFile" />
            <span>{{ img.designId }}</span>
          </div>
        </el-checkbox></el-checkbox-group
      > -->
      <el-empty v-else :description="emptyTitle"></el-empty>
    </div>
  </div>
</template>
<script>
export default {
  name: "PicScrollbarBox",
  props: {
    boxTitle: {
      type: String,
      default: null,
    },
    emptyTitle: {
      type: String,
      default: null,
    },
    imglist: {
      type: String,
      default: null,
    },
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.scrollbarBox {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  white-space: nowrap;
}
.title {
  padding: 5px 10px;
  font-size: 20px;
  font-weight: 700;
}
.el-scrollbar {
  overflow-y: hidden;
  //::v-deep .el-scrollbar__wrap {
  //  margin-bottom: 0 !important;
  //}
  //::v-deep .el-scrollbar__view {
  //  display: flex;
  //  flex-wrap: nowrap;
  //}
}
::v-deep.el-empty {
  padding-top: 0;
  padding-bottom: 25px;
  .el-empty__image {
    width: 100px !important;
  }
}
</style>
