<<template>
  <!-- <div style="text-align:center,background-color:#6699cc;height:75px;">
    <div style="width=!00%;height:20px"></div>
    <p class="h4" align="center" style="vertical-align:middle;"><b>{{user.name}}的手机状态</b></p>
  </div> -->
  <tools-page :need-back='false' title="手机状态"></tools-page>
  <div class="">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xs-offset-0 col-sm-offset-0 col-md-offset-3 col-lg-offset-3 toppad" >
        <div class="panel panel-info">
          <div class="panel-body">
            <div class="row">
              <div class=" col-md-12 col-lg-12 ">
                <table class="table table-user-information table table-striped">
                  <tbody>
                  <tr>
                    <td>姓名：</td>
                    <td><span>{{user.name}}&nbsp;&nbsp;&nbsp;&nbsp;
                      <!--<button class="btn btn-warning" @click="verifyChecker">身份验证</btton>-->
                        </span></td>
                  </tr>
                  <tr>
                    <td>经度：</td>
                    <td>{{data.f_longitude=='0'?'-':data.f_longitude}}</td>
                  </tr>
                  <tr>
                  <td>纬度：</td>
                  <td>{{data.f_latitude=='0'?'-':data.f_latitude}}</td>
                  </tr>
                  <tr>
                    <td>海拔：</td>
                    <td>{{data.f_altitude=='0'?'-':data.f_altitude}}米</td>
                  </tr>
                  <tr>
                  <td>当日流量：</td>
                  <td>{{data.f_traffic}}K</td>
                  </tr>
                  <tr>
                    <td>信号强度：</td>
                    <td>{{data.f_signal_strength}}</td>
                  </tr>
                  <tr>
                  <td>电池电量：</td>
                  <td>{{data.f_battery_level}}%</td>
                  </tr>
                  <tr>
                    <td>剩余空间：</td>
                    <td>{{data.f_internal_quote}}M</td>
                  </tr>
                  <tr>
                    <td>上班时间：</td>
                    <td><span>{{data.f_signin_time}}&nbsp;&nbsp;&nbsp;&nbsp;<button @click="signIn" class="btn btn-primary">签到</button></span></td>
                  </tr>
                  <tr>
                    <td>下班时间：</td>
                    <td><span>{{data.f_knockoff_time}}&nbsp;&nbsp;&nbsp;&nbsp;<button @click="knockOff" class="btn btn-primary">签到</button></span</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import * as Util from '../Util'

export default {
  title: '电话状态',
  props: ['role'],
  data() {
    return {
      user: Vue.user,
      data: {},
      timerEnabled: true,
      timer: null,
      role: ''
    }
  },
  methods: {
    verifyChecker() {
      this.timerEnabled = false
      this.$goto('checker-avarta', {userid: this.user.id}, 'self', this.enableTimer)
    },
    enableTimer(param) {
      this.timerEnabled = true
      this.updateState()
    },
    knockOff() {
      let that = this
      this.$resetpost(`${this.$androidUtil.getProxyUrl()}/api/af-safecheck/logic/下班签到`, {data:{f_userinfoid: this.user.id, f_user_name: this.user.name, f_date: Util.toStandardDateString()}}, {resolveMsg: null, rejectMsg: null}).then(
        (response) => {
          that.$set('data.f_knockoff_time', response.data.time)
          HostApp.alert(response.data.msg)
        }
      ).catch(
        (response) => {
          HostApp.alert('下班签到失败。')
        }
      )
    },
    signIn() {
      let that = this
      this.$resetpost(`${this.$androidUtil.getProxyUrl()}/api/af-safecheck/logic/上班签到`, {data:{f_userinfoid: this.user.id, f_user_name: this.user.name, f_date: Util.toStandardDateString()}}, {resolveMsg: null, rejectMsg: null}).then(
        (response) => {
          that.$set('data.f_signin_time', response.data.time)
          HostApp.alert(response.data.msg)
        }
      ).catch(
        (response) => {
          HostApp.alert('上班签到失败。')
        }
      )
    },
    askForLeave() {

    },
    updateState() {
      if (!this.timerEnabled) {
        return
      }
      if (Vue.android) {
        this.$set('data', HostApp.getPhoneStatus())
        this.timer = window.setInterval(this.updateState, Vue.interval)
        // let that = this
        // this.$post(Vue.url + 'sql/查找登录用户信息', {data:{userid: this.user.id}}, {resolveMsg: null, rejectMsg: '提取数据出错，请检查网络！'}).then(
        //   (response) => {
        //     this.$set('data', response.data[0])
        //     window.setTimeout(this.updateState, 2000)
        //   }
        // ).catch(
        //   (response)  => {
        //     this.$set('data', response.statusText)
        //     window.setTimeout(this.updateState, 2000)
        //   }
        // )
      }
    }
  },
  ready() {
    this.$set('role', this.role)
    this.updateState()
  },
  destroyed() {
    this.timerEnabled = false
    if(this.timer) {
      console.log('destroying timer...')
      window.clearInterval(this.timer)
    }
  },
}
</script>
