<template>
    <view class="content">
        <!-- 顶部筛选菜单 -->
        <view class="uni-flex ai-center screen-box menu-list">
            <view class="menu" v-for="(item,index) in menuList" :key="index" @click="handleClick(item)">
                <view class="menu-image round" style="height:75rpx;width:75rpx;padding: 18rpx;" 
                :style="activeType==item.id ? 'background:#f0f7fe;' : 'background:#f6f7f8;'">
                    <image :src="activeType==item.id? item.active: item.src" mode="aspectFit" style="height:100%;"></image>
                </view>
                <view class="menuName" :style="activeType==item.id ? 'color:#5B96E9' :'color:#808D97'">{{item.name}}</view>
            </view>
        </view>
        <!-- 数据卡片列表 -->
        <view v-if="pageList.length>0">
            <list-unit v-for="(item,index) in pageList" :key="index" :item="item" :i="index"
                @goDetail="goDetail"></list-unit>
        </view>
        <!-- 无数据时的页面显示 -->
        <view v-else-if="pageData.isLoading===false">
            <noFound :nodata="pageList.length>0 ? false : true" :text="searchTime[0]+'至'+searchTime[1]+'无数据，'">
                <text name="other">请选择其它日期进行查询。</text>
            </noFound>
        </view>
        <!-- 底部提示 -->
        <view class="load-more" v-if="pageList.length>0">
            <text>{{!pageData.isEnd ? '正在加载,请稍后...':'——— 我是有底线的 ———'}}</text>
        </view>
        <!-- 更多筛选的弹窗 -->
        <UniPop :show="showPop" @hidePopup="closePop" type="bottom" @touchmove.prevent round="true">
            <view class="padding-bottom">
                <!-- 其他选项 -->
                <view class="moduleTitle">{{popData.typeName}}</view>
                <view class="uni-flex ai-center menu-list">
                    <view class="menu" v-for="(item,index) in popData.selectList" :key="index" @click="bindPartChange(item)">
                        <view class="menu-image round" style="height:74rpx;width:74rpx;border-radius:20rpx;line-height:74rpx;"
                        :style="'background:' + (popData.colors[index] ? popData.colors[index] : popData.colors[index-popData.colors.length]) + ';'">
                            <image :src="activeType==item.id ? item.active: item.src" mode="aspectFit" style="height:100%;"></image>
                        </view>
                        <view class="menuName" :style="selectTypeIndex==item.typeId ? 
                            'color:' + (popData.colors[index]? popData.colors[index] :
                            popData.colors[index % 7]) : 'color:#120E2B'">{{item.name}}</view>
                    </view>
                </view>
                <view class="popbtn" @click="reloadList">确定</view>
            </view>
        </UniPop>
    </view>
</template>
<script>
    import {mapGetters,mapMutations} from 'vuex'
    //列表卡片组件
    import ListUnit from "./components/listUnit.vue"
    //弹窗组件
    import UniPop from '@/components/uni-popup.vue'
    export default {
        components: {//import引入的组件需要注入到对象中才能使用
            ListUnit,
            UniPop
        },
        data() {//这里存放数据
            const today = this.$util.cutDate(new Date(), 'YYYY/MM/DD')
            const week = this.$util.cutDate(new Date(),'YYYY/MM/DD',-6)
            const month = this.$util.cutDate(new Date(),'YYYY/MM/DD',-30)
            const threeMonth = this.$util.cutDate(new Date(),'YYYY/MM/DD',-90)
            return {
                activeType: -1,//默认选择全部
                selectTypeIndex: -1,//默认选择全部
                dateIndex: 0, //选中的日期标签
                showPop: false,
                searchTime: [week, today],
                pageData: {
                    pageIndex: 1,
                    pageSize: 10,
                    isEnd: false,
                    isLoading: true,
                    endDate: today
                },
                menuList: [ //列表头部菜单选项标签
                    {
                        name: '全部',
                        src: '/static/images/expense/type/yifq.png',
                        active: '/static/images/expense/type/yifqz.png',
                        id: -1
                    }, 
                    {
                        name: '合作经营',
                        src: '/static/images/expense/type/yifq.png',
                        active: '/static/images/expense/type/yifqz.png',
                        id: 2000
                    }, 
                    {
                        name: '固定租金',
                        src: '/static/images/expense/type/yifq.png',
                        active: '/static/images/expense/type/yifqz.png',
                        id: 3000
                    }, 
                    {
                        name: '更多筛选',
                        src: '/static/images/expense/type/shaix.png',
                        active: '/static/images/expense/type/shaixz.png',
                        id: 99
                    }, 
                ],
                popData:{
                    //更多选项中卡片颜色
                    colors: ['#5B96E9', '#F0A038', '#5B96E9', '#57BAAE', '#D9675C', '#5B96E9', '#57BAAE'],
                    typeName:"传输类型",
                    selectList: [//更多选项中的类型标签
                        {
                            name: '全部',
                            src: '/static/images/expense/type/qb.png',
                            typeId: -1
                        },
                        {
                            name: '收银系统',
                            src: '/static/images/expense/type/qb.png',
                            typeId: 0
                        },
                        {
                            name: '扫码传输',
                            src: '/static/images/expense/type/qb.png',
                            typeId: 1
                        },
                        {
                            name: '接口传输',
                            src: '/static/images/expense/type/qb.png',
                            typeId: 2
                        },
                    ],
                },
                pageList: []
            }
        },
        computed: {//监听属性 类似于data概念
            ...mapGetters({
                reloading: 'shouldReLoadingList'
            })
        },
        methods: {//方法集合
            ...mapMutations(['shouldReLoadingList']),
            selectDate(dayIndex, dayValue) {
                this.dateIndex = dayIndex
                if (dayValue !== 0) {
                    this.searchTime = this.popData.dateList[this.dateIndex].value
                }
                this.$forceUpdate()
            },
            /** 
             * 日期缓存刷新
             * @param {Object} e 
             * @param {Object} index
             */
            bindDateChange(e, index) {
                this.searchTime[index] = e.detail.value
                this.$forceUpdate()
            },
            /**
             * 查询数据稽查数据
             */
            searchList() {
                uni.showLoading({
                    title: '正在加载'
                })
                this.pageData.isLoading = true
                this.pageData.isEnd = false
                this.pageData.pageIndex = 1
                this.getList()
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 300
                })
            },
            /**
             * 调用接口获取
             * 
             * Api接口地址：EShangApiMain/AutoTest/GetServerpartshopTotalSummary
             */
            getList() {
                this.$request.$webGet("EShangApiMain/AutoTest/GetServerpartshopTotalSummary", {
                    BUSINESS_TYPE: this.activeType === -1 ? '' : this.activeType,
                    TRANSFER_TYPE: this.selectTypeIndex === -1 ? '' : this.selectTypeIndex,
                    pageIndex: this.pageData.pageIndex,
                    pageSize: this.pageData.pageSize,
                }).then(res => {
                    if (!res.Result_Code || res.Result_Code != 100) {
                        this.pageData.isLoading = false
                        this.pageList = []
                    } else {
                        //筛选数据（请根据实际业务修改）
                        let list = res.Result_Data.List.filter(p => {
                            //if (this.activeType == 1) {
                                //return p.CHECKACCOUNT_DESC.length == 0
                            //} else if (this.activeType == 2) {
                                //return p.CHECKACCOUNT_DESC.length > 0
                            //} else {
                                return true
                            //}
                        })
                        if (list.length > 0) {
                            if (this.pageData.pageIndex == 1) {
                                this.pageList = list
                            } else {
                                this.pageList = [...this.pageList, ...list]
                            }
                        }
                        if (list.length < this.pageData.pageSize) { // 返回条数小于每页条数
                            this.pageData.isEnd = true
                        }
                        this.$forceUpdate()
                    }
                    uni.hideLoading()
                    let _this = this
                    setTimeout(function() {
                        _this.pageData.isLoading = false
                    }, 500)
                })
            },
            /**
             * 加载下一页
             */
            loadMore() {
                if (!this.pageData.isEnd) {
                    this.pageData.pageIndex += 1
                    this.getList()
                }
            },
            /**
             * 绑定信息卡片点击跳转页面
             * @param {Object} item
             */
            goDetail(item) {
                this.$util.toNextRoute('navigateTo', '/pages/autoTest/serverpartshoptotalsummary/detail?BUSINESS_BRAND=' + item.BUSINESS_BRAND + '&BUSINESS_TRADE=' + item.BUSINESS_TRADE + '&OWNERUNIT_ID=' + item.OWNERUNIT_ID)
            },
            reloadList() {
                this.showPop = false
                this.pageData.pageIndex = 1
                uni.showLoading({
                    title: '正在加载'
                })
                this.pageData.isLoading = true
                this.pageData.isEnd = false
                this.pageList = []
                this.getList()
                this.$forceUpdate()
            },
            closePop() {
                this.showPop = false
            },
            handleClick(item) {//顶部菜单标签点击事件
                if (item.id == 99) {//标签 id=99 代表点击了更多筛选
                    this.showPop = true
                } else {
                    this.activeType = item.id
                    this.reloadList()
                }
            },
            bindPartChange(item) {
                this.selectTypeIndex = item.typeId
            },
        },
        onPullDownRefresh() {
            uni.showLoading({
                title: '正在加载'
            })
            this.pageData.pageIndex = 1
            this.pageData.isLoading = true
            this.pageData.isEnd = false
            this.getList()
            setTimeout(function() {
                uni.stopPullDownRefresh()
            }, 1000)
        },
        //页面滑动到底部
        onReachBottom() {
            //加载下一页数据
            this.loadMore()
        },
        //页面打开
        onShow() {
            let _this = this
            if (this.reloading) {
                uni.showLoading({
                    title: '正在加载'
                })
                this.pageData.isLoading = true
                this.pageData.pageIndex = 1
                this.pageData.isEnd = false
                this.getList()
                this.shouldReLoadingList(false)
            }
        },
        //页面加载
        onLoad() {
            uni.showLoading({
                title: '正在加载'
            })
            this.pageData.isLoading = true
            this.getList()
        },
        //页面关闭
        onUnload() {
            this.$util.addUserBehavior()
        },
    }
</script>
<style scoped>
    .menu-list {//顶部菜单样式
        width: 100%;
        background-color: #fff;
        flex-wrap: wrap;
    }
    .moduleTitle {
        text-align: left;
        margin: 16rpx 0 0 24rpx;
        font-weight: 700;
        font-size: 30rpx;
        padding: 24rpx 0 12rpx 0;
    }
    .popbtn {
        width: 639rpx;
        height: 80rpx;
        line-height: 80rpx;
        color: #fff;
        font-size: 28rpx;
        background: #5b96e9;
        border-radius: 8rpx;
        margin: 48rpx auto 24rpx auto;
    }
    .screen-box {
        background-color: #fff;
        padding: 0 0rpx;
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .screen-box .screen-unit {
        display: flex;
        align-items: center;
        width: auto;
        padding: 0 0rpx;
        line-height: 3;
    }
    .screen-box text {
        line-height: 3;
    }
    .tag-item {
        width: 150rpx;
        height: 66rpx;
        background: #ffffff;
        border: 1rpx solid #efefef;
        border-radius: 8rpx;
        color: #808D97;
        font-size: 24rpx;
        text-align: center;
        line-height: 64rpx;
        margin: 24rpx 0 24rpx 24rpx;
    }
    .tag-item.actived {
        background: #e8f3fd;
        border: 1rpx solid #e8f3fd;
        color: #4D95F0;
    }
    .padding-bottom {
        padding-bottom: 24rpx;
    }
    .round {
        border-radius: 50%;
    }
    .menu {
        text-align: center;
        min-width: 185rpx;
        padding: 24rpx 0;
    }
    .menuName {
        color: #120E2B;
        font-size: 24rpx;
        text-align: center;
        margin-top: 16rpx;
    }
    .menu-image {
        padding: 12rpx 8rpx;
        height: 80rpx;
        box-sizing: border-box;
        margin: 0 auto;
        text-align: center;
    }
    .menu-image image {
        max-width: 100%;
        max-height: 100%;
    }
</style>
