<template>
    <home-container :customStyle="{ background: 'none', backgroundColor: 'white' }">

        <view class="workProfileContainer">
            <!-- 下拉选择 -->
            <div class="filter-section" v-if="isSpecialUser || isJingLi">
                <uni-data-select :class="{ 'filter-select': true, 'kezhang-style': isKeZhang }" v-model="selectedLevel"
                    :localdata="levelOptions" placeholder="请选择级别" :clear="false" @change="handleLevelChange"
                    :disabled="isKeZhang" />
            </div>

            <!-- 总体概览 -->
            <div class="overview-section" :style="{ marginTop: isSpecialUser || isJingLi ? '80rpx' : '0rpx' }">
                <h2 class="section-title">总体概览</h2>
                <div class="overview-cards">
                    <!-- 组织支撑 -->
                    <div class="overview-card" style="border-top-color: #007AFF;">
                        <div class="card-title" style="--card-color: #007AFF;">组织支撑</div>
                        <div class="stat-value">
                            {{ overviewData.avgWorkingHours || '-' }}H
                        </div>
                        <div class="stat-item">
                            人均在岗时长
                        </div>
                    </div>

                    <!-- 工作产出 -->
                    <div class="overview-card" style="border-top-color: #FF9500;">
                        <div class="card-title" style="--card-color: #FF9500;">工作产出</div>
                        <div class="stat-value">
                            {{ overviewData.workOutput || '-' }}
                        </div>
                        <div class="stat-item">
                            巡检总问题数
                        </div>
                    </div>

                    <!-- 管理推动 -->
                    <div class="overview-card" style="border-top-color: #00C853;">
                        <div class="card-title" style="--card-color: #00C853;">管理推动</div>
                        <div class="stat-value">
                            {{ overviewData.managementPromotion || '-' }}
                        </div>
                        <div class="stat-item">
                            超期整改数
                        </div>
                    </div>
                </div>
            </div>

            <!-- 详细内容 -->
            <div class="detail-section">
                <h2 class="section-title">详细内容</h2>
                <!-- <uni-collapse> -->
                <!-- 组织支撑 -->
                <organization-support />

                <!-- 工作产出 -->
                <work-output />

                <!-- 管理推动 -->
                <management-push />
                <!-- </uni-collapse> -->
            </div>
        </view>
    </home-container>
</template>

<script>
import HomeContainer from '@/components/HomeContainer.vue'
import OrganizationSupport from './components/organization-support.vue'
import WorkOutput from './components/work-output.vue'
import ManagementPush from './components/management-push.vue'
import { getDeptList } from '@/api/system/dept/dept'
import { getPortrait, getModuleMetrics } from '@/api/eikonStatistics/eikonStatistics'
import {
    getStationLevelRate,
    getDepartmentLevelRate,
    getWorkingPortrait,
    getTrainingTestScoreTrend,
    getManagementRecord,
    getManagementRectify,
    getInspectionProblemChart,
    getChannelOpenTrendChart,
    getDurationChart,
    getSeizureTrendChart
} from '@/api/workProfile/workProfile'
import { mapState } from 'vuex'
export default {
    name: 'WorkProfile',
    components: {
        HomeContainer,
        OrganizationSupport,
        WorkOutput,
        ManagementPush
    },
    data() {
        return {
            selectedLevel: '',
            selectedLevelId: '',
            selectedLevelType: '',
            portraitData: {},
            moduleMetricsData: {},
            levelOptions: [],
            testScoreTrendData: [],
            overviewData: {
                organization: "",
                work: "",
                management: ""
            },

            levelRateData: [],
            managementPushData: {},
            managementRectifyData: {},
            inspectionProblemData: {},
            channelOpenTrendData: {},
            durationData: [],
            seizureTrendData: []
        }
    },
    async mounted() {
        await this.getDept()
        // this.loadData()

    },
    provide() {
        return {
            getPortraitData: () => this.portraitData,
            overviewData: () => this.overviewData,
            moduleMetricsData: () => this.moduleMetricsData,
            getLevelRateData: () => this.levelRateData,
            getTrainingTestScoreTrendData: () => this.testScoreTrendData,
            getManagementPushData: () => this.managementPushData,
            getManagementRectifyData: () => this.managementRectifyData,
            getInspectionProblemChartData: () => this.inspectionProblemData,
            getChannelOpenTrendChartData: () => this.channelOpenTrendData,
            getDurationChartData: () => this.durationData,
            getSeizureTrendChartData: () => this.seizureTrendData,

        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo,
            userRoles: state => state.user.roles || [],
        }),
        currentUser() {
            return this.$store.state.user.userInfo;
        },
        isSpecialUser() {
            return this.userRoles.includes('test')
        },
        isJingLi() {
            return this.userRoles.includes('jingli')
        },
        isKeZhang() {
            return this.userRoles.includes('kezhang')
        },
        curUserRoles() {
            return this.$store.state.user && this.$store.state.user.roles;
        }
    },

    methods: {
        handleLevelChange(value) {
            console.log("value===", value, this.levelOptions)
            let targetObj = {}
            targetObj = this.levelOptions.find(item => item.id == value);
            this.selectedLevelId = targetObj.value
            this.selectedLevelType = targetObj.deptType == 'STATION' ? 'station' : 'department'
            this.loadData()
        },
        loadData() {
            this.getOverviewData()

            this.getLevelRateData()
            this.getTrainingTestScoreTrendData()
            //获取组织支撑的数据
            this.getOrganizationSupport()
            //获取管理推动的数据
            this.getManagementPush()
            //获取工作产出
            this.getWorkOutputData()
        },
        //获取培训测试平均分趋势图
        getTrainingTestScoreTrendData() {
            let params = {
                deptId: this.selectedLevelId || ''
            }
            getTrainingTestScoreTrend(params).then(res => {
                this.testScoreTrendData = res.data || {};
            })
        },
        //获取抽问抽答完成率
        getLevelRateData() {
            let params = {}
            let api = this.selectedLevelType == 'station' ? getStationLevelRate : getDepartmentLevelRate
            if (this.selectedLevelType == 'station') {
                params.siteId = this.selectedLevelId
            } else if (this.selectedLevelType == 'department') {
                params.deptId = this.selectedLevelId
            }
            api(params).then(res => {
                this.levelRateData = res.data || {};
            })
        },
        async getDept() {
            if (this.isSpecialUser || this.isKeZhang) {
                getDeptList().then(res => {
                    const { data } = res
                    let targetObj = data.find(item => item.id == '100' || item.label == '安检站');
                    let arr = [
                        targetObj,
                        ...targetObj.children
                    ]
                    this.levelOptions = arr.map(item => ({
                        ...item,
                        value: item.id,
                        text: item.label
                    }))
                    //如果是站长质检科的就赋值安检站
                    if (this.isSpecialUser) {
                        this.selectedLevel = arr[0].id
                        this.handleLevelChange(arr[0].id)
                    }
                    if (this.isKeZhang) {

                        this.selectedLevel = this.userInfo.departmentId
                        this.handleLevelChange(this.userInfo.departmentId)
                    }

                })
            }

            if (this.isJingLi) {

                const deptId = this.currentUser.deptId;
                const subDeptTree = await getDeptList({ parentId: deptId });
                console.log(subDeptTree, "subDeptTree", this.currentUser)
                let arr = [
                    { id: deptId, label: '本队' },
                    ...subDeptTree.data
                ]
                this.levelOptions = arr.map(item => ({
                    ...item,
                    value: item.id,
                    text: item.label
                }))
                this.selectedLevel = arr[0].id
                this.handleLevelChange(arr[0].id)
            }

        },
        //获取总览
        getOverviewData() {
            let params = { deptId: this.selectedLevelId || '' }
            getWorkingPortrait(params).then(res => {
                this.overviewData = res.data || {};
            })
        },
        //获取工作产出
        getWorkOutputData() {
            let specialParams = {}
            let params = {
                deptId: this.selectedLevelId || ''
            }
            if (this.selectedLevelType == 'department') {
                specialParams.deptId = this.selectedLevelId || ''
            }
            getInspectionProblemChart(params).then(res => {
                this.inspectionProblemData = res.data || {};
            })
            getChannelOpenTrendChart(specialParams).then(res => {
                this.channelOpenTrendData = res || [];
            })
            getSeizureTrendChart(this.selectedLevelType == 'department' ? params : {}).then(res => {
                this.seizureTrendData = res.data || [];
            })
        },
        //获取管理推动
        getManagementPush() {
            let params = {};
            let otherparams = {
                deptId: this.selectedLevelId || ''
            }
            if (this.selectedLevelType == 'station') {
                params.checkedSiteId = this.selectedLevelId
            } else if (this.selectedLevelType == 'department') {
                params.checkedDepartmentId = this.selectedLevelId
            }
            getPortrait(params).then(res => {
                this.portraitData = res.data || {};
            })
            getManagementRecord(otherparams).then(res => {
                this.managementPushData = res.data || {};
            })
            getManagementRectify(otherparams).then(res => {
                this.managementRectifyData = res.data || {};
            })
            getDurationChart(otherparams).then(res => {
                this.durationData = res.data || [];
            })
        },
        getOrganizationSupport() {
            let params = {
                deptId: this.selectedLevelId || '',
                userTypeStr: this.selectedLevelType || '',

            }
            getModuleMetrics(params).then(res => {
                this.moduleMetricsData = res.data && res.data.moduleResults || {};
            })
        }

    }
}
</script>

<style lang="scss" scoped>
.workProfileContainer {
    padding: 20rpx;
}

.page-header {
    margin-bottom: 32rpx;

    .page-title {
        font-size: 48rpx;
        font-weight: bold;
        color: #333;
        margin: 0;
    }
}

.filter-section {
    background-color: #fff;
    position: fixed;
    top: 78rpx;
    left: 0;
    right: 0;
    z-index: 999;
    width: 95%;
    padding: 20rpx 20rpx 20rpx 30rpx;




    .filter-select {
        width: 255rpx !important;

        ::v-deep .uni-stat-box {
            background: transparent !important;
            color: black !important;

            .border-default {
                border: none !important;
            }

            .uni-select__input-text {
                font-weight: bold;
                font-size: 38rpx;
            }

            .uni-select--disabled {
                background-color: #fff !important;
            }

        }
    }

    .kezhang-style {
        ::v-deep .uni-stat-box {
            .uniui-bottom {
                display: none !important;
            }
        }
    }



}

.overview-section {
    margin-top: 80rpx;
    margin-bottom: 20rpx;



    .overview-cards {
        display: flex;
        gap: 32rpx;
        flex-direction: row;

        .overview-card {
            flex: 1;
            background: #fff;
            padding: 28rpx;
            border-top: 6rpx solid;
            box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08);
            border-radius: 32rpx;

            overflow: hidden;

            .card-title {
                position: relative;
                font-size: 28rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 24rpx;
                padding-left: 20rpx;

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 8rpx;
                    height: 28rpx;
                    background-color: var(--card-color);
                    border-radius: 4rpx;
                }
            }

            .stat-item {
                margin-bottom: 16rpx;
                font-size: 24rpx;
                color: #666;

                &:first-child {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #4873E3;
                }
            }

            .stat-value {
                font-size: 28rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 16rpx;
            }
        }
    }
}

.section-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    padding-left: 10rpx;
    margin-bottom: 20rpx;
}

.detail-section {


    .detail-card {
        background: #fff;
        border-radius: 16rpx;
        padding: 32rpx;
        margin-bottom: 32rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);

        .detail-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 24rpx;
        }

        .text-layout {


            .text-item {
                display: flex;
                justify-content: space-between;

                .text-label {
                    font-size: 28rpx;
                    color: #333;

                    margin-bottom: 8rpx;
                }

                .text-value {
                    font-size: 28rpx;

                    color: #666;
                }
            }
        }

        .chart-section {


            .chart-title {
                font-size: 28rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 24rpx;
            }

            .chart-container {
                display: flex;
                align-items: center;

                .chart {
                    flex: 1;
                    height: 400rpx;
                }

                .legend-container {
                    width: 200rpx;
                    margin-left: 32rpx;
                }
            }

            .chart {
                height: 400rpx;
            }

            .rectification-stats {
                .h-line {
                    margin-top: 24rpx;
                }
            }
        }
    }
}
</style>