<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Customer Information</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      padding: 10px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }

    th {
      background-color: #f2f2f2;
    }

    form {
      display: inline-block;
    }

    button {
      padding: 5px 10px;
      background-color: #4CAF50;
      color: #fff;
      border: none;
      cursor: pointer;
    }

    button:hover {
      background-color: #45a049;
    }

    .no-data {
      margin-top: 20px;
      font-style: italic;
    }

    @media (max-width: 600px) {
      table {
        font-size: 12px;
      }

      th, td {
        padding: 5px;
      }

      button {
        padding: 3px 6px;
        font-size: 12px;
      }
    }
  </style>
</head>
<body>
<table th:if="${acceptanceCustomers != null}">
  <thead>
  <tr>
    <th>公司名称</th>
    <th>联系人1</th>
    <th>联系方式1</th>
    <th>地址</th>
    <th>服务内容</th>
    <th>状态</th>
    <th></th>
  </tr>
  </thead>
  <tbody>
  <tr th:each="acceptanceCustomer, status : ${acceptanceCustomers}">
    <td th:text="${acceptanceCustomer.companyName}"></td>
    <td th:text="${acceptanceCustomer.linkMan1}"></td>
    <td th:text="${acceptanceCustomer.contact1}"></td>
    <td th:text="${acceptanceCustomer.address}"></td>
    <td th:text="${acceptanceCustomer.acceptanceContent}"></td>
    <td>
        <span th:switch="${acceptanceCustomer.status}">
          <span th:case="'0'">未受理</span>
          <span th:case="'1'">已受理</span>
          <span th:case="'2'">已见面</span>
          <span th:case="'3'">未签约</span>
          <span th:case="'4'">已签约</span>
        </span>
    </td>
    <td>
      <form th:action="@{/public/updateStatus}" method="post">
        <input type="hidden" name="acceptanceCustomerId" th:value="${acceptanceCustomer.acceptanceCustomerId}" />
        <select name="status">
          <option value="2" th:text="'已见面'" th:selected="${acceptanceCustomer.status == '2'}" th:disabled="${acceptanceCustomer.status >= '2'}" th:if="${acceptanceCustomer != null and acceptanceCustomer.status != null and acceptanceCustomer.status != ''}">
            已见面
          </option>
          <option value="3" th:text="'未签约'" th:selected="${acceptanceCustomer.status == '3'}" th:disabled="${acceptanceCustomer.status >= '3'}" th:if="${acceptanceCustomer != null and acceptanceCustomer.status != null and acceptanceCustomer.status != ''}">
            未签约
          </option>
          <option value="4" th:text="'已签约'" th:selected="${acceptanceCustomer.status == '4'}" th:disabled="${acceptanceCustomer.status >= '4'}" th:if="${acceptanceCustomer != null and acceptanceCustomer.status != null and acceptanceCustomer.status != ''}">
            已签约
          </option>

        </select>
        <label for="affirmedAmount">已签单金额:</label>
        <input type="number" id="affirmedAmount" name="affirmedAmount" placeholder="请输入已签单金额" min="0" step="0.01">
        <label for="unsignedReason">未签单原因:</label>
        <input type="text" id="unsignedReason" name="unsignedReason" placeholder="请输入未签单原因">
        <button type="submit">确定</button>
      </form>
    </td>
  </tr>
  </tbody>
</table>
<div th:unless="${acceptanceCustomers != null}" class="no-data">
  <p>客户信息暂无</p>
</div>
</body>
</html>
希望，每个客户选择已签单时，才会显示 输入签单金额，显示未签单，才会显示未签单原因