<template>
  <div id="user-query">
    <div class="user-query-body" v-loading.fullscreen.lock="fullscreenLoading">
      <div class="order-management-body">
        <div class="order-management-inner">
          <div class="base-info">
            <span>时间段：</span>
            <el-date-picker size="large" v-model="searchDate" type="daterange" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2" value-format="yyyy-MM-dd" align="center">
            </el-date-picker>
            <span>关键字:</span>
            <el-input @keyup.enter.native="handSubmit" ref="idKey" v-model="childName" value="" placeholder="公司名称、地址、备注"></el-input>
            <el-button type="primary" @click="handSubmit" color='red'>搜索</el-button>
          </div>
        </div>
        <div class="user-query_bottom">
          <div class="order-management-table">
            <keep-alive>
              <router-view class="user-view" :screen="screen" v-if="view === '设备查询'" />
            </keep-alive>
            <router-view v-if="view !== '设备查询'" class="user-view" :screen="screen" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: 'user-query',
  data () {
    return {
      pickerOptions2: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      childName: '',
      searchDate: undefined,
      sumArr: ['', '', '', '', '', '', '', '', '', '', '', ''],
      screen: {},
      fullscreenLoading: false
    }
  },
  methods: {
    handSubmit () {
      this.screen = {}

      this.screen.date1 = (this.searchDate) ? (this.searchDate[0] + ' 00:00:00') : null
      this.screen.date2 = (this.searchDate) ? (this.searchDate[1] + ' 23:59:59') : null
      this.screen.childName = this.childName || null

      if (this.$refs.idKey.currentValue) {
        this.screen.cameraId = this.$refs.idKey.currentValue
      }
      // this.$router.replace({ name: 'user-list' })
    }
  },
  computed: {
    view () {
      return this.$route.name
    }
  }
}

</script>
<style lang="css" scoped>
@import url('./style.css');
</style>
<style type="text/css">
@import url('./pstyle.css');
</style>
