<!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;
    }

    .hidden-input {
      display: none;
    }

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

      th, td {
        padding: 5px;
      }

      button {
        padding: 3px 6px;
        font-size: 12px;
      }
    }
  </style>
  <script>
    function handleStatusChange(selectElement) {
      var status = selectElement.options[selectElement.selectedIndex].value;
      var affirmedAmountInput = document.querySelector('.affirmed-amount-input');
      var unsignedReasonInput = document.querySelector('.unsigned-reason-input');



      if (status === '4') {
        affirmedAmountInput.classList.remove('hidden-input');
        unsignedReasonInput.classList.add('hidden-input');
      } else if (status === '3') {
        unsignedReasonInput.classList.remove('hidden-input');
        affirmedAmountInput.classList.add('hidden-input');
      } else {
        affirmedAmountInput.classList.add('hidden-input');
        unsignedReasonInput.classList.add('hidden-input');
      }
    }
  </script>
</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 : ${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" onchange="handleStatusChange(this)">
          <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>
        <button type="submit">确定</button>
      </form>
    </td>
    <td>
      <span th:switch="${acceptanceCustomer.status}">
        <span th:case="'4'">
          <input type="text" class="affirmed-amount-input hidden-input" name="affirmedAmount" th:value="${acceptanceCustomer.affirmedAmount}" placeholder="请输入已签单金额" />
        </span>
        <span th:case="'3'">
          <input type="text" class="unsigned-reason-input hidden-input" name="unsignedReason" th:value="${acceptanceCustomer.unsignedReason}" placeholder="请输入未签单原因" />
        </span>
      </span>
    </td>
  </tr>
  </tbody>
</table>
<div th:unless="${acceptanceCustomers != null}" class="no-data">
  <p>客户信息暂无</p>
</div>
</body>
</html>