<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
    <title>关联项目公司</title>
    <meta name="decorator" content="base" />
    <link rel="stylesheet" href="${ctxPlugin}/static/css/reset.css" media="all">
    <style>

    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-form layui-card">
        <div class="layui-tab  layui-tab-brief">
            <ul class="layui-tab-title">
                <sfTags:pagePermission authFlag="XTSZ_XMGSSZ_JCXX_T" html='<li class="layui-this sf-tab"><a href="${ctx}/projectCompany/settings">公司项目信息</a></li>'/>
                <button class="layui-btn f-r mt-10 mr-15 pl-10 pr-10 " type="reset"  onclick="reset()" >
                    <i class="layui-icon fs-12">&#xe9aa;</i>
                    重置
                </button>
                <button class="layui-btn f-r mt-10 mr-15 pl-10 pr-10 " lay-submit lay-filter="LAY-user-back-search" data-type="reload">
                    <i class="layui-icon fs-12">&#xe615;</i>
                    查询
                </button>
            </ul>
        </div>
        <div class="layui-card-body" id="searchForm">
            <div class="layui-form-item">
                <div class="layui-col-xs4 mb-10 pr-30">
                    <label class="layui-form-label w-130" >授权区域：</label>
                    <div class="layui-input-block ml-130">
                        <div class="layui-col-xs4">
                            <select class="province" id="province" name="province"   lay-filter="province" lay-search>
                                <option value="">省</option>
                                <c:forEach items="${province}" var="pro">
                                    <option value="${pro.columns.ProvinceName}" title="${pro.columns.ProvinceID}" <c:if test="${company.columns.province == pro.columns.ProvinceName}">selected</c:if>>${pro.columns.ProvinceName}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="layui-col-xs4 ">
                            <select class="city" name="city" id="city" lay-filter="city" lay-search>
                                <option value="">市</option>
                                <c:forEach items="${city}" var="cityList">
                                    <option value="${cityList.columns.CityName}" title="${cityList.columns.CityID}" <c:if test="${company.columns.city==cityList.columns.CityName}">selected</c:if>>${cityList.columns.CityName}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="layui-col-xs4">
                            <select class="area" name="area" id="area"   lay-filter="area" lay-search>
                                <option value="">县/区</option>
                                <c:forEach items="${area}" var="areaList">
                                    <option value="${areaList.columns.DistrictName}" <c:if test="${company.columns.area==areaList.columns.DistrictName}">selected</c:if>>${areaList.columns.DistrictName}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-lg2 layui-col-sm3">
                    <label class="layui-form-label">公司代码：</label>
                    <div class="layui-input-block">
                        <input type="text" name="code" id="code" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-lg2 layui-col-sm3">
                    <label class="layui-form-label">公司名称：</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="name" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class='layui-card'>
        <div class="layui-card-body">
            <table class="layui-hide" lay-skin="row" id="test" lay-filter="test"></table>
            <script type="text/html" id="toolbarDemo">
<%--                <sfTags:pagePermission authFlag="" html='<button class="layui-btn layui-btn-sm" id="selectIn" lay-event="selectIn"><i class="layui-icon layui-icon-add-1"></i>选定</button>'/>--%>
            </script>
        </div>
    </div>

    <div class="layui-form-item text-c" >
        <button class="layui-btn " lay-submit lay-filter="component-form-element" <%--onclick="addRole()"--%>>提交</button>
        <button class="layui-btn" onclick="cancel()">取消</button>
    </div>
</div>


<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script type="text/html" id="table-toolbar">

</script>

<script type="text/javascript">
    var table;
    var $;
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'jquery', 'layer','laydate','form'], function(){
        $ = layui.jquery;
        table = layui.table;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var areaList = []
        var  form = layui.form;
        var json=window.localStorage.getItem("areaList");
        areaList = JSON.parse(json)
        console.log("接受的",areaList)
        table.render({
            elem: '#test',
            toolbar: '#toolbarDemo',
            height: 'full-200',
            defaultToolbar: false,
            limits: [10, 20, 50],
            limit: 10,
            page: true, //开启分页
            method: 'post',
            url: '${ctx}/sysSettings/projectInfoSetting/ProjectComInfoPage',
            contentType: 'application/x-www-form-urlencoded', // 设置请求数据类型为表单提交格式
            where: {
                // 将表单数据作为请求参数
                areaList: json,
            },
            cols: [[
                { type: 'checkbox',field: "selectIn",toolbar: '#selectIn' }, // 添加复选框列
                { type: 'numbers', title: '序号' },
                { field: 'company_code', title: '公司代码', align: 'center' },
                { field: 'name', title: '公司名称', align: 'center' },
                { field: 'provinces', title: '授权区域-省', align: 'center' },
                { field: 'citys', title: '授权区域-市', align: 'center' },
                { field: 'areas', title: '授权区域-区/县', align: 'center' },
            ]],
            done: function (res, curr, count) {

            }
        });


        //头工具栏事件
        table.on('toolbar(selectIn)', function (obj) {
          //  console.log(obj);
        })

        //监听行工具事件
        table.on('tool(selectIn)', function(obj){
            var data = obj.data;
            var id = data.id;
            console.log(data)

        });


        table.on('checkbox(test)', function(obj){
            if(obj.type === 'all'){ // 如果是全选，则获取所有数据
                var selectedData = obj.data;
            } else { // 否则获取选中的数据
                var selectedData = obj.data;
            }
            console.log(selectedData); // 打印选中的数据
        });

        //监听搜索
        form.on('submit(LAY-user-back-search)', function(data){
            var field = data.field;
            //执行重载
            table.reload('test', {
                where: field,
                page:{
                    curr:1
                }
            });
        });


        form.on('submit(component-form-element)',function(data){
            var selectedData = table.checkStatus('test').data;
            console.log(selectedData)
            var field = data.field; //获取提交的字段
            if(selectedData.size ===0 ){
                layer.msg("请选择项目公司",{icon:5,anim:6});
                return false;
            }else{
                console.log(selectedData)
                parent.GetValue(selectedData);
                var index = parent.layer.getFrameIndex(window.name)
                parent.layer.close(index)
            }
        });


        form.on('select(province)', function (data) {
            var province = $(data.elem).find("option:selected").attr("title");
            $("#city").empty();
            $("#detailAddress").val("");
            if (isBlank(province)) {
                $("#city").append("<option value=''>请选择市</option>");
                return "";
            }
            $.ajax({
                type: "POST",
                url: "${ctx}/main/redirect/getCitysByProId",
                data: {
                    province: province
                },
                success: function (result) {
                    if (result == "205") {
                        layer.msg("暂无数据!")
                        return
                    }
                    var html = "<option value=''>请选择市</option>";
                    for (var i = 0; i < result.length; i++) {
                        var city = result[i];
                        html = html + '<option value="' + city.columns.CityName + '" title="' + city.columns.CityID + '">' + city.columns.CityName + '</option>';
                    }
                    $("#city").append(html);
                    form.render('select');
                },
                complete: function () {
                    var city = $("#city").find("option:selected").attr("title");
                    $("#area").empty()
                    if (isBlank(city)) {
                        $("#area").append("<option value=''>请选择县/区</option>");
                        return "";
                    }
                    $.ajax({
                        type: "POST",
                        url: "${ctx}/main/redirect/getAreaByCityId",
                        data: {
                            city: city
                        },
                        success: function (result) {
                            if (result == "205") {
                                layer.msg("暂无数据!")
                                return
                            }
                            var html = "<option value=''>请选择县/区</option>";
                            for (var i = 0; i < result.length; i++) {
                                var area = result[i];
                                html = html + '<option value="' + area.columns.DistrictName + '" >' + area.columns.DistrictName + '</option>';
                            }
                            $("#area").append(html);
                            form.render('select');
                        }
                    });
                }

            });

        });

        form.on('select(city)', function (data) {
            var city = $(data.elem).find("option:selected").attr("title");
            $("#area").empty();
            $("#detailAddress").val("");
            if (isBlank(city)) {
                $("#area").append("<option value=''>请选择县/区</option>");
                return "";
            }
            $.ajax({
                type: "POST",
                url: "${ctx}/main/redirect/getAreaByCityId",
                data: {
                    city: city
                },
                success: function (result) {
                    if (result == "205") {
                        layer.msg("暂无数据!")
                        return
                    }
                    var html = "<option value=''>请选择县/区</option>";
                    for (var i = 0; i < result.length; i++) {
                        var area = result[i];
                        html = html + '<option value="' + area.columns.DistrictName + '" >' + area.columns.DistrictName + '</option>';
                    }
                    $("#area").append(html);
                    form.render('select');
                }
            });
        });
    });

    function changeCompanyStatus(id,status){
        $.post('${ctx}/projectCompany/changeCompanyStatus', {id: id,status:status}, function(result){
            if("200" == result.code){
                layer.msg('操作成功', {time: 2000}, function () {
                    reload();
                });
            }else{
                layer.msg(result.errMsg);
            }
        });
    }

    function reload(){
        table.reload('test', {
            page:{
                curr:1
            }
        });
    }

    function reset(){
        layui.form.render();
        $("#searchForm").find("select").val("");
        $("#searchForm").find("input").val("");
        parent.reload();
    }


    function  closeDiv() {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index);
    }

    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }
    function cancel(){
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }

</script>
</body>
</html>

