<script setup lang="ts">
import type { iCode, Person } from '/@src/utils/types'

const userSession = useUserSession()
const notyf = useNotyf()

const apprLine = defineModel<any>({})

const me = userSession.user
const userSelectDisable = ref(false)
const selectTab = ref('appr')
const apprTabs = ref([
  { label: '결재', value: 'appr' },
])
const gubuns = ref<iCode[]>([])
const attends = ref<iCode[]>([])

api.getCode(7).then((data) => {
  gubuns.value = data
})
api.getCode(6).then((data) => {
  attends.value = data
})

const appendTab = (kind: string) => {
  notyf.dismissAll()
  if (kind === 'collabo') {
    const list = apprTabs.value.filter(e => e.label === '협조')
    const idx = list.length + 1
    apprTabs.value.push({
      label: '협조',
      value: `${kind}${idx}`,
    })
    apprLine.value[`${kind}${idx}`] = []
  }
  else {
    const list = apprTabs.value.filter(e => e.label === '통제')
    const idx = list.length + 1
    apprTabs.value.push({
      label: '통제',
      value: `${kind}${idx}`,
    })
    apprLine.value[`${kind}${idx}`] = []
  }

  console.log(apprLine.value)
}

const removeTab = () => {
  const reTab = apprTabs.value.filter(e => e.value !== selectTab.value)
  delete apprLine.value[selectTab.value]
  apprTabs.value = reTab
  selectTab.value = 'appr'
}

const onDelete = (i: number) => {
  apprLine.value.splice(i, 1)
  userSelectDisable.value = false
}

onMounted(() => {
  apprLine.value[selectTab.value] = []
})

watch(apprLine, (user) => {
  if (user === null) return
  userSelectDisable.value = true
})

const appendUser = (user: Person) => {
  apprLine.value[selectTab.value].push(user)
}

defineExpose({
  appendTab,
})

</script>

<template>
  <div class="column is-12">
    <VUserList
      @appendUser="appendUser"
      :disabled="userSelectDisable"
      placeholder="결재자를 선택해주세요."/>
  </div>
  <div class="column is-12">
    <VTabs
      type="boxed"
      v-model:selected='selectTab'
      :tabs="apprTabs"
    >
      <template #tab-link-label="{ activeValue, tab, key}" >
        <span class="link-label-inner">
          {{tab.label}}
          <i
            v-if="key !== 0"
            class="lnil lnil-close"
            @click.prevent="removeTab"
          />
        </span>
      </template>
      <template #tab="{ activeValue }">
        <div>
          <div :key="tab.value" v-for="(tab, idx) in apprTabs">
            <div class="approval-wrapper"  v-if="activeValue === tab.value">
              <div class="approval-container">
                <div class="approval-table">
                  <div class="approval-columns">
                    <div class="approval-column" style="width:8%; padding-left:10px">입안</div>
                    <div class="approval-column" style="width:15%"></div>
                    <div class="approval-column" style="width:70%;"></div>
                    <div class="approval-column"></div>
                    <div></div>
                  </div>
                  <div class="approval-columns" v-for="(u, i) in apprLine[selectTab]">
                    <div class="approval-column" style="width:8%">
                      <VField>
                        <VSelect v-model="u.gubunCd">
                          <VOption v-for="gubun in gubuns" :value="gubun.cd">
                            {{ gubun.nm }}
                          </VOption>
                        </VSelect>
                      </VField>
                    </div>
                    <div class="approval-column" style="width:15%;">{{ u.ptsnNm }}</div>
                    <div class="approval-column" style="width:30%;">{{ u.name }} ({{ u.sabun }})</div>
                    <div class="approval-column" style="width:8%;">
                      <VField>
                        <VSelect v-model="u.attendCd">
                          <VOption value="">재중</VOption>
                          <VOption v-for="attend in attends" :value="attend.cd">
                            {{ attend.nm }}
                          </VOption>
                        </VSelect>
                      </VField>
                    </div>
                    <div>
                      <i
                        class="lnil lnil-close mouse-pointer"
                        @click="onDelete"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </VTabs>
  </div>
</template>

<style lang="scss">
.lnil-close {
  line-height: 2.5em;
}

.tabs {
  margin-bottom:0px !important;
  span {
    font-size: 1.2rem;
    letter-spacing: 10px;
  }
  i {
    display: none;
  }
  .link-label-inner {
    position:relative;
    width:100%;
  }
  .is-active {
    i {
      display: block;
      position: absolute;
      right: -18px;
      top: 50%;
      font-size: 10px;
      transform: translateY(-50%);
    }
  }
}

.approval-container {
  .approval-columns {
    padding: 10px 20px 0 20px !important;

    &:first-child {
      line-height: 3.5em;
      height: 3.5em;
    }
  }

  .approval-column {

    line-height: 2em;

    .select {
      line-height: 2em;

      &:not(.is-multiple) {
        height: 2em;
      }

      select {
        &:not([multiple]) {
          padding-inline-end: 2em;
        }

        height: 2em;
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 0;
      }

      &:after {
        top: 50% !important;
      }
    }
  }
}

</style>
<style scoped lang="scss">

.visible {
  visibility: hidden;
}

.is-navbar {
  .approval-toolbar {
    padding-top: 30px;
  }
}

.approval-container {
  border: 1px solid var(--fade-grey);
}


.label {
  font-size: 1rem;
  font-weight: bold;
}

.field {
  padding-bottom: 10px !important;

  .label {
    font-size: 1.3em;
    color: var(--modal-text) !important;
  }
}

.approval-wrapper {
  width: 100%;

  .approval-container {
    background: var(--white);
    border: none !important;
    overflow-x: auto;

    .table,
    table {
      width: 100%;
    }

    &::-webkit-scrollbar {
      height: 8px !important;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 10px !important;
      background: rgb(0 0 0 / 20%) !important;
    }
  }
}

.approval-table {
  border: 1px solid var(--fade-grey);
  border-collapse: collapse;

  .approval-columns {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--fade-grey);

    &:last-child {
      border-bottom: 0px;
    }

    .approval-column {
      font-family: var(--font);
      vertical-align: middle;
      color: var(--light-text);

      &:last-child {
        text-align: right;
      }

      &.approvals-empty {
        opacity: 0;
      }
    }
  }

  .light-text {
    color: var(--light-text);
  }

  .flex-media {
    display: flex;
    align-items: center;

    .meta {
      margin-left: 10px;
      line-height: 1.3;

      span {
        display: block;
        font-size: 0.8rem;
        color: var(--light-text);
        font-family: var(--font);

        &:first-child {
          font-family: var(--font-alt);
          color: var(--dark-text);
        }
      }
    }
  }

  .row-action {
    display: flex;
    justify-content: flex-end;
  }

  .checkbox {
    padding: 0;
  }

  .product-photo {
    width: 80px;
    height: 80px;
    object-fit: contain;
  }

  .file-icon {
    width: 46px;
    height: 46px;
    object-fit: contain;
  }

  .drinks-icon {
    display: block;
    max-width: 48px;
    border-radius: var(--radius-rounded);
    border: 1px solid var(--fade-grey);
  }

  .negative-icon,
  .positive-icon {
    .iconify {
      height: 16px;
      width: 16px;
    }
  }

  .positive-icon {
    .iconify {
      color: var(--success);

      * {
        stroke-width: 4px;
      }
    }
  }

  .negative-icon {
    &.is-danger {
      .iconify {
        color: var(--danger) !important;
      }
    }

    .iconify {
      color: var(--light-text);

      * {
        stroke-width: 4px;
      }
    }
  }

  .price {
    color: var(--dark-text);
    font-weight: 500;

    &::before {
      content: '$';
    }

    &.price-free {
      color: var(--light-text);
    }
  }

  .status {
    display: flex;
    align-items: center;

    &.is-available {
      .iconify {
        color: var(--success);
      }
    }

    &.is-busy {
      .iconify {
        color: var(--danger);
      }
    }

    &.is-offline {
      .iconify {
        color: var(--light-text);
      }
    }

    .iconify {
      margin-right: 8px;
      font-size: 8px;
    }

    span {
      font-family: var(--font);
      font-size: 0.9rem;
      color: var(--light-text);
    }
  }
}

.is-dark {
  .approval-wrapper {
    .approval-container {
      border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
      background: color-mix(in oklab, var(--dark-sidebar), white 6%);
    }
  }

  .approval-table {
    border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

    th,
    td {
      border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
      color: var(--dark-dark-text);
    }

    .drinks-icon {
      border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
    }
  }
}

.lnil-close {
  &:hover {
    color: var(--primary);
  }
}


</style>