<template>
  <h-view id="help-detail" class="public-style">
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
        <span>帮助与反馈</span>
      </div>
    </h-header>
    <h-content class="my-content">
      <h4>问题反馈</h4>
      <div class="write">
        <div class="box">
          <span>问题描述</span>
          <textarea v-model="question_desc" placeholder="请输入您的描述……" />
        </div>
      </div>
      <div class="upLoad">
        <div class="upLoad-box">
          <span>添加图片说明</span>
          <div class="file-content">
            <div
              v-for="(item, index) in upload_list"
              v-if="item.check_id===question_id"
              :key="index"
              class="file"
            >
              <img :src="item.picture" class="file-img" @click="showBigPicture(item.picture)" >
              <div class="close" @click="remove_pic(item.attachment_id,index)">
                <img src="@/assets/userBind/deleteIcon.png" >
              </div>
            </div>
            <div class="file" @click="imgUploadShow(question_id)">
              <img class="photo" src="@/assets/help/photo.png" >
            </div>
          </div>
        </div>
      </div>
      <p class="info">欢迎您为我们提出宝贵的意见与建议，您留下的任何信息都将改善我们的软件</p>
    </h-content>
    <bottom-tab>
      <tab-button class="bottom-button" @click.native = "handSubmit">提&nbsp;&nbsp;交</tab-button>
    </bottom-tab>
  </h-view>
</template>
<script>
import ps from '../../assets/constractSigning/bank.png'

export default {
  data () {
    return {
      question_desc: '', // 问题描述
      question_id: '',
      upload_list: [], // 上传图片列表
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'HelpList') {
        vm.question_desc = ''
        vm.upload_list = []
        vm.question_id = ''
        vm.getQuestionId()
      }
    })
  },
  methods: {
    handSubmit () {
      let vm = this
      let url = process.env.basePath + 'app_question_save'
      let param = {
        'master': {
          user_phone: window.localStorage.user_phone,
          question_desc: vm.question_desc,
          question_id: vm.question_id,
        },
      }
      vm.hlsPopup.showLoading('提交数据中!')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.hlsPopup.showSuccess('提交成功')
        }
      })
    },
    // 图片上传入口
    imgUploadShow (check_id) {
      let vm = this
      hlsPopup.showActionSheet({
        titleText: '请选择照片',
        buttonArray: ['拍照', '从相册取'],
        callback: index => {
          if (index === 0) {
            vm.imgUploadOpenCamera(check_id)
          } else {
            vm.imgUploadTakePicture(check_id)
          }
        },
      })
    },
    imgUploadOpenCamera (check_id) {
      let vm = this
      let obj = {
        pkvalue: check_id,
        source_type: 'HLS_APP_QUESTION',
        picture: '',
        check_id: check_id,
        filePath: '',
        attachment_id: '',
        user_id: 1,
        fileName: '',
      }
      let cameraoptions = {
        quality: 100,
      }
      let success = function (imgdata) {
        obj.picture = hlsUtil.convertImageUrl(imgdata)
        obj.filePath = imgdata
        let list = []
        list.push(obj)
        // 拍完一张立马执行保存图片逻辑
        vm.save_picture(list)
      }
      let error = function () {
        hlsPopup.showLongCenter('请拍照')
      }
      hlsUtil.openCamera(cameraoptions, success, error)
    },
    imgUploadTakePicture (check_id) {
      let vm = this
      let cameraoptions = {
        quality: 100,
      }
      let success = function (imgUrl) {
        var list = []
        for (let i = 0; i < imgUrl.length; i++) {
          let obj = {
            'pkvalue': check_id,
            'source_type': 'HLS_APP_QUESTION',
            'picture': '',
            'check_id': check_id,
            'filePath': '',
            'attachment_id': '',
            'user_id': 1,
            'fileName': '',
          }
          obj.picture = hlsUtil.convertImageUrl(imgUrl[i])
          obj.filePath = imgUrl[i]
          list.push(obj)
        }
        // 拍完一张立马执行保存图片逻辑
        vm.save_picture(list)
      }
      let error = function () {
      }
      vm.hlsUtil.takePicture(cameraoptions, success, error)
    },
    save_picture (list) {
      let vm = this
      if (list.length) {
        // hlsPopup.showLoading('图片上传请稍候')
        var alreadyUploadNum = 0
        var attLength = 0
        var recordUploadInterval = setInterval(function () {
          if (alreadyUploadNum === attLength) {
            clearInterval(recordUploadInterval)
            /* hlsPopup.hideLoading()
            hlsPopup.showLongCenter('图片上传成功') */
            hlsPopup.showLongCenter('上传成功')
          }
        }, 500)
        for (var i = 0; i < list.length; i++) {
          let uploadSuccess = function (res) {
            if (res.result === 'S') {
              // hlsPopup.showLongCenter('上传成功')
              alreadyUploadNum++
              for (var j = 0; j < list.length; j++) {
                if (list[j].filePath === res.response.filePath) {
                  list[j].attachment_id = res.response.attachment_id
                  vm.upload_list.push(list[j])
                  break
                }
              }
            } else {
              hlsPopup.hideLoading()
            }
          }
          if (!list[i].attachment_id) {
            attLength++
            hlsUtil.fileUploadSvc(list[i], uploadSuccess)
          }
        }
      } else {
        hlsPopup.hideLoading()
      }
    },
    // 查看大图
    showBigPicture (pic) {
      let vm = this
      vm.hlsPopup.showBigPicture({
        imgUrl: pic,
        width: '100% !important',
      })
    },
    // 移除图片
    remove_pic (attachment_id, index) {
      let vm = this
      var delete_list = []
      let obj = {'attachment_id': attachment_id}
      delete_list.push(obj)
      let url = process.env.basePath + 'app_delete_attment' // 附件删除
      let param = {
        'picturelist': delete_list,
      }
      hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        hlsPopup.hideLoading()
        if (res.result === 'S') {
          hlsPopup.showLongCenter('删除成功!')
          vm.remove_upload_list(attachment_id, index)
        } else if (res.result === 'E') {
          hlsPopup.showShortCenter(res.message)
        }
      })
    },
    remove_upload_list (attachment_id, index) {
      let vm = this
      vm.upload_list.remove(index)
      vm.upload_list.sort()
    },

    // 获取question_id
    getQuestionId () {
      let vm = this
      let url = process.env.basePath + 'get_app_question_id'
      let param = { }
      vm.hlsPopup.showLoading('请稍候!')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.question_id = res.info.question_id
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
#help-detail {
   .close {
          position: relative;
          color: #f96f68;
          margin-top: -100%;
          margin-left: -10%;
          img {
            width: 14px;
            height: 14px;
          }
        }
  textarea::placeholder {
    font-family: PingFangSC-Regular;
    font-size: 13px;
    color: #b4b4b5;
    letter-spacing: 0;
  }
  .my-content {
    h4 {
      font-family: PingFangSC-Semibold;
      font-size: 15px;
      color: @headerColor;
      letter-spacing: 0;
      line-height: 20px;
      margin-top: 16px;
      padding-left: 26px;
      position: relative;
    }
    h4::before {
      content: "";
      display: inline-block;
      background-color: @headerColor;
      position: absolute;
      top: 5px;
      left: 15px;
      width: 4px;
      height: 12px;
    }
  }
  .write {
    width: 100%;
    height: 172px;
    background-color: #fff;
    margin-top: 16px;
    span {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #656464;
      letter-spacing: 0;
    }
    .box {
      width: 343px;
      margin: 0 auto;
      padding-top: 8px;
      textarea {
        width: 343px;
        height: 119px;
        margin-top: 12.5px;
        font-family: PingFangSC-Regular;
        font-size: 13px;
        letter-spacing: 0;
      }
    }
  }
  .upLoad {
    background-color: #ffffff;
    margin-top: 16px;
    padding-bottom: 16px;
    .upLoad-box {
      margin-left: 16px;
      padding-top: 8px;
      span {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #656464;
        letter-spacing: 0;
      }
    }
    .file-content {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-items: center;
      .file {
        margin-top: 16px;
        width: 80px;
        height: 80px;
        border: 1px dashed #dcdcdd;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20px;
        .file-img {
          width: 80px;
          height: 80px;
        }
        .photo {
          width: 21px;
          height: 18px;
        }
      }
    }
  }
  .info {
    width: 311px;
    margin: 0 auto;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #b4b4b5;
    text-align: center;
    margin-top: 40px;
    line-height: 20px;
  }
  .bottom-button {
    color: #fff;
    background-color: @headerColor;
  }
}
</style>
