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

    <swiper class="life-custom-swiper" :indicator-dots="indicatorDots" :indicator-color="indicatorColor"
      :indicator-active-color="indicatorActiveColor">
      <block v-for="(item, index) in imageList" :key="index">
        <swiper-item>
          <navigator v-if="item.clickUrl" class="line-navigator" :url="updateQuery(item.clickUrl,itemName)" hover-class="none"></navigator>
          <image class="custom-swiper-img" :src="item.pic"></image>
        </swiper-item>
      </block>
    </swiper>

    <view class="life-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 class="menu flex flex-v-center flex-between" v-if="index === 0">
          <view class="menu-item" :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="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  ></image> -->
            <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 class="life-section tabs-section">
      <view class="title flex">
        <text class="title-name">精彩介休</text>
      </view>
      <view class="life-tabs">
        <van-tabs v-model:active="tabs.active" @click-tab="onChange($event, { tagId: 'lifeTabs' })" line-width="40px"
          :ellipsis="false" id="lifeTabs">
          <van-tab :title="key.label" v-for="(key, index) in tabs.typeList" :key="index" :name="key.value">
            <view v-if="dataList.length !== 0" class="life-conent" @tap="headleDetails" :data-item="item"
              v-for="(item, index1) in dataList" :key="index1">
              <image lazy-load class="life-conent-image" :src="item.merchantPhoto"></image>

              <view class="life-conent-article flex flex-col flex-between">
                <view class="life-conent-title">{{ item.merchantName }}</view>
                <view class="life-conent-block text-line-2">
                  <mp-html class="mp-html" :content="item.merchantIntroduce" />
                </view>
                <view class="life-conent-rate flex flex-v-center flex-between">
                  <view>
                    <!-- <text>距离</text> -->
                    <!-- <text class="rate-loca-active">{{ util.setMorKm(item.distance) }}</text> -->
                  </view>
                </view>
              </view>
            </view>
            <van-empty v-if="dataList.length === 0" description="暂无数据" />
          </van-tab>
        </van-tabs>
        <!-- <van-tabs :active="tabs.active" @change="onChange($event, { tagId: 'lifeTabs' })" line-width="40px"
          :ellipsis="false" id="lifeTabs">
          <van-tab :title="key.label" :name="key" :data-item="key" v-for="(key, index) in tabs.typeList" :key="index">
            

          </van-tab>
        </van-tabs> -->
      </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
  import * as lifeApi from '@/api/lifeApi'; // 生活
  export default {
    data() {
      return {
        indicatorDots: true,
        indicatorColor: 'rgba(255,255,255,0.4)',
        indicatorActiveColor: '#FFFFFF',
        imageList: [],
        recursionList: [],

        tabs: {
          active: 0,
          merchantType: 1,
          typeList: []
        },

        dataList: [],
        pageNo: 1,
        pageSize: 10,
        total: 0
      };
    },
    components: {},
    onLoad() {
      this.getBannerListApi();
      this.recursionApi();
      this.merchantPageApi();
      this.getmerchantTypeApi();
    },
    onReachBottom() {
      if (this.dataList.length === this.total) {
        return;
      }
      this.merchantPageApi(false);
    },
    methods: {
      updateQuery(url, name) {
        console.log(utils.updateQuery(url, name))
        return utils.updateQuery(url, name);
      },
      /**
       * 接口
       */
      async recursionApi() {
        const res = await publicApi.recursionApi({
          bannerType: 2
        });
        if (res.data) {
          this.recursionList = res.data
        }
      },

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

      async merchantPageApi(reset = true) {
        const params = this.generalQueryData(reset);
        let _goodsList = []
        // params.nearFlag = 1;
        // params.pageSize = 10
        const res = await lifeApi.merchantPageApi(params);
        if (res.data) {
          const {
            list = [], total = 0
          } = res.data;
          if (reset) {
            _goodsList = list;
          } else {
            _goodsList = this.dataList.concat(list);
          }
          this.pageNo = params.pageNo || 1;
          this.total = total;
          _goodsList.forEach((element) => {
            if (element.merchantIntroduce) {
              element.merchantIntroduce = element.merchantIntroduce.replace(/(\<img|\<p|src=null)/gi, function($0,
                $1) {
                return {
                  '<img': '<img style="width:100%;height:auto;display:none;" ',
                  '<p': '<p',
                  '<article': '<div',
                  '</article': '</div',
                  '<header': '<div',
                  '</header': '</div'
                } [$1];
              });
            }
          });
          _goodsList.sort(function(a, b) {
            return b.merchantGrade - a.merchantGrade;
          });
          this.dataList = _goodsList
        }
      },

      // 字典类型
      async getmerchantTypeApi() {
        const {
          tabs
        } = this;
        const res = await publicApi.getDictDataApi({
          dictType: 'merchant_type',
          pageSize: 50
        });
        if (res.data) {
          this.tabs = {
            ...tabs,
            typeList: res.data.list.reverse()
          }
        }
        // 触发tabs重绘，解决tabs底部下划线位置错误
        // this.zpSelectComponent('#lifeTabs').resize();
      },

      // 分页参数处理事件
      generalQueryData(reset = false) {
        const {
          pageNo,
          pageSize,
        } = this;
        // const {
        //   latitude,
        //   longitude
        // } = app.globalData.config.locationInfo;
        const params = {
          pageNo: 1,
          pageSize: 10,
          // latitude,
          // longitude
        };
        if (this.tabs.merchantType) {
          params.merchantType = this.tabs.merchantType;
        }
        if (reset) {
          return params;
        }
        return {
          ...params,
          pageNo: pageNo + 1,
          pageSize
        };
      },

      // tabs切换
      onChange(event, _dataset) {
        console.log(event)
        console.log(_dataset)
        /* ---处理dataset begin--- */
        this.generalQueryData(event, _dataset);
        /* ---处理dataset end--- */
        const {
          tabs
        } = this;
        this.tabs = {
          ...tabs,
          active: event.name,
          merchantType: event.name
        }
        // 重新调用tabs切换
        this.merchantPageApi();
      },

      // 进入详情页
      headleDetails(event) {
        const {
          id
        } = event.currentTarget.dataset.item;
        uni.navigateTo({
          url: `/packages/public/pages/details/details?name=店铺详情&referId=${id}`
        });
      },

      // 通用函数
      generalFunction(res, key) {
        console.log(res);
        if (res && res.createTime) {
          res.createTime = app.globalData.util.timeFormat(res.createTime);
          if (res.merchantIntroduce) {
            res.merchantIntroduce = res.merchantIntroduce.replace(/(\<img|\<p|src=null)/gi, function($0, $1) {
              console.log($0, $1);
              return {
                '<img': '<img style="width:100%;height:auto;display:block;" ',
                '<p': '<p style="text-indent: 24px;" ',
                '<article': '<div',
                '</article': '</div',
                '<header': '<div',
                '</header': '</div'
              } [$1];
            });
          }
          this.setData({
            dataList: res
          });
        }
      }
    }
  };
</script>
<style lang="less">
  page {
    --nav-bar-background-color: transparent;
    --nav-bar-text-color: #ffffff; // 导航栏左侧文案样式
    --rate-icon-size: 26rpx; // 评分大小
    --rate-icon-gutter: 8rpx; // 评分图标之前的距离
  }

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

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

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

  .life-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,
  .third-block,
  .fourth-block {
    margin-top: 50rpx;

    .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 {
      flex-wrap: wrap;

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

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

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

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

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

  .second-block {
    color: #fe6e72;
  }

  .third-block {
    color: #3692d8;
  }

  .fourth-block {
    color: #209182;
  }

  .tabs-section {
    margin-top: 50rpx;
  }

  .life-tabs {
    margin-top: 20rpx;
    font-size: 32rpx;
    font-weight: 500;
    // transform: translateX(-30rpx);

    .life-conent {
      margin-top: 37rpx;
      display: flex;
      justify-content: space-between;
      padding-bottom: 24rpx;
      border-bottom: 1px solid #efefef;

      .life-conent-image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
      }

      .life-conent-article {
        flex: 1;
        margin-left: 24rpx;

        .life-conent-title {
          margin-top: 6rpx;
          font-size: 30rpx;
          font-weight: 500;
          color: #333333;
          line-height: 30rpx;
        }

        .life-conent-block {
          margin-top: 10rpx;
          font-size: 26rpx;
          font-weight: 400;
          color: #666666;
          line-height: 38rpx;
          height: 80rpx;
        }

        .life-conent-rate {
          font-size: 24rpx;
          font-weight: 400;
          color: #999999;
          line-height: 24rpx;
          margin-top: 9rpx;

          .rate-loca-active {
            color: #333333;
          }
        }
      }
    }
  }

  rich-text {
    overflow: hidden;
    display: inline-block;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
</style>