<template>
  <div id="app">
    <div class="container">
      <div class="left-section">
        <h2>楊梅物流中心</h2>
        <h4>訪客車輛資訊</h4>
        <h4>-區域詳細資訊</h4>
        <h4>訪客預約登記</h4>
        <h4>訪客預約紀錄</h4>
        <h4>-已預約未進場車輛</h4>
        <h4>-未來時段預約紀錄</h4>
        <h4>-訪客預約類別</h4>
        <h4><a href="http://localhost:8080/">车辆進出紀錄</a></h4>
        <h4>閘道控制選單</h4>
        <h4>承租公司設定</h4>
        <h4>貨運公司設定</h4>
        <h4>車輛設定</h4>
        <h4>使用者設定</h4>
        <h4>使用者群組</h4>
        <h4>使用者權限</h4>
        <h4>使用紀錄</h4>
      </div>
      <div class="center-section">
        <h2>車輛進出紀錄</h2>
        <div class="box">
          <table>
            <thead>
              <tr>
                <th>
                  車牌號碼
                  <select v-model="車牌號碼">
                    <option value="車牌號碼">Ac-2345</option>
                  </select>
                </th>
                <th>
                  預約樓層
                  <select v-model="預約樓層">
                    <option value="預約樓層">3F</option>
                  </select>
                </th>
                <th>
                  拜訪公司
                  <select v-model="拜訪公司">
                    <option value="拜訪公司">B公司</option>
                  </select>
                </th>
              </tr>
              <tr>
                <th>
                  車輛類別
                  <select v-model="車輛類別">
                    <option value="車輛類別">契約車</option>
                  </select>
                </th>
                <th>
                  車輛類型
                  <select v-model="車輛類型">
                    <option value="車輛類型">貨車</option>
                  </select>
                </th>
                <th>
                  駕駛人公司
                  <select v-model="駕駛人公司">
                    <option value="駕駛人公司">C物流公司</option>
                  </select>
                </th>
              </tr>
            </thead>
          </table>

          <div class="block-left">
            <input type="checkbox" class="checkbox" />
            <h4>進場起始時間</h4>
            <datetime v-model="date" input-id="startDate">
              <input type="datetime-local" v-model="value1" />
            </datetime>

            <input type="checkbox" class="checkbox" />
            <h4>離場起始時間</h4>
            <datetime v-model="date" input-id="startDate">
              <input type="datetime-local" v-model="value2" />
            </datetime>
          </div>

          <div class="block-right">
            <h4>進場結束時間</h4>
            <datetime v-model="date" input-id="startDate">
              <input type="datetime-local" v-model="value3" />
            </datetime>

            <h4>離場結束時間</h4>
            <datetime v-model="date" input-id="startDate">
              <input type="datetime-local" v-model="value4" />
            </datetime>
          </div>
          <div class="gwee">
            <button @click="search">搜尋</button>
            <button @click="cancel">取消</button>
          </div>

          <div class="east">
            <button @click="printPage" class="image-button">
              <img src="./assets/printer.jpg" alt="./assets/printer.jpg" />
            </button>
            <button @click="downloadPage" class="image-button">
              <img src="./assets/icon.jpg" alt="./assets/icon.jpg" />
            </button>
          </div>

          <table class="record">
            <hr class="my-6" />
            <div class="row">
              <thead>
                <tr>
                  <th>
                    <input type="checkbox" class="checkbox" />
                  </th>
                  <th>序</th>
                  <th>車牌號碼</th>
                  <th>車輛類別</th>
                  <th>車輛類型</th>
                  <th>駕駛人</th>
                  <th>駕駛人公司</th>
                  <th>預約樓層</th>
                  <th>拜訪公司</th>
                  <th>進場時間</th>
                  <th>離場時間</th>
                  <th>預約時間</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="record in records" :key="record.序">
                  <td><input type="checkbox" /></td>
                  <td>{{ record.序 }}</td>
                  <td>{{ record.車牌號碼 }}</td>
                  <td>{{ record.車輛類別 }}</td>
                  <td>{{ record.車輛類型 }}</td>
                  <td>{{ record.駕駛人 }}</td>
                  <td>{{ record.駕駛人公司 }}</td>
                  <td>{{ record.預約樓層 }}</td>
                  <td>{{ record.拜訪公司 }}</td>
                  <td>{{ record.進場時間 }}</td>
                  <td>{{ record.離場時間 }}</td>
                  <td>{{ record.預約時間 }}</td>
                </tr>
              </tbody>
            </div>
          </table>
        </div>
      </div>

      <div class="right-section">
        <h3>楊梅物流中心</h3>
        <h4>車輛進出紀錄</h4>
        <img src="./assets/Group2.png" width="50" height="50" />
        <div class="adef">
          <h5>駕駛公司:A物流公司</h5>
          <h5>駕駛人:王先生</h5>
          <h5>車牌號碼:Ac-2345</h5>
          <h5>車種:貨車</h5>
          <h5>進場時間:2023/06/23 12:00</h5>
        </div>
        <div class="adef">
          <img src="./assets/Group2.png" width="50" height="50" />
          <h5>駕駛公司:A物流公司</h5>
          <h5>駕駛人:王先生</h5>
          <h5>車牌號碼:Ac-2345</h5>
          <h5>車種:貨車</h5>
          <h5>進場時間:2023/06/23 12:00</h5>
        </div>
      </div>
    </div>

    <router-link to="/"></router-link>
    <router-link to="/page2"></router-link>
    <a href="/">page1</a> |
    <a href="/page2">page2</a>
    <router-view></router-view>
  </div>
</template>