<template>
  <div>
    <el-dialog class="dlg-articlepicker" :title="dialogTitle" @open="init" :visible.sync="isShow" width="850px">
      <component v-bind:is="pickType" v-if="isShow" ref='articlePickerComponent' :block-id="blockId"></component>
      <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 ManualBlock from './components/ArticlePickerManual.vue'
import AutoBlock from './components/ArticlePickerAuto.vue'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'ManualContentBlock' // ManualContentBlock || AutoContentBlock
    },
    blockId: {
      type: [Number, String]
    }
  },
  data() {
    return {
      dialogTitle: '挑选文章',
      confirmLoading: false
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    },
    pickType() {
      return this.type === 'ManualContentBlock' ? 'manual-block' : 'auto-block'
    }
  },
  created() { },
  methods: {
    init() {
      window.eventHub.$off('articleConfirmInvalid')
      window.eventHub.$off('blockPicked')
      window.eventHub.$on('articleConfirmInvalid', this.confirmInvalid)
      window.eventHub.$on('blockPicked', this.blockPicked)
    },
    confirm() {
      this.confirmLoading = true
      this.$refs.articlePickerComponent.confirm()
    },
    blockPicked(blockId) {
      if (window.dialogSavedCallback) {
        window.dialogSavedCallback(blockId)
        this.isShow = false
      }
      this.confirmLoading = false
    },
    confirmInvalid() {
      this.confirmLoading = false
    }
  },
  components: {
    ManualBlock,
    AutoBlock
  }
}

</script>
<style></style>
