<template>
  <Dialog 
    v-model:visible="dialogVisible" 
    modal 
    header="个人信息"
    :style="{ width: '500px' }"
    @hide="handleClose"
  >
    <div class="info-content">
      <div class="info-item">
        <label>用户名：</label>
        <span>{{ userInfo.userName || '-' }}</span>
      </div>
      <div class="info-item">
        <label>手机号：</label>
        <span>{{ userInfo.phone || '-' }}</span>
      </div>
      <div class="info-item">
        <label>设备SN码：</label>
        <span>{{ userInfo.snCode || '-' }}</span>
      </div>
      <div class="info-item">
        <label>设备ID：</label>
        <span>{{ userInfo.deviceId || '-' }}</span>
      </div>
      <div class="info-item">
        <label>剩余天数：</label>
        <span :class="remainingDaysClass">
          {{ userInfo.remainingDays !== null ? userInfo.remainingDays + ' 天' : '-' }}
        </span>
      </div>
    </div>
    
    <template #footer>
      <Button label="关闭" @click="handleClose" />
    </template>
  </Dialog>
</template>

<script>
import { Dialog, Button } from '../components/PrimeVue';

export default {
  name: 'UserInfoDialog',
  components: {
    Dialog,
    Button
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    userInfo: {
      type: Object,
      default: () => ({
        userName: '',
        phone: '',
        snCode: '',
        deviceId: '',
        remainingDays: null
      })
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(value) {
        if (!value) {
          this.handleClose();
        }
      }
    },
    remainingDaysClass() {
      if (this.userInfo.remainingDays === null) return '';
      if (this.userInfo.remainingDays <= 0) return 'text-error';
      if (this.userInfo.remainingDays <= 3) return 'text-warning';
      return '';
    }
  },
  methods: {
    handleClose() {
      this.$emit('close');
    }
  }
};
</script>

<style lang="less" scoped>
.info-content {
  padding: 10px 0;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  
  label {
    font-weight: 600;
    color: #333;
    min-width: 100px;
    margin-right: 10px;
  }
  
  span {
    color: #666;
    flex: 1;
    
    &.text-error {
      color: #f44336;
    }
    
    &.text-warning {
      color: #ff9800;
    }
  }
}
</style>

