<template>
  <view class="garden-card">
    <view
      class="garden-list-item"
      v-for="item in listData"
      :key="item.id"
      @click="jumpDetail(item)"
    >
      <!-- <view class="garden-list-item-time">
        开园时间： {{ item.createTime }}
      </view> -->
      <view class="garden-list-item-card">
        <view class="garden-list-item-card-top">
          <view class="garden-list-item-card-top-label">
            <text>{{
              item.schoolName.length > 7
                ? item.schoolName.substr(0, 7) + "..."
                : item.schoolName
            }}</text>
            <view class="rect">
              {{
                item.principalName.length > 5
                  ? item.principalName.substr(0, 5) + "..."
                  : item.principalName
              }}
            </view>
          </view>
          <view class="garden-list-item-card-top-time"
            >开园时间：{{ item.createTime }}</view
          >

          <image src="@/static/image/right-arrow.png" alt="" />
          <!-- <view class="garden-list-item-card-top-city">
            {{ item.address.address }}
          </view> -->
        </view>
        <!-- <view class="line" />
        <view class="garden-info">
          <view class="garden-info-item">
            班级数量: {{ item.classCount }}
          </view>
          <view class="garden-info-item">
            教职工数量：{{ item.teachUserCount }}
          </view>
          <view class="garden-info-item">
            学生数量：{{ item.studentCount }}
          </view>
          <view class="garden-info-item"> 手机：{{ item.phone }} </view>
        </view>
        <view class="garden-product">
          <view class="garden-product-label">使用产品：</view>
          <view
            :class="
              item.isExpand
                ? 'garden-product-content-true'
                : 'garden-product-content-false'
            "
            v-if="item.courseNames && item.courseNames.length !== 0"
          >
            <view
              class="garden-product-content-item"
              v-for="i in item.courseNames"
              :key="i.catId"
            >
              {{ i.catName }}
            </view>
          </view>
          <view v-else class="garden-product-content-false">无</view>
          <view
            class="garden-product-expand"
            v-if="
              item.courseNames &&
              item.courseNames.length !== 0 &&
              item.courseNames.length > 1
            "
            @click="handleExpand(index)"
            >{{ item.isExpand ? "收起更多" : "展开更多" }}</view
          >
        </view> -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "garden-card",
  props: {
    districtGardenData: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    listData() {
      return this.districtGardenData;
    },
  },
  methods: {
    jumpDetail(item) {
      // console.log(item, "jumpDetail");
      uni.navigateTo({
        url: `/pages/districtGarden/detail?id=${item.id}`,
      });
    },
    //   展开与收起
    handleExpand(i) {
      if (this.listData[i].isExpand === true) {
        this.$set(this.listData[i], "isExpand", false);
      } else {
        this.$set(this.listData[i], "isExpand", true);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.garden-list-item {
  &-card {
    position: relative;
    margin-top: 52rpx;
    padding: 40rpx 30rpx;
    width: 686rpx;
    background: #ffffff;
    box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(235, 235, 235, 0.5);
    border-radius: 20rpx;
    overflow: hidden;
    box-sizing: border-box;
    &-top {
      &-label {
        display: flex;
        align-items: center;
        text {
          margin-right: 16rpx;
          height: 44rpx;
          line-height: 44rpx;
          font-size: 36rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #42516c;
        }
        .rect {
          padding: 0rpx 18rpx;
          height: 38rpx;
          background-color: #1228b9;
          text-align: center;
          transform: skewX(-14deg);
          -webkit-transform: skewX(-14deg);
          -moz-transform: skewX(-14deg);
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          border-radius: 10rpx;
          box-sizing: border-box;
        }
      }
      &-time {
        margin-top: 14rpx;
        width: 370rpx;
        height: 28rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9c9aab;
        line-height: 28rpx;
      }

      image {
        position: absolute;
        top: 50%;
        right: 42rpx;
        display: block;
        width: 14rpx;
        height: 20rpx;
        object-fit: cover;
        transform: translateY(-50%);
      }
    }
  }
}
&-item:last-child {
  padding-bottom: 200rpx;
}
</style>