<template>
  <view>
    <view class="item">
      <view class="item-title">密码</view>
      <view class="item-content">{{ currentPasswordInfo.keyboardPwd }}</view>
    </view>
    <view class="item" style="margin-top: 2rpx">
      <view class="item-title">名称</view>
      <view class="item-content">{{ currentPasswordInfo.keyboardPwdName }}</view>
    </view>
    <view class="item" style="margin-top: 2rpx">
      <view class="item-title">有效期</view>
      <view v-if="currentPasswordInfo.keyboardPwdType === 2">永久</view>
      <view v-else>
        <view class="item-content">{{ timeFormat(currentPasswordInfo.startDate, 'yyyy-mm-dd h:M') }}</view>
        <view class="item-content">{{ timeFormat(currentPasswordInfo.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">{{ currentPasswordInfo.senderUsername }}</view>
    </view>
    <view class="item" style="margin-top: 2rpx">
      <view class="item-title">发送时间</view>
      <view class="item-content">{{ timeFormat(currentPasswordInfo.sendDate, 'yyyy-mm-dd h:M') }}</view>
    </view>
    <view class="tips">密码生成后，请在当日23：59前使用一次进行激活，否则过0点后未激活则失效。</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, ['currentPasswordInfo']),
  },
  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>
