/**
* @Author Sean
* @Date 2019/4/19
*/
<template>
  <div>
    <div class="pad">
      <list-item v-for="(item_list,index) in cdd_item" :key="index">
        <div class="attach-item-title">
          <div class="contents">
            <div class="attach-icon-box">
              <div class="attach-icon"/>
            </div>
            <div class="attach-name">
              <div>{{ item_list.cdd_item_desc }}</div>
            </div>
          </div>
        </div>
        <div class="item attach-item">
          <div class="attach-hint">请上传照片</div>
          <div class="contents">
            <div class="attach-content">
              <div class="add-button">
                <!--待上传图片列表-->
                <div v-for="(pic,index) in upload_list" v-if="pic.check_id==item_list.check_id" class="picture">
                  <img :src="pic.picture" @click="showBigPicture(pic.picture,true)">
                  <div class="close"><i class="icon ion-close-circled" @click="remove_pic(index)"/></div>
                </div>
                <!--从服务器上下载的图片-->
                <div v-for="list in dowload_list">
                  <div v-for="pic in list" v-if="pic.check_id==item_list.check_id" class="picture">
                    <img :src="pic.dataBase64String" @click="showBigPicture(pic.dataBase64String)">
                    <div class="close"><i class="icon ion-close-circled" @click="delete_pic(pic.attachment_id)"/></div>
                  </div>
                </div>
                <!--上传图片的加号-->
                <img src="../../assets/image/contractMainten/plus.png" @click="show(item_list.check_id)">
              </div>
            </div>
          </div>
        </div>
      </list-item>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    cdd_item: Array,
    dowload_list: Array,
    upload_list: Array,
  },
  data () {
    return {

    }
  },
  created: function () {
  },
  mounted: function () {
  },
  updated: function () {
  },
  methods: {
    // 打开sheet操作
    show (checkId) {
      let vm = this
      wx.chooseImage({
        count: 9, // 微信最多能选择9张图片
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (data) {
          hlsPopup.showLoading('请稍候')
          vm.localIds = data.localIds // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          data.localIds.forEach((localId, index) => {
            let obj = {
              'table_pk_value': checkId,
              'table_name': 'PRJ_CDD_ITEM_CHECK',
              'check_id': checkId,
              'picture': '',
              'filePath': localId,
              'attachment_id': '',
              'mediaId': '',
            }
            wx.getLocalImgData({
              localId: localId, // 图片的localID
              success: function (res) {
                obj.picture = res.localData
                vm.upload_list.push(obj)
              },
            })
          })
          vm.wxImageUpload(checkId)
        },
      })
    },
    // 图片上传到微信服务器 同时上传到业务系统
    wxImageUpload (checkId) {
      let vm = this
      let localId = vm.localIds.pop()
      wx.uploadImage({
        localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
        isShowProgressTips: 0, // 默认为1，显示进度提示
        success: function (res) {
          if (vm.localIds.length > 0) {
            setTimeout(() => {
              vm.wxImageUpload(checkId)
            }, 100)
          }
          else {
            hlsPopup.hideLoading()
            hlsPopup.showLongCenter('图片上传成功')
          }
          vm.savePicture(res.serverId, checkId)
          for (let j = 0; j < vm.upload_list.length; j++) {
            if (vm.upload_list[j].filePath === localId) {
              vm.upload_list[j].mediaId = res.serverId
              break
            }
          }
        },
      })
    },
    savePicture (mediaId, checkId) {
      let vm = this
      let url = process.env.rootPath + '/media/upload' + '?index=' + mediaId // 附件查询
      let param = {
        'wechatCode': $config.wxCode,
        'mediaId': mediaId,
        'sourceType': 'PRJ_CDD_ITEM_CHECK',
        'pkValue': checkId,
        'fileName': new Date().getTime() + '.jpg',
        'userId': window.localStorage.user_id,
        'uploadApiName': process.env.uploadApiName,
        'uploadSysName': process.env.uploadSysName,
      }
      hlsHttp.post(url, param).then(function (res) {
        if (res.success === 'true') {
          for (let j = 0; j < vm.uploadList.length; j++) {
            if (vm.uploadList[j].mediaId === res.mediaId) {
              vm.uploadList[j].attachment_id = res.attachmentId
              break
            }
          }
        }
      })
    },
    /**
       * 删除图片
       *
       */
    delete_pic (attachment_id) {
      let vm = this
      let delete_list = []
      let obj = {'attachment_id': attachment_id}
      delete_list.push(obj)
      let url = process.env.basePath + 'attment_delete' // 附件删除
      let param = {
        'picturelist': delete_list,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        hlsPopup.hideLoading()
        if (res.result === 'S') {
          hlsPopup.showLongCenter('删除成功!')
          vm.remove_dowload_list(attachment_id)
        } else if (res.result === 'E') {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    /**
       * 实现刷新效果，同时为了避免从新调用接口浪费流量
       * 从附件列表中移除删除的图片
       */
    remove_dowload_list (attachment_id) {
      let vm = this
      for (var i = 0; i < vm.dowload_list.length; i++) {
        var list = vm.dowload_list[i]
        for (var j = 0; j < list.length; j++) {
          var li = list[j]
          if (li.attachment_id === attachment_id) {
            list.remove(j)
            break
          }
        }
      }
    },
    // 移除待上传列表中的某条记录
    remove_pic () {
      let vm = this
      if (vm.upload_list[index].attachment_id) {
        vm.delete_pic(vm.upload_list[index].attachment_id)
      }
      vm.upload_list.remove(index)
    },
    /**
       * 图片放大预览
       * @param imgObject.imgUrl
       */
    showBigPicture (imgUrl) {
      hlsPopup.showBigPicture({
        imgUrl: imgUrl,
      })
    }
    ,
  },
}
</script>

<style scoped lang="less" rel="stylesheet">
  .hls-list-item {
    .attach-item-title {
      padding: 0 0 0 15px;
      height: 40px;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      -webkit-justify-content: center;
      align-items: center;
      -webkit-align-items: center;

      .contents {
        width: 100%;
        height: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
        display: flex;
        display: -webkit-flex;
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        align-items: center;
        -webkit-align-items: center;

        .attach-icon-box {
          width: 5%;

          .attach-icon {
            width: 10px;
            height: 10px;
            background-color: @headerColor;
            border-radius: 5px;
            float: left;
          }
        }

        .attach-name {
          width: 95%;
          display: -webkit-flex;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          -webkit-justify-content: flex-start;
          -webkit-align-items: center;
          font-size: 14px;
          color: @headerColor;
        }
      }
    }

    .attach-item {
      padding: 0 0 0 15px;
      min-height: 80px;
      height: auto;
      padding-bottom: 10px;

      .attach-hint {
        color: @hintColor;
        font-size: @font-size-small;
        margin: 14px 0;
        white-space: normal;
      }

      .contents {
        width: 100%;
        height: 100%;
        border-bottom: none;
        display: flex;
        display: -webkit-flex;
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        align-items: center;
        -webkit-align-items: center;

        .attach-content {
          width: 100%;

          .add-button {
            .picture {
              float: left;

              .close {
                position: absolute;
                font-size: @font-size-big;
                color: #F96F68;
                margin-top: -3px;
                margin-left: 40px;
              }
            }

            img {
              margin-right: 15px;
              width: 50px;
              height: 50px;
              float: left;
              margin-bottom: 10px
            }
          }
        }
      }
    }
  }
</style>
