<template>
  <div>
    <div class="serch-wrap">
      <el-row :gutter="20">
        <el-form ref="form" :model="form" label-width="60px" label-position="left">
          <el-col :xs="8" :sm="6" :md="7" :lg="7" :xl="1">
            <el-form-item label="车牌">
              <el-input v-model="form.name" maxlength="10" />
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="6" :md="3" :lg="3" :xl="1">
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-col>
        </el-form>
      </el-row>
    </div>

    <div class="table-wrap">
      <p class="table-title">订单详情</p>
      <el-table
        :data="orderData"
        style="width: 100%;"
        :show-overflow-tooltip="true">
        <el-table-column
          prop="parkName"
          label="停车场"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="license"
          label="车牌"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="money"
          label="停车费">
        </el-table-column>
        <el-table-column
          prop="inTime"
          label="进场时间"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="outTime"
          label="出场时间"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="duration"
          label="停车时长"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="berthNum"
          label="泊位编号">
        </el-table-column>
        <el-table-column
          prop="status"
          label="订单状态">
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="10"
        :pager-count="11"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      total: 55,
      currentPage: 1,
      pageSize: 10,
      orderData: [
        {
          parkName: '承德老二中停车场',
          license: '冀H7517732',
          money: '31',
          inTime: '2019-06-02 00:00:00',
          outTime: '2019-06-01 08:00:00',
          duration: '2小时28分钟43秒',
          berthNum: 'A1212231',
          status: '完成'
        },
        {
          parkName: '承德老二中停车场',
          license: '冀H7517732',
          money: '31',
          inTime: '2019-06-02 00:00:00',
          outTime: '2019-06-01 08:00:00',
          duration: '2小时28分钟43秒',
          berthNum: 'A1212231',
          status: '完成'
        },
        {
          parkName: '承德老二中停车场',
          license: '冀H7517732',
          money: '31',
          inTime: '2019-06-02 00:00:00',
          outTime: '2019-06-01 08:00:00',
          duration: '2小时28分钟43秒',
          berthNum: 'A1212231',
          status: '完成'
        },
        {
          parkName: '承德老二中停车场',
          license: '冀H7517732',
          money: '31',
          inTime: '2019-06-02 00:00:00',
          outTime: '2019-06-01 08:00:00',
          duration: '2小时28分钟43秒',
          berthNum: 'A1212231',
          status: '完成'
        },
        {
          parkName: '承德老二中停车场',
          license: '冀H7517732',
          money: '31',
          inTime: '2019-06-02 00:00:00',
          outTime: '2019-06-01 08:00:00',
          duration: '2小时28分钟43秒',
          berthNum: 'A1212231',
          status: '完成'
        },
        {
          parkName: '承德老二中停车场',
          license: '冀H7517732',
          money: '31',
          inTime: '2019-06-02 00:00:00',
          outTime: '2019-06-01 08:00:00',
          duration: '2小时28分钟43秒',
          berthNum: 'A1212231',
          status: '完成'
        },
        {
          parkName: '承德老二中停车场',
          license: '冀H7517732',
          money: '31',
          inTime: '2019-06-02 00:00:00',
          outTime: '2019-06-01 08:00:00',
          duration: '2小时28分钟43秒',
          berthNum: 'A1212231',
          status: '完成'
        },
      ]
    }
  },
  methods: {
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
  .serch-wrap{
    background-color: #FFF;
    padding: 15px;
  }

</style>

