<template>
    <div class="project-quality-checking">
        <module-one-1-1 label="举牌验收">
            <div class="checking-row1" style="position: relative;height: 310px;overflow: hidden;">
                <div class="checking-chart-nav">
                    <span class="chart-nv-item" @click="showChart1 = true"
                        :class="showChart1 ? 'active' : ''">常规验收</span>
                    <span class="chart-nv-item" @click="showChart1 = false"
                        :class="!showChart1 ? 'active' : ''">隐蔽验收</span>
                </div>
                <div v-if="chart">
                    <enginChart :class="showChart1 ? 'show-chart' : 'hide-chart'" ref="chart1" :height="300">
                    </enginChart>
                    <enginChart :class="!showChart1 ? 'show-chart' : 'hide-chart'" ref="chart2" :height="300">
                    </enginChart>
                </div>
            </div>
        </module-one-1-1>
        <module-one-1-1 label="常规验收" class="scroll checking-row2" style="position: relative;">
            <img src="images/icon2001.png" style="position: absolute;cursor: pointer;right: 12px;top: 12px;"
                @click="doShowCheckingListDlg(1)" v-if="prjs.length>1">
            <div class="checking-group-nav warning-info-title" style="padding-left: 20px;">
                <div class="nav-item" :class="nav1 == it.dictValue ? 'active' : ''"
                    @click="doQueryGroup(it.dictValue, 'a')" v-for="(it, idx) in dict1" :key="it.dictValue">{{
                            it.dictLabel }}</div>
            </div>
            <div v-if="!projectInfo || projectInfo.id == 0">
                <div class="idle-list problemmodify_list" style="padding:0px 10px">
                    <el-table style="width: 100%" ref="wgzp" :row-style="rowStyle" :data="dataList1" height="233"
                        class="el-table">

                        <el-table-column type="index" width="40">
                            <template slot-scope="scope">
                                <div :class="scope.$index < 3 && +scope.row.value > 0 ? 'idle-list-color' : ''">
                                    {{ scope.$index + 1 }} </div>
                            </template></el-table-column>
                        <el-table-column prop="name" label="项目名称" class-name="text-left" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="id" label="验收数量" width="80" align="center">
                            <template slot-scope="scope">
                                <div>{{ scope.row.count }} </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="id" label="占比" width="100" align="center">
                            <template slot-scope="scope">
                                <div>{{ scope.row.percent ? scope.row.percent.toFixed(2) + '%' : '' }} </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div v-else style="padding:0px 2px;">
                <div v-if="dataList1.length == 0" style="text-align: center;padding-top:20px" class="div-no-data">
                    <img src="images/nodata.png" style="width: 120px;">
                    <div style="text-align: center;font-size: 12px;color:#888;">暂无数据</div>
                </div>
                <div v-else class="acceptance-list scroll">
                    <div class="acceptance-item" v-for="(it, idx) in dataList1" :key="idx" style="cursor: pointer;">
                        <div class="row-1">
                            <div class="div-img">
                                <el-image :src="getProfileImage(it.mainImage)"
                                    :preview-src-list="getBigProfileImage(it)" />
                            </div>
                            <div class="div-text" style="width: 65%;" @click="doShowChecking(it)">
                                <div class="row-3">
                                    <div v-if="it.checkResult == '1'" class="sp-lbl">验收合格</div>
                                    <div v-if="it.checkResult == '2'" class="sp-err">验收不合格</div>
                                    <div class="sp-date">{{ it.checkingDate | formatDate }}</div>
                                </div>
                                <div class="row-3">
                                    <span class="sp-label">项目:</span>
                                    <span class="sp-text">{{ it.projectName }}</span>
                                </div>
                                <div class="row-3">
                                    <span class="sp-label">区域:</span>
                                    <span class="sp-text">{{ it.checkWorkingPosition }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="row-5" @click="doShowChecking(it)">
                            验收描述:{{ it.intro }}
                        </div>
                    </div>
                </div>
            </div>
        </module-one-1-1>
        <module-one-1-1 label="隐蔽验收" class="scroll checking-row3" style="position: relative;">
            <img src="images/icon2001.png" style="position: absolute;cursor: pointer;right: 12px;top: 12px;"
                @click="doShowCheckingListDlg(2)"  v-if="prjs.length>1">
            <div class="checking-group-nav warning-info-title" style="padding-left: 20px;">
                <div class="nav-item" :class="nav2 == it.dictValue ? 'active' : ''"
                    @click="doQueryGroup(it.dictValue, 'b')" v-for="(it, idx) in dict2" :key="it.dictValue">{{
                            it.dictLabel }}</div>
            </div>
            <div v-if="!projectInfo || projectInfo.id == 0">
                <div class="idle-list problemmodify_list" style="padding:0px 10px">
                    <el-table style="width: 100%" ref="wgzp" :row-style="rowStyle" :data="dataList2" height="233"
                        class="el-table">

                        <el-table-column type="index" width="40">
                            <template slot-scope="scope">
                                <div :class="scope.$index < 3 && +scope.row.value > 0 ? 'idle-list-color' : ''">
                                    {{ scope.$index + 1 }} </div>
                            </template></el-table-column>
                        <el-table-column prop="name" label="项目名称" class-name="text-left" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="id" label="验收数量" width="80" align="center">
                            <template slot-scope="scope">
                                <div>{{ scope.row.count }} </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="id" label="占比" width="100" align="center">
                            <template slot-scope="scope">
                                <div>{{ scope.row.percent ? scope.row.percent.toFixed(2) + '%' : '' }} </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div v-else style="padding:0px 2px;">
                <div v-if="dataList2.length == 0" style="text-align: center;padding-top:20px" class="div-no-data">
                    <img src="images/nodata.png" style="width: 120px;">
                    <div style="text-align: center;font-size: 12px;color:#888;">暂无数据</div>
                </div>
                <div v-else class="acceptance-list scroll">
                    <div class="acceptance-item" v-for="(it, idx) in dataList2" :key="idx" style="cursor: pointer;">
                        <div class="row-1">
                            <div class="div-img">
                                <el-image :src="getProfileImage(it.mainImage)"
                                    :preview-src-list="getBigProfileImage(it)" />
                            </div>
                            <div class="div-text" style="width: 65%;" @click="doShowChecking(it)">
                                <div class="row-3">
                                    <div v-if="it.checkResult == '1'" class="sp-lbl">验收合格</div>
                                    <div v-if="it.checkResult == '2'" class="sp-err">验收不合格</div>
                                    <div class="sp-date">{{ it.checkingDate | formatDate }}</div>
                                </div>
                                <div class="row-3">
                                    <span class="sp-label">项目:</span>
                                    <span class="sp-text">{{ it.projectName }}</span>
                                </div>
                                <div class="row-3">
                                    <span class="sp-label">区域:</span>
                                    <span class="sp-text">{{ it.checkWorkingPosition }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="row-5" @click="doShowChecking(it)">
                            验收描述:{{ it.intro }}
                        </div>
                    </div>
                </div>
            </div>
        </module-one-1-1>
        <showCheckingDlg ref="checkDlg"></showCheckingDlg>
        <listDlg ref="listDlg"></listDlg>
    </div>
</template>

<script>
import debounce from "lodash.debounce";
import throttle from 'lodash.throttle'
import enginChart from '../engin/enginChart.vue'
import showCheckingDlg from './showCheckingDlg.vue'
import listDlg from './projectCheckingListDlg.vue'
export default {
    name: 'JhbigscreenProjectChecking',
    components: {
        enginChart, showCheckingDlg, listDlg
    },
    data() {
        return {
            rowStyle: {
                color: '#B6CFEF',
                fontSize: '12px',
                height: '32px'
            },
            showChart1: true,
            dept: null,
            projectInfo: null,
            dict1: [],
            dict2: [],
            nav1: 1,
            nav2: 1,
            chart: true,
            dataList1: [],
            dataList2: [],
            prjs:[],
        };
    },
    created() {
        this.$api.dict('project_checking_data_type_lvl2').then(d => {
            let tmps = d || [];
            this.dict1 = tmps.filter(it => it.cssClass == 'a');
            this.dict2 = tmps.filter(it => it.cssClass == 'b');
            if (this.dict1.length > 0) {
                this.nav1 = this.dict1[0].dictValue;
                this.doQueryGroup(this.nav1, "a");
            }
            if (this.dict2.length > 0) {
                this.nav2 = this.dict2[0].dictValue;
                this.doQueryGroup(this.nav2, "b");
            }
        });
    },
    mounted() {
        this.$bus.$on(
            "loadProjects",
            debounce((prjs) => {
                this.prjs = prjs;
            })
        );
        this.$bus.$on("projectChange", throttle((res) => {
            this.projectInfo = res;
            this.loadData();
        }));
        this.$bus.$on("deptChange", throttle((dept) => {
            this.dept = dept;
            this.loadData();
        }));
        if (this.$root.hasInitHeader) {
            this.initMe();
        }
    },

    methods: {
        doShowCheckingListDlg(lvl1) {
            this.$refs.listDlg.showDialog({
                lvl1: lvl1,
                deptId: this.dept?.id || 0,
                projectInfo: this.projectInfo,
                dicts: lvl1 == 1 ? this.dict1 : this.dict2
            });
        },
        doShowChecking(it) {
            this.$refs.checkDlg.showDialog(it);
        },
        // 获取图片映射
        getProfileImage(url) {
            if (url) {
                return '/jhapi' + url + ".min.jpg";
            }
            return url;
        },
        getBigProfileImage(it) {
            if (it.imageUrls) {
                let tmps = it.imageUrls.split(",").filter(d => d).map(it => {
                    return '/jhapi' + it;
                })
                if (tmps.length > 0) {
                    return tmps;
                }
            }
            if (it.mainImage && it.mainImage.trim()) {
                return ['/jhapi' + it.mainImage];
            }
            return [];
        },
        doQueryGroup(nav, t) {
            if (t == 'a') {
                this.nav1 = nav;
            } else {
                this.nav2 = nav;
            }
            if (!this.projectInfo || this.projectInfo.id == 0) {
                this.loadGroupData(nav, t);
            } else {
                this.queryDataList(nav, t);
            }

        },
        queryDataList(nav, t) {            
            let postData = {
                projectId: this.projectInfo.id,                
            }
            if(t=='a'){
                postData.dataTypeLvl1=nav;
            }else{
                postData.dataTypeLvl2=nav;
            }
            this.$api.projectChecking.queryProjectCheckingList(1, 20, postData).then(d => {
                if (t == "a") {
                    this.dataList1 = d.rows || [];
                } else {
                    this.dataList2 = d.rows || [];
                }
            });
        },
        loadGroupData(nav, t) {
            this.$api.projectChecking.groupCheckingByProjectId(nav, this.dept?.id || 0, this.projectInfo?.id || 0).then(d => {
                let tmps = (d.data || []).map(it => {
                    return {
                        name: it.projectName,
                        count: it.id || 0,
                        percent: 0
                    }
                });
                let sum = 0;
                tmps.forEach(it => {
                    sum += it.count;
                })
                if (sum > 0) {
                    tmps.forEach(it => {
                        it.percent = it.count * 100.0 / sum
                    })
                }
                if (t == "a") {
                    this.dataList1 = tmps;
                } else {
                    this.dataList2 = tmps;
                }
            });
        },
        initMe() {
            this.projectInfo = this.$root.project || {};
            this.dept = this.$root.dept || {};
            this.loadData();
        },
        loadData: throttle(function () {
            this.doGetProjectCheckingChart();
            if (this.dict1.length > 0) {
                this.nav1 = this.dict1[0].dictValue;
                this.doQueryGroup(this.nav1, "a");
            }
            if (this.dict2.length > 0) {
                this.nav2 = this.dict2[0].dictValue;
                this.doQueryGroup(this.nav2, "b");
            }
        }),
        initChartData(d) {
            let tmp1 = (d.data || []).filter(it => it.checkType == 'a').map(it => {
                return { name: it.mainImage, value: it.id || 0 };
            });
            let tmp2 = (d.data || []).filter(it => it.checkType == 'b').map(it => {
                return { name: it.mainImage, value: it.id || 0 };
            });
            let opt = {

                tooltip: {
                    trigger: 'item'
                },
                series: [{
                    top: 10,
                    type: 'pie',
                    radius: '60%',
                    data: tmp1,
                    label: {
                        alignTo: 'edge',
                        edgeDistance: "10%",
                        color: "#fff",
                        formatter: '{name|{b}}\n{cnt|{c}}',
                        rich: {
                            cnt: {
                                fontSize: 10,
                                color: '#eee',


                            }
                        }
                    },

                }
                ]
            };
            if (this.$refs.chart1 && this.$refs.chart1.init) {
                this.$refs.chart1.init(opt);
            }
            let opt2 = {
                tooltip: {
                    trigger: 'item'
                },
                series: [{
                    top: 10,
                    type: 'pie',
                    radius: '60%',
                    data: tmp2,
                    label: {
                        alignTo: 'edge',
                        edgeDistance: "10%",
                        color: "#fff",
                        formatter: '{name|{b}}\n{cnt|{c}}',
                        rich: {
                            cnt: {
                                fontSize: 10,
                                color: '#eee'
                            }
                        }
                    },

                }
                ]
            };
            if (this.$refs.chart2 && this.$refs.chart2.init) {
                this.$refs.chart2.init(opt2);
            }
        },
        doGetProjectCheckingChart() {
            this.chart = false;
            this.$api.projectChecking.getProjectCheckingGroupFoChart(this.dept?.id || 0, this.projectInfo?.id || 0).then(d => {
                this.chart = true;
                setTimeout(() => {
                    this.initChartData(d);
                }, 400);
            });
        },
    },
};
</script>

<style lang="less">
.project-quality-checking {
    .checking-row1 {
        position: relative;

        .checking-chart-nav {
            position: absolute;
            width: 100%;
            top: 12px;
            text-align: center;
            z-index: 10;

            .chart-nv-item {
                cursor: pointer;
                display: inline-block;
                padding: 4px 10px;
                font-size: 12px;
                background-color: #fff;
                color: #000;

                &.active {
                    background-color: #68BBC4;
                    color: #fff;
                }

                &:first-child {
                    border-radius: 4px 0px 0px 4px;
                }

                &:last-child {
                    border-radius: 0px 4px 4px 0px;
                }
            }
        }

        .engin-chart1 {
            &.hide-chart {
                left: -100000px;
                top: -100000px;
            }

            &.show-chart {
                position: relative;
                left: unset;
            }

            &:last-child {
                &.show-chart {
                    top: -300px;
                }
            }
        }
    }

    .problemmodify_list {
        &.idle-list {
            .el-table__body .el-table__row {
                line-height: 36px;
                height: 36px !important;
            }

            .el-table td {
                height: 36px;
            }
        }

        .el-table__body-wrapper {
            &::-webkit-scrollbar {
                width: 8px;
                height: 8px;
            }

            &::-webkit-scrollbar-thumb {
                background-color: rgb(1, 169, 255);
                border-radius: 4px;
            }

            tr {
                cursor: pointer;
            }
        }
    }

    .material-seal-list {
        .material-seal-item {
            padding: 8px;
            display: flex;
            border-bottom: solid 1px #fff;
            box-shadow: inset 7px 0px 11px 5px rgb(36 131 167 / 70%);

            &:last-child {
                border-bottom: none;
            }

            .material-seal-left {
                width: 40%;
            }

            .material-seal-right {
                width: 60%;
                padding-left: 12px;
                line-height: 24px;

                img {
                    width: 8px;
                    position: relative;
                    ;
                    top: 3px;
                }

                .sp-lbl {
                    color: aquamarine;
                    white-space: nowrap;
                }

                .div-text {
                    margin-left: 24px;
                }
            }
        }

    }

    .acceptance-list {
        margin-top: 0px;
        max-height: 230px;
        overflow-y: auto;

        .acceptance-item {
            &:first-child {
                margin-top: 0px;
            }

            .row-3 {
                display: flex;
            }
        }
    }
}
</style>