<template>
  <div class="extend-ad">
    <transition name="move-right">
      <mid-right v-if="midRightConfig.isDisable" :config="midRightConfig"></mid-right>
    </transition>
    <transition name="fade">
      <mid-box v-if="midConfig.isDisable" :config="midConfig"></mid-box>
    </transition>
  </div>
</template>
<script>
import { getChannelAdConfig } from '@/plugins/API/apiExtend';
import { mapGetters } from 'vuex';
const midBox = resolve => require(['./mid'], resolve);
const midRight = resolve => require(['./midRight'], resolve);

export default {
  name: 'extend-ad-box',
  components: {
    midBox,
    midRight
  },
  data() {
    return {
      adConfig: {}
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo'
    }),
    midConfig() {
      return this.adConfig.mid || {};
    },
    midRightConfig() {
      return this.adConfig.midRight || {};
    }
  },
  mounted() {
    setTimeout(() => {
      this.getAdConfig();
    }, 1000);
  },
  methods: {
    async getAdConfig() {
      const res = await getChannelAdConfig({
        type: 1,
        channelId: this.channelInfo.id
      });
      if (res.code === 200 && res.errorCode === 0) {
        this.adConfig = res.data || {};
      }
    }
  }
};
</script>

<style lang="less" scoped>
.extend-ad {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
}
</style>
