<template>
  <div>
    <!-- 资源选择弹框 -->
    <el-dialog :title="title" :visible.sync="isShow" @open="beforeDialogOpen" class="resource-dialog" :append-to-body="true" @close="dialogClose">
      <resource-dialog-body :resource-dialog-props="resourceDialogProps" ref="dialogBody"></resource-dialog-body>
      <!-- 底部确认按钮 -->
      <div slot="footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="confirm" :loading="confirmLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ResourceDialogBody from './components/ResourceDialogBody.vue'
export default {
  data() {
    return {
      confirmLoading: false
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    dialogClose() {
      this.$refs.dialogBody.reset()
    },
    // 资源选择弹框打开回调
    beforeDialogOpen() {
      this.confirmLoading = false
      this.$nextTick(() => {
        this.$refs.dialogBody.init()
      })
    },
    //  确定资源选中事件返回callback回调函数，附带文件预览路径、文件路径、资源id参数
    async confirm() {
      this.confirmLoading = true
      let res = await this.$refs.dialogBody.resourceConfirm()
      this.$emit('callback', res[0], res[1], res[2] || null, res[3] || null)
      this.isShow = false
      this.confirmLoading = false
    }
  },
  props: {
    title: {
      type: String,
      default: '图片上传'
    },
    show: {
      type: Boolean,
      required: true
    },
    resourceDialogProps: {
      type: Object,
      required: true
    } //  传递过来的对象，可包含manualAllowTypedataType,dataID,resourceType,siteID
    //  catalogIDimageWidth,imageHeight,resourceID,inputType,suffix等多个属性
  },
  components: {
    'resource-dialog-body': ResourceDialogBody
  }
}
</script>

<style>
/* 在一般情况下dialog宽为680像素，在逻辑分辨率480像素以下dialog宽为96% */
.resource-dialog .el-dialog {
  width: 850px;
}
@media (max-width: 480px) {
  .resource-dialog .el-dialog {
    width: 96%;
  }
}
</style>
