<template>
  <div>
    <el-dialog class="dlg-thirdwidgets" :title="dialogTitle" @open="init" :visible.sync="isShow" :width="dialogWidth">
      <div class="dialog-body">
        <component v-bind:is="widgetComponent" ref='widget' :widget-data.sync="widgetData"></component>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" :loading="confirmLoading" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// 新浪微博微博直播
import SinaWeiboLivestream from './thirdwidgets/sinaWeiboLivestream.vue'
// TODO 增加新浪微博话题墙组件 http://open.weibo.com/widget/weibotopic.php
// 股票K线图
import StockEdit from './thirdwidgets/stockEdit.vue'
// 百度地图
import BaiduMap from './thirdwidgets/baiduMap.vue'
// bShare分享
import ShareEditor from './thirdwidgets/shareEditor.vue'
export default {
  components: {SinaWeiboLivestream, StockEdit, BaiduMap, ShareEditor},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    widgetType: {
      type: String
    },
    widgetData: {
      type: Object,
      default: _ => ({})
    }
  },
  computed: {
    dialogTitle() {
      return this.dlgData[this.widgetType] ? this.dlgData[this.widgetType].dialogTitle : ''
    },
    dialogWidth() {
      return this.dlgData[this.widgetType] ? this.dlgData[this.widgetType].width : '450px'
    },
    dialogHeight() {
      return this.dlgData[this.widgetType] ? this.dlgData[this.widgetType].height : '450px'
    },
    widgetComponent() {
      return this.dlgData[this.widgetType] ? this.dlgData[this.widgetType].component : ''
    },
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  data() {
    return {
      confirmLoading: false,
      dlgData: {
        'WeiboContentBlock': {
          dialogTitle: '新浪微博:微博直播',
          width: '960px',
          height: '460px',
          component: 'SinaWeiboLivestream'
        },
        'BaiduMapContentBlock': {
          dialogTitle: '百度地图',
          width: '680px',
          height: '400px',
          component: 'BaiduMap'
        },
        'StockContentBlock': {
          dialogTitle: '股票K线图',
          width: '320px',
          height: '150px',
          component: 'StockEdit'
        },
        'ShareContentBlock': {
          dialogTitle: '分享配置',
          width: '740px',
          height: '450px',
          component: 'ShareEditor'
        }
      }
    }
  },
  created() {

  },
  methods: {
    init() { },
    confirm() {
      this.confirmLoading = true
      let curWidget = this.$refs.widget
      // 组件中必须定义doSubmit函数，如果需要校验需要定义validate方法.校验失败请在组件中自行提示并返回false
      if (curWidget && typeof curWidget.doSubmit === 'function') {
        if (typeof curWidget.validate === 'function' && curWidget.validate() === false) {
          this.confirmLoading = false
          return
        }
        let data = curWidget.doSubmit()
        if (data && typeof window.dialogSavedCallback === 'function') {
          window.dialogSavedCallback(data)
        }
        this.confirmLoading = false
        this.isShow = false
      } else {
        this.$message({
          message: '第三方服务组件数据调用失败',
          type: 'warning'
        })
        this.confirmLoading = false
      }
    }
  }

}
</script>
<style></style>
