<script setup lang="ts">
import { IconDelete } from '@computing/opendesign-icons';
defineProps({
  data: {
    type: Object,
    default: () => {
      return {};
    },
    required: true,
  },
  lock: {
    type: Boolean,
    default: true,
    required: true,
  },
});

const emits = defineEmits(['edit', 'del']);

// 点击编辑
function edit() {
  emits('edit');
}

// 点击删除按钮
function del() {
  emits('del');
}
</script>

<template>
  <div :id="'noteDetail' + data.id" class="log-item">
    <div class="header">
      <span class="title">
        {{ $t('COMMON_MAINTANCE_NOTE') + data.id }}
      </span>

      <span class="btns">
        <el-tooltip :content="$t('COMMON_EDIT')" :append-to-body="true" placement="top" trigger-keys>
          <span
            :id="'editIcon' + data.id"
            :class="['btn-box', lock ? 'disabled-btn' : '']"
            @click="edit()"
          >
            <span class="icon-editor icon" />
            <span>{{ $t('COMMON_EDIT') }}</span>
          </span>
        </el-tooltip>
        <el-tooltip :content="$t('COMMON_DELETE')" :append-to-body="true" placement="top" trigger-keys>
          <span
            :id="'delelteIcon' + data.id"
            :class="['btn-box', lock ? 'disabled-btn' : '']"
            @click="del()"
          >
            <el-icon>
              <IconDelete />
            </el-icon>
            <span>{{ $t('COMMON_DELETE') }}</span>
          </span>
        </el-tooltip>
      </span>
    </div>

    <div class="content">
      <div class="left part">
        <div class="key text">{{ $t('COMMON_USERNAME') }}</div>
        <div class="key text">{{ $t('COMMON_IPADRESS') }}</div>
        <div class="key text">{{ $t('ONLINE_ADD_TIME') }}</div>
        <div class="key text">{{ $t('ONLINE_CONTENT_INFO') }}</div>
      </div>
      <div class="right part">
        <div class="value text">{{ data.user }}</div>
        <div class="value text">{{ data.ip }}</div>
        <div class="value text">{{ data.time }}</div>
        <div class="value text">{{ data.details }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.log-item {
  font-size: 12px;
  color: var(--o-text-color-secondary);

  .header {
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--o-border-color-light);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      color: var(--o-text-color-primary);
      font-size: 16px;
      font-weight: 900;
      line-height: 24px;
    }

    .btns {
      display: flex;
      align-items: center;

      .btn-box {
        margin-left: 24px;
        display: flex;
        align-items: center;
        cursor: pointer;
        color: var(--o-text-color-secondary);

        .icon {
          margin-right: 8px;
        }

        .el-icon {
          margin-right: 5px;
          font-size: 16px;
          color: #8d98aa;
        }

        &:hover {
          color: var(--o-color-primary-secondary);

          .el-icon {
            color: var(--o-color-primary-secondary);
          }

          .icon-editor:before {
            color: var(--o-color-primary-secondary);
          }
        }

        .icon-editor:before {
          content: '\e906';
          color: #8d98aa;
        }
      }

      .disabled-btn:hover {
        color: #8d98aa;

        .el-icon {
          color: #8d98aa;
        }

        .icon-editor:before {
          color: #8d98aa;
        }
      }
    }
  }

  .content {
    padding: 24px;
    display: flex;

    .left {
      margin-right: 24px;
    }

    .right {
      flex: 1;
      overflow: hidden;
    }

    .part {
      .text {
        font-size: 12px;
        line-height: 16px;
        margin-bottom: 16px;
      }
      .key {
        color: var(--o-text-color-secondary);
        white-space: nowrap;
      }

      .value {
        color: var(--o-text-color-primary);
        word-wrap: break-word;
        word-break: normal;
      }

      .text:nth-last-child(1) {
        margin-bottom: 0;
      }
    }
  }
}
</style>
