<template>
  <view>
    <custom-nav-bar left-text="多元调解" left-arrow />

    <view class="second-header flex flex-v-center flex-evenly" :style="item.cssStyle"
      v-for="(item, index) in recursionOneList" :key="index">
      <image class="header-bg" :src="item.icon"></image>

      <view class="nav-item flex flex-center flex-col" v-for="(itemName, idx) in item.children" :key="idx">
        <!-- <navigator class="line-navigator" :url="util.updateQuery(itemName.clickUrl, itemName)" hover-class="none"></navigator> -->
        <navigator class="line-navigator" :url="itemName.clickUrl" hover-class="none"></navigator>

        <image class="nav-item-ic-img" :src="itemName.icon"></image>

        <text class="nav-item-name">{{ itemName.name }}</text>
      </view>
    </view>

    <view class="mediate-section">
      <view class="first-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 class="first-model flex flex-v-center flex-between" v-if="index === 0">
          <view class="first-line flex flex-col 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 class="first-line flex flex-col" wx:for="{{item.children}}" wx:for-index="idx" wx:for-item="itemName" wx:key="id">
        <image class="line-bg" src="{{itemName.icon}}"></image>
        <view class="line-title">{{ itemName.name }}</view>
        <view wx:if="{{ itemName.remark }}" class="line-msg">{{ itemName.remark }}</view>
        <navigator class="line-bth" url="{{util.updateQuery(itemName.clickUrl, itemName)}}" hover-class="none">申请</navigator>
      </view> -->
        </view>

        <view class="second-model" v-if="index === 1">
          <view class="second-line flex flex-v-center flex-between" v-for="(itemName, idx) in item.children" :key="idx">
            <!-- <navigator v-if="itemName.clickUrl" class="line-navigator"
              :url="util.updateQuery(itemName.clickUrl, itemName)" hover-class="none"></navigator> -->
            <navigator v-if="itemName.clickUrl" class="line-navigator" :url="itemName.clickUrl" hover-class="none">
            </navigator>

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

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

            <image class="line-you" src="/static/images/ic-you.png"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<!-- <script module="util" lang="wxs" src="@/wxs/util.wxs"></script> -->
<script>
  // const app = getApp();
  // const {
  //   publicApi
  // } = app.globalData.api;
  import * as peopleApi from '@/api/peopleApi';
  import * as publicApi from '@/api/publicApi';
  import utils from '@/utils/util.map.js'
  export default {
    data() {
      return {
        recursionOneList: [],
        recursionList: []
      };
    }
    /**
     * 生命周期函数--监听页面加载
     */
    ,
    onLoad(option) {
      this.recursionApi(option.parentId);
    },
    methods: {
      updateQuery(url,item){
        return utils.updateQuery(url,item)
      },
      /**
       * 接口
       */
      async recursionApi(parentId) {
        const res = await publicApi.recursionApi({
          bannerType: 1,
          parentId
        });
        if (res.data) {
          this.recursionOneList = res.data.slice(0, 1)
          this.recursionList = res.data.slice(1)
        }
      }
    }
  };
</script>
<style lang="less">
  .second-header {
    position: relative;
    z-index: 1;
    height: 330rpx;
    padding-top: 128rpx;

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

    .nav-item {
      position: relative;

      .nav-item-ic-img {
        width: 72rpx;
        height: 72rpx;
      }

      .nav-item-name {
        font-size: 32rpx;
        font-weight: 400;
        color: #ffffff;
        line-height: 36rpx;
        margin-top: 16rpx;
      }
    }

    // }
  }

  .mediate-section {
    padding: 0 24rpx 40rpx;

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

      .title-name {
        position: relative;

        &::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;
        }
      }
    }
  }

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

  .first-block {
    margin-top: 50rpx;
  }

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

    .first-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: -1;
        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;
      }
    }
  }

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

  //   .first-line {
  //     width: 343rpx;
  //     height: 180rpx;
  //     justify-content: center;
  //     padding-left: 39rpx;
  //     position: relative;
  //     color: #FFFFFF;

  //     &:nth-child(n + 3) {
  //       margin-top: 16rpx;
  //     }

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

  //     .line-title {
  //       font-size: 36rpx;
  //       font-weight: 400;
  //       line-height: 40rpx;
  //     }

  //     .line-msg {
  //       margin-top: 16rpx;
  //       font-size: 24rpx;
  //       font-weight: 400;
  //       line-height: 24rpx;
  //     }

  //     .line-bth {
  //       position: absolute;
  //       z-index: 10;
  //       right: 20rpx;
  //       bottom: 36rpx;
  //       width: 90rpx;
  //       height: 46rpx;
  //       background: #FFFFFF;
  //       border-radius: 20rpx;
  //       font-size: 24rpx;
  //       font-weight: 400;
  //       color: #FF7070;
  //       line-height: 46rpx;
  //       text-align: center;
  //     }
  //   }
  // }

  .second-model {
    margin-top: 32rpx;
    width: 100%;
    height: 100%;
    padding: 0 12rpx;

    .second-line {
      height: 120rpx;
      border-bottom: 1px solid #efefef;
      position: relative;

      .line-img {
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
      }

      .line-name {
        font-size: 34rpx;
        font-weight: 400;
        color: #333333;
        line-height: 34rpx;
        margin-left: 42rpx;
      }

      .line-you {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
</style>