<template>
  <info-con title="图文描述：" class="decipt-info-con">
    <div class="item">
      <label class="label">商品图片：</label>
      <div class="upload-con">
        <file-upload
          :width="150"
          :iconSize="26"
          :maxNum="5"
          v-model="data.detailPictures"
          :defaultList="data.defaultDetailPicture"
          :readonly="isDetail "
          showWatch
        />
        <div class="tip" v-if="!isDetail">提示：最多可上传5张，建议尺寸375 * 365，大小不得超过6MB。</div>
      </div>
    </div>
    <div class="item" v-show="(!isDetail&&!isEdit) || !!data.video">
      <label class="label">商品视频：</label>
      <div class="upload-con">
        <file-upload
          type="video"
          :width="150"
          :iconSize="26"
          :maxNum="1"
          :maxSize="50"
          v-model="data.videoList"
          :defaultList="data.defaultVideoList"
          :readonly="isDetail"
          showWatch
        />
        <div class="tip" v-if="!isDetail">提示：仅可上传一张，商品宣传视频，用于详情页展示，建议尺寸375 * 365，大小不得超过50MB(非必传)。</div>
      </div>
    </div>
    <div class="item">
      <label class="label">商品缩略图：</label>
      <div class="upload-con">
        <file-upload
          :width="150"
          :iconSize="26"
          :maxNum="1"
          v-model="data.thumbList"
          :defaultList="data.defaultThumbList"
          :readonly="isDetail "
          showWatch
        />
        <div class="tip" v-if="!isDetail">提示：仅可上传一张，建议尺寸100 * 100，大小不得超过6MB。</div>
        <!-- {{data.thumbList}} -->
      </div>
    </div>
    <div class="item">
      <label class="label">商品3D展示：</label>
      <div class="upload-con">
        <!-- <Input type="text" v-model="data.threeDUrl" placeholder="请输入商品3D展示地址" /> -->
        <file-upload
          :width="150"
          :iconSize="26"
          :height="32"
          :maxNum="1"
          v-model="data.threeDUrl"
          :readonly="isDetail"
          :defaultList="data.defaultthreeDUrl"
          type="3d"
          :maxSize="60"
        />
        <div class="tip" v-if="!isDetail">提示：如果有3D展示，商品图片和视频将不会在商品详情中展示。</div>
        <!-- {{data.thumbList}} -->
      </div>
    </div>
    <div class="item">
      <label class="label">详情描述：</label>
      <div class="editor-con">
        <Spin fix v-if="editorLoading">
          <Icon type="ios-loading" size="30" color="#2d8cf0" class="spin-icon-load"></Icon>
          <div>上传中( {{editorUploadPercent}}% )...</div>
        </Spin>
        <quill-editor
          v-model="data.detailDescribe"
          ref="myQuillEditor"
          :options="editorOption"
          class="detail-editor"
          v-show="!isDetail"
        ></quill-editor>
        <div v-show="isDetail" v-html="data.detailDescribe" class="describt-detail"></div>
      </div>
    </div>

    <Upload
      :action="uploadImgUrl"
      ref="uploadImg"
      v-show="false"
      :headers="{token: $store.state.admin.token, adminId: $store.state.admin.uid}"
      :before-upload="imgBoforeUpload"
      :on-progress="uploadOnProgress"
      :on-success="imgUploadSuccess"
      :on-error="imgUploadErr"
      accept=".jpg, .jpeg, .png, .gif"
    />
    <Upload
      :action="uploadVideoUrl"
      ref="uploadVideo"
      v-show="false"
      :headers="{token: $store.state.admin.token, adminId: $store.state.admin.uid}"
      :before-upload="videoBoforeUpload"
      :on-progress="uploadOnProgress"
      :on-success="videoUploadSuccess"
      :on-error="videoUploadErr"
      accept=".mp4, .mkv"
    />
  </info-con>
</template>

<script>
import InfoCon from './info-con'
import FileUpload from '_c/file-upload'
import { uploadImgUrl, uploadVideoUrl } from '@/api/apiConfig'
import { apiVerify } from '@/api/apiVerify'
import { getPosterFromVideoUrl } from '@/libs/tools'
export default {
  components: {
    InfoCon,
    FileUpload
  },
  props: {
    data: {
      type: Object,
      default: {
        video: '',
        videoList: [],
        videoThumb: '',
        videoThumbList: [],
        thumb: '',
        thumbList: [],
        detailPictures: [],
        detailDescribe: '',
        defaultDetailPicture: [],
        defaultVideoList: [],
        defaultVideoThumbList: [],
        defaultThumbList: [],
        threeDUrl:[]
      }
    },
    isDetail: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    status: ''
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  },
  data () {
    return {
      uploadImgUrl,
      uploadVideoUrl,
      editorOption: {
        placeholder: '请输入内容...',
        modules: {
          toolbar: [
            [
              'bold',
              'italic',
              { header: 2 },
              'blockquote',
              { list: 'ordered' },
              { list: 'bullet' },
              { align: [] }
            ],
            ['image', 'video']
          ]
        }
      },
      editorLoading: false,
      editorUploadPercent: 0
    }
  },
  methods: {
    imgHandler (image) {
      if (image) {
        this.$refs.uploadImg.$el.querySelector('[type=file]').click()
      }
    },
    videoHandler (video) {
      if (video) {
        this.$refs.uploadVideo.$el.querySelector('[type=file]').click()
      }
    },

    uploadOnProgress (event, file, fileList) {
      this.editorUploadPercent = parseFloat(event.percent).toFixed(1)
    },
    imgBoforeUpload (file) {
      if (file.size >= 50 * 1024 * 1024) {
        this.$Notice.warning({ title: '上传图片不得超过50MB！' })
        return false
      }
      this.editorUploadPercent = 0
      this.editorLoading = true
    },
    imgUploadSuccess (res, file, fileList) {
      this.editorLoading = false
      apiVerify({
        res: { data: res },
        success: () => {
          let url = res.data
          let addImageRange = this.editor.getSelection()
          let newRange = 0 + (addImageRange !== null ? addImageRange.index : 0)
          this.editor.insertEmbed(newRange, 'simpleImg', {
            url,
            width: '100%'
          })
          this.editor.setSelection(1 + newRange)
        }
      })
    },
    imgUploadErr () {
      this.editorLoading = false
      this.$Notice.error({ title: '上传失败，请稍后再试！' })
    },

    videoBoforeUpload (file) {
      if (file.size >= 50 * 1024 * 1024) {
        this.$Notice.warning({ title: '上传视频不得超过50MB！' })
        return false
      }
      this.editorUploadPercent = 0
      this.editorLoading = true
    },
    videoUploadSuccess (res, file, fileList) {
      this.editorLoading = false
      apiVerify({
        res: { data: res },
        success: () => {
          let url = res.data
          let addVideoRange = this.editor.getSelection()
          let newRange = 0 + (addVideoRange !== null ? addVideoRange.index : 0)
          this.editor.insertEmbed(newRange, 'simpleVideo', {
            url,
            controls: 'controls',
            width: '100%',
            poster: getPosterFromVideoUrl(url)
          })
          this.editor.setSelection(1 + newRange)
        }
      })
    },
    videoUploadErr () {
      this.editorLoading = false
      this.$Notice.error({ title: '上传失败，请稍后再试！' })
    }
  },
  mounted () {
    this.editor.getModule('toolbar').addHandler('image', this.imgHandler)
    this.editor.getModule('toolbar').addHandler('video', this.videoHandler)

    setTimeout(() => {
      console.log('prop', this.data)
    })
  }
}
</script>

<style lang="less">
.decipt-info-con {
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    &.threeDUrl{
      align-items: flex-start;
      .label{
        height: 32px;
        line-height: 32px;
      }
    }
  }
  .item .label {
    display: block;
    width: 150px;
    text-align: right;
  }
  .upload-con .tip {
    color: #ed4014;
    font-size: 12px;
  }
  .item .editor-con {
    position: relative;
    width: 600px;
    .spin-icon-load {
      animation: ani-demo-spin 1s linear infinite;
    }
    .ivu-spin {
      border: 1px solid #dcdee2;
      border-radius: 5px;
    }
    .describt-detail{
      width: 100%;
      height: 800px;
      overflow-y: auto;
      padding: 10px;
      border: 1px solid  #dcdee2;
      border-radius: 5px;
    }
  }
  .detail-editor {
    > .ql-toolbar {
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }
    > .ql-container {
      height: 800px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }
  }
}
</style>
