<template>
  <view class="content">
    <div class="cont-list" v-for="(item, index) in msgList" :key="index">
      <div class="list-type">{{ item.ifCareerAppointText }}</div>
      <div class="center-cont">
        <div class="title">
          {{ item.mealName }}
          <span class="title-tip">{{ item.ifCancelText }}</span>
        </div>
        <div v-if="item.ifCancelText == '已取消'">您好，您于{{ item.cancelTime }}取消了位于{{ item.hospitalName }}的体检，特此通知。</div>
      </div>
    </div>
  </view>
</template>

<script>
import config from '@/config'

export default {
  data() {
    return {
      msgList: []
    }
  },
  mounted() {
    this.getMessageList()
  },
  methods: {
    // 获取消息列表
    getMessageList() {
      uni.request({
        url: config.tjBaseUrl + '/app/getmessage',
        method: 'post',
        data: {
          token: uni.getStorageSync('tjToken')
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded',
          token: this.token
        },
        success: res => {
          res = res.data
          console.log('🚀 ~ getMessageList ~ res:', res)
          if (res.res === 1) {
            this.msgList = res.obj
          }
        },
        fail: err => {
          console.log('🚀 ~ getMessageList ~ err:', err)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 10px;

  .cont-list {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 5px;
    margin-top: 10px;

    .list-type {
      padding: 10px;
      width: 20px;
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      white-space: pre-wrap;
      word-break: break-all;
      background: #9bc5c6;
      color: #fff;
      border-radius: 5px 0 0 5px;
    }

    .center-cont {
      padding: 0 10px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      font-size: 14px;
      color: #666;

      .title {
        font-size: 15px;
        font-weight: bold;
        color: red;
        margin-bottom: 6px;

        .title-tip {
          padding: 3px;
          font-size: 13px;
          color: #fff;
          margin-left: 10px;
          background: #ff7026;
          border-radius: 5px;
        }
      }
    }
  }
}
</style>
