<template>
    <div :class="red ? 'head-title red-head' : 'head-title'" class="main-header" :key="nav">
        <div class="head-title-label">
            产发工程数字管理平台
        </div>
        <div class="head-title-tab">
            <div v-if="!isTypeBuser" :class="nav == 1 ? 'head-nav active' : 'head-nav'" @click="pageJump(1, '#/')">项目概况
            </div>            
            <div :class="(nav >=20 && nav <30) || nav==2? 'head-nav active' : 'head-nav'" style="position: relative;"
                class="has-submenu">
                <div  @click="pageJump(2, '#/detail')">项目详情</div>
                <div class="header-btn-list">
                    <div class="header-btn-list-arrow"></div>
                    <div class="header-btn-list-item" style="">
                        <div class="header-btn-list-padding" style="text-align: left;">
                            <button type="button" :class="nav == 21 ? 'active' : ''" class="sub-btn"
                                @click="pageJump(21, '#/towerCrane')">塔吊监控</button>
                            <button type="button" :class="nav == 22 ? 'active' : ''" class="sub-btn"
                                @click="pageJump(22, '#/excavation')">基坑监控</button>
                            <button  type="button" :class="nav == 23 ? 'active' : ''" class="sub-btn"
                                @click="pageJump(23, '#/distributionBox')">配电箱监控</button> 
                            <button  type="button" :class="nav == 24 ? 'active' : ''" class="sub-btn"
                                @click="pageJump(24, '#/dumbwaiter')">升降机监控</button> <br/>
                            <button  type="button" :class="nav == 25 ? 'active' : ''" class="sub-btn"
                                @click="pageJump(25, '#/personnelPosition')">人员定位</button>
                            <button type="button" :class="nav == 26 ? 'active' : ''" class="sub-btn"
                                @click="pageJump(26, '#/standardCuringRoom')">标养室检测</button>
                            <button type="button" :class="nav == 27 ? 'active' : ''" class="sub-btn"
                                @click="pageJump(27, '#/concreteStrength')">混泥土强度检测</button>   
                        </div>
                    </div>
                </div>
            </div>    
            <div :class="nav == 3 ? 'head-nav active' : 'head-nav'" @click="pageJump(3, '#/safety')">安全管理</div>  
            <div :class="nav == 4 ? 'head-nav active' : 'head-nav'" @click="pageJump(4, '#/quality')">质量管理</div>
            <div :class="nav == 5 ? 'head-nav active' : 'head-nav'" @click="pageJump(5, '#/progress')">进度管理</div>
            <div :class="nav == 61 || nav == 62 || nav==63 ? 'head-nav active' : 'head-nav'" style="position: relative;"
                class="has-submenu">
                <div>视频管理</div>
                <div class="header-btn-list">
                    <div class="header-btn-list-arrow"></div>
                    <div class="header-btn-list-item" style="">
                        <div class="header-btn-list-padding">
                            <button type="button" :class="nav == 61 ? 'active' : ''" class="sub-btn"
                                @click="pageJump(61, '#/video')">视频监控</button>
                            <button type="button" :class="nav == 62 ? 'active' : ''" class="sub-btn"
                                @click="pageJump(62, '#/aiVideo')">AI识别监控</button>
                            <button v-if="1==1" type="button" :class="nav == 63 ? 'active' : ''" class="sub-btn"
                                @click="pageJump(63, '#/photography')">项目全景</button>
                        </div>
                    </div>
                </div>
            </div>

            <div v-if="!isTypeBuser" :class="(nav >=70 && nav <80) || nav==7? 'head-nav active' : 'head-nav'" style="position: relative;"
                class="has-submenu">
                <div  @click="pageJump(7, '#/engin')">工程管理</div>
                <div class="header-btn-list">
                    <div class="header-btn-list-arrow"></div>
                    <div class="header-btn-list-item" style="">
                        <div class="header-btn-list-padding" style="text-align: left;">
                            <button type="button" :class="nav == 71 ? 'active' : ''" class="sub-btn"
                                @click="pageJump(71, '#/enginAuditing')">工程审批</button>                            
                        </div>
                    </div>
                </div>
            </div>    
            <div v-if="isTypeBuser" :class="nav==7?'head-nav active' : 'head-nav'" style="position: relative;"
            @click="pageJump(7, '#/enginBUser')">工程管理
            </div>                
        </div>
        <template v-if="!isTypeBuser">
            <div class="head-title-select title-select1" @mouseleave="hideScreenUlSel1" v-if="localStorage1">
                <div class="head-select head-select-150">
                    <input type="text" :value="dept1" @click="showScreenUlSel1" placeholder="请选择公司" readonly>
                </div>
                <el-collapse-transition>
                    <ul class="header-screen-ul" v-show="showSel1" ref="selectUl">
                        <li v-for="item in depts" @click="setScreenLiSel1(item)" :title="item.text">{{ item.text }}</li>
                    </ul>
                </el-collapse-transition>
            </div>
        </template>
        <div class="head-title-select title-select1" @mouseleave="hideScreenUlSel3" >
            <div class="head-select  head-select-150">
                <input type="text" :value="proType" @click="showScreenUlSel3"   placeholder="项目类型" readonly>
            </div>
            <el-collapse-transition>
                <ul class="header-screen-ul" v-show="showSel3">
                    <li v-for="item in proTypeList" @click="setScreenLiSel3(item)" :title="item.text">{{ item.text }}</li>
                </ul>
            </el-collapse-transition>
        </div>
        <div class="head-title-select title-select3" @mouseleave="hideScreenUlSel2" v-if="localStorage2">
            <div class="head-select">
                <input type="text" :value="dept2" @click="showScreenUlSel2" placeholder="请选择项目" readonly>
            </div>
            <el-collapse-transition>
                <ul class="header-screen-ul" v-show="showSel2" ref="selectUl">
                    <li v-for="item in data" @click="setScreenLiSel2(item)" :title="item.text">{{ item.text }}</li>
                </ul>
            </el-collapse-transition>
        </div>
        <div class="head-title-date">
            <div class="head-title-time" v-if="1 == 2">
                <div class="head-title-date-con">{{ date }}</div>
                <div class="head-title-time-con">{{ time }}</div>
            </div>
            <!--
            <div class="head-title-weather">
                <img :src="condCode">
                <span>{{ condTxt }}</span>
                <span>{{ temperature }}℃</span>
            </div>
            -->
            <div class="header-title-user" style="margin-left:12px;">
                {{ getName() }}
                <i @click="doLogout" title="退出" style="margin-left:12px;cursor: pointer;">
                    <svg class="icon"
                        style=" width:20px;height: 20px;vertical-align: middle;fill: currentColor;overflow: hidden;"
                        viewBox="0 0 1072 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3432">
                        <path
                            d="M1057.279808 548.106418a47.221004 47.221004 0 0 1-7.674052 5.499737l-198.681223 199.525368a51.160351 51.160351 0 0 1-72.366316-72.340736l117.157204-117.668807L357.38063 562.763858a51.160351 51.160351 0 1 1 0-102.320701l540.713747 0.409282-119.58732-120.226824a51.160351 51.160351 0 0 1 72.366316-72.366316l199.83233 200.753216a48.09073 48.09073 0 0 1 6.574105 4.37421 54.511354 54.511354 0 0 1 0 74.719693zM972.046664 256.543579a51.160351 51.160351 0 0 1-51.160351-51.160351v-10.564612c-1.50923-72.289576-20.259499-91.85841-100.197547-92.421174l-627.430541 0.332542c-75.154555 2.148735-89.760835 24.173266-89.760835 101.885839L102.320701 157.57388l0.332543 685.369639c3.862606 61.597062 25.580175 77.968375 103.139267 77.968374l-103.088107-0.665084v1.099947l818.565612-0.409283-0.204642-66.943318-0.460443 66.227074-103.216007 0.690664c83.08441 0 102.0649-19.133971 103.59971-92.523494v-10.564612a51.160351 51.160351 0 0 1 102.320701 0L1023.386076 869.725962H1023.207015v51.160351a102.320701 102.320701 0 0 1-102.320702 102.320702h-54.357873l-709.849866 0.358122V1023.207015H102.320701a102.09048 102.09048 0 0 1-101.860258-97.767431L0 101.911419A102.03932 102.03932 0 0 1 97.74185 0.460443L921.244436 0A102.320701 102.320701 0 0 1 1023.207015 102.320701v51.160351h0.179061L1023.207015 205.383228a51.160351 51.160351 0 0 1-51.160351 51.160351zM102.320701 102.781145v0.179061l31.438036-0.204642H102.320701zM834.246259 102.320701l86.307512 0.588344 0.460443 66.227075L921.218855 102.320701z"
                            fill="#0090FF" p-id="3433"></path>
                    </svg>
                </i>
            </div>
        </div>
        <i class="set-fullscreen set-font-size" style="margin-left: 16px;position: absolute;top: 30px;right: 24px;"
            @click="toggleFullScreen">
            <svg class="icon" v-if="!isFullScreen"
                style="width: 24px; vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024"
                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3304">
                <path
                    d="M145.066667 85.333333h153.6c25.6 0 42.666667-17.066667 42.666666-42.666666S324.266667 0 298.666667 0H34.133333C25.6 0 17.066667 8.533333 8.533333 17.066667 0 25.6 0 34.133333 0 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666666s42.666667-17.066667 42.666666-42.666666V145.066667l230.4 230.4c17.066667 17.066667 42.666667 17.066667 59.733334 0 17.066667-17.066667 17.066667-42.666667 0-59.733334L145.066667 85.333333z m170.666666 563.2L162.133333 802.133333l-76.8 76.8V725.333333C85.333333 699.733333 68.266667 682.666667 42.666667 682.666667s-42.666667 17.066667-42.666667 42.666666v256c0 25.6 17.066667 42.666667 42.666667 42.666667h256c25.6 0 42.666667-17.066667 42.666666-42.666667s-17.066667-42.666667-42.666666-42.666666H145.066667l76.8-76.8 153.6-153.6c17.066667-17.066667 17.066667-42.666667 0-59.733334-17.066667-17.066667-42.666667-17.066667-59.733334 0z m665.6 34.133334c-25.6 0-42.666667 17.066667-42.666666 42.666666v153.6l-76.8-76.8-153.6-153.6c-17.066667-17.066667-42.666667-17.066667-59.733334 0-17.066667 17.066667-17.066667 42.666667 0 59.733334l153.6 153.6 76.8 76.8H725.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666s17.066667 42.666667 42.666666 42.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666666z m0-682.666667h-256c-25.6 0-42.666667 17.066667-42.666666 42.666667s17.066667 42.666667 42.666666 42.666666h153.6l-76.8 76.8-153.6 153.6c-17.066667 17.066667-17.066667 42.666667 0 59.733334 17.066667 17.066667 42.666667 17.066667 59.733334 0l153.6-153.6 76.8-76.8v153.6c0 25.6 17.066667 42.666667 42.666666 42.666666s42.666667-17.066667 42.666667-42.666666v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z"
                    fill="" p-id="3305"></path>
            </svg>
            <svg class="icon" v-else style="width: 24px; vertical-align: middle;fill: currentColor;overflow: hidden;"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3952">
                <path
                    d="M384 597.333333h-256c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667h153.6L17.066667 947.2c-17.066667 17.066667-17.066667 42.666667 0 59.733333 17.066667 17.066667 42.666667 17.066667 59.733333 0L341.333333 742.4v153.6c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z m358.4 85.333334h153.6c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666667h-256c-25.6 0-42.666667 17.066667-42.666667 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666667-42.666667V742.4l264.533333 264.533333c17.066667 17.066667 42.666667 17.066667 59.733333 0 17.066667-17.066667 17.066667-42.666667 0-59.733333L742.4 682.666667zM640 426.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666667H742.4L1006.933333 76.8c17.066667-17.066667 17.066667-42.666667 0-59.733333-17.066667-17.066667-42.666667-17.066667-59.733333 0L682.666667 281.6V128c0-25.6-17.066667-42.666667-42.666667-42.666667s-42.666667 17.066667-42.666667 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666667z m-256-341.333334c-25.6 0-42.666667 17.066667-42.666667 42.666667v153.6L76.8 8.533333C59.733333 0 25.6 0 8.533333 8.533333 0 25.6 0 59.733333 8.533333 76.8L281.6 341.333333H128c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z"
                    p-id="3953"></path>
            </svg>
        </i>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Cookies from 'js-cookie'
import {routes} from '../router/index'
import { tryToJson } from "../utils/tools";
export default {
    props: {
        red: {
            type: String
        },
        item: {
            type: Number
        },
    },
    data() {
        return {
            isTypeBuser: false,//监理单位、总包单位、分包单位用户不展示项目概况菜单,二级菜单只展示自已参与的项目
            nav: 1,
            dept1: '',
            dept2: '',
            showSel1: false,
            showSel2: false,
            showSel3: false,
            data: [],
            depts: [],
            timerID: undefined,
            time: '',
            date: '',
            week: '',
            selDept: '',
            localStorage1: JSON.parse(localStorage.getItem("data1")),
            localStorage2: JSON.parse(localStorage.getItem("data2")),
            isFullScreen: false,
            temperature: 20,
            condTxt: '',
            condCode: '',
            proTypeList:[],
            proType:'',
        }
    },
    created(){
        let obj=localStorage.getItem("project_category");
        let type=localStorage.getItem("proType");        
        if(obj &&obj.length>0){
            obj=tryToJson(obj,[]);
            if(obj.length>0){
                this.proTypeList=obj;
                let tmps=obj.filter(d=>d.value==type);
                this.proType=tmps.length>0?tmps[0].text:"全部";
                return;
            }
        }
        this.$api.dict("project_category").then(d=>{
            let tmps=(d||[]).map(it=>{
                return {
                    value:it.dictValue,
                    text:it.dictLabel,
                }
            });
            tmps=[{value:"0",text:"全部"},...tmps];
            this.proTypeList=tmps;
            this.proType="全部";
            localStorage.setItem("project_category",JSON.stringify(tmps));
        });
    },
    async mounted() {
        window.headerApp = this
        await this.initMe();
        this.getWeather();
        this.nav=this.$route.meta?.nav||1        
        this.setTitle();
        this.timerID = setInterval(this.updateTime, 1000);
        this.updateTime();
        let roleId = + this.$store.getters.roleId;
        Cookies.remove("__ids__");
        if ([5, 6, 7, 15, 16, 17, 99].includes(roleId)) {
            this.isTypeBuser = true;
            if (this.$route.name == "index") {
                this.$router.push("/detail");
            }
            this.$api.project.findProjectByDept(-1).then(d => {
                let objs = (d?.data || []).map(it => {
                    it.text = it.projectName;
                    return it;
                }).filter(it => +it.progressVisible == 0);
                this.data = [{ id: 0, text: '所有项目' }, ...objs];
                let dept={id:0,text:''};
                this.$root.dept=dept;
                this.$root.hasInitHeader=true;
                this.$bus.$emit("deptChange", dept)
                this.$root._prjIds=objs.map(it=>it.id);
                Cookies.set("__ids__",objs.map(it=>it.id).join(","));                
                this.$bus.$emit("loadProjects", this.data);
                this.$root.projects = this.data;
                if (this.data.length > 0) {
                    this.setScreenLiSel2(this.data[0], true);
                } else {
                    this.setScreenLiSel2(null);
                }
            });
        } else {
            this.isTypeBuser = false;
            this.$api.dept.list().then(d => {
                this.$root.hasInitHeader = true;
                if (roleId < 4) {
                    this.depts = [{ text: '产发集团', id: 0 }, ...(d?.data || []).map(it => {
                        it.text = it.deptName;
                        it.id = it.deptId;
                        return it;
                    })]
                } else {
                    this.depts = [...(d?.data || []).map(it => {
                        it.text = it.deptName;
                        it.id = it.deptId;
                        return it;
                    })]
                }         
                this.setScreenLiSel1(this.localStorage1);
                this.deptChange();
            });
        }
        this.$root.isTypeBuser = this.isTypeBuser;
        this.init();
    },
    methods: {
        initMe() {
            return new Promise(resolve => {
                let func = () => {
                    if (!this.$store.getters.roles || this.$store.getters.roles.length == 0) {
                        setTimeout(func, 400);
                        return;
                    }
                    resolve(true);
                };
                func();
            });
        },
        doLogout() {
            this.$confirm('确定注销并退出系统吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$store.dispatch('LogOut').then(() => {
                    location.href = '/';
                })
            }).catch(() => { });
        },
        getName() {
            return this.$store?.getters?.nickName || '';
        },
        getWeather() {
            let url = `https://widget-api.heweather.net/s6/plugin/view?key=fcd4fc1e48a144a483b7af74284229b8&location=CN101110101&lang=zh`;
            this.$api.http.get(url).then(d => {
                let info = d?.data?.now || {};
                this.temperature = info.tmp || 20;
                this.condTxt = info.cond_txt || '晴';
                this.condCode = info.cond_code || 100;
                this.condCode = `//widget-s.qweather.net/img/plugin/190516/icon/c/${this.condCode}n.png`
            });
        },
        toggleFullScreen() {
            let el = document.body;
            this.$toggleFullScreen(el);
            setTimeout(() => {
                this.isFullScreen = document.fullscreenElement == el;
            }, 400);
        },
        init() {
            try {
                this.localStorage1 = JSON.parse(localStorage.getItem("data1"))
                this.localStorage2 = JSON.parse(localStorage.getItem("data2"))
            } catch (e) {

            }
            if (!this.localStorage1) {
                this.localStorage1 = {

                }
            }
            if (!this.localStorage2) {
                this.localStorage2 = {}
            }
            let tmp=this.localStorage1?.text || '';
            if(!tmp || !this.depts.find(d=>d.text==tmp)){
                if(this.depts.length>0){
                    tmp=this.depts[0].text;
                }else{
                    tmp="";
                }
            }
            this.dept1 = tmp;
            this.dept2 = tmp;
            
            if (this.dept1) {
                this.loadProject(true);
            }
        },
        deptChange(cb) {
            if(!this.dept1){
                if(this.depts.length>0){
                    this.dept1=this.depts[0].text;
                    this.loadProject(true,cb);
                }
            }
            let tmps = this.depts.filter(d => d.text == this.dept1);
            if (tmps.length > 0) {
                this.$bus.$emit("deptChange", tmps[0])
                this.$root.dept = tmps[0];
            }
        },
        setTitle() {
            let titls = ['', '项目概况', '项目详情', '安全管理', '质量管理', '进度管理', '视频管理', '工程管理']
            let title = titls[this.nav];
            if (title) {
                window.document.title = title;
            } else {
                window.document.title = '产发工程数字管理平台-大屏';
            }
        },
        //页面条状
        pageJump(n, url) {
            this.nav = n;
            this.setTitle();
            if (url) {
                location.href = url
            } else {
                this.$notify({
                    title: '提示',
                    message: '页面开发中，敬请期待！',
                    type: 'warning'
                });
            }


        },        
        showScreenUlSel1() {
            this.showSel1 = true
        },
        showScreenUlSel2() {
            this.showSel2 = true

        },
        showScreenUlSel3() {
            this.showSel3 = true
        },
        hideScreenUlSel1() {
            this.showSel1 = false
        },
        hideScreenUlSel2() {
            this.showSel2 = false
        },
        hideScreenUlSel3() {
            this.showSel3 = false
        },
        setScreenLiSel3(item){
            localStorage.setItem("proType",item.value);
            this.proType=item.text;
            this.showSel3=false;
            this.deptChange();
            this.loadProject();
        },
        setScreenLiSel1(item) {
            localStorage.setItem("data1", JSON.stringify(item))
            this.localStorage1 = JSON.parse(localStorage.getItem("data1"))
            this.$emit('itemdata', item);
            this.showSel1 = false
            this.dept1 = item.text;
            this.deptChange();
            this.loadProject();  
        },
        loadProject(init,cb) {
            if (this.isTypeBuser) {
                return;
            }
            this.$api.project.findProjectByDept(this.localStorage1.id).then(d => {
                let objs = (d?.data || []).map(it => {
                    it.text = it.projectName;
                    return it;
                }).filter(it => +it.progressVisible == 0);
                this.data = [{ id: 0, text: '所有项目' }, ...objs];
                this.$bus.$emit("loadProjects", this.data);
                this.$root.projects = this.data;
                if(this.data.find(it=>it.id==this.localStorage2.id)){
                    this.setScreenLiSel2(this.localStorage2)
                }else{
                    if (this.data.length > 0) {
                        this.setScreenLiSel2(this.data[0], init);
                    } else {
                        this.setScreenLiSel2(null);
                    }
                }
                if(cb){
                    cb();
                }
            });
        },
        setScreenLiSel2(item, init) {
            if (item) {
                this.showSel2 = false;
                if (!init||!this.dept2) {
                    localStorage.setItem("data2", JSON.stringify(item))                    
                    this.localStorage2 = JSON.parse(localStorage.getItem("data2"))
                    this.$emit('itemdata', item);
                    this.dept2 = item.text;
                }
                this.$root.project = this.localStorage2;
                this.$bus.$emit("projectChange", this.localStorage2);
            } else {
                localStorage.removeItem("data2");
                this.localStorage2 = {};
                this.showSel2 = false;
                this.dept2 = '';
            }
        },

        //时间方法
        updateTime() {
            var cd = new Date();
            this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2);
            this.date = this.zeroPadding(cd.getFullYear(), 4) + '年' + this.zeroPadding(cd.getMonth() + 1, 2) + '月' + this.zeroPadding(cd.getDate(), 2) + '日';
        },
        zeroPadding(num, digit) {
            var zero = '';
            for (var i = 0; i < digit; i++) {
                zero += '0';
            }
            return (zero + num).slice(-digit);
        }

    }
};
</script>

<style lang="less">
.head-title{
    z-index: 999;
}
.main-header {
    .head-title-tab {
        .has-submenu {
            &:hover {
                .header-btn-list {
                    display: block;
                }
            }

            .header-btn-list {
                display: none;

                .header-btn-list-item {
                    .sub-btn {
                        &.active {
                            color: #fff;
                        }
                    }

                }
            }

        }
    }
    .title-select1{
        width: 150px;
    }
    .title-select3{
        width: 200px;
    }
}</style>