<template>
  <view>
    <view :style="{width:'100%', height: '316rpx', marginTop: `${statusBarHeight}px`, position: 'relative',}">
      <view @click="toHome" class="to-home-img" :style="{top:`${navbarHeight}px` ,width: `${topData.height}px`,height: `${topData.height}px`,    borderRadius: `${topData.height}px`}">
        <u-icon size="20px" name="arrow-left" bold="true" color="#666666"></u-icon>
      </view>
      <van-image :src="bgImg" height="316rpx" width="750rpx"></van-image>
      <view class="class-list" style="position: absolute; top: 124rpx;">
        <view class="class-list-item" v-for="(item, index) in classList" :key="index"          @click="toggleSelect(index,item)">
          <view style="height: 98rpx; display: flex; justify-content: center; align-items: center;" >
            <image :style="[getStyles(index)]" :src="item.logo">
            </image>
          </view>
          <view style="" :style="[getStylesText(index)]" >{{ item.cate_name }}</view>
        </view>
      </view>
    </view>
    <view class="shopping-wrapper">
      <view class="list-item display-flex-content-center mt10" v-for="(item, index) in newsList" :key="index" @click="toDetail(item)">
        <u--image
            :showLoading="true"
            :src="item.cover"
            width="192rpx"
            height="136rpx"
            radius="10rpx"
        ></u--image>
        <view  class="list-item-content ml10">
          <view class="list-item-content-title mb10">
            {{ item.name }}
          </view>
          <view class="list-item-content-read display-flex">
            <view>
              <u-icon
                  size="14"
                  name="clock"
              ></u-icon>
            </view>
            <view class="list-item-content-read-text2 ml8 mr15">
              {{ formattedCreatedAt(item)}}
            </view>
            <view>
              <u-icon
                  size="14"
                  name="eye"
              ></u-icon>
            </view>
            <view class="list-item-content-read-text2 ml8">
              {{ item.num_read }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getCatesList, getNewsList} from "@/common/api/news";
import {getData} from "@/common/api";

export default {
  data() {
    return {
      cid: 0,
      newsList:[],
      page: 1,
      pageSize: 9999,
      classList: [],
      statusBarHeight:"",
      topData: {
        top: 0,
        height: 0
      },
      selectedIndexes: [],
      bgImg:""
    };
  }
  ,onShow() {
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight; // 状态栏高度
    const topData = uni.getMenuButtonBoundingClientRect()
    this.topData.top = topData.top
    this.topData.height = topData.height
      this.getData()
  },
  watch: {
    cid(newVal, oldVal) {

      this.getCatesList()
    }
  },
  computed: {
    // 转换字符数值为真正的数值
    navbarHeight() {
      return    this.topData.top -this.statusBarHeight+1
    },
  },
  methods: {
    getData(){
      let configs = uni.getStorageSync('configs') || {}
      this.bgImg = configs.cs_fxsh_bgimg
      getCatesList({pid:6}).then(({ data })=>{
        console.log("data",data)
        if ( data){
          this.classList=data
          this.cid=data[0].id
          this.toggleSelect(0,data[0])
        }
      })
    },
    getCatesList(){
      getNewsList(
          {
            "cid":  this.cid,
            "page": this.page,
            "pageSize": this.pageSize
          }).then(({ data })=>{
        if ( data.list){
          this.newsList=data.list
        }
      })
    },
    formattedCreatedAt(item) {
      const date = new Date(item.created_at);
      const month = date.getMonth() + 1; // 月份从0开始，需要加1
      const day = date.getDate();
      return `${month}月${day}日`;
    },
    getStyles(index) {
      if (this.selectedIndexes.includes(index)) {
        return {width: '96rpx', height: '96rpx',borderRadius: '96rpx' ,border: '1rpx solid #C79C53'}
      }
      return {width: '88rpx', height: '88rpx',borderRadius: '88rpx'}
    },
    toHome() {
      uni.switchTab({
        url: '/pages/home/index'
      })
    },
    getStylesText(index) {
      if (this.selectedIndexes.includes(index)) {
        return {color: '#333333',marginTop: "14rpx",fontWeight: 'bold'}
      }
      return {color: '#666666',marginTop: "14rpx"}
    },
    toggleSelect(index,item) {
      const indexInSelected = this.selectedIndexes.indexOf(index);
      if (indexInSelected !== -1) {
        // this.selectedIndexes.splice(indexInSelected, 1); // 取消选中
        // this.cid="0";
      } else {
        this.selectedIndexes=[]
        this.selectedIndexes.push(index); // 选中
        this.cid=item.id;
      }
    },
    toDetail(item){
      uni.navigateTo({
        url: "/subPages/fragrantLife/fragrantLifeDetail?id=" + item.id,
      });
    }
  }
}
</script>

<style lang="scss">
.class-list {
  display: flex;
  width: 94%;
  flex-wrap: wrap;
  justify-content: flex-start;
  background-color: transparent;
  padding: 0 20rpx 0 20rpx;
  &-item {
    height: 138rpx;
    width: 20%;
    flex-shrink: 0;
    text-align: center;
    margin-bottom: 30rpx;
    color: #1d161f;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    transition: width 0.3s, height 0.3s, border 0.3s; // 添加过渡效果
  }
}

.to-home-img {
  position: absolute;
  left: 20rpx;
  background-color: #f8f6f6;
  z-index: 1;
  // 上下左右居中
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700 !important;
  // 边框
  border: 1rpx solid #d0ced0;
}
.shopping-wrapper {
  width: 690rpx;
  margin: 20rpx auto 0rpx;
  padding: 0rpx 20rpx 178rpx;
  .list-item {
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    width: calc(100% - 40rpx);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    padding:20rpx;
    &-content{
      width: calc(100% - 210rpx);
      &-title {
        width: 100%;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 28rpx;
        color: #333333;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏溢出的文本 */
        text-overflow: ellipsis;
      }
      &-read{
        &-text2{
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
          line-height: 32rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
    }

  }

}
</style>
