<template>
  <div>
    <div class="list" v-for="item in planList" :key="item.id">
      <div class="img">
        <img class="tx" :src="item.photoImgUrl?item.photoImgUrl:require('../../assets/tx.png')" alt="">
        <img v-if="item.followNum == 0" class="warning" src="../../assets/warning.png" alt="">
      </div>
      <div class="text">
        <p class="title">{{item.name}}-{{item.sex}}-{{item.age}}<span class="mes">{{item.childTypeName}}</span></p>
        <div class="num">
          <div>本月随访次数：<span :class="item.followNum == 0?'zero':''">{{item.followNum}}</span></div>
          <van-button size="mini" @click="$router.push({path:'/followUp/record',query:{id:item.id}})">开始随访</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['planList'],
  data() {
    return {}
  },
}
</script>
<style lang="scss" scoped>
.list {
  display: flex;
  align-items: center;
  margin-bottom: 26px;
  .img {
    position: relative;
    .tx {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
    .warning {
      width: 30px;
      height: 30px;
      position: absolute;
      top: -10px;
      right: -10px;
      animation: heart 1s ease infinite;
    }
    @keyframes heart {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
  }
  .text {
    text-align: left;
    margin-left: 26px;
    width: calc(100% - 125px);
    .title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 30px;
    }
    .mes {
      font-size: 26px;
      margin-left: 10px;
    }
    .zero {
      color: #ff3b30;
    }
    .num {
      font-size: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .van-button {
        border-radius: 8px;
      }
    }
    p {
      margin: 0;
      margin-bottom: 16px;
    }
  }
  .van-button {
    width: 160px;
    background-color: #1677ff;
    color: #fff;
    font-size: 24px;
  }
}
</style>
