<template>
  <div style="height: 650px;">
    <el-carousel trigger="click" style="height:100%" v-if="show" ref="carousel">
      <el-carousel-item v-for="(item,k) in data.swiper" :key="k">
        <div style="position: relative;width: 100%;height: 100%;">
          <UploadEl :data="item" field="portalConfigPic"/>
          <div class="title" contenteditable="true" @blur="edit1('portalConfigTitle', k,$event)">
            {{ item.portalConfigTitle }}
          </div>
          <div class="subTitle" contenteditable="true" @blur="edit1('portalConfigDesc', k,$event)">{{
              item.portalConfigDesc
            }}
          </div>
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <div style="position: relative;width: 100%;height: 100%;">
          <div style="width:100%;height:100%;"
               @click="addImg">
            <i class="el-icon-circle-plus" style="font-size: 3vw; line-height: 650px"></i>
          </div>·
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>

import UploadEl from "@/components/editEl/uploadEl.vue";

export default {
  name: 'IndexSwiper',
  components: {UploadEl},
  props: ['data'],
  data() {
    return {
      show: true,
    }
  },
  mounted() {
    console.log(this.data)
  },
  methods: {
    edit1(key, index, e) {
      this.$props.data.swiper[index][key] = e.target.innerText
    },
    addImg() {
      this.show = false;
      this.$props.data.swiper.push({portalConfigTitle: '请输入', portalConfigDesc: '请输入', portalConfigPic: ''});
      this.$nextTick(() => {
        this.show = true;
        this.$nextTick(() => {
          setTimeout(() => {
            this.$refs.carousel.setActiveItem(this.$props.data.swiper.length - 1);
          }, 10)
        })
      })
    }
  },
}
</script>

<style lang="less" scoped>
@import "~@/style.less";

/deep/ .el-carousel__container {
  height: 100%;
}

/deep/ .el-carousel__button {
  width: 50px;
  height: 6px;
  border-radius: 3px;
  background-color: #cfd6de;
}

/deep/ .el-carousel__indicator--horizontal {
  padding: 12px 8px;
}

/deep/ .el-carousel__indicator.is-active button {
  opacity: 1;
  background-color: #3372ff;
}

/deep/ .el-carousel__indicators--horizontal {
  bottom: 5%;
}

.title {
  position: absolute;
  top: 43.7%;
  left: 37.7%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  color: #3372ff;
  font-size: 2.2vw;
  letter-spacing: 6.1px;
  min-width: 20px;
}

.subTitle {
  position: absolute;
  top: 56%;
  left: 38.7%;
  transform: translate(-50%, -50%);
  color: #3372ff;
  font-size: 1.3vw;
  letter-spacing: 2.3px;
  white-space: nowrap;
  min-width: 20px;
}
</style>
