<template>
   <div class="change-format-wrap">
    <el-dialog
      :visible.sync="changeFormatPageShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="cancelHandle"
      width="896px"
      v-dialogDrag
      center
    >
      <div slot="title" style="display: flex; alignitems: center">
        <span style="fontsize: 16px"
          >切换模板</span
        >
      </div>
      <div class="dialog-container" >
        <div class="format-wrap">
          <el-radio v-for="item in formatArr" :key="item.modelId" v-model="chooseModalId" :label="item.modelId">
            <div class="format-item" :class="{'last-choose':chooseModalId===item.modelId}">
              <component
                :is="previewComponentName(item.modelId)"
              />
            </div>
          </el-radio>
          <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
        </div>
      </div>
      <div slot="footer" class="foot-container">
        <el-button type="primary" @click="saveHandle">确 定</el-button>
        <el-button @click="cancelHandle">取 消</el-button>
      </div>
    </el-dialog>
  </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 {
  props:{
    changeFormatPageShow:{//控制弹窗是否显示
      type:Boolean,
      default:false
    },
    pptModelId:{//当前ppt页的版式Id
      type:Number
    }
  },
  components: {
    FormatPreOne,
    FormatPreTwo,
    FormatPreThree,
    FormatPreFour,
    FormatPreFive,
    FormatPreSix,
    FormatPreSeven,
    FormatPreEight,
    FormatPreNine
  },
  data() {
    return {
      formatArr: formatPre,
      chooseModalId:0
    };
  },
  watch:{
    changeFormatPageShow(val){
      if(val){
        this.chooseModalId = this.pptModelId
      }
    }
  },
  methods: {
    previewComponentName(modelId) {
      return countComponentName(modelId,'pre')
    },
     cancelHandle(){
      this.$emit('cancel')
    },
    saveHandle(){
      if(this.chooseModalId===this.pptModelId){
        this.$emit('cancel')
      }else{
        this.$emit('changeModel',this.chooseModalId)
      }
        
    },
  },
};
</script>
<style lang="scss">
@import "~@/views/ppt_manage/newVersion/css/formatPre.scss";
.change-format-wrap{
  .el-radio{
    display: flex;
    flex-direction: column-reverse;
    margin-right:0;
    margin-bottom: 20px;
    .el-radio__input{
      align-self: center;
      margin-top: 10px;
      padding-left: 10px;
    }
  }
}
</style>
<style scoped lang="scss">
.change-format-wrap{
  .format-wrap{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    i{
      width:127px;
    }
    .format-item{
      width: 95px;
      height: 70px;
      padding: 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;
      }
    }
  }
}

</style>
