<template>
  <div class="iframe-layout"  :class="{mobile: ismobile}">
    <div v-if="ismobile" class="top-layer">
      <a @click="clickHandle" class="rad"><i class="iconfont icon-left"></i>返回</a>
      <a @click="exitHandle" class="xiangce" v-if="key" :class="{active: big}">大场景</a>
      <a @click="xiangceHandle" class="xiangce" v-if="key" :class="{active: !big}">相册</a>
    </div>
    <template v-else>
      <a @click="clickHandle" class="rad"><i class="iconfont icon-left"></i>返回</a>
      <!-- <a @click="xiangceHandle" class="xiangce" v-if="key">相册</a> -->
      <select @change="changeHandle" class="ncxihiasj" v-model="asdasd" v-if="key">
        <option value="big">大场景</option>
        <option value="xiangce">相册</option>
      </select>
    </template>

    <template v-if="ismobile">
      <iframe :src="url" frameborder="0" v-if="big"></iframe>

      <div class="asjdfioasfhuioasfh" v-else>
        <div class="image-layout">
          <Slide :screens="screens" :current="0">
            <i class="iconfont icon-left" slot="up"></i>
            <img slot="item" slot-scope="{data}" :src="data" class="image-item">
            <i class="iconfont icon-right" slot="next"></i>
          </Slide>
        </div>
      </div>
    </template>
    <template v-else>
      <iframe :src="url" frameborder="0"></iframe>
      <imageQuery :screens="screens" @exitHandle="exitHandle" />
    </template>
  </div>
</template>

<script>
import data from '@/data.js'
import imageQuery from '@/pages/imageQuery'
import browser from '@/util/browser'
import Slide from '@/components/Slide'

export default {
  components: { imageQuery, Slide },
  data () {
    let key = Object.keys(data.data).find(id => this.$route.params.id === id)
    if (!data.data[key].data) {
      key = null
    }
    return {
      asdasd: 'big',
      urls: [],
      key,
      big: true,
      ismobile: browser.mobile,
      screens: null
    }
  },
  computed: {
    url () {
      return this.$route.params.url
    }
  },
  methods: {
    changeHandle () {
      if (this.asdasd === 'xiangce') {
        if (data.data[this.key]) {
          this.screens = data.data[this.key].data
          this.big = false
        }
      }
    },
    xiangceHandle () {
      if (data.data[this.key]) {
        this.screens = data.data[this.key].data
        this.big = false
      }
    },
    exitHandle () {
      this.screens = null
      this.big = true
      this.asdasd = 'big'
    },
    clickHandle () {
      this.$router.back()
      // while (global.paths.length !== 0) {
      //   let path = global.paths.pop()

      //   if (path.name !== 'external' && path.name) {
      //     return this.$router.push({path: path.path})
      //   }
      // }
      // this.$router.push({name: 'home'})
    }
  }
}
</script>

<style scoped>
.top-layer {
  padding-top: 4px;
  height: 42px;
}
.iframe-layout {
  position: relative;
  width: 100%;
  height: 100%;
}

.iframe-layout iframe {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.iframe-layout a {
  position: absolute;
  color: #fff;
  background-color: #fa3800;
  left: 10px;
  top: 10px;
  padding: 8px 15px;
  cursor: pointer;
  z-index: 999;
}

.iframe-layout a.xiangce {
  left: 100px;
}

.mobile a {
  margin-right: 20px;
  padding: 4px 10px;
}

.mobile .top-layer{
  height: 15px;
  padding: 10px;
  background-color: #f1f2f3;
}

.asjdfioasfhuioasfh {
  height: calc(100% - 50px);
  background-color: #000;
}

.iframe-layout a i {
  font-size: 0.8em;
  vertical-align: middle;
}

.top-layer a{
  position: relative;
}

.top-layer a.xiangce {
  background: none;
  color: #000;
  padding-left: 3px;
  padding-right: 3px;
  margin-left: 5px;
  margin-right: 5px
}

.top-layer a.xiangce.active {
  color: #fa3800;
}

.mobile a {
  left: inherit !important;
  top: inherit !important;
}

.mobile iframe {
  height: calc(100% - 35px);
}

.ncxihiasj {
  position: absolute;
  left: 100px;
  border: 1px solid #fff;
  z-index: 999;
  background-color: transparent;
  color: #fff;
  top: 12px;
  width: 65px;
  border-radius: 3px;
  height: 30px;
  text-align: center;
  padding: 0 10px;
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
}

.ncxihiasj option{
  color: black;
  background: #fff;
  line-height: 20px;
}

</style>

<style scoped>

.image-dialog {
  position: fixed;
  z-index: 9999999999999999999;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.8);
}

.image-dialog a {
  position: absolute;
  color: #fff;
  background-color: #fa3800;
  left: 10px;
  top: 10px;
  padding: 8px 15px;
  cursor: pointer;
  border-radius: 3px;
}

.image-layout {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.image-item {
  width: 100%;
}
</style>
