<template>
<div class="columns mx-0">
  <div class="column is-2">
    <div class="py-1" v-for="v in array">
      <a :class="(current? current.code===v.code : false)? 'has-text-primary has-text-weight-bold' : ''" @click="changeTab(v)">{{ v.name }}</a>
    </div>
  </div>
  <div class="column is-10">
    <div class="fsb-20 mb-3" v-if="current">{{ current.name }}</div>
    <DataView v-bind="current.vbind" v-if="current"></DataView>
  </div>
</div>
</template>
<script setup>
import { useStore } from '~/stores/index'
const store = useStore()
const { $clone } = useNuxtApp()

var array = [
    {code: 'systemsetting', name: 'System setting', vbind: {api: 'systemsetting', setting: 'common-fields-1', pagename: 'pagedata8.8.8', 
    timeopt: 36000,
    modal: {component: 'parameter/Common', title: 'System setting', vbind: {api: 'systemsetting'}}}},

    {code: 'emailsetup', name: 'Email setup', vbind: {api: 'emailsetup', setting: 'email-setup', pagename: 'pagedata8.8.8', 
    timeopt: 36000,
    modal: {component: 'parameter/EmailSetup', title: 'Email setup', width: '600px', height: '300px', vbind: {api: 'emailsetup'}}}},
    
    {code: 'settingfields', name: 'Setting fields', 
    vbind: {api: 'settingfields', setting: 'system-setting-fields', pagename: 'pagedata8.8.8', timeopt: 36000,
  modal: {component: 'parameter/SettingFields', title: 'Setting fields',  vbind: {api: 'settingfields'}}}}
]
var current = ref(array[0])
function changeTab(v) {
  current.value = null
  let copy = $clone(store['pagedata8.8.8'])
  copy.filters = []
  store.commit('pagedata8.8.8', copy)
  setTimeout(()=>current.value = v)
}
</script>
