<script>
import ImagePlayer from './components/ImagePlayer.vue'
import util from '@src/common/util.js'
export default {
  components: {
    ImagePlayer
  },
  props: {
    show: {
      type: Boolean,
      default: true
    },
    dataID: {
      type: Number,
      default: 0
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  data() {
    return {
      dialogTitle: '选择图片播放器',
      pickedImagePlayer: []
    }
  },
  methods: {
    init() {
      window.eventHub.$off('imagePlayerPicked')
      window.eventHub.$on('imagePlayerPicked', this.imagePlayerPicked)
    },
    imagePlayerPicked(selection) {
      this.pickedImagePlayer = selection
    },

    confirm() {
      let player = this.pickedImagePlayer
      if (player === null || typeof player === 'undefined') {
        return util.showErrorNotification('请选择图片播放器')
      } else if (player.status !== 'published') {
        return util.showErrorNotification('选择的图片播放器未发布')
      }
      window.dialogSavedCallback(player.ID, player.name)
      this.isShow = false
    }
  }
}

</script>
<template>
  <div>
    <el-dialog class="dlg-imageplayerpicker" :title="dialogTitle" @open="init" :visible.sync="isShow" width="980px">
      <image-player v-if="isShow" ref='imagePlayer'></image-player>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" :disabled="pickedImagePlayer.length === 0" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style></style>
