<template>
  <view class="matchmaking" style="margin-bottom: 10px">
    <view v-if="navs.listStyle == 1">
     <!-- <waterfallsFlow
        :single="true"
        :list="navs.list"
        @wapper-lick="goDetail()"
      >
        <view
          v-for="(item, index) of navs.list"
          :key="index"
          slot="slot{{index}}"
        >
          <view class="pb-box">
            <u-avatar :src="item.Photo" size="72"></u-avatar>
            <image
              class="gstyle2"
              v-if="item.SexStr == '男'"
              src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan2.png"
            ></image>
            <image
              class="gstyle2"
              v-if="item.SexStr == '女'"
              src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv2.png"
            ></image>
            <view class="boxt-center">
              <view class="row">
                <view class="box-name">{{ item.name }}</view>
              </view>
              <view class="row">
                <view class="boxtc-b-item" v-if="item.Age > 0"
                  >{{ item.Age }}岁</view
                >
              </view>
            </view>
          </view>
        </view>
      </waterfallsFlow> -->
    </view>
    <view
      class="matchmaking-box"
      v-for="(item, index) in navs.list"
      :key="index"
      @click="goDetail(item)"
      v-if="navs.listStyle == -1 || navs.listStyle == 0"
    >
      <view class="box-top">
        <u-avatar :src="item.Photo" size="80"></u-avatar>
        <image
          class="gstyle"
          v-if="item.SexStr == '男'"
          src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan2.png"
        ></image>
        <image
          class="gstyle"
          v-if="item.SexStr == '女'"
          src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv2.png"
        ></image>
        <view class="boxt-center">
          <view class="row">
            <view class="box-name">{{ item.name }}</view>
          </view>
          <view class="row">
            <view class="boxtc-b-item" v-if="item.Age > 0"
              >{{ item.Age }}岁</view
            >
            <view class="boxtc-b-item">{{ item.Education }}</view>
            <view class="boxtc-b-item">{{ item.Marriage }}</view>
          </view>
        </view>
        <!-- <view class="boxt-r" v-if="item.MatchingRate>0">
					匹配度 {{item.MatchingRate}}%
				</view> -->
      </view>
      <view class="box-img">
        <view
          v-if="navs.listStyle == -1 && item.AlbumList.length > 0"
          class="box-img-one"
        >
          <image
            :src="item.AlbumList[0]"
            mode="aspectFill"
            style="width: 100%; height: 100%; border-radius: 15px"
          ></image>
        </view>
        <view v-if="navs.listStyle == 0" class="box-img-two">
          <view
            class="box-img-two-item"
            v-for="(x, y) in item.AlbumList"
            :key="y"
          >
            <image
              :src="x"
              mode="aspectFill"
              style="width: 100%; height: 100%; border-radius: 15px"
            ></image>
          </view>
          <view style="width: 1px; height: 10px"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// import waterfallsFlow from './maramlee-waterfalls-flow.vue'
export default {
  props: ["navs"],
  // components: { waterfallsFlow },
  data() {
    return {
      type: 2,
      mainColor: "",
      secondary: "",
    };
  },
  created() {
    this.mainColor = this.$uiConfig.mainColor;
    this.secondary = this.$uiConfig.secondary;
  },
  methods: {
    goDetail(x) {
      uni.navigateTo({
        url: "/pages/blindDate/persondetails?UserId=" + x.id,
      });
    },
  },
};
</script>

<style>
.matchmaking-box {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  background-color: #fff;
}
.matchmaking .box-top {
  width: 100%;
  padding: 0 15px;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

.matchmaking .gstyle {
  position: absolute;
  left: 78rpx;
  bottom: 0;
  width: 32rpx;
  height: 32rpx;
}

.matchmaking .boxt-center {
  width: 1px;
  flex: 1;
  height: 80rpx;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.matchmaking .boxt-r {
  width: 70px;
  font-size: 11px;
  color: #888888;
  text-align: right;
}
.matchmaking .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.matchmaking .boxtc-t-f {
  width: 28px;
  height: 14px;
  border-radius: 3px;
  font-size: 10px;
  background: #b2eeec;
  display: flex;
  align-items: center;
  justify-content: center;
}
.matchmaking .box-name {
  font-size: 14px;
  color: #111111;
  margin-left: 5px;
  width: calc(100vw - 30px - 40px - 28px - 15px - 70px);
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.matchmaking .boxtc-b-item {
  font-size: 10px;
  color: #858687;
  height: 16px;
  padding: 0 6px;
  border-radius: 8px;
  background: #f8f8f8;
  margin-right: 5px;
}
.matchmaking .box-img {
  width: 100%;
  margin-top: 15px;
}
.matchmaking .box-img-one {
  padding: 0 15px;
  border-radius: 15px;
  width: 100%;
  height: 420rpx;
}
.matchmaking .box-img-two {
  display: -webkit-box;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 0 15px;
}
/* 隐藏下方的滚动条 */
.box-img-two::-webkit-scrollbar {
  background-color: transparent;
}

.matchmaking .box-img-two-item {
  width: 323px;
  height: 450px;
  border-radius: 15px;
  margin-right: 10px;
  overflow: hidden;
}

.matchmaking .pb-box {
  width: 100%;
  padding: 10px 5px;
  background: #fff;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  display: flex;
  align-items: center;
  position: relative;
}
.matchmaking .gstyle2 {
  position: absolute;
  left: 64rpx;
  top: 64rpx;
  width: 24rpx;
  height: 24rpx;
}
</style>
