<template>
  <q-page padding>
    <q-card>
      <q-card-section>
        <div class="row">
          <div class="col">
            <q-select v-model="ld.companyID"
                      label="Şirket"
                      option-label="Name"
                      option-value="Name"
                      :options="ld.companies"
                      map-options
                      emit-value
            >
              <template v-slot:after>
                <q-btn
                  label="Yeni Şirket Ekle"
                  color="primary"
                  @click="createCompany"
                  no-caps
                />
              </template>
            </q-select>
          </div>
        </div>
      </q-card-section>

      <q-card-section>
        <div class="row q-col-gutter-sm items-center">
          <div class="col-shrink">
            <q-btn label="Excel Yükle"
                   @click="upload"
                   no-caps
                   color="secondary"
            />
          </div>
          <div class="col-shrink">
            <q-btn label="Düzenle"
                   @click="editCompany"
                   no-caps
                   color="secondary"
            />
          </div>
          <div class="col-11 text-right">
            {{ ld.xlsFile }}
          </div>
          <div class="col-6">
            <q-select v-model="ld.year" :options="[2024, 2025, 2026, 2027, 2028]"
                      label="Aktarım Yıl"
            />
          </div>
          <div class="col-6">
            <q-select v-model="ld.month" :options="[1,2,3,4,5,6,7,8,9,10,11,12]"
                      label="Aktarım Ay"
            />
          </div>
          <div class="col-12">
            <q-btn
              no-caps
              label="Aktarıma Başla"
              color="warning"
              class="full-width"
              @click="doRpa"
              :disable="!ld.xlsFile || !ld.companyID"
            />
          </div>
        </div>
      </q-card-section>

      <q-card-section>
        <div style="max-height: 200px; overflow: scroll; border: 1px gray solid;" class="q-pa-xs">
          <span v-for="(ln, ndx) in ld.logProcess" :key="ndx">
            {{ ndx }} {{ ln }}
          </span>
        </div>
      </q-card-section>
    </q-card>

  </q-page>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import Company from 'components/dlg/Company.vue'
import EditCompany from 'components/dlg/EditCompany.vue'
import { useQuasar } from 'quasar'
import { Companies, CreateCompany, Rpa, UploadExcel } from 'app/bindings/lib/srv/Srv'
import * as wails from '@wailsio/runtime'

const $q = useQuasar()

const ld = reactive({
  companyID: null,
  companies: [],
  xlsFile: '',
  logProcess: [],
  year: 2024,
  month: 1,
})

onMounted(() => {
  getCompanies()

  wails.Events.On('logProcess', function (ev) {
    ld.logProcess.push(ev.data)
  })
})

const editCompany = function () {
  console.log(ld.companyID)
  $q.dialog({
    component: EditCompany,
    parent: this,
    componentProps: {
      name: ld.companyID.Name,
      memberNumber: ld.companyID.MemberNumber,
      userName : ld.companyID.Username,
      password : ld.companyID.Password,
    },
    // ----------------------
    // props that are passed to component instance
  }).onOk(data => {
    CreateCompany(data.name, initialMemberNumber, data.username, data.password).then(()=>{
      getCompanies()
    })
  })
}
const createCompany = function () {
  $q.dialog({
    component: Company,
    parent: this,
    // ----------------------
    // props that are passed to component instance
  }).onOk(data => {
    CreateCompany(data.name, data.memberNumber, data.username, data.password).then(()=>{
      getCompanies()
    })
  })
}

const getCompanies = function () {
  ld.companies.splice(0)
  Companies().then(res => {
    ld.companies.push(...res)
    console.log(ld.companies)
  })
}

const upload = function () {
  UploadExcel().then(res => {
    ld.xlsFile = res
  })
}

const doRpa = function () {
  Rpa(ld.companyID, ld.month, ld.year).catch(err => console.log(err))
}

</script>
