<template>
  <view class="Card">
    <view class="Card-item">
      <view class="Card-item-time">
        {{ item.createTime }}
      </view>
      <view class="Card-item-card">
        <view class="Card-item-card-top">
          <view class="Card-item-card-top-school">
            {{ item.schoolName }}-园长
          </view>
          <!-- refuse or pass -->
          <view class="Card-item-card-top-audit">
            <view class="Card-item-card-top-audit-left">
              <image :src="item.schoolImg" />
              <text>{{ item.principalName }}</text>
            </view>
            <view class="Card-item-card-top-audit-right">
              <slot> </slot>
            </view>
          </view>
        </view>
        <!-- line -->
        <view class="line" />
        <!-- 详细信息 -->
        <view class="detail-message">
          <view class="use-product" @click="handleTip">
            使用产品：{{ item.courseNames | handleCourseNames }}
          </view>
          <view class="school-adress">
            园所地址：{{ item.address.address }}
          </view>
          <view class="phone"> 手机：{{ item.phone }} </view>
          <view class="school-count"> 班级数量: {{ item.classCount }} </view>
        </view>
      </view>
    </view>

    <popup :show="show" @close="show = false">
      <view class="popupBox">
        <image
          :src="closeBtnImg"
          class="closeBtn"
          @click="show = false"
        ></image>
        <h1 class="title">使用产品</h1>
        <view class="course" v-for="i in item.courseNames" :key="i.cardId">
          <view class="courseName"
            ><image class="circle" src="@/static/image/circle.png"></image
            >{{ i.cardName }}</view
          >
        </view>
        <button class="confirmBtn" @click="show = false">确定</button>
      </view>
    </popup>
  </view>
</template>

<script>
import Popup from "@/components/popup/index";
import Tip from "@/utils/tip.js";

export default {
  name: "Card",
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  components: {
    Popup,
  },
  computed: {
    item1() {
      return 1;
    },
  },
  filters: {
    handleCourseNames(list) {
      let name = "";
      if (list && list.length !== 0) {
        list.forEach((item) => {
          if (name !== "") name += "、";
          name += item.cardName;
        });
      } else {
        name = "无合作产品";
      }
      return name;
    },
  },
  data() {
    return {
      show: false,
      closeBtnImg: require("@/static/image/closeBtn.png"),
    };
  },
  methods: {
    handleTip() {
      if (this.item.courseNames && this.item.courseNames.length !== 0) {
        this.show = true;
      } else {
        Tip.error("无合作产品");
      }
    },
  },
};
</script>
<style scoped lang="less">
.Card {
  background: #f5f6fa;
  &-item {
    &-time {
      height: 92rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9c9aab;
      text-align: center;
      line-height: 92rpx;
    }
    &-card {
      width: 686rpx;
      background: #ffffff;
      box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(235, 235, 235, 0.5);
      border-radius: 20rpx;
      box-sizing: border-box;
      margin: 0 auto;
      &-top {
        padding: 30rpx 28rpx 26rpx 26rpx;
        box-sizing: border-box;
        &-school {
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9c9aab;
          margin-bottom: 20rpx;
        }
        &-audit {
          display: flex;
          justify-content: space-between;
          align-items: center;
          &-left {
            display: flex;
            align-items: center;
            image {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              margin-right: 16rpx;
              display: block;
              object-fit: cover;
            }
            text {
              font-size: 36rpx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #42516c;
            }
          }
        }
      }
      .line {
        width: 100%;
        height: 2rpx;
        background: #f6f6f6;
        margin-bottom: 26rpx;
      }
      .detail-message {
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9c9aab;
        padding: 0 24rpx 40rpx 24rpx;
        box-sizing: border-box;
        .phone {
          padding-left: 20rpx;
          margin-top: 24rpx;
          margin-bottom: 24rpx;
        }
        .use-product {
          padding: 0 20rpx;
          margin-bottom: 24rpx;
          width: 638rpx;
          height: 72rpx;
          line-height: 72rpx;
          background: #f7f7f7;
          border-radius: 8rpx;
          box-sizing: border-box;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .school-count {
          padding-left: 20rpx;
        }
        .school-adress {
          padding-left: 20rpx;
        }
      }
    }
  }
}

.popupBox {
  position: relative;
  width: 686rpx;
  background: #ffffff;
  border-radius: 24rpx;
  overflow: hidden;
  .closeBtn {
    position: absolute;
    top: 40rpx;
    right: 40rpx;
    width: 26rpx;
    height: 26rpx;
    object-fit: cover;
  }
  .title {
    margin: 60rpx 0 32rpx;
    height: 52rpx;
    font-size: 38rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 550;
    color: #333333;
    line-height: 52rpx;
    text-align: center;
  }
  .course {
    margin-left: 88rpx;
    margin-bottom: 40rpx;

    .courseName {
      position: relative;
      padding-left: 30rpx;
      width: 480rpx;
      min-height: 44rpx;
      font-size: 32rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 44rpx;
      overflow: hidden;
      .circle {
        position: absolute;
        display: block;
        top: 16rpx;
        left: 0;
        width: 16rpx;
        height: 16rpx;
        object-fit: cover;
      }
    }
  }
  .confirmBtn {
    margin: 0 auto 60rpx;
    width: 586rpx;
    height: 84rpx;
    line-height: 84rpx;
    background: #1677ff;
    border-radius: 84rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 550;
    color: #ffffff;
    text-align: center;
  }
}
</style>