<template>
    <div style="color: #666;font-size: 14px">
        <div style="padding-bottom: 0px;">
            <b>欢迎！{{ user.nickname}}</b>
			<button style="margin-left: 10px;" @click="loginout()">退出</button>
			
        </div>

        <i class="el-icon-time" style="margin-left: 450px;color:#009be2"></i> <span style="color: black">当前时间：{{newTime}}</span>
      <!--  <div class="whether">

        <div id="he-plugin-simple"></div></div>-->
    <!--    <div style="margin: 10px 0">
            <el-carousel height="450px" :interval="10000">
                <el-carousel-item v-for="item in imgs" :key="item">
                    <img :src="item" alt="" filt="" style="width: 100%">
                </el-carousel-item>
            </el-carousel>
        </div>-->
        <div >
        <el-card style="margin: 10px 0 ; background-image: linear-gradient(to bottom right,#b8f6fc, #8bbbf4,#bdc0ef,#dbfbf5,#cdf3f6);">
            <el-steps align-center >
                <el-step title="步骤1" status="process" description="查看招标公告"></el-step>
                <el-step title="步骤2" status="process" description="根据招标信息查看招标文件"></el-step>
                <el-step title="步骤3" status="process" description="参与投标"></el-step>
                <el-step title="步骤4" status="process" description="上传投标文件"></el-step>
            </el-steps>
            <div style="padding-bottom: 20px; font-size: 24px ;text-align: center;color: 	#FF0000"> 招 标 公 告</div>
           <!-- <el-collapse accordion v-model="activeNames" v-for="(item, index) in article"  >
                <el-collapse-item :name="index + ''"  v-if="item.state==='审核通过'&&item.states==='待开标'">
                    <template slot="title" slot-scope="scope" style="margin: auto" >
                        <span style="font-size: 20px; color: #E6A23C">主题：{{ item.name }}</span><i style="color: #E6A23C" class="header-icon el-icon-info"></i>
                        <span style="margin-left: 20px; color: #009be2">开始时间：<i style="color: #009be2" class="header-icon el-icon-time"></i>{{ new Date(item.time ).toLocaleString() }}</span>
                        <span style="margin-left: 20px; color: #FF0000">结束时间：<i style="color: #FF0000" class="header-icon el-icon-time"></i>{{ new Date(item.overtime ).toLocaleString()}}</span>
                        <span style="margin-left: 20px;color: #00FF00">发布人：<i style="color: #E6A23C" class="header-icon el-icon-user"></i>{{ item.user }}</span>
                    </template>
                    <div >

                        <div style="font-size: 15px;color:	#000000" >内容：{{ item.content }}</div>
                    </div>
                </el-collapse-item>
            </el-collapse>-->

            <el-card  class="box-card" shadow="hover">
                <div style="margin: 10px 0" class="clearfix">
                    <span style="color: #fc596c;">货物公告</span>
                    <div style="padding: 10px 0; border-bottom: 1px dashed #ccc" v-for="item in article" :key="item.id" v-if="item.state==='审核通过'&&item.states==='待开标'&&item.type==1&&!(new Date() >Date.parse(item.overtime))"  class="text item">

                        <div class="pd-10" style="font-size: 15px; color: #3F5EFB; cursor: pointer" @click="$router.push('/bidsDetail?id=' + item.id)">
                            项目名称： <i style="color: #E6A23C" class="header-icon el-icon-info"></i>{{ item.name }}
                            &nbsp;&nbsp; &nbsp;&nbsp;

                            <i style="color: #E6A23C" class="header-icon el-icon-user"></i> <span>发布人:{{ item.user }}</span>
                        </div>
                        <div style="font-size: 14px; margin-top: 10px" >

                            <i class="el-icon-time" style="margin-left: 10px;color:#009be2"></i> <span>开始时间： {{ new Date(item.time).toLocaleDateString() }}</span>
                            <i class="el-icon-time" style="margin-left: 10px;color:#009be2"></i> <span>结束时间： {{ new Date(item.overtime).toLocaleDateString() }}</span>
                        </div>

                    </div>

                </div>
            </el-card>

            <el-card  class="box-card" shadow="hover">

                <div style="margin: 10px 0" class="clearfix">
                    <span style="color: #FF0000">工程公告</span>
                    <div style="padding: 10px 0; border-bottom: 1px dashed #ccc" v-for="item in article" :key="item.id" v-if="item.state==='审核通过'&&item.states==='待开标'&&item.type==3&&!(new Date() >Date.parse(item.overtime))"  class="text item">
                        <div class="pd-10" style="font-size: 15px; color: #3F5EFB; cursor: pointer" @click="$router.push('/bidsDetail?id=' + item.id)">项目名称：<i style="color: #E6A23C" class="header-icon el-icon-info"></i>{{ item.name }}
                            &nbsp;&nbsp; &nbsp;&nbsp;
                            <i style="color: #E6A23C" class="header-icon el-icon-user"></i> <span>发布人：{{ item.user }}</span>
                        </div>
                        <div style="font-size: 14px; margin-top: 10px" >

                            <i class="el-icon-time" style="margin-left: 10px;color:#009be2"> </i><span>开始时间：{{ new Date(item.time).toLocaleDateString() }}</span>
                            <i class="el-icon-time" style="margin-left: 10px;color:#009be2"></i> <span>结束时间： {{ new Date(item.overtime).toLocaleDateString() }}</span>
                        </div>
                    </div>
                </div>

            </el-card>

            <el-card  class="box-card" shadow="hover">
                <div style="margin: 10px 0" class="clearfix">
                    <span style="color: #FF0000">服务公告</span>
                    <div style="padding: 10px 0; border-bottom: 1px dashed #ccc" v-for="item in article" :key="item.id" v-if="item.state==='审核通过'&&item.states==='待开标'&&item.type==2&&!(new Date() >Date.parse(item.overtime))"  class="text item">
                        <div class="pd-10" style="font-size: 15px; color: #3F5EFB; cursor: pointer" @click="$router.push('/bidsDetail?id=' + item.id)">项目名称：<i style="color: #E6A23C" class="header-icon el-icon-info"></i>{{ item.name }}
                            &nbsp;&nbsp; &nbsp;&nbsp;
                            <i style="color: #E6A23C" class="header-icon el-icon-user"></i> <span>发布人：{{ item.user }}</span>
                        </div>
                        <div style="font-size: 14px; margin-top: 10px" >

                            <i class="el-icon-time" style="margin-left: 10px;color:#009be2"> </i> <span>开始时间：{{ new Date(item.time).toLocaleDateString() }}</span>
                            <i class="el-icon-time" style="margin-left: 10px;color:#009be2"></i> <span>结束时间： {{ new Date(item.overtime).toLocaleDateString() }}</span>
                        </div>
                    </div>
                </div>
            </el-card>

            <el-card  class="box-card" shadow="hover">
                <div style="margin: 10px 0" class="clearfix">
                    <span style="color: #FF0000">电子公告</span>
                    <div style="padding: 10px 0; border-bottom: 1px dashed #ccc" v-for="item in article" :key="item.id" v-if="item.state==='审核通过'&&item.states==='待开标'&& item.type==4 && !(new Date() >Date.parse(item.overtime))"  class="text item">
                        <div class="pd-10" style="font-size: 15px; color: #3F5EFB; cursor: pointer" @click="$router.push('/bidsDetail?id=' + item.id)">项目名称：<i style="color: #E6A23C" class="header-icon el-icon-info"></i>{{ item.name }}
                            &nbsp;&nbsp; &nbsp;&nbsp;
                            <i style="color: #E6A23C" class="header-icon el-icon-user"></i> <span>发布人：{{ item.user }}</span>
                        </div>
                        <div style="font-size: 14px; margin-top: 10px" >

                            <i class="el-icon-time" style="margin-left: 10px;color:#009be2"> </i> <span>开始时间：{{ new Date(item.time).toLocaleDateString() }}</span>
                            <i class="el-icon-time" style="margin-left: 10px;color:#009be2"></i> <span>结束时间： {{ new Date(item.overtime).toLocaleDateString() }}</span>
                        </div>
                    </div>
                </div>
            </el-card>
        </el-card>
        </div>


    </div>
</template>

<script>

    import {serverIp} from "../../public/config";
    const days = ['天', '一', '二', '三', '四', '五', '六']; // 星期数组
    var icnow = new Date();      // 初始化时间
    var interval;
    export default {

        name: "Home",
        data() {
            return {
                year: icnow.getFullYear(),
                month: icnow.getMonth() + 1,
                date: icnow.getDate(),
                day: days[icnow.getDay() - 1],
                time: icnow.toTimeString().substring(0, 8),
                imgs: [
                   require('@/assets/dolo.jpg'),

                ],
                activeNames: ['0'],
                user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
                article: [],
                noticeRich: [],
                serverIp: serverIp,
            }
        },
        created() {
            // 简单公告
            this.request.get("/bids/findAll").then(res => {
                this.article = res.data
				console.log(this.article);

            })
            interval = setInterval(() =>{
                let icnow = new Date();
                this.year = icnow.getFullYear();
                this.month = icnow.getMonth() + 1;
                this.date = icnow.getDate();
                this.day = days[icnow.getDay()];
                this.time = icnow.toTimeString().substring(0, 8);
            }, 1000)

        },
        methods:{
			loginout(){
				console.log("tuichu");
				
				this.$router.push("/login");
			}
        },
     /*   mounted() {
            window.WIDGET = {
                "CONFIG": {
                    "modules": "01234",
                    "background": "1",
                    "tmpColor": "FFFFFF",
                    "tmpSize": "16",
                    "cityColor": "FFFFFF",
                    "citySize": "16",
                    "aqiColor": "FFFFFF",
                    "aqiSize": "16",
                    "weatherIconSize": "24",
                    "alertIconSize": "18",
                    "padding": "10px 10px 10px 10px",
                    "shadow": "0",
                    "language": "auto",
                    "borderRadius": "10",
                    "fixed": "false",
                    "vertical": "top",
                    "horizontal": "left",
                    "key": "52ea558b640e43d3aed3c9c742a275af"
                }
            }
            let script = document.createElement('script')
            script.type = 'text/javascript'
            script.src = 'https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0'
            document.getElementsByTagName('head')[0].appendChild(script)
        },*/
        computed:{
            newTime: function () {
                return this.year + '年' + this.month + '月' + this.date + '日 星期' + this.day + ' ' + this.time;
            }
        },
        beforeDestroy () {
            clearInterval(interval);
        }


    }


</script>

<style scoped>
    .el-header {
        padding: 0 0px;
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
        float: left;
        margin:20px 50px ;

    }
    .el-card__body{
        font-size: 20px;

    }
    .whether{
        position: relative;
        z-index: 9999;
        width: 100px;
        margin-left: 1020px;
    }
    .item {
        margin: 4px;
    }

</style>
