<!-- <template>
  <div class="q-pa-md" style="max-width: 400px">

    <q-form
      @submit="onSubmit"
      @reset="onReset"
      class="q-gutter-md"
    >
      <q-input
        filled
        v-model="name"
        label="Your name *"
        hint="Kintone envirment name"
        lazy-rules
        :rules="[ val => val && val.length > 0 || 'Please type something']"
      />

      <q-input
        filled type="url"
        v-model="url"
        label="Kintone url"
        hint="Kintone domain address"
        lazy-rules
        :rules="[ val => val && val.length > 0,isDomain || 'Please type something']"
      />

      <q-input
        filled
        v-model="username"
        label="Login user "
        hint="Kintone user name"
        lazy-rules
        :rules="[ val => val && val.length > 0 || 'Please type something']"
      />

      <q-input v-model="password" filled :type="isPwd ? 'password' : 'text'" hint="Password with toggle" label="User password">
        <template v-slot:append>
          <q-icon
            :name="isPwd ? 'visibility_off' : 'visibility'"
            class="cursor-pointer"
            @click="isPwd = !isPwd"
          />
        </template>
      </q-input>

      <q-toggle v-model="accept" label="Active Domain" />

      <div>
        <q-btn label="Submit" type="submit" color="primary"/>
        <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
      </div>
    </q-form>

  </div>
</template>
<script>
import { useQuasar } from 'quasar'
import { ref } from 'vue'

export default {
  setup () {
    const $q = useQuasar()

    const name = ref(null)
    const age = ref(null)
    const accept = ref(false)
    const isPwd =ref(true)

    return {
      name,
      age,
      accept,
      isPwd,
      isDomain(val) {
       const domainPattern = /^https?\/\/:([a-zA-Z] +\.){1}([a-zA-Z]+)\.([a-zA-Z]+)$/;
       return (domainPattern.test(val) || '無効なURL')
    },

      onSubmit () {
        if (accept.value !== true) {
          $q.notify({
            color: 'red-5',
            textColor: 'white',
            icon: 'warning',
            message: 'You need to accept the license and terms first'
          })
        }
        else {
          $q.notify({
            color: 'green-4',
            textColor: 'white',
            icon: 'cloud_done',
            message: 'Submitted'
          })
        }
      },

      onReset () {
        name.value = null
        age.value = null
        accept.value = false
      }
    }
  }
}
</script> -->


<template>
  <div class="q-pa-md">
     <q-table grid grid-header title="Domain" selection="single" :rows="rows" :columns="columns"   v-model:selected="selected" row-key="name" :filter="filter" hide-header>
      <template v-slot:top>
        <div class="q-pa-md q-gutter-sm">
        <q-btn color="primary" label="追加" @click="newDomain()" dense />
      </div>
        <q-space />
        <q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>
      </template>
      <template v-slot:item="props">
        <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
          <q-card>
            <q-card-section>
              <div class="q-table__grid-item-row">
                <div class="q-table__grid-item-title">Domain</div>
                <div class="q-table__grid-item-value">{{ props.row.name }}</div>
              </div>
              <div class="q-table__grid-item-row">
                <div class="q-table__grid-item-title">URL</div>
                <div class="q-table__grid-item-value">{{ props.row.url }}</div>
              </div>
              <div class="q-table__grid-item-row">
                <div class="q-table__grid-item-title">Account</div>
                <div class="q-table__grid-item-value">{{ props.row.kintoneuser }}</div>
              </div>
              <div class="q-table__grid-item-row">
                <div class="q-table__grid-item-value">{{isActive(props.row.id) }}</div>
              </div>
            </q-card-section>
            <q-separator />
            <q-card-actions align="right">
              <q-btn flat @click = "activeDomain(props.row.id)">有効</q-btn>
              <q-btn flat @click = "deleteConfirm(props.row)">削除</q-btn>
            </q-card-actions>
          </q-card>
        </div>
      </template>
    </q-table>

    <show-dialog v-model:visible="show" name="ドメイン" @close="closeDg" width="350px">
        <domain-select ref="domainDg" name="ドメイン" type="multiple"></domain-select>
    </show-dialog>

    <q-dialog v-model="confirm" persistent>
      <q-card>
        <q-card-section class="row items-center">
          <q-avatar icon="confirm" color="primary" text-color="white" />
          <span class="q-ml-sm">削除してもよろしいですか？</span>
        </q-card-section>

        <q-card-actions align="right">
          <q-btn flat label="Cancel" color="primary" v-close-popup />
          <q-btn flat label="OK" color="primary" v-close-popup @click = "deleteDomain()"/>
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script setup lang="ts">
import { useQuasar } from 'quasar'
import { ref, onMounted, reactive } from 'vue'
import ShowDialog from 'components/ShowDialog.vue';
import DomainSelect from 'components/DomainSelect.vue';
import { useAuthStore } from 'stores/useAuthStore';

const authStore = useAuthStore();
import { api } from 'boot/axios';
import { domain } from 'process';

const $q = useQuasar()

const domainDg = ref();
const selected = ref([])

const show = ref(false);
const confirm = ref(false)

let editId = ref(0);
let activedomainid = ref(0);

const columns = [
{ name: 'id'},
  {name: 'name',required: true,label: 'Name',align: 'left',field: 'name',sortable: true},
  { name: 'url', align: 'center', label: 'Domain', field: 'url', sortable: true },
  { name: 'kintoneuser', label: 'User', field: 'kintoneuser', sortable: true },
  { name: 'kintonepwd' },
  { name: 'active', field: 'active'}
]

const rows = ref([] as any[]);

const isActive = (id:number) =>{
  if(id == activedomainid.value)
    return "Active";
  else
    return "Inactive";
}

const newDomain = () => {
  editId.value = 0;
  show.value = true;
};


const activeDomain = (id:number) => {
  api.put(`api/activedomain/`+ id).then(() =>{
            getDomain();
          })
};

const deleteConfirm = (row:object) => {
  confirm.value = true;
  editId.value = row.id;
};

const deleteDomain = () => {
  api.delete(`api/domain/`+ editId.value+'/1').then(() =>{
            getDomain();
          })
  editId.value = 0;
};

const closeDg = (val:string) => {
  if (val == 'OK') {
    let dodmainids =[];
    let domains = JSON.parse(JSON.stringify(domainDg.value.selected));
    for(var key in domains)
    {
      dodmainids.push(domains[key].id);
    }
    api.post(`api/domain`, dodmainids).then(() =>{getDomain();});
  }

};
const getDomain = async () => {
   const  resp = await api.get(`api/activedomain`);
   activedomainid.value = resp.data.id;
   const domainResult = await api.get(`api/domain`);
   const domains = domainResult.data as any[];
   rows.value=domains.map((item)=>{
      return { id:item.id,name: item.name, url: item.url, kintoneuser: item.kintoneuser, kintonepwd: item.kintonepwd}
    });
}
onMounted(async () => {
  await getDomain();
})

const isDomain = (val) =>{
      //  const domainPattern = /^https\/\/:([a-zA-Z] +\.){1}([a-zA-Z]+)\.([a-zA-Z]+)$/;
      //  return (domainPattern.test(val) || '無効なURL')
      return true;
    };
</script>



