<template>
    <section class="vm-feedback feedback__inputBox">
        <!--textarea-->
        <div class="feedback__inputBox--textareaBox">
            <vm-textarea :placeholder="placeholder"
                         ref="textarea"
                         v-model="value.text"
                         :name="name"
                         :rows="rows"
                         :readonly="readonly"
                         :disabled="disabled"
                         :autofocus="autofocus"
                         :maxlength="maxlength"
                         @onInput="inputHandler"></vm-textarea>
        </div>
        <p class="feedback__text">{{textCount}}/{{maxlength}}</p>
        <!--image 1~3| && word count-->
        <div class="feedback__inputBox--images">
            <div class="image"
                 v-for="(item,index) in value.images" :key="index"
                 :style="{backgroundImage:'url('+item.code+')'}">
                <div class="preview" @click="previewImage(index)"></div>
                <div class="delete" @click="removeImage(index)"></div>
            </div>
            <!--input-->
            <div class="image empty" v-show="value.images.length < maximage" @click="addFile($event)">
                <input @change="onChangeHandler" class="file" type="file">
            </div>
        </div>
    </section>
</template>
<script type="text/javascript">
  /**
   * @component Feedback
   * @description
   *
   * ## 反馈图文框组件 / Feedback
   *
   * 用于反馈/意见信息/评价等场景. 如果在Alipay环境，则使用alipay的组件上传。
   *
   * ### 如何引入
   * ```
   * import { Feedback } from 'vimo'
   * Vue.component(Feedback.name, Feedback)
   * // 或者
   * export default{
   *   components: {
   *     Feedback
   *  }
   * }
   * ```
   *
   * @props {Number} [rows=3] - rows
   * @props {String} [name] - name
   * @props {Boolean} [readonly=false] - readonly
   * @props {Boolean} [disabled=false] - disabled
   * @props {Boolean} [autofocus=false] - autofocus
   * @props {String} [placeholder='请输入您的反馈...'] - placeholder
   * @props {Number} [maxlength=300] - 文本输入的最大长度
   * @props {Number} [maximage=300] - 图片上传的最大个数
   * @props {Boolean} [isH5=false] - 是否强制使用H5模式
   *
   * @props {Object} value - 传入传出数据
   * @props {String} value.text - 传入传出文本
   * @props {Array} value.images - 传入传出图片信息
   * @props {Array} value.images.code - base64格式的图片
   * @props {Array} value.images.blob - 修正方向及大小的二进制blob
   * @props {Array} value.images.file - 图片file句柄
   *
   * @demo #/feedback
   * @usage
   * <Feedback v-model="feedbackInfo" :maxlength="100" :maximage="4"></Feedback>
   * */
  import canvasResize from './fixImage'
  import { isArray, isString } from '../../util/type'
  import Textarea from '../textarea'
  import PreviewImage from '../preview-image'

  export default {
    name: 'Feedback',
    components: {'vm-textarea': Textarea},
    data () {
      return {}
    },
    props: {
      rows: {
        type: Number,
        default: 3
      },
      name: String,
      readonly: Boolean,
      disabled: Boolean,
      autofocus: Boolean,
      placeholder: {
        type: String,
        default: '请输入您的反馈...'
      },
      maxlength: {
        type: Number,
        default: 300
      },
      maximage: {
        type: Number,
        default: 3
      },
      value: {
        type: Object,
        required: true,
        validator (value) {
          return isString(value.text) && isArray(value.images)
        }
      },
      isH5: Boolean
    },
    computed: {
      textareaComponent () {
        return this.$refs.textarea
      },
      // 计算输入数
      textCount () {
        return this.value.text.length
      }
    },
    methods: {
      /**
       * @function update
       * @description
       * 更新textarea组件
       * */
      update () {
        this.textareaComponent.update()
      },

      /**
       * @function destroy
       * @description
       * 销毁textarea组件
       * */
      destroy () {
        this.textareaComponent.destroy()
      },

      // -------- private -------

      /**
       * 图片预览
       * ps: alipay 的图片预览组件 无法预览 自己的图片选择器选择的文件， 因此这里使用的是H5组件
       * @private
       * */
      previewImage (index) {
        let images = []
        this.value.images.forEach((image) => {
          images.push(image.code)
        })

        PreviewImage.present({
          isH5: true,
          current: index || 0,
          urls: images || []
        })
      },

      /**
       * @private
       * */
      addFile ($event) {
        let isAlipayReady = window.AlipayJSBridge && !this.isH5
        if (isAlipayReady) {
          // 阻止h5的input的触发
          $event.preventDefault()
          $event.stopPropagation()
          console.info('Feedback 组件使用Alipay模式, 单次上传一张.')
          window.ap && window.ap.chooseImage(1, (res) => {
            window.ap && window.ap.compressImage({
              apFilePaths: res.apFilePaths,
              level: 0
            }, (result) => {
              // Cannot read property '0' of undefined
              if (result && result.apFilePaths && result.apFilePaths.length > 0 && result.apFilePaths[0]) {
                let imgData = {
                  code: result.apFilePaths[0],
                  blob: result.apFilePaths[0], // 转化的二进制图片文件
                  file: result.apFilePaths[0] // 源文件 file
                }
                this.pushImageData(imgData)
              }
            })
          })
        } else {
          console.info('Feedback 组件使用H5模式!')
        }
      },

      /**
       * @private
       * */
      inputHandler () {
        if (this.value.text.length > this.maxlength) {
          this.value.text = this.value.text.substr(0, this.maxlength)
        } else {
          this.$emit('input', this.value)
        }
      },

      /**
       * 图片数据推入
       * @private
       * */
      pushImageData (imgData) {
        this.value.images.push(imgData)
        this.$emit('input', this.value)
      },

      /**
       * 插入图片时
       * @private
       * */
      onChangeHandler (event) {
        let input = event.target
        let fixImage = (file, callback) => {
          // 加载资源
          canvasResize(file, {
            width: 640, // 最大的尺寸,如果比这小是不会出现放大的情况的,文章宽度为710px
            height: 0,
            crop: false,
            quality: 80,
            // rotate: 90,
            callback (data, width, height) {
              // 将图片改为二进制文件,准备上传
              let _blob = canvasResize('dataURLtoBlob', data)
              !!callback && callback(_blob)
            }
          })
        }
        if (input.files && input.files[0]) {
          let file = input.files[0]
          if (!input.files[0].type.match('image.*')) {
            return null
          }
          fixImage(file, (_blob) => {
            let reader = new FileReader()
            reader.onload = (e) => {
              let imgData = {
                code: e.target.result,
                blob: _blob, // 转化的二进制图片文件
                file: file // 源文件 file
              }
              this.pushImageData(imgData)
            }
            reader.readAsDataURL(_blob)
          })
        }
      },

      /**
       * 点击移除图片
       * @private
       * */
      removeImage (index) {
        this.value.images.splice(index, 1)
      }
    }
  }
</script>
<style lang="scss">
    .vm-feedback.feedback__inputBox {
        border-bottom: 1px solid #f2f2f2;
        width: 100%;
        background: #fff;
        box-sizing: border-box;
        margin-bottom: 10px;
        .feedback__inputBox--textareaBox {
            height: auto;
            width: 100%;
            padding: 10px;
            background: #fff;
        }
        .feedback__text {
            color: #8b8b8b;
            font-size: 14px;
            margin: 0;
            text-align: right;
            padding: 0 10px;
        }
        .feedback__inputBox--images {
            display: flex;
            justify-content: flex-start;
            align-content: flex-start;
            flex-wrap: wrap;
            padding: 10px;
            .image {
                width: 60px;
                height: 60px;
                margin-right: 10px;
                margin-bottom: 10px;
                box-sizing: border-box;
                /*overflow: hidden;*/
                position: relative;

                display: flex;
                flex: 0 0 auto;
                justify-content: center;
                align-items: center;

                border: 1px solid #eee;

                background-repeat: no-repeat;
                background-color: #eee;
                background-position: center center;
                background-size: cover;

                .file {
                    display: none;
                }
                img {
                    width: 100%;
                    min-height: 100%;
                }
            }
            .preview {
                height: 100%;
                width: 100%;
                position: absolute;
                z-index: 1;
                left: 0;
                top: 0;
            }
            .delete {
                position: absolute;
                height: 25px;
                width: 25px;
                top: -5px;
                right: -5px;
                z-index: 2;
                &:before {
                    content: '';
                    position: absolute;
                    height: 16px;
                    width: 16px;
                    background: red;
                    border-radius: 100%;
                    top: 0;
                    right: 0;
                    z-index: 3;
                }
                &::after {
                    content: '';
                    height: 1px;
                    width: 10px;
                    position: absolute;
                    background: #fff;
                    top: 7px;
                    right: 3px;
                    z-index: 4;
                }
            }
            .empty {
                border: 1px dashed #8c8c8c;
                background: #f3f3f3;
                position: relative;
                .file {
                    display: block !important;
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                }

                &::before,
                &::after {
                    background: #dadada;
                    left: 50%;
                    top: 50%;
                    position: absolute;
                    content: '';
                }
                &::after {
                    margin-left: -1px;
                    margin-top: -15px;
                    height: 30px;
                    width: 2px;
                }
                &::before {
                    margin-left: -15px;
                    margin-top: -1px;
                    width: 30px;
                    height: 2px;
                }
            }
        }
    }
</style>
