<template>
  <div class="layout-no-cols right-list-toolbar">
    <el-toolbar>
      <el-row style="width:100%">
        <el-col :span="19">
          <el-button @click="refresh"><i class="fa fa-refresh"></i>刷新</el-button>
        </el-col>
        <el-col :span="5">
          <el-select v-model="mediaType" class="layout-select">
             <el-option
              v-for="item in platformOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-col>
      </el-row>

    </el-toolbar>
    <component ref="monitorComp" v-bind:is="mediaType"></component>
  </div>
</template>
<script>
import WechatMonitor from './monitorWechat.vue'
import WeiboMonitor from './monitorWeibo.vue'
export default {
  components: {
    WechatMonitor,
    WeiboMonitor
  },
  data() {
    return {
      mediaType: 'WechatMonitor',
      platformOptions: [{
        value: 'WechatMonitor',
        label: '微信平台'
      }, {
        value: 'WeiboMonitor',
        label: '微博平台'
      }]
    }
  },
  methods: {
    refresh() {
      this.$refs['monitorComp'].refresh()
    }
  }
}
</script>
<style>

</style>
