<template>
    <div class="project-engin-index">
        <div class="screen-content">
            <el-row>
                <el-col :span="8">
                    <module-one-1-1 :label="label1" style="position: relative;">
                        <img src="images/icon2001.png"
                            style="position: absolute;cursor: pointer;right: 20px;top: 32px;z-index: 9;"
                            @click="doStandardDlg">
                        <enginChart ref="chart1" :height="300"></enginChart>
                    </module-one-1-1>
                    <module-one-2-1 label="项目标准化管理排名" style="position: relative;">
                        <div class="scroll" style="max-height: 580px;overflow-y: auto;margin-top: 20px;">
                            <table class="tb-list1">
                                <tr>
                                    <th>排名</th>
                                    <th>项目名称</th>
                                    <th>上传数量</th>
                                    <th>上传占比</th>
                                </tr>
                                <tr v-for="(it, idx) in list1" :key="idx" class="tr-cmd" @click="doStandardDlg(it)">
                                    <td>{{ it.no }}</td>
                                    <td>{{ it.name }}</td>
                                    <td>{{ it.value }}</td>
                                    <td>{{ it.percent }}%</td>
                                </tr>
                            </table>
                        </div>
                    </module-one-2-1>
                </el-col>
                <el-col :span="8">
                    <module-one-1-1 :label="label3" :border="1" style="position: relative;">
                        <img src="images/icon2001.png"
                            style="position: absolute;cursor: pointer;right: 20px;top: 32px;z-index: 9;"
                            @click="doStateDlg">
                        <chart-bar :height="280" :optData="chart1Data" :fn="changeChart1" :key="elChart2"></chart-bar>
                    </module-one-1-1>
                    <module-one-1-1 :label="label4" :border="1" class="chart2" style="position: relative;">
                        <div class="scroll" style="margin-top: 30px;max-height: 240px;overflow-y: auto;">
                            <table class="tb-list1">
                                <tr>
                                    <th>排名</th>
                                    <th>申请项目</th>
                                    <th>申请数量</th>
                                    <th>申请占比</th>
                                </tr>
                                <tr v-for="(it, idx) in list2" :key="idx" class="tr-cmd" @click="doStateDlg(it)">
                                    <td>{{ it.no }}</td>
                                    <td>{{ it.name }}</td>
                                    <td>{{ it.value }}</td>
                                    <td>{{ it.percent }}%</td>
                                </tr>
                            </table>
                        </div>
                    </module-one-1-1>
                    <module-one-1-1 label="集团期刊" style="position: relative;">
                        <imageItem :images="periodicalList" v-if="periodicalList.length > 0 && !loading" mode="periodical">
                        </imageItem>
                        <div v-if="periodicalList.length == 0 && !loading" style="text-align: center;margin-top: 40px;"
                            :key="elList4">
                            <img src="images/nodata.png" style="width: 240px;">
                            <div style="text-align: center;">暂无数据</div>
                        </div>
                    </module-one-1-1>
                </el-col>
                <el-col :span="8">
                    <module-one-1-1 :label="label6" style="position: relative;">
                        <enginChart ref="chart3" :height="300"></enginChart>
                    </module-one-1-1>
                    <module-one-1-1 :label="label7" style="position: relative;">
                        <enginChart ref="chart4" :height="300"></enginChart>
                    </module-one-1-1>
                    <module-one-1-1 :label="label8" style="position: relative;">
                        <img src="images/icon2001.png"
                            style="position: absolute;cursor: pointer;right: 20px;top: 32px;z-index: 9;"
                            @click="doUnitDlg">
                        <enginChart ref="chart5" :height="300"></enginChart>
                    </module-one-1-1>
                </el-col>
            </el-row>
        </div>
        <unitDialog ref="unitDlg"></unitDialog>
        <stateDialog ref="stateDlg"></stateDialog>
        <projectStandardDialog ref="standardDlg"></projectStandardDialog>
    </div>
</template>

<script>
import '../components/module/module-one-1-2'
import '../components/module/module-one-2-1'
import '../components/staff-survey-chart'
import '../components/chart-bar'
import BorderBox6 from './components/BorderBox6.vue'
import debounce from 'lodash.debounce'
import imageItem from './engin/enginImageItems.vue'
import unitDialog from './engin/flowDetailByUnitDialog.vue'
import stateDialog from './engin/flowDetailByStateDialog.vue'
import projectStandardDialog from './engin/projectStandardDialog.vue'
import enginChart from './engin/enginChart.vue'
import { tryToJson } from '@/utils/tools'
export default {
    name: 'JhbigscreenProjectEngin',
    components: {BorderBox6,imageItem, unitDialog, stateDialog, enginChart,projectStandardDialog},
    data() {
        return {
            label1: '项目标准化管理',
            label3: '审批进度',
            label4:'项目审批排名',
            label6: '审批总数',
            label7: '已完成审批',
            label8: '待审批',
            elChart2: 0,
            elChart3: 0,
            elList4: 0,
            loading: true,
            index1: 0,
            index2: 0,
            index3: 0,
            index4: 0,
            index5: 0,
            index6: 0,
            list1: [],
            list2: [],
            list3: [],
            list4: [],
            list5: [],
            list6: [],
            chart1Data: [],
            chart2Data: [],
            flowTitle: '待审批',
            flowTotal: 0,
            periodicalList: []
        };
    },

    mounted() {
        this.$bus.$on("loadProjects", debounce(prjs => {
            this.prjs = prjs;
        }));
        this.$bus.$on("projectChange", debounce(res => {
            this.project = res;
            this.loadData();
        }));
        this.$bus.$on("deptChange", debounce(dept => {
            this.dept = dept;
            this.loadData();
        }));
        this.loadPeriodical();
        if (this.$root.hasInitHeader) {
            this.initMe();
        }
    },
    methods: {
        doStandardDlg(it){
            let obj={
                deptId: this.dept?.id || 0,
                projectId: this.project?.id || 0
            };
            if(it){
                obj.projectId=it.id;
                obj.prj=it;
            }
            this.$refs.standardDlg.showDialog(obj);
        },
        initMe() {
            this.project = this.$root.project || {};
            this.dept = this.$root.dept || {};
            this.prjs = this.$root.projects || [];
            this.loadData();
        },
        doStateDlg(it) {            
            let obj={
                deptId: this.dept?.id || 0,
                projectId: this.project?.id || 0
            }
            if(it){
                obj.projectId=it.id;
                obj.prj=it;
            }
            this.$refs.stateDlg.showDialog(obj);
        },
        doUnitDlg() {
            this.$refs.unitDlg.showDialog({
                deptId: this.dept?.id || 0,
                projectId: this.project?.id || 0
            });
        },
        loadPeriodical() {
            this.$api.periodical.getList().then(d => {
                this.periodicalList = (d.data || []).map(it => {
                    it.fileUrl = JSON.parse(it.fileUrl);
                    it.imageFile = it.imageUrl;
                    it.standardDesc = it.name;
                    return it;
                })
            });
        },
        changeChart1(opt) {
            opt.legend = {
                textStyle: {
                    color: "#fff"
                }
            };
            return opt;
        },
        changeChart2(opt) {
            opt.title.left = 135;
            opt.title.top = 20;
            opt.legend = {};
            opt.series[0].center = ["40%", "50%"];
            opt.series[1].center = ["40%", "50%"];
            return opt;
        },
        getProjectId(cb) {
            let func = () => {
                let prjId = this.project?.id || 0;
                if (prjId == 0) {
                    if (!this.prjs || this.prjs.length == 0) {
                        setTimeout(func, 100);
                    } else {
                        cb && cb(this.prjs[1].id);
                    }
                } else {
                    cb && cb(prjId);
                }
            }
            func();
        },
        addBr(s) {
            let out = "";
            for (let i = 0; i < s.length; i++) {
                out += s.charAt(i);
                if ((i + 1) % 3 == 0 && i < s.length - 2) {
                    out += "\n";
                }
            }
            return out;
        },
        showChart1(data) {
            let tmps = data.data || [];
            let datas = tmps.map(d => (d.status || 0) * 1);
            let sum = 0;
            datas.forEach(d => {
                sum += d;
            });
            this.label1 = `项目标准化管理(${sum})`
            let lbls = tmps.map(d => d.dictLabel);
            let opt = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: lbls,
                    axisLabel: {
                        show: true,
                        interval: 0,
                        color: "#fff"
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: datas,
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                            color: "rgba(58, 145, 227, 0.68)"
                        }
                    }
                ]
            }
            this.$refs.chart1.init(opt);
        },
        showList1(res) {
            let tmps = (res.data || []).map((d, i) => {
                return {
                    id: d.projectId,
                    no: i + 1,
                    name: d.standardDesc,
                    value: d.deptId || 0,
                    percent: 0,
                }
            });
            let sum = 0;
            tmps.forEach(d => {
                sum += d.value;
            });
            if (sum > 0) {
                tmps.forEach(d => {
                    d.percent = (d.value * 100.0 / sum).toFixed(2);
                });
            }
            let objs = [];
            let prjIds = this.prjs.map(d => d.id).filter(d => d > 0);
            tmps.forEach(d => {
                if (prjIds.indexOf(d.id) >= 0) {
                    objs.push(d);
                }
            })
            if (this.project?.id != 0) {
                let out = objs.filter(d => d.id == this.project.id);
                if (out.length == 0) {
                    this.list1 = [{ id: this.project.id, name: this.project.projectName, value: 0, percent: 0, no: '-' }];
                } else {
                    this.list1 = out;
                }
            } else {
                this.list1 = objs;
            }
        },
        showChart2(res) {
            let chartData = [['分类', '总计', '审批中', '已完成']];
            this.chartInfo = [];
            let sum = 0;
            (res.data || []).forEach(it => {
                let o = {
                    title: it.taskName,
                    comp: it.assigneeId || 0,
                    uncomp: it.procDefVersion || 0,
                    total: 0
                }
                o.total = o.comp + o.uncomp;
                sum += o.total;
                chartData.push([this.addBr(o.title), o.total, o.uncomp, o.comp])
            })
            this.chart1Data = chartData;
            this.label3 = `审批进度 (${sum})`;
            this.elChart2++;
        },
        showList2(res) {
            let tmps = (res.data || []).map((it, idx) => {
                return {
                    no: idx + 1,
                    id: it.businessKey*1,
                    name: it.businessKeyName,
                    value: it.duration * 1,
                    percent: 0
                }
            });
            let sum = 0;
            tmps.forEach(d => {
                sum += d.value;
            });
            if (sum > 0) {
                tmps.forEach(d => {
                    d.percent = (d.value * 100.0 / sum).toFixed(2);
                });
            }
            this.label4=`项目审批排名 (${sum})`
            let objs = [];
            let prjIds = this.prjs.map(d => d.id).filter(d => d > 0);
            tmps.forEach(d => {
                if (prjIds.indexOf(d.id) >= 0) {
                    objs.push(d);
                }
            })
            if (this.project?.id != 0) {
                let out = objs.filter(d => d.id == this.project.id);
                if (out.length == 0) {
                    this.list2 = [{ id: this.project.id, name: this.project.projectName, value: 0, percent: 0, no: '-' }];
                } else {
                    this.list2 = out;
                }
            } else {
                this.list2 = objs;
            }
        },
        showList3(res) {
            this.periodicalList = (res.data || []).map(it => {
                it.fileUrl = JSON.parse(it.fileUrl);
                it.imageFile = it.imageUrl;
                it.standardDesc = it.name;
                return it;
            })
            this.elList4++;
        },
        showChart3(res) {
            let tmps = (res.data || []).map(d => {
                return {
                    name: d.taskName,
                    value: (d.assigneeId || 0) * 1
                }
            })
            let sum = 0;
            tmps.forEach(it => {
                sum += it.value;
            })
            let opt = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'right',
                    top: 'middle',
                    textStyle: {
                        color: "#fff"
                    }
                },
                series: [
                    {

                        type: 'pie',
                        radius: '50%',
                        data: tmps,
                        label: {
                            color: "#fff"
                        }

                    }
                ]
            };
            this.label6 = `审批总数 (${sum})`
            this.$refs.chart3.init(opt);
        },
        showChart4(res) {
            let tmps = (res.data || []).map(d => {
                return {
                    name: d.taskName,
                    value: (d.assigneeId || 0) * 1
                }
            })
            let sum = 0;
            tmps.forEach(it => {
                sum += it.value;
            })
            this.label7 = `已完成审批 (${sum})`
            let opt = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                color: ['#409eff'],
                xAxis: {
                    type: 'category',
                    data: tmps.map(d => d.name),
                    axisLabel: {
                        color: "#fff"
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: "#fff"
                    }
                },
                series: [
                    {
                        data: tmps.map(d => d.value),
                        type: 'bar'

                    }
                ]
            };
            this.$refs.chart4.init(opt);
        },
        showChart5(res) {
            let tmps = (res.data || []).map(d => {
                return {
                    name: d.taskName,
                    value: (d.assigneeId || 0) * 1,
                    max: 0
                }
            })
            let sum = 0;
            let max = 10;
            tmps.forEach(it => {
                sum += it.value;
                if (it.value > max) {
                    max = it.value;
                }
            })
            max = (max / 5 + 1) * 5;
            tmps.forEach(it => {
                it.max = max;
            });
            this.label8 = `待审批 (${sum})`
            let opt = {
                radar: {
                    indicator: tmps,
                },
                series: [
                    {
                        type: 'radar',                       
                        data: [
                            {
                                value: tmps.map(d=>d.max-5),
                                symbol: 'rect',
                                symbolSize: 12,
                                lineStyle: {
                                    type: 'dashed'
                                },
                                label: {
                                    show: true,
                                    color:"#409eff"
                                }
                            },
                            {
                                value:  tmps.map(d=>d.value),
                                label: {
                                    show: true,
                                    color:"#fff"
                                },
                                areaStyle: {
                                    color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                                        {
                                            color: 'rgba(255, 145, 124, 0.1)',
                                            offset: 0
                                        },
                                        {
                                            color: 'rgba(255, 145, 124, 0.9)',
                                            offset: 1
                                        }
                                    ])
                                }
                            }
                        ]
                    }
                ]
            };
            this.$refs.chart5.init(opt);
        },
        loadData() {
            this.getProjectId(id => {
                let ajaxs = [
                    this.$api.standard.groupByType({ projectId: this.project?.id || 0, deptId: this.dept?.id || 0 }),
                    this.$api.standard.groupByProject(),
                    this.$api.flow.groupByCategory(this.project?.id || 0, this.dept?.id || 0),
                    this.$api.flow.groupByProject(),
                    this.$api.periodical.getList(),
                    this.$api.flow.groupByUnitTotal(this.project?.id || 0, this.dept?.id || 0),
                    this.$api.flow.groupByUnitFinish(this.project?.id || 0, this.dept?.id || 0),
                    this.$api.flow.groupByUnit(this.project?.id || 0, this.dept?.id || 0),
                ];
                this.$api.http.all(ajaxs).then(res => {
                    this.showChart1(res[0]);
                    this.showList1(res[1]);
                    this.showChart2(res[2]);
                    this.showList2(res[3]);
                    this.showList3(res[4]);
                    this.showChart3(res[5]);
                    this.showChart4(res[6]);
                    this.showChart5(res[7]);
                    this.loading = false;
                });
            });
        },
        onItemData(e) {
            if (e.type == 1) {
                location.href = 'index.html'
            }
            this.getProjectOverview(e.id)
        },
    },
};
</script>

<style lang="less" scoped>
.project-engin-index {
    /deep/ .border-1 {
        padding-left: 0px;
    }

    .chart2 {
        /deep/ .chart-gif {
            top: 89px;
            left: 196px;
        }
    }
    /deep/ .tr-cmd{
        cursor: pointer;
        td{
            cursor: pointer;
        }
    }
    .tb-list1 {
        margin: 12px;
        width: calc(100% - 24px);
        border-collapse: collapse;
        border: solid 1px #ffffff52;

        th {
            font-size: 14px;
            border: solid 1px #ffffff52;
            line-height: 60px;
        }

        td {
            font-size: 12px;
            text-align: center;
            border: solid 1px #ffffff52;
            line-height: 40px;
        }
    }
}
</style>
