<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: 12px;z-index: 9;"
                            @click="doStandardDlg(null)">
                        <div style="margin-top:0px;" class="stand-list">
                            <el-col :span="8" v-for="(it, idx) in standList" :key="it.id" style="margin-top:30px;">
                                <div class="equipment-list-min quality-target-index-min"
                                    :class="idx < 3 ? 'item-blue' : 'item-green'">
                                    <div class="czz-number-img "
                                        :class="idx < 3 ? 'czz-number-img-blue' : 'czz-number-img-green'">
                                        <svg :class="idx < 3 ? 'my-svg-icon-blue' : 'my-svg-icon-green'"
                                            style="vertical-align: middle;fill: currentColor;overflow: hidden;"
                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                            <path v-if="idx == 0"
                                                d="M289.6 358.4c0-84.8 57.6-156.8 145.6-188.8 11.2-3.2 38.4 153.6 38.4 153.6V150.4c0-16 11.2-22.4 22.4-22.4h32c11.2 0 22.4 8 22.4 22.4v172.8s27.2-156.8 41.6-153.6c80 27.2 137.6 99.2 137.6 188.8 0 19.2 76.8 16 76.8 112H212.8c0-92.8 76.8-89.6 76.8-112zM128 896c0-49.6 134.4-99.2 252.8-145.6 11.2-3.2 49.6 19.2 22.4-41.6-54.4-54.4-104-76.8-104-195.2h425.6c0 118.4-57.6 137.6-104 195.2-22.4 68.8 16 41.6 19.2 41.6 115.2 41.6 252.8 96 252.8 145.6H128z"
                                                p-id="3861"></path>
                                            <path v-if="idx == 1"
                                                d="M860.2 881.4c-16.9 0-33.9-6.5-46.8-19.4l-80.7-80.7c-56.7 20.9-120.2 7.1-163.2-35.9-43-43-56.9-107.4-35.4-164.3 3.7-10 12.2-17.2 22.6-19.5 10.5-2.2 21.3 1 28.8 8.6l60.5 60.5c2.8 2.8 6.6 4.4 10.6 4.4 4.1 0 7.8-1.5 10.6-4.4l7-7c2.8-2.8 4.4-6.6 4.4-10.6 0-4.1-1.5-7.8-4.4-10.6L613.7 542c-7.6-7.6-10.8-18.3-8.5-28.8 2.2-10.4 9.5-18.8 19.5-22.5 56.8-21.2 121.2-7.3 164 35.6 42.9 42.9 56.8 106.5 35.9 163.2l81.3 81.3c12.6 12.6 19.6 30.2 19 48.2-0.6 17.9-8.7 35-22.2 46.8-12.2 10.4-27.3 15.6-42.5 15.6z m-95.7-139l84.3 84.3c5.9 5.9 15.1 6.4 21 1.3 4.2-3.7 5-8.4 5.1-10.8 0.1-2.5-0.4-7.2-4.3-11.1l-84.9-84.9c-12-12-15.6-29.9-9.2-45.7 15.9-39.2 6.9-83.9-23-113.8-21.3-21.3-50.6-32.1-79.8-30.6l36.1 36.1c12.3 12.3 19 28.6 19 46s-6.8 33.7-19 46l-7 7c-12.3 12.3-28.6 19-46 19s-33.7-6.8-46-19l-36.4-36.4c-1.7 29.4 9.1 58.9 30.6 80.3 29.9 29.9 74.6 39 113.8 23 15.8-6.4 33.8-2.8 45.7 9.2v0.1z m56.4-56.7z m-270.8-80.2s0 0.1 0 0zM266.1 648.8c-13.8 0-25 11.2-25 25s11.2 25 25 25h106.3c13.8 0 25-11.2 25-25s-11.2-25-25-25H266.1zM487.4 535.6c0-13.8-11.2-25-25-25H266.1c-13.8 0-25 11.2-25 25s11.2 25 25 25h196.3c13.8 0 25-11.2 25-25zM898.9 376.4c0.5-5.2-0.6-10.5-3.3-15.2L766.2 142c-4.5-7.6-12.7-12.3-21.5-12.3H287.4c-8.9 0-17.1 4.7-21.6 12.4l-129.3 221c-1.8 3.1-2.9 6.4-3.3 9.8-1 3.4-1.6 6.9-1.6 10.6V817c0 20.4 16.6 37 37 37h393.5c13.8 0 25-10.2 25-24v-2c0-13.8-11.2-24-25-24H181.6V400.7l668-1.7v48.2c0 13.8 11.2 25 25 25s25-11.2 25-25v-63.6c0-2.5-0.2-4.9-0.7-7.2z m-411.3-29.8H204.1l97.6-166.8h185.9v166.8z m50 0V179.7h192.8l98.5 166.8H537.6z">
                                            </path>
                                            <path v-if="idx == 2"
                                                d="M512 0l23.722667 24.32c0.853333 0.853333 105.216 102.784 342.144 102.784 9.045333 0 18.261333-0.128 27.605333-0.426667L938.666667 125.568V587.52c0 120.917333-43.008 297.301333-415.061334 432.256L512 1024l-11.605333-4.224C128.341333 884.821333 85.333333 708.437333 85.333333 587.52V125.610667l33.194667 1.024C377.173333 134.912 487.296 25.386667 488.32 24.32l23.722667-24.32z m306.432 315.306667c3.114667-57.813333-45.44-41.301333-45.44-41.301334l-302.592 334.677334c-9.301333 5.248-17.578667 1.834667-17.578667 1.834666l-167.253333-88.234666c-40.192 12.629333-31.829333 53.333333-31.829333 53.333333s162.048 154.922667 186.026666 175.914667c19.712 9.813333 37.973333-0.512 42.794667-3.669334l1.237333-0.853333s81.792-104.96 164.736-211.754667l17.194667-22.101333a22773.632 22773.632 0 0 0 152.704-197.802667z">
                                            </path>
                                            <path v-if="idx == 3"
                                                d="M885.312 773.312 138.688 773.312C90.432 773.312 64 745.6 64 698.752L64 213.312c0-46.848 26.432-74.688 74.688-74.688l746.688 0C933.568 138.688 960 166.528 960 213.312l0 485.376C960 745.6 933.568 773.312 885.312 773.312zM885.312 213.312 138.688 213.312l0 485.312 746.688 0L885.376 213.312zM472.384 590.272 446.016 563.84l-105.6-105.6 52.8-52.8 79.168 79.168 158.4-158.4 52.8 52.8L498.816 563.84 472.384 590.272zM307.2 828.736l83.2 0 9.6-18.048 224 0 9.6 18.048 83.2 0c16.128 0 29.184 12.672 29.184 28.288 0 15.616-13.056 28.288-29.184 28.288L307.2 885.312c-16.128 0-29.12-12.672-29.12-28.288C278.08 841.408 291.072 828.736 307.2 828.736z">
                                            </path>
                                            <path v-if="idx == 4"
                                                d="M460.71 265.82c54.6 0 98.87-44.26 98.87-98.87s-44.26-98.87-98.87-98.87c-54.6 0-98.87 44.26-98.87 98.87s44.27 98.87 98.87 98.87zM350.47 665.24a1274.314 1274.314 0 0 0-168.07-69.7c-10.35-2.53-20.84 3.59-23.73 13.84-14.34 54.38-74.64 253.59-92.93 319.34-3 10.5 3.07 21.45 13.57 24.45 1.86 0.53 3.78 0.79 5.71 0.76h34.6c8.09 0.12 15.39-4.81 18.29-12.36 20.27-49.43 79.59-225.91 88.48-225.91 59.38 9.4 107.22 53.72 121.11 112.21a275.243 275.243 0 0 1-35.59 96.39c-5.19 9.92-1.36 22.16 8.55 27.36 2.71 1.42 5.7 2.2 8.75 2.3h40.04c7.18 0.29 13.9-3.55 17.3-9.89a274.78 274.78 0 0 0 49.43-120.62c-6.37-61.97-37.14-118.88-85.51-158.17z m605.56 246.18L788.94 594.55c-27.19-49.43-84.04-13.84-111.22 33.12L605.55 729.5l-38.56-36.58c0.96-5.56 0.96-11.25 0-16.81-12.36-71.68-67.23-316.86-107.27-356.41l-4.45-2.97-124.07-65.74a37.598 37.598 0 0 0-20.76-4.45c-43.01 0-141.87 16.31-173.51 21.26a20.786 20.786 0 0 0-14.34 10.38c-10.38 19.77-39.05 68.22-55.36 105.79-6.52 14.92-2.96 32.33 8.9 43.5l21.26 17.3 74.15 57.34c6.56 5.14 9.3 13.77 6.92 21.75-6.92 20.76 0 5.44-3.46 15.32-2.43 9.89 2.86 20.05 12.36 23.73 34.11 12.36 125.06 60.31 160.16 70.19 9.89 2.47 7.91-7.41 11.86-16.81l-3.95-4.94 218 166.59-87 148.3c-5.46 9.46-2.22 21.55 7.24 27.01a19.75 19.75 0 0 0 10.07 2.65h426.6c16.38 0.01 29.67-13.26 29.68-29.64a29.947 29.947 0 0 0-3.99-14.84zM245 348.99a20.24 20.24 0 0 1-2.29 8.29v0.99a517.308 517.308 0 0 0-29.66 67.23c-4.03 10.15-15.52 15.12-25.67 11.09-2.41-0.95-4.6-2.37-6.46-4.17l-40.04-37.07a282.53 282.53 0 0 1 25.21-57.34 20.26 20.26 0 0 1 18.29-10.38h41.52c11.18 0.61 19.73 10.18 19.1 21.36z m134.64 201.57l26.69-65.75c3.41-10.37 14.58-16.02 24.96-12.61a19.756 19.756 0 0 1 12.61 12.61c15.28 55.99 33.6 111.11 54.87 165.11l-119.13-99.36z">
                                            </path>
                                            <path v-if="idx == 5"
                                                d="M681.575 687.035v-92.042l-120.122 214.66L681.575 1024v-91.73h120.122a81.745 81.745 0 0 0 72.385-42.744l148.826-264.892a120.621 120.621 0 0 1-105.77 62.4H681.576z m68.017-612.778a93.352 93.352 0 0 0-164.427 0.312c0 0.312-27.456 48.985-55.224 98.906l55.848 99.841-78 44.929h240.867L869.09 103.898l-77.065 45.864s-30.265-53.977-42.433-75.505z m253.66 538.209a99.654 99.654 0 0 0-0.624-97.97S943.035 408.414 895.61 323.861L689.063 446.48l120.434 214.66h111.074a94.475 94.475 0 0 0 82.681-48.673z m-718.547-49.921l77.377 46.177-120.434-214.348H0.78l77.378 45.553-59.905 107.018a86.706 86.706 0 0 0-0.624 85.8l148.826 264.893a128.234 128.234 0 0 1 0.312-125.426l117.938-209.667z m-97.97 323.549a93.976 93.976 0 0 0 82.37 48.673H483.14V689.53H242.584c-28.08 49.92-55.537 98.905-55.537 98.905a99.062 99.062 0 0 0-0.312 97.658z m-13.728-619.642l207.171 123.242S535.868 112.322 564.261 62.09A118.156 118.156 0 0 1 667.847 0h-297.34a84.585 84.585 0 0 0-72.074 43.369C272.225 87.36 173.007 266.452 173.007 266.452z">
                                            </path>
                                        </svg>
                                    </div>
                                    <div class="equipment-list-data">
                                        <div style="text-align: center;">
                                            <span>{{ it.value }}</span><span style="font-size: 12px">条</span>
                                        </div>
                                        <p style="font-size: 12px">{{ it.text }}</p>
                                    </div>
                                </div>
                            </el-col>
                        </div>
                    </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" style="position: relative;">
                        <div class="mag-list quality-table special-table scheduled-alerts-list">
                            <el-table :data="dataList3"
                                style="width: 100%;background: transparent;height: calc(100% - 40px);margin-top: 10px;"
                                height="200">
                                <el-table-column prop="nodeText" label="名称">
                                    <template slot-scope="{row}">
                                        {{ row.mag }}
                                    </template>
                                </el-table-column>
                                <el-table-column v-for="(it, idx) in dataListTitles" :label="it" :key="idx">
                                    <template slot-scope="{row}">
                                        <span style="cursor: pointer;" @click="showMagDlg(row, idx)">{{
                    row.list[idx].cnt
                }}</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </module-one-1-1>
                    <module-one-2-1 label="期刊上传排名" style="position: relative;">
                        <el-select v-model="selMag" placeholder="请选择"
                            style="position: absolute;top: 8px;right: 12px;width: 160px;" @change="magChange">
                            <el-option v-for="item in magList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                        <div class="scroll mag-ord-list" style="max-height: calc(100% - 50px);overflow-y: auto;">
                            <div v-if="magOrdList.length == 0 && !loading" style="text-align: center;margin-top: 40px;">
                                <img src="images/nodata.png" style="width: 240px;">
                                <div style="text-align: center;">暂无数据</div>
                            </div>
                            <table v-else>
                                <tr v-for="(it, idx) in magOrdList" :key="idx">
                                    <td width="50%" style="text-align: right;padding-right:2px;">{{ it.title }}</td>
                                    <td>
                                        <div class="mag-ord-line" :style="it.ord">
                                        </div>
                                        <span style="color:#63f8bc;display:inline-block;margin-left:2px;">{{ it.id
                                            }}篇</span>
                                    </td>
                                </tr>
                            </table>

                        </div>

                    </module-one-2-1>
                </el-col>
                <el-col :span="8">
                    <module-one-3-1 label="工程管理委员会" style="position: relative;">
                        <div style="position: absolute;right:0px;top:4px;" v-if="1 == 1">
                            <el-date-picker class="bg-date-picker" v-model="selDate" type="daterange"
                                popper-class="bg-date-picker-pop" :editable="false" @change="dtChange"
                                :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期"></el-date-picker>
                        </div>
                        <el-select v-model="selComm" placeholder="请选择" v-if="1 == 2"
                            style="position: absolute;top: 8px;right: 12px;width: 160px;" @change="commChange">
                            <el-option v-for="item in commList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                        <div class="comm-row1">
                            <i class="el-icon-caret-right" style="color: #63f8bc;font-size:24px;"></i>
                            <span style="display:inline-block;margin-right:4px;">合计</span>
                            <people-number :number="((commTotal * 1.0 || 0).toFixed(2)) || '0.00'"
                                unit="万元"></people-number>

                        </div>
                        <div class="comm-row2" style="overflow: hidden;margin-bottom: 40px;">
                            <el-col :span="12" v-for="(it, idx) in commGroupList"
                                :class="idx % 2 == 1 ? 'is-split' : ''" :key="idx">
                                <div class="equipment-list-min quality-target-index-min item-blue">
                                    <div class="czz-number-img czz-number-img-green">
                                        <svg class="my-svg-icon-green"
                                            style="vertical-align: middle;fill: currentColor;overflow: hidden;"
                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M801.69624 87.464222a35.722517 35.722517 0 0 0-40.007036 59.205501A440.418517 440.418517 0 0 1 955.966207 512c0 242.921302-197.633665 440.554966-440.554966 440.554966S74.856275 754.921302 74.856275 512a440.418517 440.418517 0 0 1 194.263358-365.330277 35.736162 35.736162 0 0 0-39.99339-59.205501A511.80897 511.80897 0 0 0 3.411241 512c0 282.314314 229.672041 512 512 512 282.314314 0 512-229.685686 512-512A511.80897 511.80897 0 0 0 801.69624 87.464222zM387.926339 0a35.722517 35.722517 0 0 0-35.722517 35.722517v34.849239a35.722517 35.722517 0 1 0 71.445033 0V35.722517A35.749807 35.749807 0 0 0 387.926339 0zM642.896144 0a35.722517 35.722517 0 0 0-35.722517 35.722517v34.849239a35.722517 35.722517 0 1 0 71.445034 0V35.722517A35.722517 35.722517 0 0 0 642.896144 0zM416.512539 186.444794c12.826267 20.644831 48.002985 55.562295 98.530288 55.562295 50.268049 0 85.895051-34.671855 99.007862-55.152946a35.736162 35.736162 0 0 0-60.160648-38.547025c-0.13645 0.231964-15.296005 22.241292-38.847214 22.241292-22.882605 0-37.100658-20.726701-38.055806-22.159422a35.722517 35.722517 0 0 0-60.474482 38.055806zM336.798657 602.04312a35.722517 35.722517 0 1 0 0 71.445034h142.876422v112.366282a35.722517 35.722517 0 1 0 71.445034 0v-112.366282h142.876422a35.722517 35.722517 0 1 0 0-71.445034h-142.862777v-95.255496h142.876422a35.722517 35.722517 0 1 0 0-71.445034h-92.362764l77.817232-77.817232a35.708872 35.708872 0 1 0-50.513658-50.513659l-113.539749 113.539749-113.539749-113.539749a35.722517 35.722517 0 0 0-50.513658 50.513659l77.817232 77.817232h-92.376409a35.722517 35.722517 0 1 0 0 71.445034h142.876422v95.255496H336.798657z">
                                            </path>
                                        </svg>
                                    </div>
                                    <div class="equipment-list-data">
                                        <div style="text-align: center;">
                                            <span style="font-size:20px;">{{ ((it.id * 1.0 || 0).toFixed(2)) || '0.00'
                                                }}</span>
                                        </div>
                                        <p style="font-size: 12px;text-align: center;">{{ it.costName }}(万元)</p>
                                    </div>
                                </div>
                            </el-col>
                        </div>


                        <div class="analyse_title_blue analyse-title" style="margin-left: 12px;position:relative;">
                            <div>
                                <svg class="icon-money"
                                    style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                    p-id="27211">
                                    <path
                                        d="M703.146667 977.92H34.133333V728.746667h122.88c20.48-20.48 80.213333-75.093333 143.36-88.746667H614.4c39.253333 0 69.973333 32.426667 69.973333 69.973333 0 39.253333-32.426667 69.973333-69.973333 69.973334h-131.413333c-1.706667 0-3.413333 1.706667-3.413334 3.413333s0 1.706667 1.706667 3.413333c0 0 1.706667 1.706667 3.413333 1.706667h221.866667l167.253333-136.533333c30.72-25.6 75.093333-20.48 100.693334 10.24 11.946667 15.36 17.066667 34.133333 15.36 52.906666-1.706667 18.773333-10.24 35.84-25.6 47.786667L703.146667 977.92zM85.333333 926.72h599.04l245.76-203.093333c3.413333-3.413333 6.826667-8.533333 6.826667-13.653334 0-5.12-1.706667-10.24-5.12-15.36-6.826667-8.533333-20.48-10.24-29.013333-1.706666l-182.613334 148.48h-238.933333c-15.36 0-29.013333-5.12-39.253333-15.36-10.24-10.24-17.066667-23.893333-17.066667-39.253334 0-30.72 25.6-54.613333 54.613333-54.613333H614.4c10.24 0 18.773333-8.533333 18.773333-18.773333s-8.533333-18.773333-18.773333-18.773334H310.613333c-51.2 13.653333-105.813333 63.146667-122.88 81.92l-6.826666 8.533334H85.333333v141.653333zM512 314.026667c-6.826667 0-15.36-3.413333-20.48-8.533334L426.666667 226.986667c-8.533333-10.24-6.826667-27.306667 3.413333-35.84s27.306667-6.826667 35.84 3.413333l46.08 54.613333 46.08-54.613333c8.533333-10.24 25.6-11.946667 35.84-3.413333 10.24 8.533333 11.946667 25.6 3.413333 35.84l-66.56 78.506666c-3.413333 6.826667-11.946667 8.533333-18.773333 8.533334zM590.506667 394.24h-158.72c-13.653333 0-25.6-11.946667-25.6-25.6s11.946667-25.6 25.6-25.6h158.72c13.653333 0 25.6 11.946667 25.6 25.6s-10.24 25.6-25.6 25.6z">
                                    </path>
                                    <path
                                        d="M590.506667 314.026667h-158.72c-13.653333 0-25.6-11.946667-25.6-25.6s11.946667-25.6 25.6-25.6h158.72c13.653333 0 25.6 11.946667 25.6 25.6s-10.24 25.6-25.6 25.6z">
                                    </path>
                                    <path
                                        d="M512 472.746667c-13.653333 0-25.6-11.946667-25.6-25.6v-158.72c0-13.653333 11.946667-25.6 25.6-25.6s25.6 11.946667 25.6 25.6v158.72c0 13.653333-11.946667 25.6-25.6 25.6z">
                                    </path>
                                    <path
                                        d="M512 576.853333c-136.533333 0-247.466667-110.933333-247.466667-247.466666S375.466667 81.92 512 81.92s247.466667 110.933333 247.466667 247.466667S648.533333 576.853333 512 576.853333z m0-443.733333c-107.52 0-196.266667 88.746667-196.266667 196.266667S404.48 525.653333 512 525.653333s196.266667-88.746667 196.266667-196.266666S619.52 133.12 512 133.12z">
                                    </path>
                                </svg>
                                <span style="display:inline-block;margin-left:12px;">付款明细</span>
                            </div>
                        </div>
                        <div style="height: calc(100% - 410px);">
                            <div class="warning-info-title" style="padding-left: 8px;font-size:14px;">
                                <div v-for="(it, idx) in workTypeList" :class="selType == it.value ? 'active' : ''"
                                    @click="getCommList(it)" :key="idx">{{ it.text }}</div>


                            </div>
                            <div class="mag-list quality-table special-table scheduled-alerts-list">
                                <el-table :data="commDetailList"
                                    style="width: 100%;background: transparent;height: calc(100% - 40px);margin-top: 10px;"
                                    height="200">
                                    <el-table-column prop="nodeText" label="经要序号">
                                        <template slot-scope="{row}">
                                            {{ row.updateBy }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="remark" label="项目名称" />
                                    <el-table-column prop="costName" label="成本名称" />
                                    <el-table-column prop="money" label="申报金额(万元)">
                                        <template slot-scope="{row}">
                                            {{ (row.money||0).toFixed(2) }}
                                        </template>
                                    </el-table-column>                                   
                                </el-table>
                            </div>
                        </div>
                    </module-one-3-1>
                </el-col>
            </el-row>
        </div>
        <projectStandardDialog ref="standardDlg"></projectStandardDialog>
        <magListDialog ref="magListDlg"></magListDialog>
    </div>
</template>

<script>
import '../components/module/module-one-1-2'
import '../components/module/module-one-2-1'
import '../components/module/module-one-3-1'
import '../components/staff-survey-chart'
import '../components/chart-bar'
import magListDialog from './engin/magListDialog.vue'
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'
import ListByCategory from './engin/flowListByCategory.vue'
export default {
    name: 'JhbigscreenProjectEngin',
    components: { BorderBox6, imageItem, unitDialog, stateDialog, enginChart, projectStandardDialog, ListByCategory, magListDialog },
    data() {
        return {
            label1: '项目标准化管理',
            label3: '集团期刊',
            loading: true,
            list1: [],
            standList: [],
            dataList3: [],
            dataListTitles: [],
            magList: [],
            selMag: "",
            magOrdList: '',
            commList: [],
            selComm: "",
            commTotal: "",
            commGroupList: [],
            workTypeList: [],
            selType: '',
            commDetailList: [],
            selDate: [],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        };
    },

    mounted() {
        let dt1 = this.$dt((+new Date()) - 30 * 24 * 3600 * 1000);
        let dt2 = this.$dt(new Date());
        this.selDate = [dt1, dt2];
        this.$bus.$on("projectChange", debounce(res => {
            this.project = res;
            this.prjs = this.$root.projects || this.prjs || [];
            this.dept = this.$root.dept || this.dept;
            this.loadData();
            this.getCommList({ value: this.selType })
        }));
        if (this.$root.hasInitHeader) {
            this.initMe();
        }
        this.$api.engin.magList().then(d => {
            let tmps = d.rows || [];
            this.magList = [{ id: 0, name: "全部" }, ...tmps];
            this.selMag = 0;
        });
        this.$api.engin.committeeList().then(d => {
            let tmps = d.rows || [];
            this.commList = [{ id: 0, name: "全部" }, ...tmps];
            this.selComm = 0;
        });
        this.$api.dict("project_working_type").then(d => {
            let tmps = (d || []).map(it => {
                return {
                    value: it.dictValue,
                    text: it.dictLabel,
                }
            });
            this.workTypeList = tmps;
            this.selType = tmps[0].value;
            this.getCommList(tmps[0]);
        });
    },
    methods: {
        dtChange() {
            this.commChange();
            this.getCommList({ value: this.selType })
        },
        showMagDlg(row, idx) {
            this.$refs.magListDlg.showDialog({ row: row, idx: idx });
        },
        getCommList(it) {
            this.selType = it.value;
            let postData={
                workingType: this.selType,
                committeeId: this.selComm,
                projectId: this.project?.id || 0, deptId: this.dept?.id || 0
            };
            if (this.selDate.length > 0) {
                postData.createTime = +this.$dt(this.selDate[0]).$d;
            }
            if (this.selDate.length > 1) {
                postData.updateTime = +this.$dt(this.selDate[1]).$d;
            }
            this.$api.engin.selectByWorkingType(postData).then(d => {
                let tmps = d.data || [];
                this.commDetailList = tmps;
            })
        },
        commChange() {
            let postData = {
                committeeId: this.selComm,
                projectId: this.project?.id || 0, deptId: this.dept?.id || 0
            };
            if (this.selDate.length > 0) {
                postData.createTime = +this.$dt(this.selDate[0]).$d;
            }
            if (this.selDate.length > 1) {
                postData.updateTime = +this.$dt(this.selDate[1]).$d;
            }
            this.$api.engin.committeeSumGroupByType(postData)
                .then(d => {
                    this.showCommSumInfo(d);
                    this.selType = this.workTypeList[0];
                    this.getCommList(this.workTypeList[0]);
                });
        },
        numberWithCommas(x) {
            x = x.toString();
            var pattern = /(-?\d+)(\d{3})/;
            while (pattern.test(x))
                x = x.replace(pattern, "$1,$2");
            return x;
        },
        magChange() {
            this.$api.engin.groupByMag(this.selMag).then(d => {
                this.showMagOrder(d);
            });
        },
        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();
        },
        getProjectId(cb) {
            let func = () => {
                let prjId = this.project?.id || 0;
                if (prjId == 0) {
                    if (!this.prjs || this.prjs.length == 0) {
                        setTimeout(func, 100);
                    } else {
                        if (this.prjs.length > 1) {
                            cb && cb(this.prjs[1].id);
                        } else {
                            cb(0);
                        }
                    }
                } else {
                    cb && cb(prjId);
                }
            }
            func();
        },
        showChart1(data) {
            let tmps = data.data || [];
            let datas = tmps.map(d => (d.status || 0) * 1);
            let sum = 0;
            let objs = [
                { id: 1, text: '现场管理标准化', value: 0 },
                { id: 2, text: '作业标准化', value: 0 },
                { id: 3, text: '安全技术标准化', value: 0 },
                { id: 4, text: '文明施工标准化', value: 0 },
                { id: 5, text: '设备管理标准化', value: 0 },
                { id: 6, text: '环境保护标准化', value: 0 }
            ];
            datas.forEach(d => {
                sum += d;
            });
            this.label1 = `项目标准化管理(${sum})`
            this.standList = objs.map(d => {
                let o = tmps.filter(it => it.dictLabel == d.id);
                d.value = o.length > 0 ? (o[0].status || 0) * 1 : 0;
                return d;
            })

            tmps.map(d => {
                return {
                    id: d.dictValue,
                    text: d.dictLabel,
                    value: (d.status || 0) * 1
                };
            });
        },
        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;
            }
        },

        loadData() {
            if (this.$refs.listByCat) {
                this.$refs.listByCat.reLoad()
            }
            let postData = {
                committeeId: this.selComm,
                projectId: this.project?.id || 0, deptId: this.dept?.id || 0
            };
            if (this.selDate.length > 0) {
                postData.createTime = +this.$dt(this.selDate[0]).$d;
            }
            if (this.selDate.length > 1) {
                postData.updateTime = +this.$dt(this.selDate[1]).$d;
            }
            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.engin.magGroupByTopic(),
                    this.$api.engin.groupByMag(this.selMag),                   
                    this.$api.engin.committeeSumGroupByType(postData)
                ];
                this.$api.http.all(ajaxs).then(res => {
                    this.showChart1(res[0]);
                    this.showList1(res[1]);
                    this.showMagGroup(res[2]);
                    this.showMagOrder(res[3]);
                    this.showCommSumInfo(res[4]);
                    this.loading = false;
                });
            });
        },
        showCommSumInfo(data) {
            this.commTotal = data.total;
            this.commGroupList = data.data;
        },
        showMagOrder(data) {
            this.magOrdList = data;
        },
        showMagGroup(data) {
            this.label3 = `集团期刊(${data.total})`
            this.dataList3 = data.datas;
            this.dataListTitles = data.titles;
        },
    },
};
</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;
        }
    }

    .my-svg-icon-blue,
    .my-svg-icon-green {
        width: 28px;
        height: 28px;
        position: relative;
        top: -10px;
    }

    .my-svg-icon-green * {
        fill: #63f8bc;
    }

    .my-svg-icon-blue *,
    .my-svg-icon * {
        fill: #389de3;
    }

    .stand-list {
        .item-green {
            .equipment-list-data {
                span {
                    color: #63f8bc;
                }

                color: #63f8bc;
            }
        }
    }

    .mag-list {
        height: 100%;
        font-size: 12px;

        /deep/.el-table {
            height: 100% !important;

            th.el-table__cell>.cell {
                padding: 0px;
            }

            .el-table__body-wrapper {
                max-height: calc(100% - 90px) !important;
                overflow-y: auto !important;

                &::-webkit-scrollbar {
                    width: 8px;
                    height: 8px;
                }

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

    .mag-ord-list {
        margin: 20px;
        line-height: 30px;

        .mag-ord-line {
            display: inline-block;
            height: 12px;
            background-color: #63f8bc;
            border-radius: 4px;
        }
    }

    .comm-row1 {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /deep/ .el-col.is-split {
        position: relative;

        &::before {
            content: "";
            display: inline-block;
            height: 80%;
            width: 1px;
            position: absolute;
            background-color: #389de37a;
            top: 10%;
        }
    }

    .icon-money {
        width: 20px;
        height: 20px;
    }
}
</style>
