<template>
  <h-view class="public-style attachment-information" title="附件信息">
    <h-content class="">
      <list-item v-for="(itemList,index ) in prjItemList" :key="index">
        <item :show-content="false" :show-name="false" class="attach-item-title">
          <div class="attach">
            <div class="attach-icon-box">
              <div class="attach-icon"/>
            </div>
            <div class="attach-name">
              <div>\{{ itemList.cdd_item_desc }}</div>
            </div>
          </div>
        </item>
        <item :show-content="false" :show-name="false" class="attach-item">
          <div class="attach-hint">请上传照片</div>
          <div class="attach">
            <div class="attach-content">
              <div class="add-button">
                <!--待上传图片列表-->
                <div
                  v-for="(pic,index) in uploadList" v-if="pic.check_id == itemList.check_id" :key="index"
                  class="picture">
                  <img :src="pic.picture" @click="showBigPicture(pic.picture,true)">
                  <div class="close"><i class="icon ion-close-circled" @click="removePic(index)"/></div>
                </div>
                <!--从服务器上下载的图片-->
                <div v-for="list in dowloadList">
                  <div
                    v-for="(pic, index) in list" v-if="pic.check_id == itemList.check_id" :key="index"
                    class="picture">
                    <img :src="pic.dataBase64String" @click="showBigPicture(pic.dataBase64String)">
                    <div class="close"><i class="icon ion-close-circled" @click="deletePic(pic.attachment_id)"/></div>
                  </div>
                </div>
                <!--上传图片的加号-->
                <img src="@/assets/image/plus.png" @click="show(itemList.check_id)">
              </div>
            </div>
          </div>
        </item>
      </list-item>
    </h-content>
  </h-view>
</template>

<script>
import projectService from './projectService'

export default {
  name: 'PrjAttachment',
  data () {
    return {
      project: projectService.getProject(),
      prjItemList: [],
      uploadList: [],
      dowloadList: [],
      localIds: [],
    }
  },
  mounted () {
    this.loadPrjInfo()
  },
  methods: {

    // 打开sheet操作
    show (checkId) {
      let vm = this
      wx.chooseImage({
        count: 9, // 微信最多能选择9张图片
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (data) {
          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.uploadList.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)
          }
          vm.savePicture(res.serverId, checkId)
          for (let j = 0; j < vm.uploadList.length; j++) {
            if (vm.uploadList[j].filePath === localId) {
              vm.uploadList[j].mediaId = res.serverId
              break
            }
          }
        },
      })
    },

    savePicture (mediaId, checkId) {
      let vm = this
      let url = $config.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': $config.uploadApiName,
        'uploadSysName': $config.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
            }
          }
        }
      })
    },
    // 移除待上传列表中的某条记录
    removePic (index) {
      let vm = this
      if (vm.uploadList[index].attachment_id) {
        vm.deletePic(vm.uploadList[index].attachment_id)
      }
      vm.uploadList.remove(index)
      vm.uploadList.sort()
    },

    /**
         * 删除图片
         *
         */
    deletePic (attachmentId) {
      let vm = this
      let deleteList = []
      let obj = { 'attachment_id': attachmentId }
      deleteList.push(obj)
      let url = $config.basePath + 'attment_delete' // 附件删除
      let param = {
        'picturelist': deleteList,
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.hlsPopup.showLongCenter('删除成功!')
          vm.removeDowloadList(attachmentId)
        }
      })
    },

    /**
         * 实现刷新效果，同时为了避免从新调用接口浪费流量
         * 从附件列表中移除删除的图片
         */
    removeDowloadList (attachmentId) {
      let vm = this
      for (let i = 0; i < vm.dowloadList.length; i++) {
        let list = vm.dowloadList[i]
        for (let j = 0; j < list.length; j++) {
          let li = list[j]
          if (parseFloat(li.attachment_id) === parseFloat(attachmentId)) {
            list.remove(j)
            break
          }
        }
      }
      vm.dowloadList.sort()
    },
    // 查看大图
    showBigPicture (pic) {
      let vm = this
      vm.hlsPopup.showBigPicture({
        imgUrl: pic,
      })
    },
    // 项目维护界面信息查询
    loadPrjInfo () {
      let vm = this
      // let projectId = 595
      // let cddListId = 12343
      let projectId = vm.project.project_id
      let cddListId = vm.project.cdd_list_id
      if (projectId) {
        let url = $config.basePath + 'prj_project_query'
        let param = {
          project_id: projectId,
          cdd_list_id: cddListId,
        }
        hlsHttp.post(url, param).then(function (res) {
          vm.hlsPopup.hideLoading()
          if (res.result === 'S') {
            vm.prjItemList = res.prj_item_list
            for (let i = 0; i < vm.prjItemList.length; i++) {
              // 查询照片
              vm.loadPicture(vm.prjItemList[i].check_id, i)
            }
          } else if (res.result === 'E') {
            vm.hlsPopup.showLongCenter(res.message)
          }
        })
      }
    },
    loadPicture (checkId, index) {
      let vm = this
      let url = $config.basePath + 'attment_download' + '&index=' + index // 附件查询
      let param = {
        'check_id': checkId,
      }
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          let list = res.cdd_atm_list
          vm.dowloadList.push(list)
        }
      })
    }
    ,
  },
}
</script>

<style lang="less">
  .attachment-information {
    .content {
      background-color: #fff;
    }

    .hls-list-item {
      background-color: #fff;

      .hls-item {
        .attach {
          display: flex;
          align-items: center;
          width: 100%;

          .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;
            //margin-right: 75%;
          }

          .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
              }
            }
          }

        }

        .attach-hint {
          //padding: 0 20px 0 40px;
          color: @hintColor;
          font-size: @font-size-small;
          margin: 12.5px 0;
          white-space: normal;
        }

      }

      .attach-item-title {
        height: 40px;
      }

      .attach-item {
        min-height: 40px;
        height: auto;
        padding-bottom: 10px;

        .contents {
          flex-direction: column !important;
        }
      }

      .list-title {
        height: 45px;
        color: @activated-color;
        line-height: 15px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.10); /*no*/
        padding-left: 20px;
      }
    }
  }

</style>