<view class="swiper-table-wrap gov-swiper-table">
    <!-- 左侧整体部分 -->
    <view class="table-left-wrap gov-table-left">
        <!-- 左侧最后一行是否特别 -->
        <block s-for="title,index in listDetail.title">
            <view s-if="lastRowDif && (index === (listDetail.title.length - 1))">
                <view s-if="{{title.length > 12}}" class="table-left-item table-item-height gov-table-last" style="background:{{lastTableBg}};color:{{lastTableColor}};">
                    <view class="table-left-long">
                        {{title}}
                    </view>
                    <view class="detail-icon" data-info="{{title}}" bind:tap="showModal">
                        <gov-icon
                            class="gov-icon"
                            name="message-o"
                            color="{{iconColor}}"
                            size="16px">
                        </gov-icon>
                    </view>
                </view>
                <view s-else class="table-left-item {{title.length >= 6 ? 'table-item-six' : ''}} gov-table-last" style="background:{{lastTableBg}};color:{{lastTableColor}};">
                    <view class="table-left-long">
                        {{title}}
                    </view>
                </view>
            </view>
            <view s-else>
                <view s-if="{{title.length > 12}}" class="table-left-item table-item-height">
                    <view class="table-left-long">
                        {{title}}
                    </view>
                    <view class="detail-icon" data-info="{{title}}" bind:tap="showModal">
                        <gov-icon
                            class="gov-icon"
                            name="message-o"
                            color="{{iconColor}}"
                            size="16px">
                        </gov-icon>
                    </view>
                </view>
                <view s-else class="table-left-item {{title.length >= 6 ? 'table-item-six' : ''}}">
                    <view class="table-left-long">
                        {{title}}
                    </view>
                </view>
            </view>
        </block>
    </view>
    <!-- 右侧固定部分 -->
    <view class="table-right-wrap gov-table-right" style="width:{{scrollAreaWidth}}">
        <view class="ios-resilience" s-if="isIos">
            <block s-for="item,index in listDetail.content">
                <view s-if="{{index === 0}}" class="table-right-item-1 {{heightFlag[index] === 1 ? 'table-item-height' : ''}}">
                </view>
                <view s-elif="{{index === listDetail.content.length - 1}}" class="table-right-item-1 {{heightFlag[index] === 1 ? 'table-item-height' : ''}} gov-table-last" style="background:{{lastTableBg}};color:{{lastTableColor}};">
                </view>
                <view s-else class="table-right-item-1 {{heightFlag[index] === 1 ? 'table-item-height' : ''}} gov-table-right-middle">
                </view>
            </block>
        </view>
        <scroll-view
            scroll-x
            class="table-scroll-wrap"
            bind:scrolltolower="lower"
            bind:scrolltoupper="upper"
        >
            <block s-for="item,index in listDetail.content">
                <!-- 右侧滚动区域第一行 -->
                <view s-if="{{index === 0}}" class="table-right-item {{heightFlag[index] === 1 ? 'table-item-height' : ''}}">
                    <view class="each-row" s-for="eachItem,eachIndex in item">
                        <view class="
                            each-row-item
                            {{eachItem.length >= 6 ? 'table-item-six' : ''}}
                            {{eachItem.length === 4 ? 'table-item-four' : ''}}
                            {{widthFlag[eachIndex] === 1 ? 'table-item-six' : ''}}
                        ">
                            <view class="table-right-long">
                                {{eachItem}}
                            </view>
                            <view s-if="{{eachItem.length > 12}}" class="detail-icon" data-info="{{title}}" bind:tap="showModal">
                                <gov-icon
                                    class="gov-icon"
                                    name="message-o"
                                    color="{{iconColor}}"
                                    size="16px">
                                </gov-icon>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 右侧滚动区域最后一行 -->
                <view s-elif="{{index === listDetail.content.length - 1}}" class="table-right-item {{heightFlag[index] === 1 ? 'table-item-height' : ''}} gov-table-last">
                    <view class="each-row" s-for="eachItem,eachIndex in item">
                        <view
                            s-if="{{lastRowDif}}"
                            class="
                                each-row-item
                                table-right-color
                                {{eachItem.length === 4 ? 'table-item-four' : ''}}
                                {{widthFlag[eachIndex] === 1 ? 'table-item-six' : ''}}
                            "
                            style="background:{{lastTableBg}};color:{{lastTableColor}};"
                        >
                            <view class="table-right-long">
                                {{eachItem}}
                            </view>
                            <view s-if="{{eachItem.length > 12}}" class="detail-icon" data-info="{{eachItem}}" bind:tap="showModal">
                                <gov-icon
                                    class="gov-icon"
                                    name="message-o"
                                    color="{{iconColor}}"
                                    size="16px">
                                </gov-icon>
                            </view>
                        </view>
                        <view
                            s-else
                            class="
                                each-row-item
                                table-right-color
                                {{eachItem.length === 4 ? 'table-item-four' : ''}}
                                {{widthFlag[eachIndex] === 1 ? 'table-item-six' : ''}}
                            "
                        >
                            <view class="table-right-long">
                                {{eachItem}}
                            </view>
                            <view s-if="{{eachItem.length > 12}}" class="detail-icon" data-info="{{eachItem}}" bind:tap="showModal">
                                <gov-icon
                                    class="gov-icon"
                                    name="message-o"
                                    color="{{iconColor}}"
                                    size="16px">
                                </gov-icon>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 右侧滚动区域其他部分 -->
                <view s-else class="table-right-item {{heightFlag[index] === 1 ? 'table-item-height' : ''}} gov-table-right-middle">
                    <view class="each-row" s-for="eachItem,eachIndex in item">
                        <view class="
                            each-row-item
                            table-right-color
                            {{eachItem.length === 4 ? 'table-item-four' : ''}}
                            {{widthFlag[eachIndex] === 1 ? 'table-item-six' : ''}}
                        ">
                            <view class="table-right-long">
                                {{eachItem}}
                            </view>
                            <view s-if="{{eachItem.length > 12}}" class="detail-icon" data-info="{{eachItem}}" bind:tap="showModal">
                                <gov-icon
                                    class="gov-icon"
                                    name="message-o"
                                    color="{{iconColor}}"
                                    size="16px">
                                </gov-icon>
                            </view>
                        </view>
                    </view>
                </view>
            </block>
        </scroll-view>
    </view>
    <view class="mask-cover-wrap gov-mask-right-cover" s-if="maskerFlag === true"></view>
</view>
