<template>
  <a-drawer class="right-show-info" placement="right" :open="props.openModal" @close="props.openModal = false">
    <div class="title">
      <div class="tag"></div>
      <div class="title-text">操作</div>
    </div>
    <div class="content">
      <a-descriptions bordered :column="1">
        <a-descriptions-item label="位置">Cloud Database</a-descriptions-item>
        <a-descriptions-item label="是否正常使用">Prepaid</a-descriptions-item>
        <a-descriptions-item label="所属单位">Prepaid</a-descriptions-item>
        <a-descriptions-item label="序号">Prepaid</a-descriptions-item>
      </a-descriptions>
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
  import { ref, defineProps, watch } from 'vue';
  import './index.scss';

  const open = ref(false);
  const props = defineProps(['openModal']);
  watch(
    () => props.openModal,
    (newValue) => {
      open.value = newValue;
    },
  );
</script>

<style lang="scss" scoped>
  .right-show-info {
    position: absolute;
    top: 0;
    right: 0;
    width: 356px;
    height: 100%;
    background-color: #fff;
    .title {
      height: 61px;
      padding-left: 26px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #d9e2f2;
      .tag {
        width: 3px;
        height: 23px;
        background-color: #0081ff;
        margin-right: 19px;
      }
      .title-text {
        color: #141d27;
        font-size: 24px;
      }
    }
    .content {
      height: calc(100% - 61px);
      padding: 25px;
    }
  }
</style>
