<%--
  Created by IntelliJ IDEA.
  User: xuan
  Date: 2021/9/3
  Time: 13:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ include file="../common/common.jsp" %>
<html>
<head>
    <title>省份</title>
    <script type="text/javascript" src="${basepage}/js/provinceCitys.js"></script>
</head>
<style>
    .checkBoxContainer {
        display: grid;
        grid-template-columns: ${col};
        grid-row-gap: 20px;
        grid-column-gap: 20px;
    }
    .span{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }
</style>
<body>
<input type="hidden" name="selectValue" value="${selectValue}">
<c:if test="${type == 'city'}">
    <form>
        <label class="form-label">省份:</label>
        <select class="form_control form_white" id="proList" onchange="updateCity()">
            <option value="-1">请选择---</option>
        </select>
        <div class="checkBoxContainer" style="margin-top: 20px"></div>
    </form>
</c:if>
<c:if test="${type == 'province'}">
    <div class="checkBoxContainer">
        <c:forEach items="${provinces}" var="pro">
            <label>
                <input type="checkbox" name="province" value="${pro}" />
                <span style="margin-left: 5px">${pro}</span>
            </label>
        </c:forEach>
    </div>
</c:if>
</body>
<script>
    $(function () {
        <c:if test="${type == 'city'}">
            initProvince()
        </c:if>
        <c:if test="${type == 'province'}">
            recoveryProvince()
        </c:if>
    })

    function recoveryProvince() {
        let selectValue = $("input[name='selectValue']").val();
        if (selectValue) {
            let selectArr = selectValue.trim().split(",");
            for (let item of selectArr) {
                $("input[value='" + item + "']").prop("checked", true);
            }
        }
    }

    function initProvince() {
        for (let index in provinceArr) {
            let $temp = "<option value='" + index + "'>" + provinceArr[index] + "</option>";
            $("#proList").append($temp)
        }
    }

    function updateCity() {
        let val = $("#proList").val();
        if (!val || parseInt(val) < 0) {
            return false;
        }
        $(".checkBoxContainer").empty();
        let selectValue = $("input[name='selectValue']").val();
        let selectArr = selectValue ? selectValue.trim().split(",") : [];
        for (let item of downtownArr[val]) {
            let temp;
            if (selectArr.includes(item)) {
                temp = `<label class="span" title='` + item + `'><input type="checkbox" name="province" style="margin-right: 5px;" value="` + item + `" checked />` + item + `</label>`;
            } else {
                temp = `<label class="span" title='` + item + `'><input type="checkbox" name="province" style="margin-right: 5px;" value="` + item + `"/>` + item + `</label>`;
            }
            $(".checkBoxContainer").append(temp);
        }
    }
</script>
</html>
