
<template>
    <div class="iH-outter">
        <div class="iH-left">
            <a-dropdown placement="bottomLeft">
                <img class="iH-left-img1" src="../../assets/images/Index/ic_cd.png" />
                <a-menu slot="overlay" @click="handlerType">
                    <a-menu-item key="index">
                        <span>行业洞察</span>
                    </a-menu-item>
                    <a-menu-item key="brandInsight">
                        <span>品牌洞察</span>
                    </a-menu-item>
                    <a-menu-item key="modelInsight">
                        <span>车型洞察</span>
                    </a-menu-item>
                    <a-menu-item key="eventInsight">
                        <span>事件洞察</span>
                    </a-menu-item>
                    <a-menu-item key="marketingAnalysis">
                        <span>营销分析</span>
                    </a-menu-item>
                </a-menu>
            </a-dropdown>
            <span class="iH-left-s1">菜单</span>

            <a-select :default-value="1" :size="$vuiSize" class="selHead" v-model="selVal" @change="handlerSelect">
                <a-select-option :style="{ color: '#fff' }" v-for="item in selDatas" :value="item.key" :key="item.key">
                    {{ item.key }}
                </a-select-option>
            </a-select>
           
        </div>
        <div class="iH-center">
            <img src="../../assets/images/Index/img_toubuyi.png" width="100%" height="100%" />
        </div>
        <div class="iH-right">
            <span class="s1">{{ clock }}</span>
            <span class="s2">{{ sClock }}</span>
            <span class="s2">{{ week }}</span>
            <img class="m1" src="../../assets/images/Index/ic_ry.png"/>
            <span class="s3">{{getUser.UserName}}</span>
            <a-dropdown placement="bottomRight">
                <a class="ant-dropdown-link">
                    <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                    <a-menu-item @click="handlerMyself">
                        <span>个人中心</span>
                    </a-menu-item>
                    <a-menu-item @click="layout">
                        <span>退出</span>
                    </a-menu-item>
                </a-menu>
            </a-dropdown>
        </div>
    </div>
</template>

<script>
import {getCheZhuTime0528} from "@/api/home"
export default {
    name: "iHeaderMa",
    inject: ['reload'],
    data() {
        return {
            selVal: '',
            clock: "",
            sClock: "",
            week: "",
            intDt: null,
            form: {
                sTimeType: 4,
                sStartTime: "",
                sEndTime: ""
            },
            selDatas: [
               
            ],
        };
    },
    created() {
        this.getSelect()
    },
    mounted() {
        this.intDt = self.setInterval(() => {
            this.getDatetime();
        }, 1000);
    },
    destroyed() {
        if (this.intDt) {
            self.clearInterval(this.intDt);
        }
    },
    methods: {
        // 获取选择时间的数据
        getSelect() {
          getCheZhuTime0528().then(res => {
            this.selDatas = res.data
            this.selVal = this.selDatas[0].key;
            this.form.sStartTime = this.selDatas[0].starttime;
            this.form.sEndTime = this.selDatas[0].endtime;
            this.setCtime(this.form);
          })
        },
        // 选择时间
        handlerSelect(key) {
          let n = this.selDatas.findIndex(ele => {
            return ele.key === key
          })
          let obj = this.selDatas[n];
          this.form.sStartTime = obj.starttime;
          this.form.sEndTime = obj.endtime;
           this.setCtime(this.form);
          this.reload();
        },
        // 获取当前日期时间
        getDatetime() {
            let now = new Date();
            let weeks = new Array(
                "星期日",
                "星期一",
                "星期二",
                "星期三",
                "星期四",
                "星期五",
                "星期六"
            );
            let year = now.getFullYear();
            let month = now.getMonth() + 1;
            let day = now.getDate();
            let hh = now.getHours();
            let mm = now.getMinutes();
            let ss = now.getSeconds();
            let clock = year + "-";
            let sClock = "";
            let dayw = now.getDay();
            let week = weeks[dayw];
            if (month < 10) clock += "0";
            clock += month + "-";
            if (day < 10) clock += "0";
            clock += day + " ";
            if (hh < 10) sClock += "0";
            sClock += hh + ":";
            if (mm < 10) sClock += "0";
            sClock += mm + ":";
            if (ss < 10) sClock += "0";
            sClock += ss;
            this.clock = clock;
            this.sClock = sClock;
            this.week = week;
            return { clock: clock, sClock: sClock, week: week };
        },
        // 点击个人中心
        handlerMyself() {
            this.$router.push("/myself");
        },
        // 菜单
        handlerType(obj) {
            if(obj.key === 'marketingAnalysis') {
                this.setHeaderType(2)
            } else {
                 this.setHeaderType(1)
            }
          this.$router.push({path: `/${obj.key}`})
        },
        // 退出的方法
        layout() {
            this.setToken("");
            this.setUser({});
            this.$router.replace("/login");
        }
    },
};
</script>

<style lang="less" scoped>
.iH-outter {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: auto;
    background-image: url("../../assets/images/Index/img_toubuer.png");
    background-repeat: no-repeat;
    background-size: cover;
    .iH-left {
        display: flex;
        height: 100%;
        margin-left: 16px;
        justify-content: flex-start;
        margin-top: 18px;
        width: 430px;
        .iH-left-img1 {
            width: 24px;
            height: 24px;
            cursor: pointer;
        }
        .iH-left-s1 {
            display: block;
            font-size: 14px;
            font-weight: bold;
            color: #ffffff;
            margin-left: 8px;
            margin-top: 2px;
        }
    }
    .iH-center {
        width: 606px;
        height: auto;
    }
    .iH-right {
        display: flex;
        width: 430px;
        height: 100%;
        justify-content: flex-start;
        margin-right: 16px;
        margin-top: 18px;
        .s1 {
            display: inline-block;
            font-size: 16px;
            color: #ffffff;
        }
        .s2 {
            display: inline-block;
            font-size: 16px;
            color: #ffffff;
            margin-left: 24px;
        }
        .s3 {
            display: inline-block;
            font-size: 14px;
            color: #ffffff;
            margin-left: 8px;
        }
        .m1 {
            display: inline-block;
            margin-left: 60px;
            margin-right: 8px;
            width: 24px;
            height: 24px;
        }
    }
}
.ant-dropdown-link {
    color: #63aecc;
    margin-left: 11px;
    /deep/ .anticon svg {
        font-size: 20px !important;
        margin-top: 0px;
    }
}
.selHead {
    width: 120px; 
    margin-left: 40px; 
    margin-right: 8px;
}
</style>
