<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container" ref="filter-container">
    </div>


    <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row
              style="width: 100%">
      <el-table-column
        type="index"
        align="center" label="序号" width="65">
      </el-table-column>
      <el-table-column align="center" label="预约下单时间" width="200">
        <template scope="scope">
          <span>{{timeCycle(scope.row.crtTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="姓名" width="200">
        <template scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="联系电话" width="200">
        <template scope="scope">
          <span>{{scope.row.phone}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="取车时间" width="200">
        <template scope="scope">
          <span>{{timeCycle(scope.row.startTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="还车时间" width="200">
        <template scope="scope">
          <span>{{timeCycle(scope.row.endTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="预约取车城市" width="200">
        <template scope="scope">
          <span>{{scope.row.provinceName}}-{{scope.row.cityName}}</span>
        </template>
        <el-table-column align="center" label="取车分公司" width="200">
          <template scope="scope">
            <span>{{scope.row.companyName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="还车分公司" width="200">
          <template scope="scope">
            <span>{{scope.row.arrivalCompanyName}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="车辆型号" width="300">
        <template scope="scope">
          <span>{{scope.row.modelName}}</span>
        </template>
      </el-table-column>
      <!--      <el-table-column align="center" label="详情" width="100" fixed="right">-->
      <!--        <template scope="scope">-->
      <!--          <span style="color: #13CE66;cursor: pointer;" @click="handleDetail(scope.row)">订单详情</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.page" :page-sizes="[10,20,30,40,50]" :page-size="listQuery.limit"
                     layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>

<!--    <book-info-viewer ref="bookInfoViewer"></book-info-viewer>-->
<!--    <acc-item-selector :selectedAccItem="selectedAccItem" :isReadOnly="true" ref="accItemSelector"></acc-item-selector>-->
  </div>
</template>

<script>
  import {
    page,
  } from 'src/api/vehicle/smallProgram/bookingManagement';
  import {mapGetters} from 'vuex';
  import {
    getToken
  } from '../../../utils/auth';

   import { timestamp2Date} from 'src/utils/dateUtils'

  import bookInfoViewer from '../bookInfoViewer';
  import accItemSelector from '../accompanyingItem/accItemSelector.vue';

  export default {
    name: 'bookRecord',
    components: {
      bookInfoViewer,
      accItemSelector
    },
    data() {
      return {
        listQuery: {
          page: 1,
          limit: 10
        },
        total: 0,
        listLoading: true,
        list: [],
        tableKey:0,
        selectedAccItem: undefined
      }

    },
    created() {
      this.getList();
    },
    computed: {
      ...mapGetters([
        'elements',

      ]),
      getHeaderWithToken() {
        return {Authorization: getToken()};
      }
    },
    methods: {
      getList() {
        page(this.listQuery)
          .then(response => {
            this.list = response.data.data;
            this.total = response.data.totalCount;
            this.listLoading = false;
          })
      },
      timeCycle(element) {
        return timestamp2Date(element);
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
    }
  }
</script>

<style scoped>
  .order-details .el-form-item {
    margin-bottom: 0px !important;
  }

  .order-details hr {
    height: 1px;
    background-color: #ccc;
    border: none;
  }

  .image {
    width: 100%;
    height: 110px;
    display: block;
  }

  .el-card__body, .el-card {
    padding: 0px !important;
    width: 150px;
    text-align: center;
  }
</style>
