<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="专题图片" name="specialResource">
        <special-resource @resourceSelected="resourceSelected" v-if="activeName==='specialResource'" ref="specialResource"></special-resource>
      </el-tab-pane>

      <el-tab-pane label="资源上传" name="imageDialog">
        <image-upload-form v-if="activeName==='imageDialog'" @uploadsuccess="uploadSuccess" ref="imageDialog"></image-upload-form>
      </el-tab-pane>

      <el-tab-pane label="资源库" name="imageResources">
        <image-resources v-if="activeName === 'imageResources'" ref="imageResources" :resource-picker-props="resourcePickerProps"
          @resourceSelected="resourceSelected"></image-resources>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import SpecialResource from './SpecialResource.vue'
import ImageUploadForm from './ImageUploadForm.vue'
import ImageResources from './ImageResources.vue'

export default {
  components: {
    'special-resource': SpecialResource,
    'image-upload-form': ImageUploadForm,
    'image-resources': ImageResources
  },
  data() {
    return {
      activeName: 'specialResource',
      resourcePickerProps: {
        resourceType: 'image',
        dataType: 'SpecialImage',
        selectorURL: 'imageResources',
        inputType: 'Radio',
        catalogID: window.initdata.catalogID,
        specialID: window.initdata.ID
      }
    }
  },
  mounted() {
    // window.forDialogOnOk = this.$refs['specialResource'].forDialogOnOk
  },
  methods: {
    doConfirm() {
      this.$refs[this.activeName].confirm()
    },
    uploadSuccess(imageData) {
      this.$emit('imagePicked', imageData)
    },
    async resourceSelected(resourceID) {
      let ajaxData = await axios.get(window.app.preload['apiURLs'].image_info + '/' + resourceID)
      this.$emit('imagePicked', ajaxData.data.data)
    },
    handleClick(tab, evt) {
      // window.forDialogOnOk = this.$refs[tab.name].forDialogOnOk
    }
  }
}

</script>
