<template>
  <div class="image-upload-dialog">
    <el-dialog title="图片上传" :visible.sync="isVisible" @open="beforeDialogOpen">
      <img :src="prefix + tmpImage.path+tmpImage.fileName" onerror="this.src='assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';"
        class="list-img" />
      <el-form :model="tmpImage" ref="imgInfoForm" label-suffix=":" label-width="80px">
        <el-form-item label="图片">
          <el-upload ref="upload" action="" :multiple="false" :limit="1" :file-list="tmpFileList" :on-exceed="exceedFile"
            :auto-upload="false" :http-request="fileUploadHandler" :on-remove="removeFileHandler" :on-change="selectFileChangeHandler"
            :accept="allowtype">
            <el-input disabled v-model="allowtype">
              <el-button slot="append">选择文件</el-button>
            </el-input>
          </el-upload>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="tmpImage.name"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input v-model="tmpImage.author"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="info">
          <el-input type="textarea" :rows="4" v-model="tmpImage.info"></el-input>
        </el-form-item>
        <el-form-item label="链接地址" prop="linkURL">
          <el-input v-if="showInputFlag" :disabled="!isInputUrl" v-model="tmpImage.linkURL"></el-input>
          <el-input v-else :disabled="true" v-model="tmpImage.linkText"></el-input>
          <div>
            <el-button type="primary" @click="selectContent">链接到内容</el-button>
            <el-button type="primary" @click="selectCatalog">链接到栏目</el-button>
            <el-button type="primary" @click="inputUrl">外部地址</el-button>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
    <content-selector :show.sync="contentSelectorDialogModal" title="浏览内容" @callback="contentSelectCallback"></content-selector>
    <catalog-selector :show.sync="catalogSelectorDialogModal" inputType="radio" title="选择栏目" @callback="catalogSelectorCallback"></catalog-selector>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import catalogSelector from './CatalogSelector.vue'
import ContentSelector from '@src/components/contentComponent/ContentSelector.vue'

export default {
  components: {
    'catalog-selector': catalogSelector,
    'content-selector': ContentSelector
  },
  props: {
    contentId: {
      type: [String, Number]
    },
    catalogId: {
      type: [String, Number]
    },
    id: {
      type: [String, Number]
    },
    visible: {
      type: Boolean
    }
  },
  data() {
    return {
      tmpImage: {
        name: '',
        author: '',
        info: '',
        linkURL: '',
        linkText: null,
        sourceUrl: ''
      },
      imgeditMode: 2,
      isInputUrl: false,
      contentSelectorDialogModal: false,
      catalogSelectorDialogModal: false,
      tmpFileList: [],
      allowtype: '.png,.jpg,.jpeg,.gif,.bmp',
      prefix: ''
    }
  },
  computed: {
    showInputFlag() {
      if (this.isInputUrl) {
        return true
      }
      if (typeof this.tmpImage.linkText === 'string' && this.tmpImage.linkText.length > 0) {
        return false
      } else {
        return true
      }
    },
    isVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.tmpFileList = []
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    async init() {
      if (!this.id) {
        return
      }
      let resp = await axios.get(`/ui/contentcore/contents/${this.contentId}/images/${this.id}`)
      this.tmpImage = resp.data.data
      this.prefix = resp.data.prefix
    },
    beforeDialogOpen() {
      this.init()
    },
    selectContent() {
      this.isInputUrl = false
      this.contentSelectorDialogModal = true
    },
    contentSelectCallback(row) {
      this.tmpImage.linkURL = row.link
      this.tmpImage.linkText = '内容：' + row.title
    },
    selectCatalog() {
      this.isInputUrl = false
      this.catalogSelectorDialogModal = true
    },
    inputUrl() {
      this.tmpImage.sourceUrl = this.tmpImage.linkURL
      this.isInputUrl = true
      if (!this.tmpImage.linkURL || this.tmpImage.linkURL.length < 1) {
        this.tmpImage.linkText = null
        this.tmpImage.linkURL = 'http://'
      }
    },

    // 文件上传确定事件
    async fileUploadHandler(e) {
      let formData = new FormData()
      e && e.raw && formData.append('file', e.raw)
      for (let i in this.tmpImage) {
        formData.append(i, this.tmpImage[i] || '')
      }
      formData.append('catalogID', this.catalogId)
      formData.append('groupID', this.contentId)
      let resp = await axios.post(`/ui/contentcore/contents/${this.contentId}/images/upload`, formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      })
      util.showResponseMessage(resp.data)
      if (resp.data.status === 1) {
        this.isVisible = false
        this.$emit('refreshlist')
      }
    },
    removeFileHandler(file, files) {
      this.tmpFileList = []
    },
    // 改变选中文件触发事件
    selectFileChangeHandler(file, files) {
      if (files.length > 1) {
        this.$message.info('文件总数量限制为1')
        return
      }
      this.tmpFileList = [files[0]]
    },
    exceedFile(files) {
      this.tmpFileList = [files[0]]
    },
    async confirm() {
      if (!this.id && this.tmpFileList.length !== 1) {
        this.$alert('请选择要上传的文件', '提示', {
          type: 'warning'
        })
        return
      }
      this.fileUploadHandler(this.tmpFileList[0])
    },

    catalogSelectorCallback(row) {
      this.tmpImage.linkURL = row.link
      this.tmpImage.linkText = '栏目：' + row.name
    }
  }
}
</script>
<style scoped>
  .list-img {
    max-width: 370px;
    max-height: 300px;
    margin-left: 80px;
  }
</style>
<style>
  .image-upload-dialog .el-dialog {
    width: 40%;
  }
</style>
