<template>
  <div class="compare-toolbar">
    <ZoomOverlay />

    <div class="file-color">
      <div>
        <div class="color" :style="{ 'background-color': oldFileColor }"></div>
        <span>{{ $t('compare.oldFile') }}</span>
      </div>
      <div>
        <div class="color" :style="{ 'background-color': newFileColor }"></div>
        <span>{{ $t('compare.newFile') }}</span>
      </div>
    </div>

    <CloseA class="close" @click="initCompare" />
  </div>
</template>

<script setup>
  import { computed } from 'vue';
  import { useViewerStore } from '@/stores/modules/viewer'
  import { useDocumentStore } from '@/stores/modules/document'
  const useViewer = useViewerStore()
  const useDocument = useDocumentStore()

  const oldFileColor = computed(() => useDocument.getCompareSetting('oldFileColor'))
  const newFileColor = computed(() => useDocument.getCompareSetting('newFileColor'))

  const initCompare = () => {
    useViewer.setCompareStatus('end')
    useDocument.initCompareFiles()
  }
</script>

<style lang="scss">
  .compare-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-left: 12px;
    margin-right: 16px;

    .zoom-overlay {
      .input-container {
        background-color: var(--c-findbar-bg);
      }
    }

    .file-color {
      display: flex;
      > div {
        display: flex;
        align-items: center;
        & + div {
          margin-left: 16px;
        }
      }
      .color {
        margin-right: 4px;
        width: 16px;
        height: 16px;
        border-radius: 4px;
        background-color: aquamarine;
      }
      span {
        font-family: Helvetica;
        font-size: 14px;
        line-height: 16px;
      }
    }

    .close {
      cursor: pointer;
      min-width: 20px;
    }
  }
</style>
