<template>
	<div>
		<app-tabs
		:tabs="tabs"
		:isFixed="true"
		:currentTab="tabIndex"
		:height="100"
		@change="changeIncome"
		itemWidth="50%"
		/>
		<div class="list-by_box" v-if="!$util.isEmpty(list.data)">
			<t-table :headerBackgroundColor="'#F0F2F6'">
				<t-tr header>
					<t-th v-for="(item, index) in columns" :key="index" :align="item.align">
						{{ item.name }}
					</t-th>
				</t-tr>
				<t-tr v-for="(item, index) in list.data" :key="index">
					<t-td
						v-for="(column, colIndex) in columns"
						:key="colIndex"
						:align="column.align"
						:color="column.color"
					>
						<view>
							{{ item[column.dataIndex] || "" }}
						</view>
					</t-td>
				</t-tr>
			</t-table>
		</div>
		<block v-else>
			<AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
		</block>
    <kd-entrance></kd-entrance>
	</div>
</template>

<script>
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import AppTabs from "@/components/plugin/tabs";
import { list } from "@/mixins";
import { capitaList } from '@/api/store'
export default {
	name: "IncomeExpenses", //收支记录
	components: {
		AppWrapperEmpty,
		AppTabs
	},
	mixins: [list],
	data() {
		return {
			columns: [
				{
					name: "事项",
					dataIndex: "event",
					color: "info",
					align: "center"
				},
				{
					name: "收支金额",
					dataIndex: "amount",
					color: "info",
					align: "center"
				},
				{
					name: "余额",
					dataIndex: "balance",
					color: "info",
					align: "center"
				},
				{
					name: "操作",
					dataIndex: "typeName",
					color: "info",
					align: "center"
				}
			],
			// list: [{ time: "1221", typeName: "hahah", stock: "121255" }],
			tabIndex: 0,
			tabs: [
				{
				name: "收入",
				key:1
				// value: 1
				},
				{
				name: "支出",
				key:0
				// value: 0
				}
			]
		};
	},
	methods: {
		 init() {
		this._list();
		},
		changeIncome(e){
			 if (this.tabIndex == e.index) {
				return false;
			} else {
				this.tabIndex = e.index;
				this.resetList();
				this._list();
				}

			
		},
		_list(){
			return capitaList({
				page: this.list.page,
				io: this.tabs[this.tabIndex].key
			}).then(res=>{
				 this.completes(res);
			})
		}
	},
	onPullDownRefresh() {
		this.resetList();
		this._list().then(res => {
		uni.stopPullDownRefresh();
		});
	},
	onReachBottom() {
    if (!this.list.finished) {
      this._list().then(res => {
        uni.stopPullDownRefresh();
      });
    } else {
      uni.stopPullDownRefresh();
    }
  },
};
</script>

<style lang="scss" scoped>
	.list-by_box {
		padding-top: 100px;
	}
</style>
