var _w = $('#card').width();
    var _h = $('#card').height();
    var vanvasOption = {allowTaint: true, imageTimeout: 2000000, width: _w, height: _h};
    html2canvas(document.querySelector("#card"), vanvasOption).then(canvas => {
        document.querySelector("#card").innerHTML = '';
        document.querySelector("#card").appendChild(canvas);
    });
    $(function () {
        var pagedom = $('.scrolldiv');
        var windowHeight = $(window).height();
        $(window).scroll(function () {
            var windowTop = $(document).scrollTop();
            if (windowTop > 0) {
                $('.ul_div').show();
            } else {
                $('.ul_div').hide();
                $('.ul_div a').removeClass('on');
            }
            for (var i = 0; i < pagedom.length; i++) {
                var scrollTop = $(pagedom[i]).offset().top;
                var scrollHeight = $(pagedom[i]).height();
                if (scrollTop - windowTop <= 200 && (scrollTop + scrollHeight) - windowTop > 0) {
                    $('.ul_div a').removeClass('on').eq(i).addClass('on');
                }
            }
            ;
        });
        $('body').on('click', '.ul_div a', function () {
            $('.ul_div a').removeClass('on');
            $(this).addClass('on')
        })
        var app = {
            init() {
                app.Event();
            },
            html(year, id) {
                $.ajax({
                    type: "get",
                    dataType: "json",
                    url: "/api/year_data",
                    data: {
                        company_regno: id,
                        year: year
                    },
                    success: function (res) {
                        var data = JSON.parse(res);

                        var html = `
                        <div class="zx-annual-basic">
                            <h3 class="zx-annual-title">浼佷笟鍩烘湰淇℃伅</h3>
                            <div class="zx-annual-basic-content zx-annual-table">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td>浼佷笟鍚嶇О</td>
                                            <td>${data.data.info.basic_entname}</td>
                                            <td>缁熶竴绀句細淇＄敤浠ｇ爜</td>
                                            <td>${data.data.info.basic_regno || '-'}</td>
                                        </tr>
                                        <tr>
                                            <td>鑱旂郴鐢佃瘽</td>
                                            <td>
                                                ${data.data.info.basic_phone || '-'}
                                            </td>
                                            <td>閭斂缂栫爜</td>
                                            <td>${data.data.info.basic_postalcode}</td>
                                        </tr>
                                        <tr>
                                            <td>鐢靛瓙閭</td>
                                            <td>
                                                ${data.data.info.basic_email || '-'}
                                            </td>
                                            <td>浼佷笟缁忚惀鐘舵€?/td>
                                            <td>${data.data.info.basic_openstatus}</td>
                                        </tr>
                                        <tr>
                                            <td>浠庝笟浜烘暟</td>
                                            <td>${data.data.info.basic_empnum || '-'}</td>
                                            <td>鏄惁鍙戠敓鑲′笢鑲℃潈杞</td>
                                            <td>${data.data.info.basic_share || '-'}</td>
                                        </tr>
                                        <tr>
                                            <td>鏄惁鏈夌綉绔欐垨缃戝簵</td>
                                            <td>${data.data.info.basic_website || '-'}</td>
                                            <td>浼佷笟鏄惁鏈夋姇璧勪俊鎭垨璐拱鍏朵粬鍏徃鑲℃潈</td>
                                            <td>${data.data.info.basic_invest || '-'}</td>
                                        </tr>
                                        <tr>
                                            <td>娉ㄥ唽鍦板潃</td>
                                            <td colspan="3">${data.data.info.basic_address}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="zx-annual-contribution" id="annual-contribution">
                            <h3 class="zx-annual-title">鑲′笢鍙婂嚭璧勪俊鎭?/h3>
                            <div class="zx-annual-contribution-content zx-annual-table">
                                <table>
                                    <thead>
                                        <tr>
                                            <td>搴忓彿</td>
                                            <td>鑲′笢</td>
                                            <td>璁ょ即鍑鸿祫棰滭/td>
                                            <td>璁ょ即鍑鸿祫鏃堕棿</td>
                                            <td>璁ょ即鍑鸿祫鏂瑰紡</td>
                                            <td>瀹炵即鍑鸿祫棰滭/td>
                                            <td>瀹炵即鍑鸿祫鏃堕棿</td>
                                            <td>瀹炵即鍑鸿祫鏂瑰紡</td>
                                        </tr>
                                    </thead>
                                    <tbody>`
                        $.each(data.data.contribution, function (i, k) {
                            html +=
                                `<tr>
                                                <td>${i + 1}</td>
                                                <td>${k.name}</td>
                                                <td>${k.subscribed_capital}</td>
                                                <td>${k.subscribed_date}</td>
                                                <td>${k.subscribed_type}</td>
                                                <td>${k.subscribed_capital}</td>
                                                <td>${k.real_data}</td>
                                                <td>${k.subscribed_type}</td>
                                            </tr>`
                        })

                        html += `</tbody>
                                </table>
                            </div>
                     </div>`
                        if (data.data.insuranceinfo.length != 0) {
                            html += `<div class="zx-annual-guarantee">
                            <h3 class="zx-annual-title">绀句繚淇℃伅</h3>
                            <div class="zx-annual-table zx-annual-social-insurance">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td class="dark">鍩庨晣鑱屽伐鍩烘湰鍏昏€佷繚闄?/td>
                                            <td>${data.data.insuranceinfo[0].endowment_insurance_num}浜裹/td>
                                            <td class="dark">澶变笟淇濋櫓</td>
                                            <td>${data.data.insuranceinfo[0].unemployment_insurance_num}浜裹/td>
                                        </tr>
                                        <tr>
                                            <td class="dark">鑱屽伐鍩烘湰鍖荤枟淇濋櫓</td>
                                            <td>${data.data.insuranceinfo[0].medical_insurance_num}浜裹/td>
                                            <td class="dark">宸ヤ激淇濋櫓</td>
                                            <td>${data.data.insuranceinfo[0].employment_injury_insurance_num}浜裹/td>
                                        </tr>
                                        <tr>
                                            <td class="dark">鐢熻偛闄?/td>
                                            <td colspan="3">${data.data.insuranceinfo[0].maternity_insurance_num}浜裹/td>
                                        </tr>
                                        <tr>
                                            <td rowspan="4" class="dark" "="">鍗曚綅缂磋垂鍩烘暟</td>
                                            <td colspan=" 2">鍗曚綅鍙傚姞鍩庨晣鑱屽伐鍩烘湰鍏昏€佷繚闄╃即璐瑰熀鏁?/td>
                                            <td colspan="2">
                                                ${data.data.insuranceinfo[0].endowment_insurance_base}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">鍗曚綅鍙傚姞澶变笟淇濋櫓缂磋垂鍩烘暟</td>
                                            <td colspan="2">
                                                ${data.data.insuranceinfo[0].unemployment_insurance_base}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">鍗曚綅鍙傚姞鑱屽伐鍩烘湰鍖荤枟淇濋櫓缂磋垂鍩烘暟</td>
                                            <td colspan="2">
                                                ${data.data.insuranceinfo[0].medical_insurance_base}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">鍗曚綅鍙傚姞鐢熻偛淇濋櫓缂磋垂鍩烘暟</td>
                                            <td colspan="2">
                                                ${data.data.insuranceinfo[0].maternity_insurance_base}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td rowspan="5" class="dark" "="">鏈湡瀹為檯缂磋垂閲戦</td>
                                            <td colspan=" 2">鍙傚姞鍩庨晣鑱屽伐鍩烘湰鍏昏€佷繚闄╂湰鏈熷疄闄呯即璐瑰熀鏁?/td>
                                            <td colspan="2">
                                                ${data.data.insuranceinfo[0].endowment_Insurance_current_amount}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">鍙傚姞澶变笟淇濋櫓鏈湡瀹為檯缂磋垂鍩烘暟</td>
                                            <td colspan="2">
                                                ${data.data.insuranceinfo[0].unemployment_insurance_current_amount}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">鍙傚姞鑱屽伐鍩烘湰鍖荤枟淇濋櫓鏈湡瀹為檯缂磋垂鍩烘暟</td>
                                            <td colspan="2">
                                                ${data.data.insuranceinfo[0].medical_insurance_current_amount}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">鍙傚姞宸ヤ激淇濋櫓鏈湡瀹為檯缂磋垂鍩烘暟</td>
                                            <td colspan="2">
                                                ${data.data.insuranceinfo[0].employment_injury_insurance_current_amount}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">鍙傚姞鐢熻偛淇濋櫓鏈湡瀹為檯缂磋垂鍩烘暟</td>
                                            <td colspan="2">
                                                ${data.data.insuranceinfo[0].maternity_insurance_current_amount}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td rowspan="5" class="dark" "="">鍗曚綅绱娆犵即閲戦</td>
                                            <td colspan=" 2">鍗曚綅鍙傚姞鍩庨晣鑱屽伐鍩烘湰鍏昏€佷繚闄╃疮璁℃瑺缂撮噾棰滭/td>
                                            <td colspan="2">
                                                ${data.data.insuranceinfo[0].endowment_insurance_amount}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">鍗曚綅鍙傚姞澶变笟淇濋櫓绱娆犵即閲戦</td>
                                            <td colspan="2">
                                                ${data.data.insuranceinfo[0].unemployment_insurance_amount}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">鍗曚綅鍙傚姞鑱屽伐鍩烘湰鍖荤枟淇濋櫓绱娆犵即閲戦</td>
                                            <td colspan="2">
                                                ${data.data.insuranceinfo[0].medical_insurance_amount}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">鍗曚綅鍙傚姞宸ヤ激淇濋櫓绱娆犵即閲戦</td>
                                            <td colspan="2">
                                                ${data.data.insuranceinfo[0].employment_injury_insurance_amount}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">鍗曚綅鍙傚姞鐢熻偛淇濋櫓绱娆犵即閲戦</td>
                                            <td colspan="2">
                                                ${data.data.insuranceinfo[0].maternity_insurance_amount}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>`
                        }

                        html += `<div class="claos"></div>
                        <style>
                            table {
                                border-collapse: separate;
                                border-spacing: 0;
                                vertical-align: middle;
                            }

                            .zx-annual-basic .zx-annual-table table {
                                border-collapse: collapse;
                            }

                            .zx-annual-basic .zx-annual-basic-content td:nth-child(odd) {
                                width: 172px;
                                background: #f5f9ff;
                            }

                            .zx-annual-basic .zx-annual-table table tbody tr td {
                                border: 1px solid #e5ebf5;
                                box-sizing: border-box;
                                padding: 12px 14px;
                                line-height: 22px;
                            }
                            .zx-annual-content .zx-annual-table table {
                                border-collapse: collapse;
                            }

                            .zx-annual-contribution-content table thead tr td:nth-child(1) {
                                width: 50px;
                                padding: 12px 0;
                            }

                            .zx-annual-contribution-content table thead tr td:nth-child(4) {
                                width: 100px;
                            }

                            .zx-annual-contribution-content table thead tr td {
                                background: #f5f9ff;
                                border: 1px solid #e5ebf5;
                                box-sizing: border-box;
                                padding: 12px 14px;
                                line-height: 22px;
                                text-align: center;
                            }
                            .zx-annual-contribution-content  table tbody tr td {
                                border: 1px solid #e5ebf5;
                                box-sizing: border-box;
                                padding: 12px 14px;
                                line-height: 22px;
                            }
                            .zx-annual-contribution-content table tbody td {
                                text-align: center;
                            }

                            .zx-annual-table table {
                                border-collapse: collapse;
                            }

                            .zx-annual-social-insurance td.dark {
                                background: #f5f9ff;
                            }

                            .zx-annual-social-insurance td:nth-child(odd) {
                                width: 172px;
                            }

                            .zx-annual-table table tbody tr td {
                                border: 1px solid #e5ebf5;
                                box-sizing: border-box;
                                padding: 12px 14px;
                                line-height: 22px;
                            }
                        </style>
                    `
                        $('.year_box_con').html(html);
                    }
                });
            },
            Event() {
                $('body').on('click', '.downtbn', function () {
                    var year = $(this).attr('date-year');
                    var dateid = $(this).attr('date-id');
                    if (dateid.length != 0) {
                        app.html(year, dateid);
                        $('.year_wrap').show();
                    }

                });
                $('body').on('click', '.claos', function () {
                    $('.year_wrap').hide();
                })
            }
        }
        app.init();
    })