<template>
  <NuxtLayout>
    <div class='content'>
      <div class='container'>
        <form class='form' @submit.prevent>
          <div class='form-group'>
            <div class='form-group__label'>
              <label>V2 分支管理</label>
              <p>查看当前分支,切换分支等功能</p>
            </div>
            <div class='form-group__body'>
              <div class='form-group__item'><span>当前分支</span><span>{{ form.currentBranchV2 }}</span></div>
              <div class='form-group__item'>
                <span>所有分支</span>
                <span>
                  <select v-model='form.targetBranchV2'>
                    <option v-for='item in branchsV2' :key='item'>{{ item }}</option>
                  </select>
                  <button @click='handleCheckout("v2")'>切换分支</button>
                </span>
              </div>
              <div class='form-group__item'>
                <span>刷新分支</span>
                <span><button @click='handleFetch("v2")'>刷新</button></span>
              </div>
            </div>
          </div>
          <div class='form-group'>
            <div class='form-group__label'>
              <label>V1 分支管理</label>
              <p>查看当前分支,切换分支等功能</p>
            </div>
            <div class='form-group__body'>
              <div class='form-group__item'><span>当前分支</span><span>{{ form.currentBranchV1 }}</span></div>
              <div class='form-group__item'>
                <span>所有分支</span>
                <span>
                  <select v-model='form.targetBranchV1'>
                    <option v-for='item in branchsV1' :key='item'>{{ item }}</option>
                  </select>
                  <button @click='handleCheckout("v1")'>切换分支</button>
                </span>
              </div>
              <div class='form-group__item'>
                <span>刷新分支</span>
                <span><button @click='handleFetch("v1")'>刷新</button></span>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </NuxtLayout>
</template>

<script lang="ts" setup>
import { useUserStore } from '~/store/user';

const form = ref({
  email: '',
  currentBranchV2: '',
  currentBranchV1: '',
  targetBranchV2: '',
  targetBranchV1: ''
})
const branchsV2 = ref([])
const branchsV1 = ref([])

onMounted(async () => {
  getUserInfo()
  getAllBranch('v1')
  getAllBranch('v2')
})

function getUserInfo() {
  form.value.email = useUserStore().username + '@greaconsulting.com'
  form.value.currentBranchV1 = useUserStore().branchV1
  form.value.currentBranchV2 = useUserStore().branchV2
  form.value.targetBranchV1 = form.value.currentBranchV1
  form.value.targetBranchV2 = form.value.currentBranchV2
}
function getAllBranch(platform: 'v1' | 'v2') {
  return $fetch('/api/git/getAllBranchs', { query: { platform } }).then((res: any) => {
    if (platform === 'v1') {
      branchsV1.value = res.split('\n').map((o: string) => o.trim()).filter((o: string) => !!o)
    } else {
      branchsV2.value = res.split('\n').map((o: string) => o.trim()).filter((o: string) => !!o)
    }
  })
}
async function handleFetch(platform: 'v1' | 'v2') {
  const branch = platform === 'v2' ? form.value.currentBranchV2 : form.value.currentBranchV1
  if (!branch) return
  await $fetch('/api/git/fetch', { method: 'post', body: { branch, platform }})
  await getAllBranch(platform)
  alert('切换分支完成,请重新编译运行')
}
async function handleCheckout(platform: 'v1' | 'v2') {
  const branch = platform === 'v1' ? form.value.targetBranchV1 : form.value.targetBranchV2
  await $fetch('/api/git/checkout', { method: 'post', body: { platform, branch } })
  if (platform === 'v1') {
    form.value.currentBranchV1 = form.value.targetBranchV1
  } else {
    form.value.currentBranchV2 = form.value.targetBranchV2
  }
  alert('切换分支完成,请重新编译运行')
}
</script>

<style scoped>
.content {
  background-color: #EFEFEF;
  overflow: auto;
  height: 100%;
  padding: 24px;
}
.content select{
  width: 200px;
  margin-right: 10px;
}
</style>