<view class="padding_box">
    <t-divider content="{{showDate}}" data-mode="showDate" bind:tap="showPicker"/>
</view>
<t-tabs defaultValue="{{0}}" t-class="custom-tabs" theme="card">
    <t-tab-panel label="总览" value="0" class="tab_content">
        <view class="space_box font_big">
            <text class="t-color-EXPEND">支出\n {{sumExpend}}</text>
            <text class="t-color-INCOME">收入\n {{sumIncome}}</text>
            <text class="t-color-TRANSFER">转账\n {{sumTransfer}}</text>
            <text class="t-color-REPAYMENT">还款\n {{sumRepayment}}</text>
        </view>
        <view class="padding_box">
            <t-divider dashed content="账单明细"/>
        </view>
        <view wx:if="{{accountList != null && accountList.length > 0}}">
            <t-cell-group theme="card">
            <t-cell wx:for="{{accountList}}" wx:key="index"
                    title="{{item.moneyName}}"
                    description="{{item.date}} • {{item.accountName}}"
                    align="top"
                    image="{{item.moneyIcon}}"
                    note="{{item.money}}"
                    class="t-cell-{{item.billType}}"
                    url="{{'/pages/bill/index?id=' + item.id}}"
            />
            </t-cell-group>
        </view>
        <view wx:else class="empty-view" >
            <t-empty icon="chart-bubble" description="本月无账单记录" />
        </view>
    </t-tab-panel>
    <t-tab-panel label="支出分类" value="1">
        <view class="chart-box">
            <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ecPie }}"></ec-canvas>
            <view wx:if="{{payTypeList != null && payTypeList.length > 0}}">
                <t-cell-group theme="card">
                    <t-cell wx:for="{{payTypeList}}" wx:key="index"
                            title="{{item.moneyName}}"
                            description="{{item.progress}}%"
                            align="top"
                            image="{{item.moneyIcon}}"
                            note="{{item.money}}"
                            url="{{'/pages/chart/group/index?expendId=' + item.expendId + '&rangeDate=' + showDate}}"
                    />
                </t-cell-group>
            </view>
            <view class="placeholder"/>
        </view>
    </t-tab-panel>
    <t-tab-panel label="当月趋势" value="2">
        <view class="line-chart-box">
            <ec-canvas id="mychart-dom-line1" canvas-id="mychart-line1" ec="{{ ecLine1 }}"></ec-canvas>
        </view>
    </t-tab-panel>
    <t-tab-panel label="近6月趋势" value="3">
        <view class="line-chart-box">
            <ec-canvas id="mychart-dom-line2" canvas-id="mychart-line2" ec="{{ ecLine2 }}"></ec-canvas>
        </view>
    </t-tab-panel>
    <t-tab-panel label="排行" value="4">
        <t-tabs defaultValue="{{0}}" t-class="custom-tabs" theme="card">
            <t-tab-panel label="支出" value="0">
                <view class="tabs_crevice"/>
                <view wx:if="{{payList != null && payList.length > 0}}">
                    <t-cell-group theme="card">
                        <t-cell wx:for="{{payList}}" wx:key="index"
                                title="{{item.moneyName}}"
                                description="{{item.date}} • {{item.accountName}}"
                                align="top"
                                image="{{item.moneyIcon}}"
                                note="{{item.money}}"
                                class="t-cell-{{item.billType}}"
                                url="{{'/pages/bill/index?id=' + item.id}}"
                        />
                    </t-cell-group>
                </view>
            </t-tab-panel>
            <t-tab-panel label="收入" value="1">
                <view class="tabs_crevice"/>
                <view wx:if="{{incomeList != null && incomeList.length > 0}}">
                    <t-cell-group theme="card">
                        <t-cell wx:for="{{incomeList}}" wx:key="index"
                                title="{{item.moneyName}}"
                                description="{{item.date}} • {{item.accountName}}"
                                align="top"
                                image="{{item.moneyIcon}}"
                                note="{{item.money}}"
                                class="t-cell-{{item.billType}}"
                                url="{{'/pages/bill/index?id=' + item.id}}"
                        />
                    </t-cell-group>
                </view>
            </t-tab-panel>
        </t-tabs>
    </t-tab-panel>
</t-tabs>
<view class="placeholder"/>
<foot-tab value="label_2"/>
<!-- 年月 -->
<t-date-time-picker
        title="选择日期"
        visible="{{showDateVisible}}"
        mode="month"
        value="{{showDate}}"
        format="YYYY-MM"
        bindchange="onConfirm"
        bindpick="onColumnChange"
        bindcancel="hidePicker"
        start="{{start}}"
        end="{{end}}"
/>
