<template>
    <div class='comprehensive-matter'>
        <!-- <van-list v-model='loading' :finished='finished' finished-text='加载到底了' @load='onLoad'>
            <van-cell v-for='item in list' :key='item' :title='item' />
        </van-list>-->
        <div class='time'>
            <van-button round size='small' :class='active === 0?"active":""' @click='changeTime(0)'>一个月内</van-button>
            <van-button round size='small' :class='active === 1?"active":""' @click='changeTime(1)'>半年内</van-button>
            <van-button round size='small' :class='active === 2?"active":""' @click='changeTime(2)'>一年内</van-button>
            <van-button round size='small' :class='active === 3?"active":""' @click='changeTime(3)'>全部</van-button>
        </div>
        <div class='main'>
            <van-list class='matters-list' v-model='loading' :finished='finished' finished-text='没有更多了' :immediate-check='false' @load='onLoad'>
                <div class='container' v-for='(item,index) in 15' :key='index'>
                    <div class='government-department' v-if='true'>
                        <van-cell :title='`政府部门${index}`' is-link :value='`${index}项`' @click='goToMattersFetail(item)' />
                    </div>
                    <div class='other-department' v-if='index==4'>
                        <van-cell title='其他' :arrow-direction='arrowDirection' is-link @click='changeOtherShowStatus' />
                        <div class='other-container' v-show='showOther'>
                            <van-cell
                                :title='`自定义其他部门${index}`'
                                title-class='other-cell'
                                :value='`${index}项`'
                                is-link
                                @click='goToMattersFetail(item)'
                            />
                            <van-cell
                                :title='`自定义其他部门${index}`'
                                title-class='other-cell'
                                :value='`${index}项`'
                                is-link
                                @click='goToMattersFetail(item)'
                            />
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
    </div>
</template>
<script>
/**
 * 综合事项
 */
import Vue from 'vue'
import { List, Cell, Button } from 'vant'
Vue.use(List).use(Cell).use(Button)
export default {
    name: 'ComprehensiveMatter',
    props: {},
    components: {},
    data() {
        return {
            active: 0,
            list: [],
            loading: false,
            finished: false,
            page: 1,
            count: 0,
            arrowDirection: 'up', //其他 箭头方向
            showOther: true,
        }
    },
    beforeMount() {},
    mounted() {},
    methods: {
        /**
         * 更改时间
         */
        changeTime(active) {
            this.active = active
        },
        onLoad() {
            // 异步更新数据
            // setTimeout 仅做示例，真实场景中一般为 ajax 请求
            setTimeout(() => {
                for (let i = 0; i < 5; i++) {
                    this.list.push(this.list.length + 1)
                }

                // 加载状态结束
                this.loading = false

                // 数据全部加载完成
                if (this.list.length >= 40) {
                    this.finished = true
                }
            }, 1000)
        },
        /**
         * 点击其他右侧上下箭头,显隐其他部门
         */
        changeOtherShowStatus() {
            if (this.showOther) {
                this.showOther = false
                this.arrowDirection = 'down'
            } else {
                this.showOther = true
                this.arrowDirection = 'up'
            }
        },
        /**
         *  跳转 列表页面
         */
        goToMattersFetail(data) {
            this.$router.push({ name: 'ComprehensiveMatterList', params: data })
        },
    },
}
</script>
<style lang='less' scoped>
.comprehensive-matter {
    width: 100%;
    height: 100%;
    background-color: #f5f6f7;
    overflow: auto;
    // 时间切换按钮
    .time {
        width: 100%;
        height: 60px;
        padding: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        background-color: #f5f6f7;
        /deep/ .van-button {
            width: 75px;
            text-align: center;
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            background: #f1f1f1;
            border-radius: 16px;
            border: 1px solid #dcdcdc;
        }
        .active {
            background-color: #025baa !important;
            color: #fff;
        }
    }
    .main {
        width: 100%;
        height: calc(100% - 60px);
        overflow: auto;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        .matters-list {
            width: 100%;
            background-color: #fff;
            overflow: auto;
            .container {
                width: 100%;
                .government-department {
                    width: 100%;
                    padding: 0 15px;
                }
                /deep/ .van-cell {
                    height: 55px;
                    border-bottom: 1px solid #e6e6e6;
                    display: flex;
                    align-items: center;
                    padding-left: 0;
                    padding-right: 0;
                    .van-cell__title {
                        font-size: 14px;
                        font-weight: 400;
                        color: #333333;
                    }
                }
                // 其他部门
                .other-department {
                    width: 100%;
                    padding: 0 15px;
                    .other-container {
                        width: 100%;
                        padding-left: 15px;
                        border-bottom: 1px solid #e6e6e6;
                        /deep/ .van-cell:last-child {
                            border-bottom: none;
                        }
                    }
                }
            }
        }
    }
    // /deep/.van-list {
    //     width: 100%;
    //     height: calc(100%- 150px);
    // }
}
</style>