<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" width="80%" :title="dialogConfig.title">
      <div class="iframe-wrap">
        <WujieVue
          v-if="dialogConfig.type==='wujie'"
          width="100%"
          height="100%"
          :name="dialogConfig.name"
          :url="dialogConfig.src"
          :style="dialogConfig.style"
          :sync="dialogConfig.sync||false"
        />
        <iframe v-else :src="dialogConfig.src" class="iframe" :style="dialogConfig.style" />
      </div>
    </el-dialog>
    <el-drawer :title="drawer.title" :visible.sync="drawerShow" :direction="drawer.direction">
      <WujieVue
        v-if="drawer.type==='wujie'"
        width="100%"
        height="100%"
        :name="drawer.name"
        :url="drawer.src"
        :style="drawer.style"
        :sync="drawer.sync||false"
      />
      <iframe v-else :src="drawer.src" class="iframe" :style="drawer.style" />
    </el-drawer>
  </div>
</template>

<script>
import { getPluginJs } from '../../api/common'
import WujieVue from 'wujie-vue2'

export default {
  name: 'DkGlobalHook',
  components: { WujieVue },
  props: {
    value: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogConfig: { src: '' },
      drawer: { src: '' },
      drawerShow: false,
      js: []
    }
  },
  computed: {},
  created() {

  },
  mounted() {
    this.initDkFun()
    this.getPluginJs()
  },
  methods: {
    appendScript(src) {
      const script = document.createElement('script')
      script.setAttribute('src', src)
      script.setAttribute('charset', 'utf-8')
      document.body.appendChild(script)
    },
    getPluginJs() {
      getPluginJs().then(res => {
        this.js = res.data
        for (let i = 0; i < this.js.length; i++) {
          this.appendScript(this.js[i])
        }
      }).catch(res => {
      })
    },
    initDkFun() {
      var dkFun = {
        vue: this,
        showDialog: (src, op) => {
          this.dialogConfig = {
            src: src,
            name: op.name || '',
            title: op.title || '',
            width: op.width || '80%',
            type: op.type || 'iframe',
            style: op.style || '',
            sync: op.sync || false
          }
          this.dialogVisible = true
        },
        showDrawer: (src, op) => {
          this.drawer = {
            src: src,
            name: op.name || '',
            title: op.title || '',
            width: op.width || '80%',
            type: op.type || 'iframe',
            style: op.style || '',
            sync: op.sync || false,
            direction: op.direction || 'rtl'
          }
          this.drawerShow = true
        }
      }
      window.dkFun = dkFun
    }
  }
}
</script>

<style scoped lang="scss">
.iframe-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 400px;
}

.iframe {
  width: 100%;
  border: none;
  position: absolute;
  height: 400px;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
</style>
