<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" v-menu="'/brandInsight'">
                        <span>品牌洞察</span>
                    </a-menu-item>
                    <a-menu-item key="modelInsight" v-menu="'/modelInsight'">
                        <span>车型洞察</span>
                    </a-menu-item>
                    <a-menu-item key="eventInsight" v-menu="'/eventInsight'">
                        <span>事件洞察</span>
                    </a-menu-item>
                    <a-menu-item key="marketingAnalysis" v-menu="'/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="form.sTimeType" @change="handleChange" v-if="timeShow">
                <a-select-option :style="{ color: '#fff' }" v-for="item in selDatas" :value="item.key" :key="item.key">
                    {{ item.value }}
                </a-select-option>
            </a-select>

            <a-range-picker show-time v-model="selTime" :disabled-date="disabledDate" style="margin-left: 0.8rem" @calendarChange="calendarPriceRangeChange" :size="$vuiSize" valueFormat="YYYY-MM-DD HH:mm:ss" v-if="form.sTimeType == selVal" @change="handlerChangeTime">
                <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>

        </div>
        <div class="iH-center">
            <img src="../../assets/images/Index/img_toubuyi.png" width="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 { getTwoTime } from "@/api/comm";
import moment from "moment";
export default {
    name: "iHeaderMa",
    inject: ["reload"],
    data() {
        return {
            selVal: 4,
            clock: "",
            sClock: "",
            week: "",
            intDt: null,
            selTime: [],
            selectPriceDate: "",
            form: {
                sTimeType: "",
                sStartTime: "",
                sEndTime: "",
            },
            selDatas: [],
            offsetDays: 86400000 * 30, //最多选择7天
            timeShow: true
        };
    },
     watch: {
        $route: {
            handler(val) {
                if (val.path === "/eventDEC") {
                    this.timeShow = false;
                } else {
                    this.timeShow = true;
                }
            },
            immediate: true,
        },
    },
    created() {
        this.form = Object.assign(this.form, this.getCtime2);
        if(this.form.sStartTime && this.form.sEndTime) {
            this.selTime = [this.form.sStartTime, this.form.sEndTime]
        }
        this.getSelect();
    },
    mounted() {
        this.intDt = self.setInterval(() => {
            let obj = this.getDatetime();
            this.clock = obj.clock;
            this.sClock = obj.sClock;
            this.week = obj.week;
        }, 1000);
    },
    destroyed() {
        if (this.intDt) {
            self.clearInterval(this.intDt);
        }
    },
    methods: {
        // 获取选择时间的数据
        getSelect() {
            getTwoTime().then((res) => {
                this.selDatas = res.data;
                if (!this.form.sTimeType) {
                    this.form.sTimeType = this.selDatas[0].key;
                    this.setCtime2(this.form);
                }
            });
        },
        // 选择时间
        handleChange() {
            this.setCtime2(this.form);
            if (this.form.sTimeType != 4) {
                this.reload();
            }
        },
        //选择开始时间/结束时间
        calendarPriceRangeChange(date) {
            this.selectPriceDate = date[0];
        },
        // 自定时间的时候
        handlerChangeTime(val) {
            this.form.sStartTime = val[0];
            this.form.sEndTime = val[1];
            this.selectPriceDate = "";
            this.setCtime2(this.form);
            this.reload();
        },
        // 点击个人中心
        handlerMyself() {
            this.$router.push("/myself");
        },
        // 菜单
        handlerType(obj) {
            if (obj.key === "marketingAnalysis") {
                this.setHeaderType(2);
            } else if (
                obj.key === "brandInsight" ||
                obj.key === "modelInsight" ||
                obj.key === "eventInsight"
            ) {
                this.setHeaderType(3);
            } else {
                this.setHeaderType(1);
            }
            this.$router.push({ path: `/${obj.key}` });
        },
        // 退出的方法
        layout() {
            this.setToken("");
            this.setUser({});
            this.$router.replace("/login");
        },
        //根据选择的开始时间/结束时间，动态渲染要禁用的日期
        disabledDate(current) {
            if (this.selectPriceDate) {
                let selectV = moment(
                    this.selectPriceDate,
                    "YYYY-MM-DD"
                ).valueOf();
                return (
                    current >
                        moment(
                            new Date(selectV + this.offsetDays),
                            "YYYY-MM-DD"
                        ) ||
                    current <
                        moment(
                            new Date(selectV - this.offsetDays),
                            "YYYY-MM-DD"
                        )
                );
            } else {
                return false;
            }
        },
    },
};
</script>

<style lang="less" scoped>
.iH-outter {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 80px;
    background-image: url("../../assets/images/Index/img_toubuer.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .iH-left {
        display: flex;
        width: 657px;
        margin-left: 16px;
        justify-content: flex-start;
        margin-top: 16px;
        height: 32px;
        .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: 490px;
        height: auto;
    }
    .iH-right {
        display: flex;
        height: 32px;
        width: 657px;
        justify-content: flex-end;
        margin-right: 16px;
        margin-top: 16px;
        .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>