<template>
  <div id="app">
    <cms
      ref="cmsRef"
      :cmsList="cmsList"
      :canDrag="false"
      :canDragInc="false"
      :mode="mode"
      :ratio="ratio"
      :fontRatio="fontRatio"
      :envUrl="envUrl"
      v-bind="$attrs"
      v-on="$listeners"
      @jumpLink="jumpLink"
    ></cms>
  </div>
</template>

<script>
import cms from './components/cms/'
export default {
  name: 'app',
  components: {
    cms
  },
  data() {
    return {
      cmsList: [
        {
          recordId: 2657,
          terminalId: 206,
          pageCode: '1000',
          versionAdapterType: null,
          componentCode: '5',
          componentVersion: '',
          componentSortNum: 1,
          attributeJson: {
            uniqueId: '',
            uniqueName: '',
            layoutStyle: {
              widthStyle: {
                type: 1,
                width: 100
              },
              height: 800
            },
            styleType: 1,
            indicatorType: 2,
            showType: 1,
            interval: 5,
            autoPlay: false,
            slideNum: 2,
            lineSlideNum: 1,
            widthStyle: {
              type: 2,
              width: 100
            },
            bgStyle: {
              status: 1,
              type: 1,
              picList: []
            },
            paginationStyle: {
              color: '#D9D9D9',
              activeColor: '#000000',
              hoverColor: ''
            },
            list: [
              {
                componentList: [
                  {
                    componentName: '图片',
                    component: 'imgNav',
                    type: 2,
                    displayType: 1,
                    indicatorType: 1,
                    oneLineCount: 1,
                    attributeJson: {
                      uniqueId: '',
                      uniqueName: '基础图片1',
                      styleType: 1,
                      baseStyle: {
                        w: 1065.8640000000019,
                        h: 798.4,
                        l: 0,
                        t: 0,
                        isLocked: true
                      },
                      paddingSpacing: 0,
                      itemSpacing: 0,
                      animationInObj: {
                        type: '',
                        direction: 'slideInUp',
                        delay: 0,
                        duration: 1,
                        sort: ''
                      },
                      animationHoverObj: {
                        type: 1,
                        borderStyle: {
                          type: 1,
                          borderColor: '#202832',
                          borderTop: '',
                          borderRight: '',
                          borderBottom: '',
                          borderLeft: ''
                        },
                        hoverImgList: []
                      },
                      list: [
                        {
                          uniqueId: '',
                          uniqueName: '图片1',
                          picList: [
                            {
                              recordId: 6847,
                              classificationId: 0,
                              resourceStorageType: 3,
                              resourceExtensionType: 1,
                              resourceExtensionName: '.jpg',
                              resourceName: 'tmp_5c85f9398ebc89aecdd8638b03cf86476b2482f563fbe1c3.jpg',
                              resourceActualName: '63893f71-d270-4c90-bfe2-bc0aba9ff440.jpg',
                              resourcePath: 'https://mpimg.ibaiqiu.cn/63893f71-d270-4c90-bfe2-bc0aba9ff440.jpg',
                              resourceCoverId: null,
                              resourceCoverPath: '',
                              summary: '',
                              size: 159037,
                              width: 854,
                              height: 640,
                              duration: null,
                              attributeJson: '',
                              md5Hashcode: '43dc9150fa25e3b51d39139af8d9adc6',
                              wxAppId: '',
                              wxMediaId: '',
                              qnHashcode: 'FqmeoJpJ2pXlk9usdHgs0wTlNw-Q',
                              resourceSource: '',
                              shopCode: 'develop',
                              tenantCode: 'buying',
                              delFlg: 0,
                              createTime: '2023-03-26 18:04:39',
                              createUser: '',
                              updateTime: '2023-03-26 18:04:39',
                              updateUser: ''
                            }
                          ],
                          popList: [],
                          sort: 1680588520707,
                          realWidth: 1065.8640000000019,
                          realHeight: 798.4,
                          left: 0,
                          top: 0,
                          pic: 'https://mpimg.ibaiqiu.cn/63893f71-d270-4c90-bfe2-bc0aba9ff440.jpg',
                          height: 640,
                          width: 854
                        }
                      ],
                      sort: 1680588519993,
                      layW: 1920
                    },
                    sort: 1680588519993
                  },
                  {
                    componentName: '轮播图',
                    component: 'swiperItem',
                    displayType: 1,
                    type: 4,
                    attributeJson: {
                      uniqueId: '',
                      uniqueName: '基础轮播图2',
                      isAutoGetHeight: true,
                      baseStyle: {
                        w: 242,
                        h: 242,
                        l: 1320,
                        t: 65.6,
                        isLocked: true
                      },
                      styleType: 1,
                      indicatorType: 1,
                      bgStyle: {
                        status: 0,
                        picList: []
                      },
                      interval: 5,
                      autoPlay: true,
                      paginationStyle: {
                        color: '#D9D9D9',
                        activeColor: '#000000',
                        hoverColor: ''
                      },
                      list: [
                        {
                          uniqueId: '',
                          uniqueName: 'Banner1',
                          type: 1,
                          titleStatus: 0,
                          title: '',
                          picList: [
                            {
                              recordId: 6868,
                              classificationId: 0,
                              resourceStorageType: 3,
                              resourceExtensionType: 1,
                              resourceExtensionName: '.png',
                              resourceName: 'cb5e3cd0-5338-47b1-a43a-8311598115f2.png',
                              resourceActualName: 'e00fd178-669f-4f26-be27-956c14ce3d13.png',
                              resourcePath: 'https://mpimg.ibaiqiu.cn/e00fd178-669f-4f26-be27-956c14ce3d13.png',
                              resourceCoverId: null,
                              resourceCoverPath: '',
                              summary: '',
                              size: 70983,
                              width: 242,
                              height: 242,
                              duration: null,
                              attributeJson: '',
                              md5Hashcode: '2b625b4f8343d9b985c4ba63ad660bee',
                              wxAppId: '',
                              wxMediaId: '',
                              qnHashcode: 'FvBRX6YC3jr8q_kWSOg9JjVnmJ0z',
                              resourceSource: 'MANAGEMENT_SYSTEM',
                              shopCode: 'develop',
                              tenantCode: 'buying',
                              delFlg: 0,
                              createTime: '2023-03-29 14:29:08',
                              createUser: '',
                              updateTime: '2023-03-29 14:29:08',
                              updateUser: ''
                            }
                          ],
                          popList: [],
                          videoInfo: {
                            list: [],
                            checkedAttr: []
                          },
                          isVideoHasHot: 0,
                          videoHotInfo: {
                            picList: [],
                            popList: []
                          },
                          sort: 1680588583506,
                          pic: 'https://mpimg.ibaiqiu.cn/e00fd178-669f-4f26-be27-956c14ce3d13.png',
                          height: 242,
                          width: 242,
                          realWidth: 242,
                          realHeight: 242,
                          left: 0,
                          top: '0%'
                        },
                        {
                          uniqueId: '',
                          uniqueName: 'banner2',
                          type: 1,
                          titleStatus: 0,
                          title: '',
                          picList: [
                            {
                              recordId: 6867,
                              classificationId: 0,
                              resourceStorageType: 3,
                              resourceExtensionType: 1,
                              resourceExtensionName: '.png',
                              resourceName: '201101e8-7395-4d93-9704-f1ee638daf52.png',
                              resourceActualName: 'f30081c2-2055-4c80-a04b-4539d4e6d762.png',
                              resourcePath: 'https://mpimg.ibaiqiu.cn/f30081c2-2055-4c80-a04b-4539d4e6d762.png',
                              resourceCoverId: null,
                              resourceCoverPath: '',
                              summary: '',
                              size: 57028,
                              width: 242,
                              height: 242,
                              duration: null,
                              attributeJson: '',
                              md5Hashcode: '0f5f0ae5ac4e4c190fad84b6000a5780',
                              wxAppId: '',
                              wxMediaId: '',
                              qnHashcode: 'Ft6ihrIOYXtd2-DrnDTFiMRvQRmz',
                              resourceSource: 'MANAGEMENT_SYSTEM',
                              shopCode: 'develop',
                              tenantCode: 'buying',
                              delFlg: 0,
                              createTime: '2023-03-29 14:29:08',
                              createUser: '',
                              updateTime: '2023-03-29 14:29:08',
                              updateUser: ''
                            }
                          ],
                          popList: [],
                          videoInfo: {
                            list: [],
                            checkedAttr: []
                          },
                          isVideoHasHot: 0,
                          videoHotInfo: {
                            picList: [],
                            popList: []
                          },
                          sort: 1680588591663,
                          realWidth: 242,
                          realHeight: 242,
                          left: 0,
                          top: '0%',
                          width: 242,
                          height: 242,
                          pic: 'https://mpimg.ibaiqiu.cn/f30081c2-2055-4c80-a04b-4539d4e6d762.png'
                        }
                      ],
                      animationInObj: {
                        type: '',
                        direction: 'slideInUp',
                        delay: 0,
                        duration: 1,
                        sort: ''
                      },
                      animationHoverObj: {
                        type: 1,
                        borderStyle: {
                          type: 1,
                          borderColor: '#202832',
                          borderTop: '',
                          borderRight: '',
                          borderBottom: '',
                          borderLeft: ''
                        },
                        hoverImgList: []
                      },
                      sort: 1680588582871
                    },
                    sort: 1680588582871
                  }
                ],
                bgStyle: {
                  type: 1,
                  picList: [],
                  backgroundColor: ''
                }
              },
              {
                componentList: [
                  {
                    componentName: '图片',
                    component: 'imgNav',
                    type: 2,
                    displayType: 1,
                    indicatorType: 1,
                    oneLineCount: 1,
                    attributeJson: {
                      uniqueId: '',
                      uniqueName: '基础图片1',
                      styleType: 1,
                      baseStyle: {
                        w: 750,
                        h: 957,
                        l: 0,
                        t: '0',
                        isLocked: true
                      },
                      paddingSpacing: 0,
                      itemSpacing: 0,
                      animationInObj: {
                        type: '',
                        direction: 'slideInUp',
                        delay: 0,
                        duration: 1,
                        sort: ''
                      },
                      animationHoverObj: {
                        type: 1,
                        borderStyle: {
                          type: 1,
                          borderColor: '#202832',
                          borderTop: '',
                          borderRight: '',
                          borderBottom: '',
                          borderLeft: ''
                        },
                        hoverImgList: []
                      },
                      list: [
                        {
                          uniqueId: '',
                          uniqueName: '图片1',
                          picList: [
                            {
                              recordId: 6821,
                              classificationId: 0,
                              resourceStorageType: 3,
                              resourceExtensionType: 1,
                              resourceExtensionName: '.png',
                              resourceName: '03d2be3d-54e3-4c43-bdba-b9594d61f35c.png',
                              resourceActualName: '778d7dbf-10a4-4a26-a170-8111a2bf5d1b.png',
                              resourcePath: 'https://mpimg.ibaiqiu.cn/778d7dbf-10a4-4a26-a170-8111a2bf5d1b.png',
                              resourceCoverId: null,
                              resourceCoverPath: '',
                              summary: '',
                              size: 1031710,
                              width: 750,
                              height: 957,
                              duration: null,
                              attributeJson: '',
                              md5Hashcode: 'bb4a63eb1f4132e722f9b6408b726295',
                              wxAppId: '',
                              wxMediaId: '',
                              qnHashcode: 'FifO5lsHopP4fZj8nNaTrVhPd1mY',
                              resourceSource: 'MANAGEMENT_SYSTEM',
                              shopCode: 'develop',
                              tenantCode: 'buying',
                              delFlg: 0,
                              createTime: '2023-03-23 11:16:30',
                              createUser: '',
                              updateTime: '2023-03-23 11:16:30',
                              updateUser: ''
                            }
                          ],
                          popList: [],
                          sort: 1680588549836,
                          realWidth: 750,
                          realHeight: 957,
                          left: 0,
                          top: 0,
                          pic: 'https://mpimg.ibaiqiu.cn/778d7dbf-10a4-4a26-a170-8111a2bf5d1b.png',
                          height: 957,
                          width: 750
                        }
                      ],
                      sort: 1680588548200,
                      layW: 1920
                    },
                    sort: 1680588548200
                  }
                ],
                bgStyle: {
                  type: 1,
                  picList: [],
                  backgroundColor: ''
                }
              }
            ],
            animationInObj: {
              type: '',
              direction: 'slideInUp',
              delay: 0,
              duration: 1,
              sort: ''
            },
            sort: 1680587122346
          },
          displayType: 1,
          languageCode: 'zh-CN',
          shopCode: 'develop',
          delFlg: 0,
          updateTime: '2023-04-04 14:09:56',
          updateId: '',
          createTime: '2023-04-04 13:45:22',
          createId: '',
          layoutType: 5,
          sort: 1680587122346
        }
      ],
      ratio: 1,
      fontRatio: 1,
      mode: 'pc',
      envUrl: 'https://mpdev.ibaiqiu.com/'
    }
  },
  mounted() {},
  methods: {
    onResize(e) {
      this.ratio = e.width / (this.device == 'pc' ? 1920 : 750)
    },
    jumpLink(e) {
      console.log(e, '热区')
    }
  }
}
</script>

<style lang="scss">
body {
  margin: 0;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

div {
  box-sizing: border-box;
}
</style>
