<template>
    <MyDialog v-if="show" v-model="show" width="1600px" height="850px" :class="'font-size-' + fontSize"
        class="project-info-dlg">
        <template slot="title">
            <div style="display: flex; align-items: center;justify-content: space-between;">
                <div :key="elKey" class="header-title">
                    {{ prj.projectName }} - 项目简介
                </div>
                <div v-if="1 == 2">
                    <div class="head-title-select" @mouseleave="hideScreenUlSel2">
                        <div class="head-select">
                            <input type="text" :value="selProject" @click="showScreenUlSel2" placeholder="请选择项目" readonly>
                        </div>
                        <el-collapse-transition>
                            <ul class="header-screen-ul" v-show="showSel2" ref="selectUl">
                                <li v-for="item in prjs" @click="setScreenLiSel2(item)" :title="item.projectName">{{
                                    item.projectName }}
                                </li>
                            </ul>
                        </el-collapse-transition>
                    </div>
                </div>
            </div>

        </template>

        <div class="font-size-tools">
            <i class="set-font-size font-size2" @click="fontSize = 2" :class="fontSize == 2 ? 'active' : ''">
                <svg class="icon  svg-icon"
                    style="width: 32px !important;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="3686">
                    <path
                        d="M839 875H735.3l-74.1-198.7H358.6L288.7 875H185l276.8-726h100.4L839 875zM632.1 594.3L522.3 292.4c-3.4-9.7-7.2-26.6-11.3-50.6h-2.3c-3.4 21.9-7.4 38.7-11.7 50.6L388.1 594.3h244z"
                        fill="#fff" p-id="3687"></path>
                </svg>
            </i>
            <i class="set-font-size font-size1" @click="fontSize = 1" :class="fontSize == 1 ? 'active' : ''">
                <svg class="icon  svg-icon"
                    style="width: 32px !important;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="3686">
                    <path
                        d="M839 875H735.3l-74.1-198.7H358.6L288.7 875H185l276.8-726h100.4L839 875zM632.1 594.3L522.3 292.4c-3.4-9.7-7.2-26.6-11.3-50.6h-2.3c-3.4 21.9-7.4 38.7-11.7 50.6L388.1 594.3h244z"
                        fill="#fff" p-id="3687"></path>
                </svg>
            </i>
            <i class="set-font-size font-size0" @click="fontSize = 0" :class="fontSize == 0 ? 'active' : ''">
                <svg class="icon  svg-icon"
                    style="width: 32px !important;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="3686">
                    <path
                        d="M839 875H735.3l-74.1-198.7H358.6L288.7 875H185l276.8-726h100.4L839 875zM632.1 594.3L522.3 292.4c-3.4-9.7-7.2-26.6-11.3-50.6h-2.3c-3.4 21.9-7.4 38.7-11.7 50.6L388.1 594.3h244z"
                        fill="#fff" p-id="3687"></path>
                </svg>
            </i>
        </div>
        <div class="modify-btn btn-left" v-if="1 == 2">
            <svg class="my-svg-icon-aaa" @click="modifyLeftBtn"
                style="cursor:pointer; width: 3em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4967">
                <path
                    d="M729.6 931.2l-416-425.6 416-416c9.6-9.6 9.6-25.6 0-35.2-9.6-9.6-25.6-9.6-35.2 0l-432 435.2c-9.6 9.6-9.6 25.6 0 35.2l432 441.6c9.6 9.6 25.6 9.6 35.2 0C739.2 956.8 739.2 940.8 729.6 931.2z"
                    p-id="4968"></path>
            </svg>
        </div>
        <div class="modify-btn btn-right" v-if="1 == 2">
            <svg class="my-svg-icon-aaa" @click="modifyRightBtn"
                style="cursor:pointer; width: 3em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4997">
                <path
                    d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z"
                    p-id="4998"></path>
            </svg>
        </div>

        <div class="main-content scroll" style="max-height: 780px;overflow-y: auto;">
            <el-row class="data-item">
                <el-col :span="12" class="data-row">
                    <img src="images/title_icon.png"><span class="sp-lbl">项目名称:</span>
                    <div class="div-text">{{ prj.projectName }}</div>
                </el-col>
                <el-col :span="12" class="data-row">
                    <img src="images/title_icon.png"><span class="sp-lbl">项目地址:</span>
                    <div class="div-text">{{ prj.projectAddress }}</div>
                </el-col>
            </el-row>

            <el-row class="data-item">
                <el-col :span="6" class="data-row">
                    <img src="images/title_icon.png"><span class="sp-lbl">责任主体:</span>
                    <div class="div-text">{{ prj.deptName }}</div>
                </el-col>
                <el-col :span="6" class="data-row">
                    <img src="images/title_icon.png"><span class="sp-lbl">重要等级:</span>
                    <div class="div-text">{{ getProjectWeight(prj.weightType) }}</div>
                </el-col>
                <el-col :span="6" class="data-row">
                    <img src="images/title_icon.png"><span class="sp-lbl">甲方代表:</span>
                    <div class="div-text">{{ getPrjDeptName('甲方代表') }}</div>
                </el-col>
                <el-col :span="6" class="data-row">
                    <img src="images/title_icon.png"><span class="sp-lbl">项目分类:</span>
                    <div class="div-text">{{ getProjectCategory(prj.projectType) }}</div>
                </el-col>
            </el-row>

            <el-row class="data-item">
                <el-col :span="6" class="data-row">
                    <img src="images/title_icon.png"><span class="sp-lbl">项目等级:</span>
                    <div class="div-text">{{ getProjectLevel(prj.projiectLevel) }}</div>
                </el-col>
                <el-col :span="6" class="data-row">
                    <img src="images/title_icon.png"><span class="sp-lbl">建筑面积:</span>
                    <div class="div-text">{{ prj.floorArea ? prj.floorArea + '平方米' : '' }}</div>
                </el-col>
                <el-col :span="6" class="data-row">
                    <img src="images/title_icon.png"><span class="sp-lbl">工程期限:</span>
                    <div class="div-text">{{ prj.projectTimeLimit ? prj.projectTimeLimit + '天' : '' }}</div>
                </el-col>
                <el-col :span="6" class="data-row">
                    <img src="images/title_icon.png"><span class="sp-lbl">项目建设类型:</span>
                    <div class="div-text">{{ getProjectBuildType(prj.projectNature) }}</div>
                </el-col>
            </el-row>

            <el-row class="data-item">
                <el-col :span="6" class="data-row">
                    <img src="images/title_icon.png"><span class="sp-lbl">计划开工时间:</span>
                    <div class="div-text">{{ prj.scheduledStartTime }}</div>
                </el-col>
                <el-col :span="6" class="data-row">
                    <img src="images/title_icon.png"><span class="sp-lbl">计划完成时间:</span>
                    <div class="div-text">{{ prj.plannedCompletionTime }}</div>
                </el-col>
                <el-col :span="6" class="data-row">
                    <img src="images/title_icon.png"><span class="sp-lbl">实际开工时间:</span>
                    <div class="div-text">{{ prj.actualOperatingTime | formatDate }}</div>
                </el-col>
                <el-col :span="6" class="data-row">
                    <img src="images/title_icon.png"><span class="sp-lbl">实际完工时间:</span>
                    <div class="div-text">{{ prj.actualCompletionTime }}</div>
                </el-col>
            </el-row>          



            <el-row class="data-item" v-if="users3.length > 0" style="display:block;">                
                <div style="width:90%;margin-left:5%" class="data-table">
                    <table>
                        <tr class="tr-header">
                            <th>姓名</th>
                            <th>单位类型</th>
                            <th>单位</th>
                            <th>岗位</th>
                            <th>联系电话</th>
                        </tr>
                        <tr v-for="(it, idx) in  users3" :key="idx" class="tr-data">
                            <td style="width:20%;">{{ it.nickName }}</td>
                            <td style="width:20%;">{{ it.dName }}</td>
                            <td >{{ it.deptName }}</td>
                            <td style="width:20%;">{{ it.jobTypeName }}</td>
                            <td style="width:20%;">{{ it.phonenumber }}</td>
                        </tr>
                    </table>
                </div>
            </el-row>

        </div>

    </MyDialog>
</template>

<script>

import MyDialog from '../components/MyDialog'
export default {
    components: {
        MyDialog
    },
    data() {
        return {
            elKey: 0,
            fontSize: 0,
            index: 0,
            nav: '01',
            show: false,
            prj: null,
            prjs: [],
            users: [],
            selProject: '',
            showSel2: false,
            projectWeight: [],
            projectCategory: [],
            projectLevel: [],
            projectBuildType: [],           
            users3: [],//分包单位
        };
    },

    mounted() {

    },

    methods: {
        getPrjUser(t, deptType) {
            if (this.users && this.users.length > 0) {
                if (deptType) {
                    let tmps = this.users.filter(it => it.deptType == deptType);
                    if (tmps.length > 0) {
                        return tmps[0].deptName;
                    }
                } else {
                    let tmps = this.users.filter(it => it.jobTypeName == t);
                    if (tmps.length > 0) {
                        return tmps[0].nickName + ' ' + tmps[0].phonenumber;
                    }
                }
            }
            return "";
        },
        getPrjDeptName(t) {
            if (this.users && this.users.length > 0) {
                let tmps = this.users.filter(it => it.jobTypeName == t);
                if (tmps.length > 0) {
                    let it=tmps[0];
                    return it.nickName+(it.phonenumber?`(${it.phonenumber})`:'');
                }
            };
            return "";
        },
        getProjectWeight(v) {
            if (!v) {
                return "";
            }
            let tmps = this.projectWeight.filter(d => d.dictValue == v);
            return tmps.length > 0 ? tmps[0].dictLabel : '';
        },
        getProjectBuildType(v) {
            if (!v) {
                return "";
            }
            let tmps = this.projectBuildType.filter(d => d.dictValue == v);
            return tmps.length > 0 ? tmps[0].dictLabel : '';
        },
        getProjectLevel(v) {
            if (!v) {
                return "";
            }
            let tmps = this.projectLevel.filter(d => d.dictValue == v);
            return tmps.length > 0 ? tmps[0].dictLabel : '';
        },
        getProjectCategory(v) {
            if (!v) {
                return "";
            }
            let tmps = this.projectCategory.filter(d => d.dictValue == v);
            return tmps.length > 0 ? tmps[0].dictLabel : '';
        },
        showScreenUlSel2() {
            this.showSel2 = true
        },
        hideScreenUlSel2() {
            this.showSel2 = false
        },
        setScreenLiSel2(item) {
            this.selProject = item.projectName;
            this.prj = item;
            this.index = this.prjs.indexOf(this.prj);
            this.loadData();
            this.showSel2 = false
        },
        doLvl2HeaderClick(it) {
            if (it.children.length > 0) {
                it.expend = !it.expend;
            }
        },
        doNavClick(it) {
            this.nav = it.lvl;
            this.curNodes = it.children;
            this.curNode = it;
        },
        findItem() {
            let tmps = this.prjs.filter(d => d.id == this.prj.id);
            if (tmps.length > 0) {
                return tmps[0];
            }
            return null;
        },
        showDialog(prjs, prj, users) {
            this.show = true
            this.users = users;
            let id = prj.id;
            if (id == 0) {
                id = prjs[1].id;
                this.prj = prjs[1];
            } else {
                this.prj = prj;
            }
            this.selProject = this.prj.projectName;
            this.prjs = prjs.filter(d => d.id > 0);
            let find = this.findItem();
            if (find) {
                this.index = this.prjs.indexOf(find);
            } else {
                this.index = 0;
            }
            this.$api.dict("sur_project_weight").then(d => {
                this.projectWeight = d || [];
            });
            this.$api.dict("project_category").then(d => {
                this.projectCategory = d || [];
            });
            this.$api.dict("project_level").then(d => {
                this.projectLevel = d || [];
            });
            this.$api.dict("project_build_type").then(d => {
                this.projectBuildType = d || [];
            });

           
            this.users3=[];
            this.addUsers(2,users,"总包单位","项目经理");
            this.addUsers(4,users,"监理单位","总监");
            this.addUsers(1,users,"设计单位","项目负责人");
            
        },
        addUsers(n,users,dName,jobTypeName){            
            users.filter(d=>d.deptType==n).forEach(it=>{
                if(it.jobTypeName==jobTypeName){
                    if(this.users3.filter(item=>item.deptType==n && item.jobTypeName==jobTypeName && item.deptName==it.deptName ).length==0){
                        it.dName=dName;
                        this.users3.push(it);
                    }
                }
            });
        },
        modifyLeftBtn() {
            let n = this.index;
            n--;
            if (n < 0) {
                n = this.prjs.length - 1;
            }
            this.index = n;
            this.loadData();
        },
        modifyRightBtn() {
            let n = this.index;
            n++;
            if (n > this.prjs.length - 1) {
                n = 0;
            }
            this.index = n;
            this.loadData();
        }
    },
};
</script>

<style lang="less">
.project-info-dlg {

    .popup-project-introduction-min {
        transform: translateY(100px);

        &:hover {
            .modify-btn {
                display: flex;
            }
        }
    }

    &.font-size-2 {
        .header-title {
            font-size: 28px;
        }

        .popup-project-introduction-details {
            .main-content {
                font-size: 28px;
                line-height: 64px;

                .head-title-tab {
                    .head-nav {
                        padding: 12px 36px;
                    }
                }

            .data-table {
                padding: 64px 36px;

                table {

                    th {
                       
                        line-height: 64px;
                       
                        font-weight: bold
                    }

                    td {
                        line-height: 64px;
                       
                    }

                }
            }

            }
        }
    }

    &.font-size-1 {
        .header-title {
            font-size: 24px;
        }

        .popup-project-introduction-details {
            .main-content {
                font-size: 24px;
                line-height: 28px;

                .head-title-tab {
                    .head-nav {
                        padding: 12px 36px;
                    }
                }
                .data-table {
                padding: 48px 24px;
                margin-top: 32px;
                table {

                    th {
                       
                        line-height: 48px;
                       
                        font-weight: bold
                    }

                    td {
                        line-height: 48px;
                       
                    }

                }
            }

            }
        }
    }

    .popup-project-introduction-details {
        padding: 0px !important;
        position: relative;

        .quality-table {
            padding: 0px !important;
        }

        .font-size-tools {
            position: absolute;
            top: -40px;
            right: 200px;
        }

        .modify-btn {
            display: none;
            position: absolute;
            top: 400px;
            z-index: 100;
            cursor: pointer;
            padding: 0px;
            border-radius: 50%;
            width: 100px;
            height: 100px;
            align-items: center;
            justify-content: center;

            cursor: pointer;

            &:hover {
                background-color: rgba(255, 255, 255, 0.2);

                svg {
                    * {
                        fill: #fff;
                    }
                }
            }

            &.btn-right {
                right: 20px;
            }

            &.btn-left {
                left: 20px;
            }
        }


    }

    .main-content {
        .data-item {
            border-bottom: solid 1px #fff;
            padding: 12px 0px 12px 20px;
            box-shadow: inset 7px 0px 11px 5px rgb(36 131 167 / 70%);

            img {
                width: 16px;
                height: 16px;
                display: inline-block;
                position: relative;
                top: 8px;
            }

            .data-row {
                display: flex;
                line-height: 30px;
            }

            .data-table {
                padding: 12px;

                table {
                    border-collapse: collapse;
                    border: solid 1px #fff;

                    th {
                        border: solid 1px #fff;
                        line-height: 36px;
                        background: rgba(255, 255, 255, 0.3);
                        font-weight: bold
                    }

                    td {
                        border: solid 1px #fff;
                        line-height: 36px;
                        text-align: center;
                    }

                }
            }
        }
    }

    .head-title-tab {
        padding-top: 12px;
        display: block;
        width: 100%;

        .head-nav {
            background-size: 100% 100%;
            display: inline-block;
            width: auto;
            padding: 0px 24px;
        }
    }


    .head-title-select {
        width: 300px;
        padding-top: 0px;
    }

}</style>