<template>
  <div class="vue-dialogs-wrap">
    <!--保存为模板、配置对话框-->
    <special-dialog :show.sync="specialDlg.show" :ID="specialDlg.ID" :sourceID="specialDlg.sourceID" :dialogTitle="specialDlg.dialogTitle"
      :catalogId="specialDlg.catalogID" @callback="dialogSaved" :pageType="specialDlg.pageType" :fromEditor="specialDlg.fromEditor"></special-dialog>
    <!--更换图片对话框-->
    <image-picker-dialog :show.sync="imagePickerDlg.show"></image-picker-dialog>
    <!--选择文章(动态数据配置)对话框-->
    <article-picker-dialog :show.sync="articlePickerDlg.show" :type="articlePickerDlg.type" :block-id="articlePickerDlg.blockId"></article-picker-dialog>
    <!--选择站内链接对话框-->
    <link-picker-dialog :show.sync="linkPickerDlg.show"></link-picker-dialog>
    <!--选择站内链接对话框-->
    <third-widgets-dialog :show.sync="thirdWidgetsDlg.show" :widget-type="thirdWidgetsDlg.widgetType" :widget-data.sync="thirdWidgetsDlg.widgetData"></third-widgets-dialog>
    <image-player-dialog :show.sync="imagePlayerDlg.show"></image-player-dialog>
  </div>
</template>
<script>
import _ from 'lodash'
import SpecialDialog from './specialDialog.vue'
import ImagePickerDialog from './dialog/imagePickerDialog.vue'
import ArticlePickerDialog from './dialog/articlePickerDialog.vue'
import LinkPickerDialog from './dialog/linkPickerDialog.vue'
import ImagePlayerDialog from './dialog/imagePlayerDialog.vue'
import ThirdWidgetsDialog from './dialog/thirdWidgetsDialog.vue'
var vueDialogs = {}
export default {
  components: {
    SpecialDialog,
    ImagePickerDialog,
    ArticlePickerDialog,
    LinkPickerDialog,
    ImagePlayerDialog,
    ThirdWidgetsDialog
  },
  data() {
    return {
      specialID: 0,
      catalogID: 0,
      siteID: 0,
      pageType: 'Special',
      specialDlg: {
        show: false,
        ID: 0,
        sourceID: 0,
        catalogID: 0,
        dialogTitle: '保存为模板',
        pageType: 'Special',
        fromEditor: 'Y'
      },
      imagePickerDlg: {
        show: false
      },
      articlePickerDlg: {
        show: false,
        type: 'Manual',
        blockId: ''
      },
      linkPickerDlg: {
        show: false
      },
      imagePlayerDlg: {
        show: false
      },
      thirdWidgetsDlg: {
        show: false,
        widgetType: '',
        widgetData: {}
      },
      dataID: 0,
      confirmLoading: false
    }
  },
  created() {
    window.vueDialogs = vueDialogs
    // 可以废弃掉了。直接从initdata中取初始值
    vueDialogs.configData = (data) => {
      _.extend(this, data)
    }
    this.init()
  },
  methods: {
    init() {
      this.specialID = window.initdata.ID
      this.catalogID = window.initdata.catalogID
      this.pageType = window.initdata.pageType
      this.siteID = window.initdata.siteID

      vueDialogs.specialDialog = {}
      vueDialogs.imagePickerDialog = {}
      vueDialogs.articlePickerDialog = {}
      vueDialogs.linkPickerDialog = {}
      vueDialogs.imagePlayerDialog = {}
      vueDialogs.thirdWidgetsDialog = {}
      // 保存为模板
      vueDialogs.specialDialog.saveAsTemplate = () => {
        _.extend(this.specialDlg, {
          dialogTitle: '保存为模板',
          pageType: 'Template',
          show: true,
          ID: null,
          sourceID: this.specialID
        })
      }
      // 配置
      vueDialogs.specialDialog.config = () => {
        _.extend(this.specialDlg, {
          dialogTitle: '配置' + (this.pageType === 'Special' ? '专题' : '模板'),
          pageType: this.pageType,
          show: true,
          ID: this.specialID,
          catalogID: window.initdata.catalogID,
          sourceID: null
        })
      }
      // 更换图片
      vueDialogs.imagePickerDialog.pickImage = () => {
        this.imagePickerDlg.show = true
      }
      // 选择文章
      vueDialogs.articlePickerDialog.pickArticles = (type, blockId) => {
        this.articlePickerDlg.type = type
        this.articlePickerDlg.blockId = blockId
        this.articlePickerDlg.show = true
      }
      // 选择站内链接
      vueDialogs.linkPickerDialog.pickLink = () => {
        this.linkPickerDlg.show = true
      }
      // 选择图片播放器
      vueDialogs.imagePlayerDialog.pick = () => {
        this.imagePlayerDlg.show = true
      }
      // 第三方服务部件配置
      vueDialogs.thirdWidgetsDialog.config = (widgetType, widgetData) => {
        this.thirdWidgetsDlg.widgetType = widgetType
        this.thirdWidgetsDlg.widgetData = widgetData
        this.thirdWidgetsDlg.show = true
      }
    },
    dialogSaved() {
      if (window.dialogSavedCallback) {
        window.dialogSavedCallback(...arguments)
      }
    }
  }
}

</script>
<style>
.catalog-selector-dialog .el-radio-group span{
  font-size: 14px;
}

</style>
