<template>
  <div class="panel">
    <div class="panel-body panel-self" style="background-color: #F8F8F8;">
      <div class="row form-group" style="height: 240px;overflow: scroll;">
        <div class="col-xs-4 col-sm-3 col-md-2 col-xs-offset-1 col-sm-offset-1 col-md-offset-1" v-for="(index,file) in fileList">
          <img-self :src="file.f_downloadURL" :width="120" :height="170"></img-self>
          <img v-if="isdelete" src="../../../src/assets/删除.png" style="width: 15px;margin-top: -80px" @click.prevent="delfile(file, index)">
        </div>
      </div>
      <div class="row text-right form-group" v-if="istakepic">
        <v-select
          class="fileType"
          placeholder="请选择使用类型"
          v-if="istype"
          :search="false"
          close-on-select
          value-single
          :options="typeList"
          v-model="type"
          :value.sync="type"
        ></v-select>
        <button class="btn" style="background-color: #7dc1f4;border-radius: 5px;margin-right: 10px" @click.prevent="takePic(type)">拍照</button>
      </div>
    </div>
  </div>
</template>

<script>
import {HttpResetClass} from 'vue-client'
import {guid, toStandardTimeString} from '../Util'
import Vue from 'vue'
export default {
  title: '附件',
  props: ['blobid', 'type', 'defname', 'istype', 'typelabel', 'isdelete', 'istakepic'],
  data () {
    return {
      fileList: []
    }
  },
  ready () {
    this.getFiles()
  },
  methods: {
    async getFiles () {
      console.log('----------------开始查询图片----------------')
      this.fileList = []

      let http = new HttpResetClass()

      let data = {
        tablename: 't_files',
        condition: `f_blobid = '${this.blobid}' and fremarks = '手机拍照' order by f_uploaddate desc `
      }
      let res = await http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/sql/applySingleTable`, {data: data}, {
        // let res = await http.load('POST', `rs/sql/applySingleTable`, {data: data}, {
        warnMsg: null,
        resolveMsg: null
      })

      for (var i = 0; i < res.data.length; i++) {
        console.log('-----------地址----------------',`${this.$androidUtil.getProxyUrl()}/${res.data[i].f_downloadpath.substring(res.data[i].f_downloadpath.lastIndexOf(":\\") + 2)}`)
        res.data[i].f_downloadURL = `${this.$androidUtil.getProxyUrl()}/${res.data[i].f_downloadpath.substring(res.data[i].f_downloadpath.lastIndexOf(":\\") + 2)}`
      }

      this.fileList = res.data
    },
    delfile (file, index) {
      this.$resetdelete(`${this.$androidUtil.getProxyUrl()}/rs/entity/t_files`, {id: file.id}, {resolveMsg: '删除成功', rejectMsg: '删除失败'}).then((res) => {
        this.$dispatch("delResid", file.id)
        this.getFiles()
      })
    },
    takePic (title) {
      // 拍照成功回调
      HostApp.__callback__ = this.cameraCallBack
      HostApp.__this__ = this
      let fileName = guid() + '.jpg'
      // 打开相机
      HostApp._open_a_page({
        type: 'boomerang',
        page: 'com.aofeng.hybrid.android.peripheral.CameraActivity',
        param: {
          file: fileName,
          requestCode: 200,
          callback: 'javascript:HostApp.__callback__("' + fileName + '", "%s");',
          watermark: title + '\t时间：' + toStandardTimeString() + '\t' + Vue.user.name  // 水印
        }
      })
    },
    cameraCallBack (fileName, fileUrl) {
      console.log('-----------cameraCallBack-----------------')

      let data = {
        blobid: HostApp.__this__.blobid,
        type: HostApp.__this__.type,
        defname: HostApp.__this__.defname,
        username: Vue.user.name,
        fremarks: '手机拍照',
        fileName: fileName,
        fileUrl: fileUrl
      }

      console.log('-----------bzLogic-----------------')
      HostApp.bzLogic({
        'logic': 'appFileUpload',
        'data': data
      })

      console.log('----------------开始回调查询-------------------')
      HostApp.__this__.getFiles()
      console.log('----------------查询回调结束-------------------')

      HostApp.__callback__ = null
      HostApp.__this__ = null
    }
  },
  computed: {
    typeList () {
      if (this.typelabel) {
        return this.$appdata.getParam(this.typelabel)
      }
      return this.$appdata.getParam('使用类型')
    }
  },
  events: {
  }
}
</script>

<style lang="less">
.fileType {
  float: left;
  .select-style {
    background: #f8f8f8;
    border: 0px;
  }
  input {
    border-left: none;
    width: 100%;
  }
}
</style>
