<template>
  <view class="page-container">
    <z-paging
      ref="paging"
      v-model="dynamicList"
      :paging-style="{
        background: '#F7FFFF',
      }"
      @query="queryList"
    >
      <template #top>
        <view class="tab-box">
          <view
            v-for="(item, index) in tabList"
            :key="index"
            :class="{ item: true, active: current === index + 1 }"
            @click="onTabChange(index)"
          >
            {{ item.name }}
          </view>
        </view>
      </template>
      <view class="list-box" v-if="dynamicList && dynamicList.length > 0">
        <view
          class="item"
          v-for="(item, index) in dynamicList"
          :key="index"
          @click="goDetails(item)"
        >
          <view class="item-image">
            <image
              :src="item.coverUrl || '/static/common/default-avatar.png'"
              mode="aspectFill"
            ></image>
          </view>
          <view class="item-content">
            <view class="item-title">
              <text>{{ item.title }}</text>
              <view
                :class="{
                  'service-status': item.technicianStatus != 2,
                  'reserve-status': item.technicianStatus == 2,
                }"
                >{{ item.technicianStatus === 2 ? '可预约' : '可服务' }}</view
              >
            </view>
            <view class="item-service">
              <view class="service-avatar">
                <image
                  :src="$globalData.publicUrl + item.technicianAvatar"
                  mode="aspectFill"
                ></image>
              </view>
              <view class="service-info">
                <text class="service-name">{{ item.technicianNickName }}</text>
              </view>
              <view class="diamond-count">
                <image
                  src="/static/discover/icon_eye.png"
                  mode=""
                  class="eye-icon"
                />
                <text>{{ item.viewCount }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <template v-slot:empty>
        <u-empty
          :text="!isLogin ? '您还没有登录' : '暂无相关动态~'"
          icon="/static/common/logo1.png"
        >
          <u-button
            size="small"
            text="去登录"
            color="linear-gradient(to right, #35c99d, #27aea7)"
            :customStyle="{ marginTop: '20rpx' }"
            v-if="!isLogin"
            @click="goLogin"
          >
          </u-button>
        </u-empty>
      </template>
    </z-paging>
  </view>
</template>

<script>
import { discoverList } from '@/api/dynamic.js'

export default {
  data() {
    return {
      dynamicList: [],
      current: 1,
      tabList: [
        {
          name: '推荐',
          value: 1,
        },
        {
          name: '同城商户',
          value: 2,
        },
        {
          name: '附近',
          value: 3,
        },
      ],
      isLogin: false,
    }
  },
  onLoad() {
    this.isLogin = !!uni.getStorageSync('wx_copenid')
  },
  methods: {
    queryList(pageNo, pageSize) {
      let params = {
        pageNum: pageNo,
        pageSize: pageSize,
        queryType: this.current,
        cityCode: uni.getStorageSync('selectCitycode'),
        longitude: uni.getStorageSync('longitude'),
        latitude: uni.getStorageSync('latitude'),
      }
      discoverList(params).then(res => {
        if (res.data.code === 200 && res.data.data) {
          let data = res.data.data
          data.forEach(item => {
            item.publishTime = item.publishTime
              .replace('T', ' ')
              .substring(0, 16)
          })
          this.$refs.paging.complete(data)
        } else {
          this.$refs.paging.complete([])
        }
      })
    },
    onTabChange(index) {
      this.current = index + 1
      this.$refs.paging.reload()
    },
    // 动态详情
    goDetails(item) {
      let str = uni.$u.queryParams({
        momentId: item.id,
      })
      uni.navigateTo({
        url: `/pages/discover/details${str}`,
      })
    },
    goLogin() {
      uni.navigateTo({
        url: '/pages/login/wxLogin',
      })
    },
  },
}
</script>

<style scoped lang="scss">
.page-container {
  background-color: #f7ffff;
  font-family: PingFang SC, PingFang SC;

  .tab-box {
    height: 90rpx;
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 28rpx;
    color: #333333;
    padding-left: 20rpx;
    background: linear-gradient(180deg, #c1fff8 0%, #b8fff3 34%, #f5ffff 100%);
    z-index: 999;

    .item {
      height: 55%;
      padding: 0 12rpx;
      display: flex;
      align-items: center;
    }

    .active {
      font-weight: 500;
      font-size: 30rpx;
      color: #03c8be;
      position: relative;

      &::after {
        content: '';
        width: 48rpx;
        height: 4rpx;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: #03c8be;
      }
    }
  }

  .list-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 26rpx;

    .item {
      width: calc(50% - 14rpx);
      margin-bottom: 28rpx;
      box-sizing: border-box;
      background: #ffffff;
      box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(88, 209, 187, 0.1);
      border-radius: 12rpx;
      overflow: hidden;

      .item-image {
        width: 100%;
        height: 200rpx;
        background-color: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .item-content {
        padding: 20rpx;

        .item-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16rpx;

          text:first-child {
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
          }

          .service-status {
            font-size: 24rpx;
            color: #03c8be;
          }

          .reserve-status {
            font-size: 24rpx;
            color: #f16336;
          }
        }

        .item-service {
          display: flex;

          .service-avatar {
            width: 36rpx;
            height: 36rpx;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 12rpx;

            image {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .service-info {
            display: flex;
            flex: 1;

            .service-name {
              display: block;
              font-size: 24rpx;
              color: #333;
              margin-right: 12rpx;
            }
          }

          .diamond-count {
            display: flex;
            align-items: center;

            image {
              width: 22rpx;
              height: 18rpx;
              margin-right: 8rpx;
            }

            text {
              font-size: 24rpx;
              color: #999999;
            }
          }
        }
      }
    }
  }
}
</style>