<template>
  <div :class="roleIdStr==14?'mt':''">
    <div class="list" v-for="item in historyList" :key="item.id" @click="$router.push({path:'/followUp/details',query:{id:item.id}})">
      <div class="img">
        <img class="tx" :src="item.url?item.url: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>
        <p class="num">随访时间：{{item.followDate}}</p>
        <p class="num adress">居住地址：{{item.address}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['historyList'],
  data() {
    return {
      bgimg: require('../../assets/newsbg.png'),
      roleIdStr: JSON.parse(sessionStorage.getItem('userInfo')).roleIdStr,
    }
  },
  methods: {
    getpics(item) {
      if (!item) return this.bgimg
      var url = ''
      var arr = item.split(',')
      arr.forEach((item, index) => {
        if (item.indexOf('.jpg') || item.indexOf('.png')) {
          url = arr[index]
          return
        }
      })
      return url
    },
  },
}
</script>
<style lang="scss" scoped>
.mt {
  margin-top: 100px;
}
.list {
  display: flex;
  align-items: center;
  margin-bottom: 26px;
  .img {
    .tx {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  }
  .text {
    text-align: left;
    margin-left: 26px;
    width: calc(100% - 116px);
    .title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 30px;
    }
    .adress {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: block !important;
    }
    .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;
      font-size: 26px;
    }
  }
  .van-button {
    width: 160px;
    background-color: #1677ff;
    color: #fff;
    font-size: 24px;
  }
}
</style>
