<template>
  <el-tabs v-model="activeTabName" type="border-card">
    <el-tab-pane label="裁剪&缩略" name="cut">
      <image-cut :image-path.sync="prePath" :path.sync="path" :siteID="siteID" :active-tab="activeTabName" @close="handleClose" ref="cut"></image-cut>
    </el-tab-pane>
    <el-tab-pane label="图片旋转" name="rotate">
      <image-rotate :image-path.sync="prePath" :path.sync="path" :siteID="siteID" :active-tab="activeTabName" ref="rotate"></image-rotate>
    </el-tab-pane>
    <el-tab-pane label="图片水印" name="watermark">
      <image-watermark :image-path.sync="prePath" :path.sync="path" :siteID="siteID" :active-tab="activeTabName" ref="watermark"></image-watermark>
    </el-tab-pane>
    <el-tab-pane label="文字水印" name="textWatermark">
      <image-text-watermark :image-path.sync="prePath" :path.sync="path" :siteID="siteID" :active-tab="activeTabName" ref="textWatermark"></image-text-watermark>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import util from '@src/common/util.js'
import imageCuttingCut from '../../contentcore/imageCutting/imageCuttingCut.vue'
import imageCuttingRotate from '../../contentcore/imageCutting/imageCuttingRotate.vue'
import imageCuttingWatermark from '../../contentcore/imageCutting/imageCuttingWatermark.vue'
import imageCuttingTextWatermark from '../../contentcore/imageCutting/imageCuttingTextWatermark.vue'
export default {
  components: {
    'image-cut': imageCuttingCut,
    'image-rotate': imageCuttingRotate,
    'image-watermark': imageCuttingWatermark,
    'image-text-watermark': imageCuttingTextWatermark
  },
  props: {
    catalogID: {
      type: [String, Number]
    },
    contentType: {
      type: String
    }
  },
  data() {
    return {
      activeTabName: 'cut',
      path: '',
      prePath: '',
      siteID: ''
    }
  },
  methods: {
    async init() {
      // 为了兼容
      this.siteID = this.catalogID
      let res = await axios.get('/ui/commonimagecutting/init', {
        params: {
          path: this.contentType.substring(this.contentType.indexOf('upload')),
          siteID: this.siteID
        }
      })
      this.path = res.data.data.path
      this.prePath = res.data.data.prefix + res.data.data.path
      this.activeTabName = 'cut'
      this.$nextTick(() => {
        this.$refs.cut.init()
      })
    },
    async confirm() {
      let res = await axios.put('/ui/resourcelibray/savecut', {
        siteID: this.siteID,
        path: this.path
      })
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        let thumbnail = ''
        if (this.contentType.indexOf('_') > 1) {
          thumbnail = this.contentType.substring(this.contentType.indexOf('_'), this.contentType.lastIndexOf('.'))
        }
        let previewPath = res.data.previewPath
        let replacePath = previewPath.substring(0, previewPath.lastIndexOf('.')) + thumbnail + previewPath.substring(previewPath.lastIndexOf('.'))
        let content = window.editor.getContent().replace(this.contentType, replacePath)
        window.editor.setContent(content)
        window.dialog.close(false)
      }
    },
    handleClose(val) {

    }
  }
}
</script>
