<!--
 * @Author: your name
 * @Date: 2021-12-03 13:59:32
 * @LastEditTime: 2021-12-03 14:11:11
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /ybm-doctor-miniapp/src/pages/detail/components/status-list.vue
-->
<template>
  <u-popup :value="value" mode="bottom" border-radius="25" @close="closeModal">
    <view class="status-list">
      <view class="status-list__top u-flex">
        <view class="name">新生儿探视状态跟踪</view>
        <view class="u-flex-1" />
        <u-icon name="close" color="#D7D7D7" size="26" @click="closeModal" />
      </view>
      <view v-if="details" class="status-list__content">
        <u-time-line>
          <u-time-line-item
            v-for="(item, index) in details.visitStatusList"
            :key="index + ''"
          >
            <template #node>
              <view
                class="icon"
                :class="{
                  current: index + 1 === details.visitStatusList.length
                }"
              />
            </template>
            <template #content>
              <view class="info">
                <view class="u-flex">
                  <view
                    class="title"
                    :class="{
                      current:
                        index + 1 === details.visitStatusList.length
                    }"
                  >{{ changeDescription(item.babyDescription) }}</view>
                  <view class="u-flex-1" />
                  <view
                    class="title"
                    :class="{
                      current:
                        index + 1 === details.visitStatusList.length
                    }"
                  >{{
                    dayjs(item.babyUpdateTime).format('MM月DD日 HH:mm')
                  }}</view>
                </view>
                <view
                  v-if="item.visitStartTime && item.visitEndTime"
                  class="times"
                >
                  <view
                    class="text"
                  >新生儿探视日期:{{
                    dayjs(item.visitStartTime).format('YYYY-MM-DD')
                  }}</view>
                  <view
                    class="text"
                  >新生儿探视时间:{{
                    dayjs(item.visitStartTime).format('HH:mm')
                  }}~{{ dayjs(item.visitEndTime).format('HH:mm') }}</view>
                </view>
              </view>
            </template>
          </u-time-line-item>
        </u-time-line>
      </view>
    </view>
  </u-popup>
</template>

<script>
import dayjs from 'dayjs'
export default {
  props: {
    details: {
      type: [Object],
      default: null
    },
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dayjs,
      statusVisible: false
    }
  },
  computed: {
  },
  watch: {
    value(newVal) {
      this.statusVisible = newVal
    }
  },
  methods: {
    closeModal() {
      this.$emit('input', false)
    },
    /**
     * 改变标题
     * e:传入的'远程探视结束'改为'新生儿探视结束'
     */
    changeDescription(e) {
      if (e === '远程探视开始') {
        return '新生儿探视开始'
      } else if (e === '远程探视结束') {
        return '新生儿探视结束'
      } else {
        return e
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.status-list {
  &__top {
    padding: 30rpx;
    padding-bottom: 20rpx;
  }
  &__content {
    padding: 30rpx 70rpx 30rpx 50rpx;
    .icon {
      width: 10rpx;
      height: 10rpx;
      border-radius: 50%;
      background-color: #f2f2f2;
      &.current {
        background-color: $u-type-primary;
      }
    }
    .info {
      .title {
        margin-bottom: 10rpx;
        font-size: 28rpx;
        color: $color-text-title;
        &.current {
          color: $u-type-primary;
        }
      }
      .times {
        .text {
          margin-bottom: 5rpx;
          font-size: 24rpx;
          color: $color-text-weak;
        }
      }
    }
  }
}
</style>
