<template>
  <section ref="selectContainer" class="fordeep g-branch-compare">
    <div class="g-branch-compare-box g-card py-[30px]">
      <div class="g-branch-compare-header">
        <slot name="source-header">
          <span class="g-branch-compare-title">源分支</span>
        </slot>
      </div>
      <div class="g-branch-compare-content">
        <div ref="ele" class="g-branch-compare-repo" v-if="showRepo">
          <div class="g-branch-compare-custom-icon">
            <slot name="repo-prefix">
              <Icon :name="repoIcon" :size="repoIconSize"></Icon>
            </slot>
          </div>
          <d-editable-select
            class="g-branch-compare-select"
            v-model="repoIdVal"
            :options="repoList"
            :width="selectWidth"
            :disabled="repoReadonly"
            :max-height="maxHeight"
          >
            <template #item="{ option, index }">
              <div class="g-branch-compare-option">
                <slot name="repo-option" :data="option" :index="index">
                  <Icon :name="repoIcon" :size="repoIconSize"></Icon>
                  <div class="g-branch-compare-label">{{ option.label }}</div>
                </slot>
              </div>
            </template>
          </d-editable-select>
        </div>
        <div class="g-branch-compare-branch">
          <BranchSelect
            :repo="encodeURIComponent(repoIdVal)"
            sort="mr_source"
            :width="selectWidth"
            v-model:value="sourceIdVal"
            :max-height="maxHeight"
          />
        </div>
        <div class="g-branch-compare-tip">
          <slot name="source-tip"></slot>
        </div>
      </div>
    </div>
    <div v-if="!isForkCase" class="g-branch-compare-switch" @click="emits('onSwitch')">
      <slot name="switch">
        <Icon name="gt-exchange" size="14px" color="var(--color-G1000)" />
      </slot>
    </div>
    <div v-if="isForkCase" class="g-branch-compare-switch cursor-default">
      <slot name="switch">
        <Icon name="gt-exit" size="14px" color="var(--color-G1000)" />
      </slot>
    </div>
    <div class="g-branch-compare-box g-card py-[30px]">
      <div class="g-branch-compare-header">
        <slot name="target-header">
          <span class="g-branch-compare-title">目标分支</span>
        </slot>
      </div>
      <div class="g-branch-compare-content">
        <div class="g-branch-compare-repo" v-if="showRepo">
          <div class="g-branch-compare-custom-icon">
            <slot name="repo-prefix">
              <Icon :name="repoIcon" :size="repoIconSize"></Icon>
            </slot>
          </div>
          <d-editable-select
            class="g-branch-compare-select"
            v-model="targetRepoIdVal"
            :width="selectWidth"
            :options="targetRepoList"
            :disabled="repoReadonly"
            :max-height="maxHeight"
          >
            <template #item="{ option, index }">
              <div class="g-branch-compare-option">
                <slot name="repo-option" :data="option" :index="index">
                  <Icon :name="repoIcon" :size="repoIconSize"></Icon>
                  <div class="g-branch-compare-label">{{ option.label }}</div>
                </slot>
              </div>
            </template>
          </d-editable-select>
        </div>
        <div class="g-branch-compare-branch">
          <BranchSelect
            :repo="encodeURIComponent(targetRepoIdVal)"
            sort="mr_target"
            :width="selectWidth"
            v-model:value="targetIdVal"
            :max-height="maxHeight"
          />
        </div>
        <div class="text-xs text-CG600 g-branch-compare-tip">
          <slot name="target-tip"></slot>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, watch, computed, onUnmounted } from 'vue';
import type { BranchCompareData } from './types';
import BranchSelect from '@/components/BranchSelect/index.vue';
import { useResizeObserver } from '@vueuse/core'

const props = withDefaults(
  defineProps<{
    data: BranchCompareData;
    repoId: string; // 源项目
    targetRepoId: string; // 目标项目
    sourceId: string; // 源分支
    targetId: string; // 目标分支
    repoList: { label: string; value: number | string }[];
    targetRepoList: { label: string; value: number | string }[];
    branchList: { label: string; value: number | string }[];
    targetBranchList: { label: string; value: number | string }[];
    repoIcon?: string;
    branchIcon?: string;
    repoIconSize?: string;
    branchIconSize?: string;
    repoReadonly: boolean;
    showRepo: boolean;
    maxHeight?: number;
    isFork?: boolean;
  }>(),
  {
    branchList: () => [],
    repoIcon: 'gt-compare',
    branchIcon: 'gt-branches',
    repoIconSize: '16px',
    branchIconSize: '16px',
    repoReadonly: false,
    showRepo: true,
    maxHeight: 250,
    isFork: false
  }
);

const isForkCase = computed(() => {
  return props.isFork && repoIdVal.value !== targetRepoIdVal.value;
});

const emits = defineEmits<{
  (e: 'update:repoId', data: string | number | null): void;
  (e: 'update:targetRepoId', data: string | number | null): void;
  (e: 'update:sourceId', data: string | number | null): void;
  (e: 'update:targetId', data: string | number | null): void;
  (e: 'onSwitch', data): void;
  (e: 'sourceLoadMore', data): void;
  (e: 'targetLoadMore', data): void;
}>();

const repoIdVal = computed({
  get() {
    return props.repoId;
  },
  set(value) {
    emits('update:repoId', value);
  }
});
const targetRepoIdVal = computed({
  get() {
    return props.targetRepoId;
  },
  set(value) {
    emits('update:targetRepoId', value);
  }
});
const sourceIdVal = computed({
  get() {
    return props.sourceId;
  },
  set(value) {
    emits('update:sourceId', value);
  }
});
const targetIdVal = computed({
  get() {
    return props.targetId;
  },
  set(value) {
    emits('update:targetId', value);
  }
});

const ele = ref(null);
const selectWidth = ref(488);
const selectContainer = ref(null);
useResizeObserver(selectContainer, (el)=> {
  selectWidth.value = (el[0].contentRect.width - 220) / 2;
})

onUnmounted(() => {});
</script>

<style scoped lang="scss">
$g-branch-compare-border-color: var(--color-G300);
$g-branch-compare-border-color-hover: var(--color-CG900);
$g-branch-compare-border-color-focus: var(--color-link);
$g-branch-compare-border-radius: 3px;
$g-branch-compare-color: var(--color-CG900);
$g-branch-compare-select-bg-color: linear-gradient(180deg, #fcfcfc 0%, #f8f9fb 100%);

.fordeep {
  :deep(.devui-editable-select-input__wrapper) {
    background: linear-gradient(180deg, #fcfcfc 0%, #f8f9fb 100%);
  }
}

.g-branch-compare {
  display: flex;
  align-items: center;
  &-tip {
  }
  &-box {
    flex: 1;
  }
  &-header {
    padding: 0 32px 20px 32px;
  }
  &-content {
    padding: 0px 32px 0 32px;
  }
  &-repo {
    position: relative;
    margin-bottom: 8px;
  }
  &-branch {
    position: relative;
  }

  &-custom-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    line-height: 38px;
    padding-left: 16px;
    z-index: 2;
    display: flex;
    :deep(.icon) {
      align-self: center;
      color: $g-branch-compare-color !important;
    }
    :deep(.devui-icon__container) {
      align-self: center;
      color: $g-branch-compare-color !important;
    }
  }
  &-title {
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    color: $g-branch-compare-color;
  }
  &-select {
    :deep(.devui-editable-select-input__wrapper) {
      background: $g-branch-compare-select-bg-color;
    }
    :deep(.devui-editable-select-input__inner) {
      color: $g-branch-compare-color;
      padding-left: 32px;
    }
    :deep(.devui-editable-select__item) {
      padding: 8px 4px;
    }
  }
  &-option {
    display: flex;
    align-items: center;
  }
  &-label {
    margin-left: 8px;
  }
  &-switch {
    margin: 0 32px;
    width: 32px;
    height: 32px;
    border-radius: $g-branch-compare-border-radius;
    background: linear-gradient(180deg, #fcfcfc 0%, #f8f9fb 100%);
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--color-CG400);
    display: flex;
    :deep(.icon) {
      margin: 0 auto;
      align-self: center;
    }
    &:hover {
      cursor: pointer;
    }
  }
}
</style>
