<template>
    <div class="home">
        <div class="header">
            <div class="header__left">
                <!--                武隆区救助智慧终端-->
                <img src="../assets/images/wl_icon.png" alt="">

            </div>
            <div class="header__right">
                <span>{{ dayOfWeek }} <br>{{ formattedDate }}</span>
                <span>{{ formattedTime }}</span>
            </div>
        </div>

        <div class="news">
            <div class="news__title over-hidden_one">
                民政为民， 民政爱民
            </div>
            <div class="news__content">

                <div class="news__left">

                    <el-carousel height="26vw" :key="carouselKey">

                        <el-carousel-item v-for="(item,index) in imgIdArr" :key="index">
                            <img  :src="this.$utils.getImgUrl(item)" alt="">

                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="news__right">
                    <div class="news__nav">
                        <div v-for="(item,index) in categories" :key="index" class="news__nav__item" :class=" {'news__nav__active' : navActive === item.ic_code}"
                             @click="changeNavActive(item.ic_code)">{{ item.ic_name }}
                        </div>
                    </div>
                    <ul class="news__list">
                        <li v-for="(item,index) in listInfo" :key="index" @click="this.$router.push({name:'policyDetail',query:{ data_id: item.data_id}})">
                            <span class="over-hidden_one">{{item.data_title}}</span>
                            <span>{{ item.data_create.slice(0,10) }}</span>
                        </li>

                    </ul>
                </div>
            </div>

        </div>
        <!--        重要政策图片-->
        <div class="zyzc">
            <img src="../assets/images/zcjc.png" alt="">

        </div>

        <!--        政策查询-->
        <div class="select">
            <router-link to="/policyQuery"><img src="../assets/images/jzzc.png" alt=""></router-link>
            <router-link to="/rescueCalculation"><img src="../assets/images/jzcs.png" alt=""></router-link>
            <router-link to="/bailoutQuery"><img src="../assets/images/wdjz.png" alt=""></router-link>

        </div>
<!--        <img src="http://192.168.110.230:9897/cqmz_test/attach/showImg.do?attachId=1843832899329851392&w=500&h=500" alt="">-->
<!--        <img src="http://139.9.38.43:6009/cqmzattach/showImg.do?attachId=1844208813087653888&w=500&h=500" alt="">-->
<!--        123-->

    </div>
</template>

<script>

export default {
  data () {
    return {
      dayOfWeek: '',
      formattedDate: '',
      formattedTime: '',
      navActive: 1,
      categories: [],
      listInfo: [],
      page: 1,
      pageSize: 7,
      imgIdArr: [],
      carouselKey: 0

    }
  },
  methods: {

    async getListInfo (code) {
      const params = {
        ic_code: code,
        page: this.page,
        pageSize: this.pageSize

      }
      const { data } = await this.$http.get('api/pu/info/listInfo.do', { params })
      this.listInfo = data.rows
      this.imgIdArr = []
      for (const item of data.rows) {
        for (const item2 of item.data_pic_url) {
          this.imgIdArr.push(item2)
        }
      }
      this.carouselKey++ // 及时刷新图片
      console.log(this.imgIdArr, 'imgIdArr')
    },

    async getCategories () {
      const { data } = await this.$http.get('api/pu/info/getCategories.do')

      this.categories = data.categories
      this.navActive = data.categories[0].ic_code
      await this.getListInfo(this.navActive)
    },
    changeNavActive (num) {
      this.navActive = num
      this.getListInfo(num)
    },
    // 获取时间
    updateDateTime () {
      const now = new Date()

      // 获取星期
      const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      this.dayOfWeek = daysOfWeek[now.getDay()]

      // 获取年月日
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const day = String(now.getDate()).padStart(2, '0')
      this.formattedDate = `${year}-${month}-${day}`

      // 获取小时和分钟
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')
      this.formattedTime = `${hours}:${minutes}`
    }
  },
  created () {
    this.getCategories()
    // 测试图片返回数据用
    // this.$http({
    //   url: '/attach/showImg.do?attachId=1844205918350999552&w=500&h=500"',
    //   method: 'get',
    //   responseType: 'blob'
    //
    // }).then((res) => {
    //   console.log(res, 'resss')
    // })
  },
  mounted () {
    this.updateDateTime()
    setInterval(this.updateDateTime, 1000)
  }
}
</script>

<style lang="less" scoped>

    .home {

    min-height: 100vh;
    background-color: #f2f2f2;

    .header {
        height: 3.906vw;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 35px;

        &__left {
            //height: 100%;
            img {
                width: 20.15vw;
            }
        }

        &__right {
            display: flex;

            span:nth-child(1) {
                //color: red;
                text-align: right;
                display: inline-block;
                margin-right: 0.52vw;
                font-size: 0.729vw;
                line-height: 1vw;

            }

            span:nth-child(2) {
                font-size: 2vw;
                font-weight: 700;

            }
        }

    }

    .news {
        width: 96.5vw;
        background-color: #fff;
        height: 33.13vw;
        border-radius: 4px;
        //border: 1px solid red;

        margin: 1.3vw auto 0;

        &__title {
            font-size: 1.9vw;
            font-weight: 700;
            color: #347bd5;
            text-align: center;
            height: 4.16vw;
            line-height: 4.16vw;
            border-bottom: 1px solid #e7e7e7;
            padding: 0 2.60vw;

        }

        &__content {
            padding: 1.3vw;
            padding-left: 3.3vw;
            display: flex;
            justify-content: space-between;
        }

        &__left {
            width: 46.8vw;
            height: 26vw;;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        }

        &__right {
            width: 41.3vw;
            height: 26vw;
            //border: 1px solid red;

        }

        &__nav {
            font-weight: 600;
            height: 3.02vw;
            //border: 1px solid red;
            background-color: #ecf1f5;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;

            &__item {
                border-radius: 4px;
                width: 25%;
                //border: 1px solid red;
                text-align: center;
                line-height: 3.02vw;
                font-size: 0.9vw;
                cursor: pointer;

            }

            &__active {
                background-color: #347bd5;
                color: #fff;

            }
        }

        &__list {
            padding-top: 1.5vw;

            li {
                cursor: pointer;
                display: flex;
                gap: 10px;
                justify-content: space-between;
                font-size: 1vw;
                line-height: 3.1vw;
                color: #333;

                span:nth-child(1) {
                    flex: 1;
                    letter-spacing: 0.05vw

                }

            }

        }

    }

    .zyzc {
        width: 96.5vw;
        height: 6.14vw;
        margin: 1.3vw auto 0;
        //border:1px solid red;
        img {
            width: 100%;
        }
    }

    .select {
        width: 96.5vw;
        height: 7.03vw;
        margin: 1.3vw auto 0;
        //border:1px solid red;
        display: flex;
        justify-content: space-between;

        img {
            width: 31.25vw;
            height: 100%;
            background-color: #fff;
        }
    }

}
</style>
