<script>
// #ifdef H5
import draggable from 'vuedraggable'
// #endif

export default {
  // #ifdef H5
  components: {
    draggable,
  },
  // #endif
  props: {
    storyContent: {
      type: Array,
      default: ()=>[],
    },
    allowImage: {
      type: Boolean,
      default: true,
    },
    allowVideo: {
      type: Boolean,
      default: false,
    },
    //   onClick: {
    //     type: Function,
    //     default: null,
    //   },
  },
  data() {
    return {}
  },
  onLoad() {},
  onShow() {},
  methods: {
    addText() {
      if (!Array.isArray(this.storyContent)) {
        this.storyContent = []
      }
      this.storyContent.push({ text: '' })
      console.log(this.storyContent)
    },
    async addImage() {
      if (!Array.isArray(this.storyContent)) {
        this.storyContent = []
      }
      let { _state, fileID, requestId } = await this.$T.pickupFile2Cloud({ mediaType: 'image' })
      if (_state === 'SUCCESS') {
        this.storyContent.push({ image: fileID })
      }
    },
    async addVideo() {
      if (!Array.isArray(this.storyContent)) {
        this.storyContent = []
      }
      let { _state, fileID, requestId } = await this.$T.pickupFile2Cloud({ mediaType: 'video' })
      if (_state === 'SUCCESS') {
        this.storyContent.push({ video: fileID })
      }
    },
    deleteSection(index) {
      if (this.storyContent[index].text || this.storyContent[index].image || this.storyContent[index].video) {
        uni.showModal({
          title: this.$ll({deDE:'Sind Sie sicher den Abschnitt zu entfernen?', enUS:'Are you sure to delete this section?', zhCN:'真的要删除这个段落吗？'}),
          content: this.storyContent[index].text ? this.storyContent[index].text : '',
          success: ({ confirm, cancel }) => {
            if (confirm) {
              this.storyContent.splice(index, 1)
              if (this.storyContent.length === 0) {
                this.storyContent.push({ text: '' })
              }
            }
          },
        })
      } else {
        if (this.storyContent.length > 1) {
          this.storyContent.splice(index, 1)
        } else {
          this.$message({ type: 'warning', message: this.$ll({zhCN:'不能删除唯一的段落', enUS:'Cannot delete the last section', deDE:'Der letzte Abschnitt kann nicht entfernen'}) })
        }
      }
    },
  },
}
</script>

<template>
  <view style="display: flex; flex-flow: column nowrap; box-sizing: border-box">
    <view>
      <!-- #ifdef H5 -->
      <draggable v-model="storyContent">
        <!-- #endif -->
        <view v-for="(section, index) of storyContent" :key="index" style="margin: 5px; position: relative">
          <textarea
            v-if="section.text !== undefined"
            v-model="section.text"
            maxlength="-1"
            auto-height="true"
            style="box-sizing: border-box; line-height: 1.5em; min-height: 3em; width: 100%; padding: 0 5px; border: 1px solid #eee; background: white"
            placeholder=""
            placeholder-style="font-size:small"
          ></textarea>
          <img v-if="section.image" :src="section.image" style="width: 100%" />
          <video v-if="section.video" :src="section.video" style="width: 100%"></video>
          <i
            class="el-icon-circle-close"
            style="position: absolute; top: 0px; right: -10px; border-radius: 100%; cursor: pointer; font-size: 20px"
            @click="deleteSection(index)"
          ></i>
        </view>
        <!-- #ifdef H5 -->
      </draggable>
      <!-- #endif -->
    </view>

    <view class="sActionBar">
      <view style="display: flex; flex-flow: row nowrap; align-items: center; width: 100%">
        <el-button size="mini" type="primary" icon="" @click="addText">{{ $ll({deDE:'Text', enUS:'Text', zhCN:'文字'}) }}</el-button>
        <el-button v-if="allowImage" size="mini" type="primary" icon="" @click="addImage">{{ $ll({deDE:'Bild', enUS:'Image', zhCN:'图片'}) }}</el-button>
        <el-button v-if="allowVideo" size="mini" type="primary" icon="" @click="addVideo">{{ $ll({deDE:'Video', enUS:'Video', zhCN:'视频'}) }}</el-button>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.sActionBar {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  padding: 5px;
  .u-btn {
    margin: 5px 5px;
  }
}
</style>
