<template>
  <d-layout class="dlayout">
    <d-header class="dheader">
      <div class="title">
        <h1>Apache License 2.0</h1>
        <d-icon style="cursor: pointer;" name="icon-close" @click="emit('close')"></d-icon>
      </div>
      <div class="sub-title">
        <span>分数</span>
        <span>3</span>
        <span>类型</span>
        <d-tag color="#3ac295" size="sm">获准的</d-tag>
      </div>
    </d-header>
    <d-content class="dcontent">
      <div class="content-title"></div>
      <div class="content-body">
        <d-row>
          <d-col :span="8">
            <div class="content-body-col">
              <span class="color-allow">允许的</span>
              <span>Commercial Use</span>
              <span>Modify</span>
              <span>Distribute</span>
              <span>Sublicense</span>
              <span>Private Use</span>
            </div>
          </d-col>
          <d-col :span="8">
            <div class="content-body-col">
              <span class="color-info">必要的</span>
              <span>Include Copyright</span>
              <span>Include License</span>
              <span>State changes</span>
              <span>Include Notice</span>
            </div>
          </d-col>
          <d-col :span="8">
            <div class="content-body-col">
              <span class="color-danger">受限的</span>
              <span>Place Warranty</span>
              <span>Hold Liable</span>
              <span>Use Trademark</span>
            </div>
          </d-col>
        </d-row>
      </div>
    </d-content>
    <d-footer class="dfooter">
      <div>
        <span>影响组件：</span>
        <span>request</span>
      </div>
      <div>
        <span>当前版本：</span>
        <span>2.0</span>
      </div>
    </d-footer>
  </d-layout>
</template>

<script setup>
import { ref, defineEmits } from 'vue';

const emit = defineEmits(['close']);
</script>

<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';

.dlayout {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 8px;
  padding: 12px;

  .dheader, .dcontent{
    width: 100%;
    border-bottom: 1px solid gray;
    padding: 12px;
  }

  .dfooter {
    width: 100%;
    padding: 12px;
  }

  .title {
    font-size: 20px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    d-icon {
      cursor: pointer;
    }
  }

  .sub-title {
    display: flex;
    gap: 8px;
    align-items: center;
  }
}

.content-body-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dfooter {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 4px;
}

.side-panel {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.color-danger {
  color: $devui-danger;
}

.color-info {
  color: $devui-warning;
}

.color-allow {
  color: $devui-success;
}
</style>