<template>
  <div class="panel">
    <div class="panel-body panel-self" style="background-color: #F8F8F8;">
      <div class="row form-group" style="height: 240px;overflow: scroll;">
        <img :src="f_sign_path" width="100%" height="100%" />
      </div>
      <div class="row text-right form-group">
        <button class="btn" style="background-color: #f1e404;border-radius: 5px;margin-right: 10px" @click="clean" v-if="isclean">清除</button>
        <button class="btn" style="background-color: #7dc1f4;border-radius: 5px;margin-right: 10px" @click="sign" v-if="issign && defname !== '现场勘察'">签名</button>
        <button class="btn" style="background-color: #7dc1f4;border-radius: 5px;margin-right: 10px" @click="show_notification" v-if="issign && defname === '现场勘察'">签名</button>
      </div>
    </div>
    <modal v-if="notification" :show.sync="notification" v-ref:modal :large="true" :backdrop="false">
      <article slot="modal-body" class="modal-body clearfix">
        <!-- 基本信息 -->
        <div class="form-group col-xs-12 panel panel-info">
          <div class="panel-heading head col-xs-12" style="background-color: #e8f4ff;margin-bottom: 10px">
            <div class="col-xs-6 text-left">用户须知</div>
          </div>
          <div class="form-group row">
            <div class="col-xs-12">
              <textarea rows="26" cols="30" readonly=true v-if="selectdata.f_apply_type === '民用报建'" style="align: left">
          我单位/本人自愿委托贵公司作为一体化服务单位,组织实施我单位/本人所属天然气设施建设工程，包括天然气设施建设工程勘察、设计、施工、监理、竣工验收和材料供应等相关事宜。
      安装天然气若遇邻居阻挡时由我单位/本人协调解决，否则不予勘设安装。我单位/本人签字后即认为同意。
      设计员已向我单位/本人说明安装位置及条件，后期不得自行变更。

              </textarea>
              <textarea rows="26" cols="30" readonly=true v-if="selectdata.f_apply_type === '非民用报建'">

          我单位/本人自愿委托贵公司作为一体化服务单位,组织实施我单位/本人所属天然气设施建设工程，包括天然气设施建设工程勘察、设计、施工、监理、竣工验收、材料供应和燃气泄露报警器、安全自动切断装置等相关事宜。
          安装天然气若遇邻居阻挡时由我单位/本人协调解决，否则不予勘设安装。
          设计员己向我单位/本人说明安装位置及条件，后期不得自行变更。我单位/本人签字后即认为同意。
          根据《中华人民共和国安全生产法》第二章三十六条、《陕西省燃气管理条例》 第四章第三十二条：“非居民燃气用户必须安装使用燃气泄露报警器、安全自动切断装置和防暴照明灯。”用户也可自行购买安装，自行购买安装的用户须提供以下资料：
          1、提供产品质量检验报告和产品合格证书；
          2、提供购货发票复印件；
          3、提供产品消防认证；
          4、提供安装单位工程施工资料；
          5、提供安装单位资质；
          6、用户外购安装报警器需在我公司备案（不收取任何费用）。
              </textarea>
            </div>
          </div>
          <div class="row text-right form-group">
            <button class="btn" style="background-color: #7dc1f4;border-radius: 5px;margin-right: 10px" @click="close_notification" >确认</button>
          </div>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <template>

        </template>
      </footer>
    </modal>
  </div>
</template>
<script>
import {getNowDate, guid, isEmpty} from '../Util'
import {PagedList} from 'vue-client'
import {HttpResetClass} from 'vue-client'
import QRCode from 'qrcodejs2'
import Vue from "vue";

export default {
  title: '签字',
  props: ['blobid', 'defname', 'type', 'filePath', 'isclean', 'issign','selectdata'],
  data () {
    return {
      f_sign_path: null,
      fileName: null,
      imgid: null,
      notification: false
    }
  },
  ready () {
    this.getFiles()
    this.f_sign_path = this.filePath
  },
  methods: {
    clean () {
      this.f_sign_path = null
      this.fileName = null
      this.$emit('sign-clean')
      this.delfile(this.imgid)
    },
    delfile(file) {
      this.f_sign_path = null
      this.fileName = null
      this.$emit('sign-clean')
      this.$resetdelete(`${this.$androidUtil.getProxyUrl()}/rs/entity/t_files`, {id: file}, {
        resolveMsg: '删除成功',
        rejectMsg: '删除失败'
      }).then((res) => {
        this.$dispatch("delResid", file)
      })
    },
    show_notification() {
      this.notification = true
    },
    close_notification() {
      this.notification = false
      this.sign()
    },
    sign() {
      this.delAudioFile(this.f_sign_path)
      this.fileName = guid() + '.jpg'
      HostApp.__callback__ = this.signCallback
      HostApp.__this__ = this
      HostApp.getSignature({
        file: this.fileName,
        requestCode: 111,
        callback: 'javascript:HostApp.__callback__("f_sign_path", "%s");'
      })
    },
    // 签名回调
    signCallback (prop, signPath) {
      console.log('==============签字回调============')
      console.log(signPath)
      HostApp.__this__.$set(prop, signPath)


      console.log(HostApp.__this__.f_sign_path)

      HostApp.__this__.uploadFile()


      HostApp.__callback__ = null
      HostApp.__this__ = null
    },
    uploadFile () {
      console.log('===================签字文件上传==============')
      let data = {
        blobid: HostApp.__this__.blobid,
        type: HostApp.__this__.type,
        defname: HostApp.__this__.defname,
        username: Vue.user.name,
        fremarks: '报装手机签字文件',
        fileName: HostApp.__this__.fileName,
        fileUrl: HostApp.__this__.f_sign_path,
        f_apply_type:HostApp.__this__.selectdata.f_apply_type,
      }
      console.log('-----------bzLogic-----------------')
      console.log(JSON.stringify(data))
      let res = HostApp.bzLogic({
        'logic': 'appFileUpload',
        'data': data
      })
      console.log('===============上传回调=================')
      console.log(JSON.stringify(res))
      this.imgid = res.id
      HostApp.__this__.getFiles(res.id)
    },
    async getFiles (fileid) {
      console.log("cess",this.selectdata.f_apply_type)
      let http = new HttpResetClass()
      let data
      if (fileid && this.defname.includes('签字')) {
        console.log('=========签字回调===============')
        data = {
          tablename: 't_files',
          condition: `id = '${fileid}'`
        }
      }else if (this.defname.includes('签字')){
        data = {
          tablename: 't_files',
          condition: `f_blobid = '${this.blobid}' and fremarks = '报装手机签字文件' and fusetype = '${this.type}' order by f_uploaddate desc `
        }
      } else {
        console.log('=========签字查看===============')
        data = {
          tablename: 't_files',
          condition: `f_blobid = '${this.blobid}' and fremarks = '报装手机签字文件' and defname = '${this.defname}' 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
      })
      if(res.data.length > 0){
        console.log('=========查询回调===============')
        let fileUrl = `${this.$androidUtil.getProxyUrl()}/${res.data[0].f_downloadpath.substring(res.data[0].f_downloadpath.lastIndexOf(":\\") + 2)}`
        console.log(fileUrl)
        // HostApp.__this__.$set('f_sign_path', fileUrl)
        // HostApp.__this__.f_sign_path = fileUrl
        this.f_sign_path = fileUrl
        this.imgid = res.data[0].id
        let f_fileUrl = `http://193.168.1.44:8400/${res.data[0].f_downloadpath.substring(res.data[0].f_downloadpath.lastIndexOf(":\\") + 2)}`
        this.$emit('sign-success', f_fileUrl)
      }else {
        this.f_sign_path = null
      }
    },
    delAudioFile (signPath) {
      if (!signPath) {
        return
      }
      HostApp.delfile(signPath)
      this.f_sign_path = null
      this.fileName = null
    }
  },
  events: {
  },
  computed: {
  },
  watch: {
  }
}
</script>
<style scoped lang="less">
.qrcode {
  display: inline-block !important;
  margin: 10px 0px;
}
.panel-self{
  border-radius: 10px;
  border:1px solid #499EDF;
  background-color: #F8F8F8;
}
.vertical-center {
  display: flex;
  align-items: center;
  text-align: center;
}
/*清除model中的浮动*/
.clearfix:after,.clearfix:before{
  display: table;
}
.clearfix:after{
  clear: both;
}
</style>
