<template>
  <div>
    <div class="btn-box">
      <van-button
        class="btnSigin"
        :loading="loadingStatus"
        type="primary"
        @click="showDialog()"
      >签到</van-button>
    </div>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      @click-overlay="overlay"
      @select="onSelect"
      @cancel="onCancel"
    >
      <div class="content">
        <input
          id="upload"
          type="file"
          accept="image"
          style="visibility:hidden;width: 0;height: 0;"
          @change="upload"
        >
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
import { saveProcessNode } from './../../api/EngineerSignUp'
import { goUpload } from './../../api'
import { componentsToTemplate, templateToSubmit } from './../utils'
import { Notify, Toast } from 'vant'
import lrz from 'lrz'
import cloneDeep from 'lodash/cloneDeep'

export default {
  name: 'SignIn',
  props: {
    item: {
      default: () => { },
      type: Object
    },
    formData: {
      type: Array,
      default: () => [],
      require: true
    }
  },
  data () {
    return {
      show: false,
      loadingStatus: false,
      timer: '',
      actions: [
        { name: '拍照签到' }
      ]
    }
  },
  mounted () {
  },
  methods: {
    overlay () {
      this.loadingStatus = false
    },
    upload (file) {
      const files = file.target.files
      const that = this
      console.log('压缩前大小：' + files[0].size / 1024)
      lrz(files[0]).then(function (rst) {
        console.log('压缩后大小：' + rst.fileLen / 1024)
        const formData = new FormData()
        formData.append('file', rst.file, files[0].name)
        goUpload({
          data: formData
        }).then(res => {
          that.item.props[0].value.push(res.data)
          that.item.componentFeedback[0].value = that.item.props[0].value.map(val => {
            return {
              fileName: val.fileName,
              filePath: val.filePath
            }
          })
          that.ajaxPromiss()
        }).catch(() => {
        })
      }).catch(function (err) {
        // 处理失败会执行
        console.log(err)
      })
    },
    onSelect (item) {
      if (item.name) {
        document.querySelector('#upload').click()
      }
    },
    onCancel () {
      this.show = false
      this.loadingStatus = false
    },
    submitFormat (tem) {
      const originalJson = cloneDeep(tem.formTemplate.formTemplateJson)
      // 用于模板保存的数据结构
      const templateJson = componentsToTemplate(originalJson)
      // 用于模板保存中的业务组件
      const templateJsonByBusiness = originalJson.filter(item => item.category === 'business').map(item => item.componentInfo)
      // 自定义组件、系统组件-提交的数据格式
      const propertyFeedbackInfo = templateToSubmit(templateJson.filter(item => item.category !== 'business'))
      // 业务组件-提交的数据格式
      const componentFeedbackInfo = templateToSubmit(templateJson.filter(item => item.category === 'business'))
      return {
        originalJson,
        templateJson,
        templateJsonByBusiness,
        propertyFeedbackInfo,
        componentFeedbackInfo
      }
    },
    ajaxPromiss () {
      let obj
      this.formData.map(ele => {
        obj = this.submitFormat(ele)
      })
      const data = {
        soid: this.$route.params.id,
        nodeFeedBackInfo: {
          processNodeID: this.formData[0].processNodeID,
          propertyFeedbackInfo: obj.propertyFeedbackInfo,
          componentFeedbackInfo: obj.componentFeedbackInfo
        }
      }
      saveProcessNode(data).then(res => {
        if (res.code === 302) {
          this.show = true
        } else {
          this.show = false
          this.loadingStatus = false
          this.$emit('parentGetNode')
          Notify({ type: 'success', message: '签到成功' })
        }
      }).catch((err) => {
        console.log(err)
        this.show = true
        this.loadingStatus = false
      })
    },
    showDialog () {
      this.loadingStatus = true
      this.timer = setTimeout(this.ajaxPromiss, 1000)
      const that = this
      window.App.getCurrentLocationInfo(function (res) {
        const data = res.data
        if (res.status === 1) {
          // 当前经纬度
          if (data.lat && data.lon) {
            that.item.props[1].value = [{
              Lon: data.lon,
              Lat: data.lat
              // Lon: 123.5,
              // Lat: 78
            }]
            that.item.componentFeedback[1].value = [{
              Lon: data.lon,
              Lat: data.lat
              // Lon: 123.5,
              // Lat: 78
            }]
            clearTimeout(this.timer)
            that.ajaxPromiss()
          } else {
            that.loadingStatus = false
            that.show = true
            Toast('定位失败')
          }
        } else {
          that.show = true
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.btnSigin {
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
  border-radius: 50%;
  background-color: #1989fa;
  border: 1px solid #1989fa;
  margin: 20px auto;
}
.siginColor {
  color: #fff;
  font-size: 20px;
}
.btn-box {
  text-align: center;
}
.btnSigin {
  ::v-deep .van-button__text {
    font-size: 20px;
  }
}
.content {
  width: 0;
  height: 0;
}
</style>
