<!-- 附件 -->
<template>
  <div style="width: 100%;">
    <Tabs v-model="active" color="#02459a">
      <Tab title="附件信息">
        <p class="notice">tips：点击上传目录即可上传，点击文件即可下载或预览。</p>
        <div class="table-box">
          <table class="att_table">
            <tr>
              <th>上传目录</th>
              <th>附件</th>
              <th>备注</th>
            </tr>
            <tr v-for="(item, index) of attachFileArr" :key="item.check_id">
              <td @click="chooseFile(item.check_id)">{{ item.description }}</td>
              <td>
                <span v-for="(attach, ai) in item.attachArr" :key="attach.attachId" @click="previewOrDownload(attach)">
                  {{ attach.fileName + (ai === item.attachArr.length - 1 ? '' : ',') }}
                </span>
              </td>
              <td>{{ item.note }}</td>
            </tr>
          </table>
        </div>
      </Tab>
      <Tab title="特批附件">
        <p class="notice">tips：点击上传目录即可上传，点击文件即可下载或预览。</p>

        <div class="table-box">
          <table class="att_table">
            <tr>
              <th>上传目录</th>
              <th>附件</th>
              <th>备注</th>
            </tr>
            <tr v-for="(item, index) of spcialArr" :key="item.check_id">
              <td @click="chooseFile(item.check_id)">{{ item.description }}</td>
              <td>
                <span v-for="(attach, ai) in item.attachArr" :key="attach.attachId" @click="previewOrDownload(attach)">
                  {{ attach.fileName + (ai === item.attachArr.length - 1 ? '' : ',') }}
                </span>
              </td>
              <td>{{ item.note }}</td>
            </tr>
          </table>
        </div>
      </Tab>
    </Tabs>

  </div>
</template>

<script>
import { Tab, Tabs } from 'vant'
import 'vant/lib/tab/style'
import 'vant/lib/tabs/style'

export default {
  components: {
    Tabs, Tab},
  props: ['appendixData'],
  data () {
    return {
      licenseImg: '',
      active: 0, // tab索引值
      attachFileArr: [], // 附件信息
      spcialArr: [], // 特批附件
    }
  },
  // watch:{
  //   appendixData(){
  //     console.log('mounted执行', this.appendixData );
  //     this.attachFileArr = this.appendixData.filter((item, index) => {
  //       if (item.cdd_item === 'SPCIAL_REPORT') {
  //         this.spcialArr.push(item)
  //       }
  //       return item.cdd_item !== 'SPCIAL_REPORT'
  //     })
  //   },
  //   active(n,o){
  //     console.log('xin',n,'jiu',o);
  //   }
  // },
  created(){
      this.attachFileArr = this.appendixData.filter((item, index) => {
        if (item.cdd_item === 'SPCIAL_REPORT') {
          this.spcialArr.push(item)
        }
        return item.cdd_item !== 'SPCIAL_REPORT'
      })
  },
  methods: {
    getspcialArr () {
      return this.spcialArr[0]
    },
    previewOrDownload (attObj) {
      let picUrl = `${process.env.filePath}attachment_id=${attObj.attachId}&access_token=${window.localStorage.access_token}`
      if (/.png|.jpg$/.test(attObj.fileName)) {
        this.showBigPicture(picUrl)
      } else {
        console.log(hlsUtil.convertImageUrl(picUrl))
        window.open(hlsUtil.convertImageUrl(picUrl))
      }
      console.log(attObj)
    },

    // 上传窗口
    chooseFile (check_id) {
      let vm = this
      hlsPopup.showActionSheet({
        titleText: '请选择照片',
        buttonArray: ['拍照', '从相册取'],
        callback: index => {
          if (index === 0) {
            vm.openCamera(check_id)
          } else {
            vm.takePicture(check_id)
          }
        },
      })
    },
    openCamera (check_id) {
      let vm = this
      let cameraoptions = {
        quality: 60,
        width: 1843,
        height: 1382,
      }
      let success = function (imgdata) {
        if (!imgdata) {
          hlsPopup.showLongCenter('请拍照')
        } else {
          vm.licenseImg = hlsUtil.convertImageUrl(imgdata)
          let list = [{
            pkvalue: check_id,
            source_type: 'PRJ_CDD_ITEM_CHECK',
            picture: '',
            filePath: imgdata,
            attachment_id: '',
            user_id: 1,
            fileName: '',
          }]

          vm.save_file(list)
        }
      }
      let error = function () {
        hlsPopup.showLongCenter('请拍照')
      }
      hlsUtil.openCamera(cameraoptions, success, error)
    },
    takePicture (check_id) {
      let vm = this
      var cameraoptions = {
        quality: 70,
        width: 1843,
        height: 1382,
        maxCount: 1,
      }
      let success = function (imgUrl) {
        if (imgUrl.length === 0) {
          hlsPopup.showLongCenter('请选择一张图片')
        } else {
          vm.licenseImg = hlsUtil.convertImageUrl(imgUrl[0])
          let list = [{
            pkvalue: check_id,
            source_type: 'PRJ_CDD_ITEM_CHECK',
            picture: '',
            filePath: imgUrl[0],
            attachment_id: '',
            user_id: 1,
            fileName: '',
          }]

          vm.save_file(list)
        }
      }
      let error = function () {
        hlsPopup.showLongCenter(error)
      }
      vm.hlsUtil.takePicture(cameraoptions, success, error)
    },

    // 图片保存
    save_file (list) {
      let vm = this
      let upView = vm.debounce(function () { vm.$emit('upData') }, 1500)
      if (list.length) {
        // hlsPopup.showLoading('图片上传请稍候')
        var alreadyUploadNum = 0
        var attLength = 0
        var recordUploadInterval = setInterval(function () {
          if (alreadyUploadNum === attLength) {
            clearInterval(recordUploadInterval)
            /*  hlsPopup.hideLoading()
                hlsPopup.showLongCenter('图片上传成功') */
          }
        }, 500)
        for (var i = 0; i < list.length; i++) {
          let uploadSuccess = function (res) {
            if (res.result === 'S') {
              alreadyUploadNum++
              for (var j = 0; j < list.length; j++) {
                if (list[j].filePath === res.response.filePath) {
                  list[j].attachment_id = res.response.attachment_id
                  break
                }
              }
              upView()
            } else {
              hlsPopup.hideLoading()
            }
          }
          if (!list[i].attachment_id) {
            attLength++
            console.log(list[i])
            hlsUtil.fileUploadSvc(list[i], uploadSuccess)
          }
        }
      } else {
        hlsPopup.hideLoading()
      }
    },
    // 查看图片
    showBigPicture (picUrl) {
      let vm = this
      vm.hlsPopup.showBigPicture({ imgUrl: picUrl, width: '100%' })
    },
    debounce (func, wait) {
      let timer
      return function () {
        let context = this // 注意 this 指向
        let args = arguments // arguments中存着e

        if (timer) clearTimeout(timer)

        timer = setTimeout(() => {
          func.apply(this, args)
        }, wait)
      }
    },
  },
}
</script>

<style lang="less" scoped>
.notice {
  padding: 10px 10px;
  background-color: #fffbe8;
  color: #ed6a0c;
  font-size: 14px;
  font-family: PingFangSC-Semibold;
}

.table-box {
  width: 100vw;
  overflow-x: auto;
}

.att_table {
  min-width: 100%;
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  line-height: 32px;
  color: #02459a;

  td,
  th {
    box-sizing: border-box;
    padding: 3px 5px;
    border: 1px solid #ccc;
    text-align: center;
    height: 32px;
    min-width: 100px;
  }

  th {
    height: 25px;
    line-height: 25px;
    font-weight: 600;
  }

}
</style>
