<template>
  <view>
    <view class="item">
      <view class="item-title">名称</view>
      <view class="item-content">{{ currentKeyInfo.nickname }}</view>
    </view>
    <view class="item" style="margin-top: 2rpx">
      <view class="item-title">有效期</view>
      <view v-if="currentKeyInfo.keyType === 1">永久</view>
      <view v-else>
        <view class="item-content">{{ timeFormat(currentKeyInfo.startDate, 'yyyy-mm-dd h:M') }}</view>
        <view class="item-content">{{ timeFormat(currentKeyInfo.endDate, 'yyyy-mm-dd h:M') }}</view>
      </view>
    </view>
    <view class="item" style="margin-top: 20rpx">
      <view class="item-title">接收者</view>
      <view class="item-content">{{ currentKeyInfo.username }}</view>
    </view>
    <view class="item" style="margin-top: 2rpx">
      <view class="item-title">发送人</view>
      <view class="item-content">{{ currentKeyInfo.senderUsername }}</view>
    </view>
    <view class="item" style="margin-top: 2rpx">
      <view class="item-title">发送时间</view>
      <view class="item-content">{{ timeFormat(currentKeyInfo.sendDate, 'yyyy-mm-dd h:M') }}</view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'pinia'
import { useLockStore } from '@/stores/lock'
import { timeFormat } from 'uview-plus'

export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(useLockStore, ['currentKeyInfo']),
  },
  methods: {
    timeFormat
  },
}
</script>

<style lang="scss">
page {
  background-color: $uni-bg-color-grey;
}
</style>

<style lang="scss" scoped>
.item {
  padding: 24rpx 32rpx;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 32rpx;
  font-weight: 500;
}

.tips {
  padding: 24rpx 32rpx;
  font-size: 24rpx;
  color: #999999;
}
</style>
