<template>
  <view>
    <custom-nav-bar color="black" :left-text="optin.name" left-arrow />

    <view class="search">
      <view class="flex flex-between search-input">
        <input class="input" :value="searchValue" type="text" confirm-type="search"
          placeholder-class="placeholder-style" placeholder="请输入搜索商户名称" @input="onSearch" @confirm="onChange" />
        <view class="search-icon flex flex-center" @click="onSearch">
          <image class="imgage" src="/static/images/search.png"></image>
        </view>
      </view>

      <view class="life-tabs" v-if="dataList.length !== 0">
        <view class="life-conent" @tap="headleDetails" :data-item="item" v-for="(item, index) in dataList" :key="index">
          <image class="life-conent-image" :src="item.merchantPhoto" mode="aspectFill"></image>

          <view class="life-conent-article flex flex-col flex-between">
            <view class="life-conent-title text-line-1">{{ item.merchantName }}</view>
            <view class="life-conent-block text-line-2">
              <rich-text :nodes="item.merchantIntroduce"></rich-text>
            </view>
            <view class="life-conent-rate flex flex-v-center flex-between">
              <van-rate readonly icon="/src/images/rate-icon.png" void-icon="/src/images/void-icon2.png"
                :value="item.merchantGrade" />
              <view>
                <text>距离</text>
                <text class="rate-loca-active">{{ setMorKm(item.distance) }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <van-empty v-if="dataList.length === 0" :description="'暂无' + optin.name" />
    </view>
  </view>
</template>
<!-- <script module="toods" lang="wxs" src="@/wxs/util.wxs"></script> -->
<script>
  // const app = getApp();
  // const {
  //   lifeApi
  // } = app.globalData.api;
  import * as lifeApi from '@/api/lifeApi';
  import utils from '@/utils/util.map';
  export default {
    components: {},
    data() {
      return {
        searchValue: '',
        optin: {
          name: ''
        },
        dataList: [],
        pageNo: 1,
        pageSize: 10,
        total: 0
      };
    },
    onLoad(optin) {
      this.optin = optin
      this.merchantPageApi();
    },
    onReachBottom() {
      if (this.dataList.length === this.total) {
        return;
      }
      this.merchantPageApi(false);
    },
    methods: {
      setMorKm(distance){
        return utils.setMorKm(distance)
      },
      // 生活对应栏目的分页查询
      async merchantPageApi(reset = true) {
        const params = this.generalQueryData(reset);
        const res = await lifeApi.merchantPageApi(params);
        let _goodsList = []
        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) {
                console.log($0, $1);
                return {
                  '<img': '<img style="width:100%;height:auto;display:block;" ',
                  '<p': '<p',
                  '<article': '<div',
                  '</article': '</div',
                  '<header': '<div',
                  '</header': '</div'
                } [$1];
              });
            }
          });
          this.dataList = _goodsList
        }
      },

      onChange(e) {
        this.searchValue = e.detail.value
        this.merchantPageApi();
      },

      onSearch(e) {
        if (e.detail.value !== '') {
          return;
        }
        this.searchValue = e.detail.value
        this.merchantPageApi();
      },

      // 分页参数处理事件
      generalQueryData(reset = false) {
        const {
          pageNo,
          pageSize,
          searchValue,
          optin
        } = this;
        // const {
        //   latitude,
        //   longitude
        // } = app.globalData.config.locationInfo;
        const locationInfo = uni.getStorageSync('userLocation').split(',')
        const params = {
          pageNo: 1,
          pageSize: 10
        };
        if (optin.type === '1') {
          params.latitude = locationInfo[0];
          params.longitude = locationInfo[1];
          // params.nearFlag = 1;
        }

        if (searchValue) {
          params.merchantName = searchValue;
        }
        if (optin.id) {
          params.merchantType = optin.id;
        }
        if (reset) {
          return params;
        }
        return {
          ...params,
          pageNo: pageNo + 1,
          pageSize
        };
      },

      // 进入详情页
      headleDetails(event) {
        const {
          id
        } = event.currentTarget.dataset.item;
        uni.navigateTo({
          url: `/packages/public/pages/details/details?name=店铺详情&referId=${id}`
        });
      }
    }
  };
</script>
<style lang="less">
  page {
    --rate-icon-size: 26rpx; // 评分大小
    --rate-icon-gutter: 8rpx; // 评分图标之前的距离
  }

  .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: 35rpx;
      border: 1px solid #e1e1e1;
      text-align: center;
      position: relative;
      box-sizing: content-box;

      .input {
        width: 100%;
        height: 64rpx;
        line-height: 64rpx;
        text-decoration: 20rpx;
        padding: 0 64rpx;
        font-size: 26rpx;
        font-weight: 400;
      }

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

    .search-icon {
      width: 64rpx;
      height: 64rpx;
      background: #ffffff;
      border-radius: 35rpx;
      border: 1px solid #e1e1e1;
      position: absolute;
      right: -1px;
      top: 0;
      z-index: 1;

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

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

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

      .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 {
            font-size: 30rpx;
            font-weight: 500;
            color: #333333;
            line-height: 30rpx;
          }

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

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

            .rate-loca-active {
              color: #333333;
            }
          }
        }
      }
    }
  }
</style>