<template>
  <div>
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='search'>
        <div novalidate class="form-inline auto" partial>
          <div class="form-group">
            <label for="f_state">状态：</label>
            <v-select id="f_state" :value.sync="$parent.$parent.f_period"
            :options='$parent.$parent.check_states'
            close-on-select clear-button></v-select>
          </div>
          <div class="form-group">
            时间:
            <datepicker id="startdate"
              :value.sync="$parent.$parent.f_realtime"
              :disabled-days-of-Week="[]"
              :format="'yyyy-MM-dd'"
              :show-reset-button="reset">
            </datepicker>
          </div>

          <button class="btn btn-default" @click="search()">查询</button>
        </div>
      </criteria>
      <data-grid :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <th>时间</th>
            <th>手机使用者</th>
            <th>手机串码</th>
            <th>经度</th>
            <th>纬度</th>
            <th>海拔(米)</th>
            <th>电量%</th>
            <th>信号强度</th>
            <th>剩余空间M</th>
            <th>流量Kb</th>
          </tr>
        </template>
        <template partial='body'>
          <td>{{row.f_datetime}}</td>
          <td>{{row.f_user_name }}</td>
          <td>{{row.f_sn}}</td>
          <td>{{row.f_longitude}}</td>
          <td>{{row.f_latitude}}</td>
          <td>{{row.f_altitude}}</td>
          <td>{{row.f_battery_level}}</td>
          <td>{{row.f_signal_strength}}</td>
          <td>{{row.f_internal_quote}}</td>
          <td>{{row.f_traffic/1000}}</td>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

<script>
import { PagedList } from 'vue-client'
export default {
  title: '安检员状态',
  data () {
    return {
      model: new PagedList('rs/sql/checkerphonestate', 20, {f_period: 'this.f_period', f_realtime: 'this.f_realtime'}),
      check_states: [
        {label: '最后在线', value: '最新'},
        {label: '分钟状态', value: '分'},
        {label: '天状态', value: '天'},
        {label: '月状态', value: '月'}
      ],
      f_period: ['最新'],
      f_realtime: this.toStandardDateString()
    }
  },
  methods: {
    getstate () {
      this.model.search()
    },
    toStandardDateString () {
      let dt = new Date()
      let month = dt.getMonth() + 1
      let date = dt.getDate()
      return dt.getFullYear() + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' + date : date)
    }
  },
  ready () {
    this.model.f_period = this.f_period[0]
    this.model.f_realtime = this.f_realtime
    this.$watch('f_period', function (val) {
      this.model.f_period = val[0]
    })
    this.$watch('f_realtime', function (val) {
      this.model.f_realtime = val
    })
    this.getstate()
  }
}
</script>
