<template>
  <view class="list-box" v-if="dataList && dataList.length > 0">
    <view
      class="item"
      v-for="(item, index) in dataList"
      :key="index"
      @click="goDetails(item)"
    >
      <view class="item-image">
        <image :src="item.coverUrl" mode="aspectFill"></image>
      </view>
      <view class="item-content">
        <view class="item-title">
          <text>{{ item.title }}</text>
          <view
            v-if="type != 'merchant'"
            :class="{
              'service-status': item.auditStatus != 1,
              'reserve-status': item.auditStatus == 1,
            }"
            >{{ item.auditStatus == 2 ? '已审核' : '审核中' }}</view
          >
        </view>
        <view class="item-service">
          <view class="service-info">
            <text class="service-time">{{ item.publishTime }}</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>

<script>
export default {
  name: 'my-list',
  props: {
    type: {
      type: String,
      default: 'user',
    },
    dataList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    goDetails(item) {
      let str = uni.$u.queryParams({
        momentId: item.id,
      })
      uni.navigateTo({
        url: `/pages/discover/details${str}`,
      })
    },
  },
}
</script>

<style scoped lang="scss">
.list-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 26rpx;
  font-family: PingFang SC, PingFang SC;

  .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-info {
          display: flex;
          flex: 1;

          .service-time {
            display: block;
            font-size: 24rpx;
            color: #999999;
          }
        }

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

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

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