<template>
<div>
  <input type="hidden" value="previewURL">
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="">
  <tr>
   <td height="45">
     <el-toolbar>
     <b>所属平台:</b>
      <el-select v-model="selectPlat" @change="changePlats" style="margin:0 10px 0 5px;">
        <el-option
          v-for="opt in options"
          :key="opt.ID"
          :label="opt.name"
          :value="opt.ID">
        </el-option>
      </el-select>
     <el-button type="radio" id="btn_s1200" class="buttonPreview" :class="{
        on: p === '1200'
     }" @click="changeSize(1200,'')">桌面</el-button>
     <el-button type="radio" id="btn_s768"
     :class="{
        on: p === '768'
     }" class="buttonPreview" @click="changeSize(768,'')">平板</el-button>
     <el-button type="radio" id="btn_s375" class="buttonPreview"
     :class="{
        on: p === '375'
     }" @click="changeSize(375,'')">手机</el-button>
     <el-button type="radio" id="btn_s375_fit" class="buttonPreview"
     :class="{
        on: p === '375w'
     }" v-show="phoneSmall" @click="changeSize(375, true)">手机（适合窗口）</el-button>
    </el-toolbar></td>
  </tr>
 </table>
 <div id="EditViewCt" :class="[ editViewCtBgClass ]" :style="editViewCtClass" onload="initDom">
  <div class="device-top"></div>
    <div id="deviceMiddle" class="device-middle" :class="deviceMiddleClass" :style="contentViewStyle">
      <span v-html="htmlCode"></span>
      <iframe :src="previewURL" :width="iframeWidth" height="100%" frameborder="0" name="EditView" id="EditView" allowfullscreen="true"></iframe>
    </div>
  <div class="device-bottom"></div>
 </div>
</div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  data() {
    return {
      htmlCode: '',
      p: '1200',
      platForms: [],
      options: [],
      previewURL: '',
      selectPlat: 'pc',
      // css定义
      editViewCtClass: {
        'height': 'calc(100vh - 60px)',
        'transformOrigin': '0 0 0'
      },
      contentViewStyle: {
        height: '100%',
        overflow: 'hidden'
      },
      editViewCtBgClass: '',
      editViewClass: '',
      deviceMiddleClass: '',
      phoneSmall: true,
      iframeWidth: '100%',
      ratio: {
        '320': 568,
        '375': 667,
        '768': 1024,
        '1200': '100%'
      }
    }
  },
  methods: {
    async initPlats() {
      let resp = await axios.get('/ui/contentcore/platforms/init')
      if (resp.data.status === 1) {
        this.options = resp.data.data
      }
    },
    changePlats(val) {
      this.initUrl()
    },
    changeSize(width, fitView) {
      this.editViewCtBgClass = 'w' + width
      this.iframeWidth = width === 1200 ? '100%' : width
      if (fitView) {
        this.p = width + 'w'
        this.deviceMiddleClass = {'height': this.ratio[width]}
        let scaleValue = (window.outerHeight - 40) / (this.ratio[width] + 220)
        this.editViewCtClass = {'height': '90%', 'transformOrigin': '0 0 0', transform: 'scale(' + scaleValue + ',' + scaleValue + ')'}
        this.contentViewStyle = {
          height: 'calc(100vh - 280px)',
          overflow: 'hidden'
        }
      } else {
        this.deviceMiddleClass = {'height': Math.min(window.outerHeight - 40 - 110, this.ratio[width])}
        this.editViewCtClass = {height: 'calc(100vh - 60px)', transform: 'scale(1,1)'}
        this.p = width + ''
        this.contentViewStyle = {
          height: '100%',
          overflow: 'hidden'
        }

        if (width === 768) {
          this.contentViewStyle = {
            height: 'calc(100vh - 280px)',
            overflow: 'hidden'
          }
        }

        if (width === 375) {
          this.contentViewStyle = {
            height: 'calc(100vh - 280px)',
            overflow: 'hidden'
          }
        }
      }
    },
    initDom() {
      let viewHeight = window.outerHeight - 40
      if (viewHeight > 667 + 220 || !this.getDomStyle('EditViewCt')) {
        this.phoneSmall = false
      }
    },
    getDomStyle(id) {
      let style = ''
      try {
        style = document.getElementById(id).style.transformOrigin
      } catch (e) {

      }
      return style
    },
    async initUrl() {
      let id = util.url.getQueryValue(location.href, 'id')
      let type = util.url.getQueryValue(location.href, 'type')
      let resp = await axios.get('/ui/preview/init', {params: {id: id, type: type}})
      if (resp.data.status === 1) {
        this.previewURL = resp.data.data + '?platformID=' + this.selectPlat
      }
    },

    async initBlock() {
      let id = util.url.getQueryValue(location.href, 'id')
      let resp = await axios.get(`/ui/block/preview/${id}`)
      if (resp.data.status === 1) {
        this.htmlCode = resp.data.data
      }
    }
  },
  created() {
    this.initPlats()
    let type = util.url.getQueryValue(location.href, 'type')
    if (type === 'block_preview') {
      this.initBlock()
    } else {
      this.initUrl()
    }
  }
}
</script>

<style scoped>
.buttonPreview.on {
  background:#c1bebe;
  border: 1px solid #ccc;
}
#EditViewCt{
  overflow: auto;
}
.w768 .device-middle{
  background:url(~@static/assets/images/ipad_768.png) no-repeat 0 center;
  padding:  0 0 0 50px;
}

.w768 .device-top{
  height:110px;
  background:url(~@static/assets/images/ipad_768.png) no-repeat 0 0;
}
.w768 .device-bottom{
  height:110px;
  background:url(~@static/assets/images/ipad_768.png) no-repeat 0 bottom;
}

.w375 .device-middle{
  background:url(~@static/assets/images/iphone_375.png) no-repeat 0 center;
  padding:  0 0 0 50px;
}

.w375 .device-top{
  height:110px;
  background:url(~@static/assets/images/iphone_375.png) no-repeat 0 0;
}
.w375 .device-bottom{
  height:110px;
  background:url(~@static/assets/images/iphone_375.png) no-repeat 0 bottom;
}

.buttonPreview{
  border:1px solid #ccbcbc
}
</style>
<style>
body{
  background-color: #eee;
}
.editViewClass{
  min-height:500px;
  height:auto!important;
  height:500px;

}
.el-toolbar .el-button.buttonPreview{padding:10px}
</style>
