<template>
  <view style="height: 100%">
    <!-- <custom-nav-bar left-text="民生" /> -->

    <swiper class="people-custom-swiper" :indicator-dots="indicatorDots" :indicator-color="indicatorColor"
      :indicator-active-color="indicatorActiveColor">
      <block v-for="(item, index) in imageList" :key="index" @click="jumpDetails">
        <swiper-item>
          <!-- <navigator v-if="item.clickUrl" open-type="navigate" class="line-navigator" :url="item.clickUrl" hover-class="none"></navigator> -->
          <image class="custom-swiper-img" :src="item.pic"></image>
        </swiper-item>
      </block>
    </swiper>

    <view class="people-section">
      <view class="second-block" :style="item.cssStyle" v-for="(item, index) in recursionList" :key="index">
        <view class="title flex">
          <text class="title-name">{{ item.name }}</text>
        </view>

        <view v-if="index === 0">
          <swiper :indicator-dots="true" class="menu-swiper">
            <swiper-item v-for="(e, i) in item.children" :key="i">
              <view class="menu">
                <view class="menu-item" :data-item="q" @click="jumpDetails" :style="q.cssStyle" v-for="(q, index) in e"
                  :key="index">
                  <!-- <navigator wx:if="{{q.url}}" class="line-navigator" :url="updateQuery(q.url, q)" hover-class="none"> -->
                  <!-- </navigator> -->
                  <image class="menu-item-ic-img" :src="q.icon"></image>

                  <text class="menu-item-name">{{ q.name }}</text>
                </view>
              </view>
            </swiper-item>
          </swiper>
          <!-- <view class="menu-item" wx:for="{{item.children}}" wx:for-index="idx" wx:for-item="itemName" wx:key="id" style="{{itemName.cssStyle}}">
        <navigator wx:if="{{itemName.clickUrl}}" class="line-navigator" url="{{util.updateQuery(itemName.clickUrl,itemName)}}" hover-class="none"></navigator>
        <view wx:if="{{itemName.clickUrl}}" class="line-navigator" data-item="{{ itemName }}" bindtap="jumpDetails"></view>
        <image class="menu-item-ic-img" src="{{itemName.icon}}"></image>
        <text class="menu-item-name">{{ itemName.name }}</text>
      </view> -->
        </view>

        <view class="second-model flex flex-v-center flex-between" v-else>
          <view :class="'second-line flex flex-col ' + (idx === 0 ? 'line1' : '')" :style="itemName.cssStyle"
            v-for="(itemName, idx) in item.children" :key="idx">
            <navigator v-if="itemName.clickUrl" class="line-navigator" :url="updateQuery(itemName.clickUrl, itemName)"
              hover-class="none"></navigator>

            <image class="line-bg" :src="itemName.icon"></image>

            <view class="line-title">{{ itemName.name }}</view>

            <view v-if="itemName.remark" class="line-msg">{{ itemName.remark }}</view>
          </view>
        </view>
      </view>
    </view>
    <view style="height:150rpx"></view>
  </view>
</template>
<script>
  import utils from '@/utils/util.map.js'
  import * as publicApi from '@/api/publicApi.js'; // 公共 API
  
  export default {
    data() {
      return {
        indicatorDots: true,
        indicatorColor: 'rgba(255,255,255,0.4)',
        indicatorActiveColor: '#FFFFFF',
        imageList: [],
        recursionList: [],
        userId: uni.getStorageSync('userInfoData').userId,
        i: '',
        q: {
          cssStyle: '',
          icon: '',
          name: ''
        },
        e: []
      };
    }
    /**
     * 生命周期函数--监听页面加载
     */
    ,
    onLoad() {
      this.getBannerList();
      this.recursionApi();
    },
    methods: {
      updateQuery(url, name) {
        return utils.updateQuery(url, name);
      },
      /**
       * 接口
       */
      async recursionApi() {
        const res = await publicApi.recursionApi({
          bannerType: 1
        });
        res.data[0].children = this.arrayChunk(res.data[0].children, 8);
        console.log(res.data);
        if (res.data) {
          this.recursionList = res.data
        }
      },

      arrayChunk(array, size) {
        let data = [];
        for (let i = 0; i < array.length; i += size) {
          data.push(array.slice(i, i + size));
        }
        return data;
      },

      async getBannerList() {
        const res = await publicApi.getBannerApi({
          type: 1
        });
        if (res.data) {
          this.imageList = res.data.list
        }
      },

      /**
       * 页面事件
       */
      jumpSecond() {
        uni.navigateTo({
          url: '/packages/people/pages/second/second'
        });
      },

      jumpDetails(event) {
        const {
          item
        } = event.currentTarget.dataset;
        const urlArray = item.clickUrl.split(',');
        console.log(item)
        if(item.name === '智慧社区'){
          uni.navigateTo({
            url:`/packages/public/pages/web-view/web-view?parentId=[id]&name=${item.name}`
          })
        }

        if (urlArray.length === 2) {
          uni.navigateToMiniProgram({
            appId: urlArray[0] || '',
            path: urlArray[1] || '',
            success(res) {
              // 打开成功
              console.log(res, '跳转小程序');
            },
            fail() {
              uni.showToast({
                title: '请填写正确的分类菜单跳转链接',
                icon: 'none'
              });
            }
          });
          return;
        }
        // 处理参数
        const url = urlArray[0].replace(/(?:\[)(.*?)(?:\])/g, function(_, it) {
          return item[it];
        });
        uni.navigateTo({
          url: url || ''
        });
      }
    }
  };
</script>
<style lang="less">
  /* pages/people/people.wxss */
  page {
    --nav-bar-background-color: transparent;
    --nav-bar-text-color: #ffffff; // 导航栏左侧文案样式
  }

  .line-navigator {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
  }

  .people-custom-swiper {
    height: 330rpx;
    position: relative;

    .custom-swiper-img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  .people-section {
    padding: 0 24rpx;

    .title {
      font-size: 36rpx;
      font-weight: 500;
      color: #000000;
      line-height: 36rpx;
      padding-left: 6rpx;

      .title-name {
        position: relative;
        font-size: 36rpx;
        font-weight: 500;
        color: #333333;

        &::after {
          content: '';
          position: absolute;
          left: -6rpx;
          bottom: 0;
          z-index: -1;
          // width: 175rpx;
          width: 115%;
          height: 10rpx;
          background: var(--title-guides-color);
          border-radius: 2rpx;
        }
      }
    }
  }

  .second-block {
    margin-top: 25rpx;

    .second-model {
      margin-top: 40rpx;
      flex-wrap: wrap;

      .second-line {
        width: 343rpx;
        height: 110rpx;
        justify-content: center;
        padding-left: 39rpx;
        position: relative;

        &:not(:first-child) {
          margin-top: 16rpx;
        }

        .line-bg {
          width: 100%;
          height: 100%;
          position: absolute;
          z-index: 0;
          top: 0;
          left: 0;
        }

        .line-title {
          position: absolute;
          font-size: 40rpx;
          font-weight: 500;
          line-height: 32rpx;
        }

        .line-msg {
          position: absolute;
          margin-top: 100rpx;
          font-size: 26rpx;
          font-weight: 400;
          color: #666666;
          line-height: 26rpx;
        }
      }

      .line1 {
        width: 100%;
        height: 171rpx;

        .line-title {
          font-size: 40rpx;
          font-weight: 500;
          line-height: 40rpx;
        }
      }
    }

    .menu {
      // margin-top: 50rpx;
      display: grid;
      grid-template-columns: repeat(4, 120rpx);
      // grid-gap: 62rpx;
      // gap: 62rpx;
      grid-column-gap: 62rpx;
      grid-row-gap: 32rpx;
      column-gap: 62rpx;
      row-gap: 32rpx;
      justify-content: space-between;

      .menu-item {
        width: 120rpx;
        text-align: center;
        // margin-top: 50rpx;
        // margin-right: 62rpx;
        position: relative;

        &:nth-child(4n) {
          margin-right: 0;
        }

        .menu-item-ic-img {
          margin-bottom: 24rpx;
          width: 120rpx;
          height: 80rpx;
        }

        .menu-item-name {
          font-size: 26rpx;
          font-weight: 400;
          color: #333333;
          line-height: 26rpx;
        }
      }
    }
  }

  .second-block {
    color: #fe6e72;
  }

  .menu-swiper {
    width: 100%;
    height: 375rpx;

    // 修改dot
    .wx-swiper-dots .wx-swiper-dot {
      width: 25rpx;
      height: 4rpx;
      background: #efefef;
      border-radius: 3rpx;
    }

    .wx-swiper-dots .wx-swiper-dot-active {
      width: 143rpx;
      height: 4rpx;
      background: #ff8f8f;
    }

    /* 修改dot之间的间距 */
    .wx-swiper-dots .wx-swiper-dot:nth-of-type(n + 2) {
      margin-left: -14rpx;
    }
  }

  .menu {
    display: grid;
    grid-template-columns: repeat(4, 160rpx);
    column-gap: 16rpx;
    row-gap: 40rpx;
    justify-content: center;
    padding-top: 40rpx;
    // padding: 40rpx 0 56rpx;

    .menu-item {
      width: 160rpx;
      position: relative;
      text-align: center;

      .menu-item-ic-img {
        width: 72rpx;
        height: 72rpx;
        margin: 0 auto 22rpx;
      }

      .menu-item-name {
        font-size: 28rpx;
        font-weight: 400;
        color: #333333;
        line-height: 28rpx;
      }
    }
  }
</style>