<template>
  <div class="padding-top-bottom">
    <content-info :content.sync='mContent' @catalog-change="catalogChange" :site-config="siteConfig" :catalog-id="catalogId">
      <div slot="afterEditor">

        <div class="panel-fieldset">
          <el-form-item prop="file" label="上传">
            <upload-file ref="uploadFile" :allow-type="mContent.allowType" :file.sync="mContent.file" @set-title="setTitle"></upload-file>
          </el-form-item>
        </div>
        <div class="panel-fieldset"  v-show="mContent.path&&mContent.fileName">
          <el-form-item prop="fullFilePath" label="文件">
            <el-row>
              <el-col :span="12">
                <a @click.stop="download(mContent.path+mContent.fileName)">{{mContent.oldFileName}}</a>
              </el-col>
            </el-row>
          </el-form-item>
        </div>
      </div>
      <div slot="fileExif" v-show="mContent.ID">
        <el-collapse-item title="文件信息" name="3" class="sidebar-item-box">
          <el-form label-width="70px" >
            <el-form-item label="原名称">
              <span>{{mContent.oldFileName}}</span>
            </el-form-item>
            <el-form-item label="大小">
              <span>{{mContent.fileSize}}</span>
            </el-form-item>
            <el-form-item label="类型">
              <span>{{mContent.suffix}}</span>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </div>
    </content-info>
  </div>
</template>
<script>
import ContentInfo from '../../contentcore/components/ContentInfo.vue'
import UploadFileComponent from '../../contentcore/components/UploadFileComponent.vue'
export default {
  components: {
    'content-info': ContentInfo,
    'upload-file': UploadFileComponent
  },
  props: {
    content: {
      type: Object,
      required: true
    },
    siteConfig: {
      type: Object
    },
    contentId: {
      type: [String, Number]
    },
    catalogId: {
      type: [String, Number]
    }
  },
  computed: {
    mContent: {
      set(val) {
        this.$emit('update:content', val)
      },
      get() {
        return this.content
      }
    }
  },
  data() {
    return {
      prefix: window.app ? window.app.prefix : window.opener && window.opener.app ? window.opener.app.prefix : ''
    }
  },
  methods: {
    setTitle(val) {
      let roter = this.$router.currentRoute.path
      if (roter.endsWith('/new')) {
        if (val.lastIndexOf('.') !== -1) {
          this.mContent.title = val.substring(0, val.lastIndexOf('.'))
        } else {
          this.mContent.title = val
        }
      }
    },
    async download(path) {
      let resp = await axios.get(`/ui/file/${this.mContent.ID}/downurl`)
      window.open(resp.data)
    },
    catalogChange(catalog) {
      this.$emit('catalog-change', catalog)
    }
  }
}
</script>
