<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <!-- 搜索 -->
        <label class="el-form-item-label">访客姓名</label>
        <el-input v-model="query.visitorName" clearable placeholder="访客姓名" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">到访时间</label>
        <DateRangePicker
          v-model="buildDate"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          style="width: 300px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-button class="filter-item" size="mini" type="success" icon="el-icon-refresh-left" @click="changeDate">搜索</el-button>
        <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetDate">重置</el-button>
      </div>
      <crudOperation :permission="permission" />
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="visitorName" label="访客姓名" />
        <el-table-column prop="visitorPhone" label="访客电话" />
        <el-table-column prop="plateNumber" label="访客车牌">
          <template slot-scope="{ row }">
            <!--            {{ cacuTime(row.visitorsApply.startTime, row.visitorsApply.endTime, 'days') }}-->
            <span v-if="row.plateNumber">{{ row.plateNumber }}</span>
            <span v-if="!row.plateNumber">无车牌</span>
          </template>
        </el-table-column>
        <el-table-column prop="visitorsApply.dmUser.name" label="被访人员姓名" />
        <el-table-column prop="visitorsApply.dmUser.jobs[0].name" label="被访人员职务" />
        <el-table-column prop="visitorsApply.dmUser.dept.name" label="到访部门" />
        <el-table-column prop="visitorsApply.startTime" label="到访开始时间" />
        <el-table-column prop="visitorsApply.endTime" label="到访结束时间" />
        <el-table-column label="停车时长">
          <template slot-scope="{ row }">
            <!--            {{ cacuTime(row.visitorsApply.startTime, row.visitorsApply.endTime, 'days') }}-->
            <el-button v-if="row.plateNumber" size="small" @click="getStopTime(row)">获取停车时长</el-button>
            <span v-if="!(row.plateNumber)">0</span>
          </template>
        </el-table-column>
        <el-table-column prop="visitorsApply.requestUser.name" label="申请人" />
        <el-table-column prop="visitorsApply.createTime" label="申请时间" />
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import crudDmVisitorsUser from '@/api/dmVisitorsUser'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import DateRangePicker from '@/components/DateRangePicker'

const defaultForm = { visitorId: null, visitorName: null, visitorPhone: null, deptId: null, plateNumber: null, applyId: null }
const optShow = {
  add: false,
  edit: false,
  del: false,
  download: true,
  reset: true
}
export default {
  name: 'DmVisitorsUser',
  components: { pagination, crudOperation, DateRangePicker },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: '访客记录', url: 'api/dmVisitorsUser', idField: 'visitorId', sort: 'visitorId,desc', crudMethod: { ...crudDmVisitorsUser }, optShow })
  },
  data() {
    return {
      buildDate: [],
      permission: {
        add: ['admin', 'dmVisitorsUser:add'],
        edit: ['admin', 'dmVisitorsUser:edit'],
        del: ['admin', 'dmVisitorsUser:del']
      },
      rules: {
      }}
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    // 根据车牌和时间查看停车时长
    getStopTime(row) {

    },
    cacuTime(startTime, endTime, type = 'days') {
      if (!startTime || !endTime) {
        return
      }
      return Math.abs(moment(startTime).diff(endTime, type))
    },
    changeDate() {
      this.crud.query.startTime = this.buildDate[0] || ''
      this.crud.query.endTime = this.buildDate[1] || ''
      this.crud.query.visitorName = this.query.visitorName
      this.crud.toQuery()
    },
    resetDate() {
      this.buildDate = []
      this.query.visitorName = ''
      this.changeDate()
    }
  }
}
</script>

<style scoped>

</style>
