<template>
  <!-- <div class="merge-check g-card">
    <merge-check
      v-if="!mergeSetting.wip_passed"
      key="wip"
      :type="config.wip.type"
      :status="config.wip.status"
      class="merge-check-item"
    >
    </merge-check>
    <merge-check
      v-if="mergeSetting.need_resolve_passed"
      key="comment"
      :type="config.comment.type"
      :status="config.comment.status"
      class="merge-check-item"
    >
    </merge-check>
    <merge-check
      v-if="mergeSetting.required_reviewers_count > 0"
      key="reviewer"
      :type="config.reviewer.type"
      :status="config.reviewer.status"
      :need-pass="config.reviewer.needPass"
      :has-pass="config.reviewer.hasPass"
      class="merge-check-item"
    >
    </merge-check>
  </div> -->
  <DataPanel :loading="loading" :empty="checkEmpty" skeleton="true">
    <merge-check
      v-if="!mergeSetting.wip_passed"
      key="wip"
      :type="config.wip.type"
      :status="config.wip.status"
      class="merge-check-item"
    >
    </merge-check>
    <merge-check
      v-if="mergeSetting.need_resolve_passed"
      key="comment"
      :type="config.comment.type"
      :status="config.comment.status"
      class="merge-check-item"
    >
    </merge-check>
    <merge-check
      v-if="mergeSetting.required_reviewers_count > 0"
      key="reviewer"
      :type="config.reviewer.type"
      :status="config.reviewer.status"
      :need-pass="config.reviewer.needPass"
      :has-pass="config.reviewer.hasPass"
      class="merge-check-item"
    >
    </merge-check>
  </DataPanel>
</template>
<script setup lang="ts">
import { computed, ref, toValue, watch, reactive, onMounted } from 'vue';
import { useRepoId } from '@/utils/hooks/useRepoId';
import { useRouter } from 'vue-router';
import MergeCheck from '@/components/MergeCheck/index.vue';
import { mergeableState, getReviewers } from '@/api/merge';

const router = useRouter();
const { repoId } = useRepoId();
const iid = router.currentRoute.value.params.mergeId;

const mergeSetting = reactive({
  reviewers_passed: false, // 是否满足最低评审人数
  resolve_passed: false, // 是否已解决所有评审问题
  wip_passed: true, // wip是否通过
  required_reviewers_count: 0, // 最低评审人数量
  need_resolve_passed: false // 是否需要解决所有评审问题才能合并
  // need_pipeline_succeeds: false // 是否需要流水线成功才能合并
});
// 检查记录是否为空
const checkEmpty = computed(() => {
  return mergeSetting.wip_passed && mergeSetting.required_reviewers_count <= 0 && !mergeSetting.need_resolve_passed;
});
const config = reactive({
  wip: {},
  comment: {},
  reviewer: {}
});
/* 根据mr状态设置显示哪些检查门禁 */
const checkConfig = () => {
  if (!mergeSetting.wip_passed) {
    config.wip = {
      type: 'wip',
      status: 'waiting'
    };
  }
  if (mergeSetting.need_resolve_passed) {
    config.comment = {
      type: 'comment',
      status: mergeSetting.resolve_passed ? 'success' : 'fail'
    };
  }
  config.reviewer.type = 'reviewer';
  config.reviewer.status = mergeSetting.reviewers_passed ? 'success' : 'fail';
  config.reviewer.link = { name: 'repoSettingMerge' };
  return config;
};
const loading = ref(false);
loading.value = true;
const getMergeSetting = () => {
  const params = {
    repoId: repoId.value,
    iid
  };

  getReviewers(params).then((res) => {
    const data = res.data;
    config.reviewer.hasPass = data?.count?.total_reviewed_count;
  });

  mergeableState(params).then((res) => {
    const data = res.data;
    mergeSetting.reviewers_passed = data.approval_reviewers_required_passed;
    mergeSetting.resolve_passed = data.resolve_discussion_passed;
    mergeSetting.wip_passed = data.work_in_progress_passed;
    mergeSetting.need_resolve_passed = data?.merge_request_switch?.only_allow_merge_if_all_discussions_are_resolved;
    mergeSetting.required_reviewers_count = data?.merge_request_switch?.approval_required_reviewers_count;
    config.reviewer.needPass = mergeSetting.required_reviewers_count;
    checkConfig();
  }).catch((err) => { console.error(err); }).finally(() => {
    loading.value = false;
  });
};
getMergeSetting();

</script>

<style  lang="scss" scoped>
.merge-check {
  &-item {
    border-bottom: 1px solid var(--color-G300);
    &:last-of-type {
      border-bottom: 0;
    }
  }
}
</style>
