<template>
    <view>
        <van-tabs :active="active" @change="toggleColor" title-active-color="#3974F6" color="#3974F6">
            <van-tab title="待我处理" title-class="custom-tab-title">
                <view class="content">
                    <scroll-view class="scroll" :scroll-y="true" :lower-threshold="lowerThreshold" @scrolltolower="onScrollToLower">
                        <view class="card" :data-item="item" @tap="toDetail" v-for="(item, index) in tableData1" :key="index">
                            <view class="title">
                                <view>
                                    <text :class="item.type == 'event' ? 'blue_small' : item.type == 'chengguan' ? 'green_small' : 'red_small'">
                                        {{ item.type == 'event' ? '事件' : item.type == 'chengguan' ? '城管' : '需求' }}
                                    </text>
                                    {{ item.name }} {{ item.mobile }}
                                </view>
                            </view>

                            <view style="margin-top: 10rpx">
                                <text class="card_content" :maxLines="2" overflow="ellipsis">{{ item.content }}</text>
                            </view>

                            <view class="bottom">
                                <view style="color: #c1c1c1; font-size: 26rpx">{{ item.time }}</view>
                                <view :style="'color: ' + (item.status == 'processing' ? '#e07f2f' : '#C1C1C1') + ';font-size: 28rpx;'">
                                    {{ item.status == 'processing' ? '处理中' : '已完成' }}
                                </view>
                            </view>
                        </view>
                        <load-more :loadVisible="loadMoreVisible" :loadType="loadMoreType"></load-more>
                        <no-data :isShow="nodata" v-if="nodata"></no-data>
                    </scroll-view>
                </view>
            </van-tab>
            <van-tab title="我上报的">
                <view class="content">
                    <scroll-view class="scroll" :scroll-y="true" :lower-threshold="lowerThreshold" @scrolltolower="onScrollToLower">
                        <view class="card" :data-item="item" @tap="toDetail" v-for="(item, index) in tableData" :key="index">
                            <view class="title">
                                <view>
                                    <text :class="item.type == 'event' ? 'blue_small' : item.type == 'chengguan' ? 'green_small' : 'red_small'">
                                        {{ item.type == 'event' ? '事件' : item.type == 'chengguan' ? '城管' : '需求' }}
                                    </text>
                                    {{ item.name }} {{ item.mobile }}
                                </view>
                            </view>

                            <view style="margin-top: 10rpx">
                                <text class="card_content" :maxLines="2" overflow="ellipsis">{{ item.content }}</text>
                            </view>

                            <view class="bottom">
                                <view style="color: #c1c1c1; font-size: 26rpx">{{ item.time }}</view>
                                <view :style="'color: ' + (item.status == 'processing' ? '#e07f2f' : '#C1C1C1') + ';font-size: 28rpx;'">
                                    {{ item.status == 'processing' ? '处理中' : '已完成' }}
                                </view>
                            </view>
                        </view>
                        <load-more :loadVisible="loadMoreVisible" :loadType="loadMoreType"></load-more>
                        <no-data :isShow="nodata" v-if="nodata"></no-data>
                    </scroll-view>
                </view>
            </van-tab>
        </van-tabs>
    </view>
</template>

<script>
import loadMore from '../../../../components/loadMore/loadMore';
import noData from '../../../../components/noData/nodata';
import { getMyTroubleshootDemand, getMyWaitTroubleshootDemand } from '../../../../utils/api';
var global = require('../../../../utils/config');
const app = getApp();
export default {
    components: {
        loadMore,
        noData
    },
    data() {
        return {
            active: 0,
            tableData: [],
            tableData1: [],
            pageNo: 1,
            pageSize: 8,
            lowerThreshold: '10',
            loadMoreVisible: false,
            loadMoreType: 'none',
            nodata: false,
            checkResultFlag: 0,
            satisfactionCategory: '',
            inspRecordId: '',
            createdBy: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        console.log('onLoad.........');
        this.setData({
            satisfactionCategory: options.category,
            inspRecordId: options.inspRecordId,
            createdBy: app.globalData.user.id
        });
        this.getMyWaitTroubleshootDemandList();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
        console.log('onReady.........');
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        this.setData({
            pageNo: 1,
            tableData: [],
            tableData1: []
        });
        console.log('页面重新onShow。。。。。。。。');
        if (this.active == 0) {
            this.getMyWaitTroubleshootDemandList();
        } else {
            this.getMyTroubleshootDemandList();
        }
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        onScrollToLower(e) {
            if (this.loadMoreType === 'more') {
                this.setData({
                    loadMoreVisible: true
                });
                this.pageNo += 1;
                // 待我处理
                if (this.checkResultFlag === 0) {
                    this.getMyWaitTroubleshootDemandList();
                }
                // 我上报的
                if (this.checkResultFlag === 1) {
                    this.getMyTroubleshootDemandList();
                }
            }
        },

        getMyTroubleshootDemandList() {
            this.setData({
                loadMoreVisible: true,
                nodata: false,
                loadMoreType: 'more'
            });
            let parm = {
                pageNo: this.pageNo,
                pageSize: this.pageSize
            };
            if (!parm.type) {
                delete parm.type;
            }
            getMyTroubleshootDemand(parm)
                .then((res) => {
                    this.setData({
                        loadMoreType: res.data.list.length === this.pageSize ? 'more' : 'none',
                        tableData: this.tableData.concat(res.data.list)
                    });
                    if (this.tableData.length == 0) {
                        this.setData({
                            loadMoreVisible: false,
                            nodata: true
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                    this.setData({
                        loadMoreVisible: false,
                        nodata: true
                    });
                });
        },

        getMyWaitTroubleshootDemandList() {
            this.setData({
                loadMoreVisible: true,
                nodata: false,
                loadMoreType: 'more'
            });
            let parm = {
                pageNo: this.pageNo,
                pageSize: this.pageSize
            };
            if (!parm.type) {
                delete parm.type;
            }
            getMyWaitTroubleshootDemand(parm)
                .then((res) => {
                    this.setData({
                        loadMoreType: res.data.list.length === this.pageSize ? 'more' : 'none',
                        tableData1: this.tableData.concat(res.data.list)
                    });
                    if (this.tableData1.length == 0) {
                        this.setData({
                            loadMoreVisible: false,
                            nodata: true
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                    this.setData({
                        loadMoreVisible: false,
                        nodata: true
                    });
                });
        },

        handleClickPhone(e) {
            uni.makePhoneCall({
                phoneNumber: e.currentTarget.dataset.mobile
            });
        },

        toDetail(e) {
            console.log(e);
            uni.navigateTo({
                url: `/subpages/demandCheck/pages/dissatisfied/demandCheck/demandCheck?id=${e.currentTarget.dataset.item.id}&type=${
                    e.currentTarget.dataset.item.type === 'event' ? 0 : e.currentTarget.dataset.item.type === 'chengguan' ? 2 : 1
                }`
            });
        },

        toggleColor(e) {
            const let1 = e.detail.index;
            this.setData({
                tableData: [],
                tableData1: [],
                checkResultFlag: let1,
                pageNo: 1,
                pageSize: 20
            });
            this.getList();
            this.setData({
                active: let1
            });
        },

        getList() {
            this.setData({
                loadMoreVisible: true,
                nodata: false,
                loadMoreType: 'more'
            });

            // 待我处理
            if (this.checkResultFlag === 0) {
                this.getMyWaitTroubleshootDemandList();
            }
            // 我上报的
            if (this.checkResultFlag === 1) {
                this.getMyTroubleshootDemandList();
            }
        }
    }
};
</script>
<style>
/* subpages/myTroubleshootDemand/pages/index/index.wxss */
page {
    width: 100%;
    min-height: 100vh;
    overflow-y: scroll;
    background-color: #f7f7f7;
}
.red,
.blue {
    font-size: 28rpx;
    color: #fff;
    padding: 8rpx 20rpx;
    border-radius: 40rpx;
    box-sizing: border-box;
    margin-right: 16rpx;
}
.red {
    background-color: #ff783c;
}
.blue {
    background-color: #4f94ff;
}
.blue_small,
.red_small,
.green_small,
.gray_small {
    font-size: 26rpx;
    width: fit-content;
    padding: 8rpx 16rpx;
    border-radius: 40rpx;
    box-sizing: border-box;
    height: 40rpx;
    line-height: 20rpx;
    margin: 24rpx 0;
}
.blue_small {
    background-color: #eef4fd;
    color: #5693ee;
}
.red_small {
    background-color: #fff1eb;
    color: #ff783c;
}

.green_small {
    background-color: #eef4fd;
    color: #5cc789;
}

.gray_small {
    background-color: #a4a8ad;
    color: #fdfdfd;
    font-size: 25rpx;
}
.content {
    width: 100%;
    padding: 0 20rpx;
    margin-top: 20rpx;
    box-sizing: border-box;
}
.content .scroll {
    height: calc(100vh - 50rpx);
    overflow-y: scroll;
}
.content .card {
    width: 100%;
    background-color: #fff;
    display: flex;
    min-height: 180rpx;
    flex-direction: column;
    border-radius: 20rpx;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    overflow: hidden;
    box-sizing: border-box;
    color: #333;
    position: relative; /* 为了使用伪元素 */
    margin-bottom: 20rpx;
}

.content .card .title {
    display: flex;
    justify-content: space-between;
}
.card_content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.content .card .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 22rpx;
    /* border-bottom: 2rpx #EAEAEA solid; */
    padding-bottom: 20rpx;
}
</style>
