<%--
  Created by IntelliJ IDEA.
  User: wuxuan
  Date: 2024/5/30
  Time: 14:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page pageEncoding="UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String path = request.getContextPath();
%>
<c:set var="basePage">
    <%=request.getContextPath() %>
</c:set>
<html>
<head>
    <title>Title</title>
    <style>
        .ui_content {
            width: 100%;
        }

        .table tr th {
            text-align: center;
        }

        .table tr td {
            text-align: center;
        }

        .main_container_servicecode {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .select-container {
            width: calc(100% - 20px);
            height: 50px;
            margin: 5px auto;
        }

        .saved-container {
            width: calc(100% - 20px);
            height: 300px;
            margin: 5px auto;
            overflow: auto;
        }
    </style>
</head>
<body>
<div class="main_container_servicecode">
    <div class="select-container">
        <form class="form-inline">
            <input type="hidden" name="customerNum" value="${customerNum}">
            <div class="form-group">
                <label for="agentServiceCode">代理商服务代码</label>
                <select class="form-control" id="agentServiceCode">
                    <option value="">请选择</option>
                    <c:forEach items="${serviceCodeList}" var="itme">
                        <option value="${itme}">${itme}</option>
                    </c:forEach>
                </select>
            </div>
            <div class="form-group">
                <label for="extendCode">自定义扩展码</label>
                <input type="text" class="form-control" id="extendCode" placeholder="请输入自定义扩展码">
            </div>
            <button id="saveExtendCode" type="button" class="btn btn_green" onclick="saveServiceCode()">保存</button>
        </form>
    </div>
    <div class="saved-container">
        <table class="table">
            <thead>
            <tr>
                <th>序号</th>
                <th>代理商服务代码</th>
                <th>扩展码</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${savedServiceCodeList}" var="itme" varStatus="status">
                <tr>
                    <td>${status.index + 1}</td>
                    <td>${itme.serviceCode}</td>
                    <td>${itme.extCode}</td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>
</body>
<script>
    function saveServiceCode() {
        let serviceCode = $("#agentServiceCode").val()
        let extendNum = $("#extendCode").val()
        if (!serviceCode) {
            Dialog.alertError("代理商服务代码不能为空")
            return false;
        }
        if (!extendNum) {
            Dialog.alertError("扩展码不能为空")
            return false;
        }
        let fullCode = serviceCode + extendNum
        if (fullCode.length >= 20) {
            Dialog.alertError("代理商服务代码+扩展码请小于20位")
            return false;
        }
        let customerNum = $("input[name=customerNum]").val()
        callSaveServiceCode(serviceCode, extendNum, customerNum)
    }
</script>
</html>
