<template>
  <div>
    <el-dialog :title="title" :visible.sync="isShow" :append-to-body="true" class="content-selector-dialog" @open="dialogOpen" :fullscreen="true" modal-class="page-bg-color" :disguise-page="true">
      <common-content :content-type="contentType" :siteID="siteID" :select-type="selectType" :from="from" :catalogID="catalogID" content-height="calc(100vh - 133px)" @select="getCommonContentData" ref="commonContent" style="border:1px solid #eee;">
      </common-content>
      <!-- 底部确认按钮 -->
      <div slot="footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import commonContent from './CommonContent.vue'

export default {
  components: {
    'common-content': commonContent
  },
  props: {
    show: {
      type: Boolean,
      required: true
    },
    contentType: {
      type: [String],
      default: ''
    },
    siteID: {
      type: [String, Number],
      default: function() {
        return this.$root.siteID
      }
    },
    selectType: {
      type: String,
      default: 'radio'
    },
    from: {
      type: String
    },
    title: {
      type: String,
      default: '选择内容'
    },
    catalogID: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      selectedRows: []
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    dialogOpen() {
      this.$nextTick(() => {
        this.$refs.commonContent.init()
      })
    },
    getCommonContentData(data) {
      if (this.selectType === 'selection') {
        this.selectedRows = data
      } else {
        this.selectedRows[0] = data
      }
    },
    confirm() {
      if (this.selectType === 'selection') {
        this.$emit('callback', this.selectedRows)
      } else {
        this.$emit('callback', this.selectedRows[0])
      }
      this.isShow = false
    }
  }
}
</script>
<style>

</style>
