<template>
  <view style="height: 100%">
    <custom-nav-bar position="fixed" color="black" left-text="精彩介休" left-arrow />

    <view class="search">
      <view>
        <view class="flex flex-between search-input">
          <input class="input" type="text" placeholder-class="placeholder-style" placeholder="请输入你想查询的内容" />
          <view class="search-icon flex flex-center">
            <image class="imgage"
              src="https://zongzhi.xuqidata.com:5009/xq-ssg/d17f4b5125b293f8cf7ff1b633e4722c105ec1411347a9df1e0737c47300e535.png">
            </image>
          </view>
        </view>
      </view>

      <view class="life-tabs">
        <van-tabs :active="tabs.active" title-active-color="#FE3B53" line-width="40px"
          @change="onChange($event, { tagId: 'lifeListTabs' })" :ellipsis="false" id="lifeListTabs">
          <van-tab :title="key.name" v-for="(key, index) in recursionList" :key="index">
            <view class="life-tabs-flex">
              <van-grid column-num="2" :border="false" :center="false">
                <van-grid-item use-slot :url="item.clickUrl + '&name=' + item.name"
                  v-for="(item, index1) in key.children" :key="index1">
                  <view class="flex flex-v-center">
                    <view class="life-tabs-icon flex flex-center">
                      <image class="icon" :src="item.icon" />
                    </view>
                    <text class="life-iocn-title">{{ item.name }}</text>
                  </view>
                </van-grid-item>
              </van-grid>
            </view>
          </van-tab>
        </van-tabs>
      </view>
    </view>
  </view>
</template>

<script>
  // const app = getApp();
  // const { publicApi } = app.globalData.api;
  import * as publicApi from '@/api/publicApi';
  export default {
    components: {},
    data() {
      return {
        // env: app.globalData.env,
        // appName: app.globalData.env.appName,

        tabs: {
          active: 0,
          list: [{
              id: 1,
              title: '政务服务'
            },
            {
              id: 2,
              title: '公共服务'
            },
            {
              id: 3,
              title: '生活服务'
            },
            {
              id: 4,
              title: '企业服务'
            },
            {
              id: 5,
              title: '区级服务'
            },
            {
              id: 6,
              title: '全部'
            }
          ],
          first: {
            title: '精彩介休',
            list: [{
                bgColor: 'linear-gradient(180deg, #FC9D38 0%, #FE9153 100%)',
                icon: '/images/life/gourmet.png',
                name: '美食'
              },
              {
                bgColor: 'linear-gradient(180deg, #FF5F7A 0%, #FE3B53 100%)',
                icon: '/images/life/market.png',
                name: '商场'
              },
              {
                bgColor: 'linear-gradient(180deg, #FF95A7 0%, #FF6A7C 100%)',
                icon: '/images/life/film.png',
                name: '电影演出'
              },
              {
                bgColor: 'linear-gradient(180deg, #F48BC0 0%, #EF6BA8 100%)',
                icon: '/images/life/park.png',
                name: '公园'
              },
              {
                bgColor: 'linear-gradient(180deg, #B17DF3 0%, #A068F0 100%)',
                icon: '/images/life/scenic.png',
                name: '景点'
              },
              {
                bgColor: 'linear-gradient(180deg, #22ACFB 0%, #1593F7 100%)',
                icon: '/images/life/hospital.png',
                name: '医院'
              },
              {
                bgColor: 'linear-gradient(180deg, #329CF0 0%, #2789EC 100%)',
                icon: '/images/life/bus.png',
                name: '公交车'
              },
              {
                bgColor: 'linear-gradient(180deg, #8D8EFF 0%, #7375F6 100%)',
                icon: '/images/life/all.png',
                name: '全部'
              }
            ]
          }
        },

        recursionList: ''
      };
    },
    async onLoad() {
      this.recursionApi();
    },
    methods: {
      async recursionApi() {
        const res = await publicApi.recursionApi({
          bannerType: 2,
          parentId: 15
        });
        if (res.data) {
          this.setData({
            recursionList: res.data
          });
          // 触发tabs重绘，解决tabs底部下划线位置错误
          this.zpSelectComponent('#lifeListTabs').resize();
        }
      },

      onChange(e, _dataset) {
        /* ---处理dataset begin--- */
        this.handleDataset(e, _dataset);
        /* ---处理dataset end--- */
        console.log('占位：函数 onChange 未声明');
      }
    }
  };
</script>
<style lang="less">
  .right-icon {
    width: 64rpx;
    height: 64rpx;
    background: #ffffff;
    border-radius: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e1e1e1;

    .icon {
      width: 32rpx;
      height: 32rpx;
    }
  }

  .search {
    padding: 30rpx 30rpx 54rpx 30rpx;

    .search-input {
      height: 64rpx;
      line-height: 64rpx;
      background: #f9f9f9;
      border-radius: 1000rpx;
      border: 1px solid #e1e1e1;

      .input {
        width: 87%;
        line-height: 64rpx;
        height: 60rpx;
        text-decoration: 20rpx;
        padding-left: 30rpx;
        font-size: 26rpx;
        font-weight: 400;
      }

      .placeholder-style {
        text-align: center;
        color: #c1c1c1;
      }
    }

    .search-icon {
      width: 64rpx;
      height: 64rpx;
      background: #ffffff;
      border-radius: 5000rpx;
      border: 1px solid #e1e1e1;

      .imgage {
        width: 32rpx;
        height: 32rpx;
      }
    }

    .life-tabs {
      margin-top: 40rpx;

      .van-tabs__wrap {
        border-bottom: 1px solid #c1c1c1;
      }

      .life-tabs-flex {
        margin-top: 50rpx;

        .life-tabs-icon {
          width: 70rpx;
          height: 70rpx;
          box-shadow: 0px 6px 4px 0px rgba(254, 80, 107, 0.1);
          border-radius: 500rpx;

          .icon {
            width: 70rpx;
            height: 70rpx;
          }
        }

        .life-iocn-title {
          margin-left: 32rpx;
          font-size: 34rpx;
          font-weight: 400;
          color: #333333;
          line-height: 34rpx;
        }
      }
    }
  }
</style>