<template>
    <view>
        <Head />
        <view class="statistics-container">
            <view class="card">
                <view class="title">
                    数据概览
                </view>
                <Overview/>
            </view>
            <view class="card">
                <view class="title">
                    <view class="title-tabs">
                        <view :class="'title-tab ' + (stayVal === '1' ? 'current' : '')" data-index="1" @tap="setStay">
                            待办问题
                            <view class="triangle" v-if="stayVal === '1'"></view>
                        </view>
                        <view :class="'title-tab ' + (stayVal === '2' ? 'current' : '')" data-index="2" @tap="setStay">
                            待办需求
                            <view class="triangle" v-if="stayVal === '2'"></view>
                        </view>
                    </view>
                    <view class="view" @tap="gotopage" :data-url="stayVal === '1' ? '/subpages/statistics/pages/event/list/list' : '/subpages/statistics/pages/demand/list/list'">
                        查看
                        <image mode="widthFix" src="/static/images/right.png"></image>
                    </view>
                </view>
                <view class="stay-con">
                    <StayList :stayVal="stayVal" />
                </view>
            </view>

            <view class="card">
                <view class="title">
                    <text>集中突出问题</text>
                    <view class="view" @tap="gotopage" :data-url="'/subpages/statistics/pages/problemList/problemList?type=' + tabValue">
                        查看
                        <image mode="widthFix" src="/static/images/right.png"></image>
                    </view>
                </view>
                <ProblemList @change="tabChange" />
            </view>

            <view class="card">
                <view class="title">
                    <text>事件类别分析</text>
                    <view class="view" @tap="gotopage" data-url="/subpages/statistics/pages/dissatisfied/list/list">
                        查看
                        <image mode="widthFix" src="/static/images/right.png"></image>
                    </view>
                </view>
                <view class="sub-tit">
                    <image src="/static/images/statistics/sub-tit.png" mode="widthFix" />
                    <text>12345热线投诉类别分析</text>
                </view>

                <HotlineComplaints :typeCondition="monthIndex" />

                <view class="sub-tit">
                    <image src="/static/images/statistics/sub-tit.png" mode="widthFix" />
                    <text>居民需求类别分析</text>
                </view>

                <RequirementAnalysis :typeCondition="monthIndex" />

                <view class="sub-tit">
                    <image src="/static/images/statistics/sub-tit.png" mode="widthFix" />
                    <text>不满意事项类别分析</text>
                </view>

                <SmyddcSqmydzc :typeCondition="monthIndex" />
            </view>

            <view class="card">
                <view class="title">
                    <text>潜在不满意人数</text>
                    <!--    <view class="view" bind:tap="gotopage" data-url="/subpages/statistics/pages/qzbmy/qzbmy">
                    查看 <image mode="widthFix" src="../../images/right.png"></image>
                </view>-->
                </view>
                <EventPrediction />
            </view>
            <view class="card">
                <view class="title">不满意事项趋势分析</view>

                <Trend />
            </view>

            <view class="card">
                <view class="title">不满意人群画像</view>
                <CrowdPortrait />
            </view>
        </view>
        <custom-tab-bar></custom-tab-bar>
    </view>
</template>

<script>
import head from '../../components/Head/index.vue';
import trend from './modules/Trend/Trend.vue';
import smyddcSqmydzc from './modules/SmyddcSqmydzc/SmyddcSqmydzc.vue';
import hotlineComplaints from './modules/HotlineComplaints/HotlineComplaints.vue';
import stayList from './modules/StayList/StayList.vue';
import problemList from './modules/ProblemList/ProblemList.vue';
import requirementAnalysis from './modules/RequirementAnalysis/RequirementAnalysis.vue';
import eventPrediction from './modules/EventPrediction/EventPrediction.vue';
import crowdPortrait from './modules/CrowdPortrait/CrowdPortrait.vue';
import Overview from './modules/Overview/index.vue';

import customTabBar from '../../components/custom-tab-bar';
const app = getApp();
export default {
    components: {
        Head,
        Trend,
        SmyddcSqmydzc,
        HotlineComplaints,
        StayList,
        ProblemList,
        RequirementAnalysis,
        EventPrediction,
        CrowdPortrait,
        customTabBar,
        Overview
    },
    data() {
        return {
            monthOptions: [
                {
                    value: 1,
                    label: '本月'
                },
                {
                    value: 2,
                    label: '上月'
                },
                {
                    value: 3,
                    label: '近3月'
                },
                {
                    value: 4,
                    label: '近半年'
                },
                {
                    value: 5,
                    label: '近1年'
                }
            ],

            monthIndex: 0,
            stayVal: '1',
            tabValue: '',
            statusHeight: '',
            navigationHeight: '',
            agencyName: ''
        };
    },
    onLoad(options) {
        this.setData({
            statusHeight: app.globalData.deviceInfo.statusHeight,
            navigationHeight: app.globalData.deviceInfo.navigationHeight,
            agencyName: app.globalData.user.agencyName
        });
    },
    methods: {
        monthChange({
            currentTarget: {
                dataset: { index }
            }
        }) {
            this.setData({
                monthIndex: index
            });
        },

        gotopage({ currentTarget: { dataset } }) {
            const { url } = dataset;
            console.log(url);
            uni.navigateTo({
                url
            });
        },

        setStay({
            currentTarget: {
                dataset: { index }
            }
        }) {
            this.setData({
                stayVal: index
            });
        },

        tabChange({ detail }) {
            this.setData({
                tabValue: detail
            });
        }
    }
};
</script>
<style lang="scss" scoped>

.statistics-container {
    padding: 20rpx;
    box-sizing: border-box;
}
.card {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
}
.card .title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333333;
    display: flex;
    align-items: center;
    margin-left: -30rpx;
    margin-bottom: 39rpx;
    position: relative;
}
.card .title:before {
    content: '';
    display: block;
    width: 10rpx;
    height: 28rpx;
    background: #3a80e7;
    border-radius: 4rpx;
    margin-right: 20rpx;
}
.card .title .view {
    font-size: 28rpx;
    font-weight: 300;
    color: #999999;
    display: flex;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
}
.title-tabs {
    display: flex;
}

.title-tab {
    margin-right: 60rpx;
    font-size: 32rpx;
    font-weight: 300;
    color: #999999;
    position: relative;
}
.title-tab.current {
    font-size: 34rpx;
    font-weight: bold;
    color: #333333;
}
.triangle {
    width: 0;
    height: 0;
    border-left: 18rpx solid transparent; /* 左边透明 */
    border-right: 18rpx solid transparent; /* 右边透明 */
    border-bottom: 24rpx solid #d8e9ff; /* 设置红色为三角形的高度 */
    position: absolute;
    bottom: -39rpx;
    left: calc(50% - 12px);
}
.stay-con {
    background: linear-gradient(0deg, #f7fdff 0%, #d8e9ff 100%);
    border-radius: 14px;
}
.card .title .view image {
    width: 24rpx;
}
page {
    background: #f7f7f7;
}

.sub-tit {
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
    display: flex;
    align-items: center;
    margin: 30rpx 0;
}
.sub-tit image {
    margin-right: 12rpx;
    width: 20rpx;
    height: 20rpx;
}
</style>
