<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="预警时间">
        <el-date-picker
          v-model="rangeTime"
          type="datetimerange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="车牌号码">
        <el-input v-model="turnPageParams.carNo" placeholder="请输入车牌号码" clearable style="width: 150px;"></el-input>
      </el-form-item>
      <el-form-item label="匹配状态">
        <el-select v-model="turnPageParams.matchStatus" placeholder="请选择匹配状态" clearable style="width: 150px;">
          <el-option :label="item.label" :value="item.value" v-for="(item, index) in matchStatusOptions" :key="index"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="">
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="turnBackPageTableData"
      max-height="50vh"
      style="width: 100%;overflow: auto;">
      <el-table-column
        prop="triggerTime"
        label="预警时间">
      </el-table-column>
      <el-table-column
        prop="carNo"
        label="车牌">
      </el-table-column>
      <el-table-column
        prop="channelName"
        label="通道">
      </el-table-column>
      <el-table-column
        prop="matchStatus"
        label="匹配状态">
        <template slot-scope="scope">
          {{ matchStatusOptions.find(item => item.value === scope.row.matchStatus)? matchStatusOptions.find(item => item.value === scope.row.matchStatus).label : ''}}
        </template>
      </el-table-column>
      <el-table-column
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-image :src="`${imageUrlPrefix}/${scope.row.fullImagePath}`" style="width: 100px; height: 60px" :preview-src-list="[`${imageUrlPrefix}/${scope.row.fullImagePath}`]"></el-image >
      </template>
    </el-table-column>
    </el-table>
    <div style="text-align: right;margin-top: 5px;">
      <el-pagination
      background
      layout="prev, pager, next"
      @current-change=""
      :total="total">
    </el-pagination>
    </div>
  </div>

</template>

<script>
import {
  carTurnBackPageList
} from '../../api/inParkCar'
import { mapGetters } from 'vuex'
export default {
  props: {
    imageUrlPrefix: {
      type: String,
      default: '',
      required: true
    }
  },
 data(){
   return {
    matchStatusOptions:[
      {
        label: '未处理',
        value: 1
      },
      {
        label: '匹配成功',
        value: 2
      },
      {
        label: '查无记录',
        value: 3
      },
      {
        label: '时间不匹配',
        value: 4
      }
    ],
    rangeTime: [],
    turnBackPageTableData: [],
    turnPageParams: {
      parkGuid: '',
        pager: {
          page: 1,
          pageSize: 10
        },
        carNo: '',
        beginTriggerTime: '',
        endTriggerTime: ''
      },
      total: 0
   }
 },
 computed: {
    ...mapGetters([
      'parkGuid'
    ])
  }, 
 created() {
  this.carTurnBackPageList()
 },
 methods:{
  async carTurnBackPageList() {
    this.turnPageParams.parkGuid = this.parkGuid
    const {data} = await carTurnBackPageList(this.turnPageParams)
    this.turnBackPageTableData = data ? data.list : []
    this.total = data? data.total : 0
  },
  search() {
    this.turnPageParams.pager.page = 1
    if (this.rangeTime && this.rangeTime.length) {
      this.turnPageParams.beginTriggerTime = this.rangeTime[0]
      this.turnPageParams.endTriggerTime = this.rangeTime[1]
    } else {
      this.turnPageParams.beginTriggerTime = ''
      this.turnPageParams.endTriggerTime = ''
    }
    this.carTurnBackPageList()
  },
  handleCurrentChange(val) {
    console.log(`当前页: ${val}`);
    this.turnPageParams.pager.page = val
    this.carTurnBackPageList()
  }
 } 
}
</script>