<template>
    <el-button :disabled="!content.ID" @click="show=true" :type="buttonType" v-if="button" :priv="'com.zving.cms.Catalog.Content.Edit.'+catalogId">
      <i class="fa fa-arrow-up"></i>上传
    <el-dialog title="图片上传" :visible.sync="show" :append-to-body="true" style="margin:0 auto">
      <el-form :model="tmpImage" inline  ref="imgInfoForm" label-width="180px">
          <el-form-item label=" " v-if="this.id">
            <el-row>
              <el-col :span="18">
                <img :src="prefix + tmpImage.path+tmpImage.fileName" style="width:200px" />
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="图片：">
            <upload-file :allow-type="allowtype" :file.sync="tmpImage.file"></upload-file>
          </el-form-item>
          <el-form-item label="名称：" prop="name">
            <el-row>
              <el-col :span="18">
                <el-input v-model="tmpImage.name" :span="10" class="el-300"></el-input>
             </el-col>
            </el-row>
          </el-form-item><br/>
          <el-form-item label="作者：" prop="author">
            <el-row>
              <el-col :span="18">
                <el-input v-model="tmpImage.author" :span="10" class="el-300"></el-input>
             </el-col>
            </el-row>
          </el-form-item><br/>
          <el-form-item label="简介：" prop="info">
            <el-row>
              <el-col :span="18">
                <el-input type="textarea" :rows="4" v-model="tmpImage.info" :span="10" class="el-300"></el-input>
             </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="链接地址：" prop="cname">
                <el-input :disabled="!isInputUrl" v-model="tmpImage.cname" class="el-300"></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>
   </el-button>
</template>
<script>
import util from '@src/common/util.js'
import catalogSelector from './CatalogSelector.vue'
import UploadFileComponent from './UploadFileComponent.vue'
import ContentSelector from '@src/components/contentComponent/ContentSelector.vue'

export default {
  components: {
    'catalog-selector': catalogSelector,
    'content-selector': ContentSelector,
    'upload-file': UploadFileComponent
  },
  props: {
    content: {
      type: Object
    },
    id: {
      type: [String, Number]
    },
    button: {
      type: Boolean,
      default: false
    },
    buttonType: {
      type: String,
      default: 'info'
    },
    catalogId: {
      type: [Number, String]
    }
  },
  data() {
    return {
      tmpImage: {
        name: '',
        author: '',
        info: '',
        cname: '',
        sourceUrl: '',
        file: ''
      },
      imgeditMode: 2,
      isInputUrl: false,
      contentSelectorDialogModal: false,
      catalogSelectorDialogModal: false,
      tmpFileList: [],
      allowtype: '.png,.jpg,.jpeg,.gif,.bmp',
      prefix: '',
      show: false
    }
  },
  watch: {
    content() {
      if (this.content.ID) {
        this.init()
      }
    }
  },
  methods: {
    async init() {
      if (!this.id) {
        return
      }
      let resp = await axios.get(`/ui/contentcore/contents/${this.content.ID}/images/${this.id}`)
      this.tmpImage = resp.data.data
      this.prefix = resp.data.prefix
    },
    selectContent() {
      this.isInputUrl = false
      this.contentSelectorDialogModal = true
    },
    contentSelectCallback(row) {
      this.tmpImage.oldname = row.title
      this.tmpImage.cname = row.contentTypeID + '：' + row.title
      this.tmpImage.sourceUrl = row.link
    },
    selectCatalog() {
      this.isInputUrl = false
      this.catalogSelectorDialogModal = true
    },
    inputUrl() {
      this.tmpImage.sourceUrl = this.tmpImage.cname
      this.isInputUrl = true
    },
    async confirm() {
      let formData = new FormData()
      if (!this.id && !this.tmpImage.file) {
        this.$alert('请选择要上传的文件', '提示', {
          type: 'warning'
        })
        return
      }
      for (let i in this.tmpImage) {
        formData.append(i, this.tmpImage[i])
      }
      formData.append('catalogID', this.content.catalogID)
      formData.append('groupID', this.content.ID)
      let resp = await axios.post(`/ui/contentcore/contents/${this.content.ID}/images/upload`, formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      })
      util.showResponseMessage(resp.data)
      if (resp.data.status === 1) {
        this.show = false
        this.$emit('refresh-content')
      }
    },

    catalogSelectorCallback(row) {
      this.tmpImage.oldname = row.name
      this.tmpImage.cname = '栏目：' + row.name
      this.tmpImage.sourceUrl = row.link
    }
  }
}
</script>
<style scoped>
.el-300 {
  width: 300px;
}
</style>
