<template>
  <div class="add-icon-wrap">
    <img
      src="~@/assets/img/ppt_m/add.png"
      class="add_ico"
      @click="addPage(chooseModalId)"
    />
    <div class="format-wrap">
      <div class="format-item" :class="{'last-choose':chooseModalId===item.modelId}"
      v-for="item in formatArr" :key="item.modelId">
        <component
          :is="previewComponentName(item.modelId)"
          @click.native="addPage(item.modelId)"
        />
        <!-- <p>{{ item.text }}</p> -->
      </div>
    </div>
  </div>
</template>

<script>
import { formatPre} from "@/views/ppt_manage/newVersion/utils/config";
import FormatPreOne from "@/views/ppt_manage/newVersion/components/formatPreview/FormatPreOne";
import FormatPreTwo from "@/views/ppt_manage/newVersion/components/formatPreview/FormatPreTwo";
import FormatPreThree from "@/views/ppt_manage/newVersion/components/formatPreview/FormatPreThree";
import FormatPreFour from "@/views/ppt_manage/newVersion/components/formatPreview/FormatPreFour";
import FormatPreFive from "@/views/ppt_manage/newVersion/components/formatPreview/FormatPreFive";
import FormatPreSix from "@/views/ppt_manage/newVersion/components/formatPreview/FormatPreSix";
import FormatPreSeven from "@/views/ppt_manage/newVersion/components/formatPreview/FormatPreSeven";
import FormatPreEight from "@/views/ppt_manage/newVersion/components/formatPreview/FormatPreEight";
import FormatPreNine from "@/views/ppt_manage/newVersion/components/formatPreview/FormatPreNine";
import {countComponentName} from '@/views/ppt_manage/newVersion/utils/untils';
export default {
  name: "AddFormat",
  props:{
    chooseModalId:{
        type:Number,
        default:1
    }
  },
  components: {
    FormatPreOne,
    FormatPreTwo,
    FormatPreThree,
    FormatPreFour,
    FormatPreFive,
    FormatPreSix,
    FormatPreSeven,
    FormatPreEight,
    FormatPreNine
  },
  data() {
    return {
      formatArr: formatPre,

    };
  },
  methods: {
    previewComponentName(modelId) {
      return countComponentName(modelId,'pre')
      //return `formatPre${modelMap[modelId]}`;
    },
    addPage(modelId) {
      this.$emit("addPage", modelId);
    },
  },
};
</script>
<style lang="scss">
@import "~@/views/ppt_manage/newVersion/css/formatPre.scss";
</style>
<style scoped lang="scss">
.add-icon-wrap {
  width: 100%;
  min-height: 64px;
  position: relative;
  padding: 10px 20px;
  .add_ico {
    cursor: pointer;
    position: absolute;
    left: 20px;
    top: 50%;
    margin-top: -14px;
    width: 28px;
    height: 28px;
    display: inline-block;
  }
  .format-wrap {
    margin-left: 40px;
    /* background-color: #eef0f3; */
    width: calc(100% - 40px);
    /* height: 120px; */
    display: flex;
    justify-content: space-between;
    .format-item {
      width: 95px;
      height: 70px;
      padding: 10px 10px 20px 10px;
      border: 1px solid transparent;
      cursor: pointer;
      &:hover {
        border: 1px solid #409eff;
        border-radius: 4px;
        background-color: #e4edf8;
      }
      &.last-choose{
          border: 1px dotted rgba(64, 160, 255,0.7);
          border-radius: 4px;
      }
      p {
        text-align: center;
      }
    }
  }
}
</style>
