<template>
    <div class="main">
        <div class="search">
            <el-select v-model="mixins_query.communityId" placeholder="选择社区" clearable>
                <el-option v-for="(item, index) in communityArr" :key="index" :label="item.communityName" :value="item.id"></el-option>
            </el-select>
            <el-button type="primary" class="search-btn" @click="mixins_search" icon="el-icon-search">查询 </el-button>
            <div class="search-icon">
                <el-tooltip class="item" effect="light" placement="bottom" content="导出">
                    <i class="zoniot_font zoniot-icon-daochu2" @click="exportExcel"></i>
                </el-tooltip>
            </div>
        </div>
        <zz-table
            :cols="cols"
            :settings="{ showIndex: false, stripe: true, summaryCol: summaryColData }"
            :loading="mixins_onQuery"
            :summaryData="{}"
            :data="mixins_list"
            :pageset="mixins_pageset"
            @page-change="pageChange"
        >
        </zz-table>
    </div>
</template>

<script>
import list from '@utils/list.js';
export default {
    mixins: [list],
    data() {
        return {
            cols: [
                {
                    label: '缴费情况',
                    prop: 'communityName'
                },
                {
                    label: '01月',
                    prop: 'amount'
                },
                {
                    label: '02月',
                    prop: 'amount'
                },
                {
                    label: '03月',
                    prop: 'amount'
                },
                {
                    label: '04月',
                    prop: 'amount'
                },
                {
                    label: '05月',
                    prop: 'amount'
                },
                {
                    label: '06月',
                    prop: 'amount'
                },
                {
                    label: '07月',
                    prop: 'amount'
                },
                {
                    label: '08月',
                    prop: 'amount'
                },
                {
                    label: '09月',
                    prop: 'amount'
                },
                {
                    label: '10月',
                    prop: 'amount'
                },
                {
                    label: '11月',
                    prop: 'amount'
                },
                {
                    label: '12月',
                    prop: 'amount'
                },
                {
                    label: '合计',
                    prop: 'total'
                }
            ],
            mixins_post: 'post',
            summaryColData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
            communityArr: []
        };
    },
    created() {
        this.mixins_dataUrl = '/sc-charge/payment/record/page';
        this.mixins_query = {
            accountType: 1,
            paymentType: 1
        };
        this.mixins_search();
        this.getorgTree();
    },
    mounted() {},
    methods: {
        exportExcel() {
            this.__exportExcel('/sc-charge/payment/record/export/excel', this.mixins_query);
        },
        getorgTree() {
            this.$http
                .get('/sc-community/assets/community/list')
                .then((data) => {
                    this.communityArr = data.data;
                    this.$store.commit('setAreaSelect', data.data);
                })

                .catch(function () {});
        }
    }
};
</script>