<template>
  <div>
    <DataTable @open="open" @insert="insert" @edit="edit" @delete="remove" @opensetting="openSetting" v-bind="{pagename: vpagename}" 
    @dataevent="dataEvent" @company="openCompany" v-if="pagedata" />
    <Modal @close="comp=undefined" 
    v-bind="{component: comp, width: width || '40%', height: height || '300px', vbind: vbind1}" v-if="comp"></Modal>
  </div>
</template>
<script>
export default {
  props: ['setting', 'api', 'filter', 'component', 'pagename', 'width', 'height', 'params', 'data', 'vbind'],
  data() {
    return {
      comp: undefined,
      current: undefined,
      chart: undefined,
      vbind1: {},
      vpagename: this.pagename? this.pagename : this.$findpage()
    }
  },
  created() {
    this.pagedata = this.$getpage()
    setTimeout(()=>this.getApi(), 10)
  },
  beforeDestroy() {
    if(!this.pagename && this.vpagename) this.$clearpage(this.vpagename)
  },
  watch: {
    dialog: function(newVal) {
      if(newVal? newVal.confirm : false) this.delete()
    }
  },
  computed: {
    pagedata: {
      get: function() {return this.$store.state[this.vpagename]},
      set: function(val) {this.$store.commit('updateStore', {name: this.vpagename, data: val})}
    },
    currentsetting: {
      get: function() {return this.$store.state.currentsetting},
      set: function(val) {this.$store.commit("updateCurrentSetting", {currentsetting: val})}
    },
    dialog: {
      get: function() {return this.$store.state['dialog']},
      set: function(val) {this.$store.commit('updateStore', {name: 'dialog', data: val})}
    },
    settings: {
      get: function() {return this.$store.state['settings']},
      set: function(val) {this.$store.commit('updateStore', {name: 'settings', data: val})}
    }
  },
  methods: {
    async getApi() {
      let connlist = []
      let row = this.setting.id? this.$copy(this.setting) : undefined
      if(!row) {
        let found = this.$find(this.settings, this.setting>0? {id: this.setting} : {name: this.setting})
        if(found) row = this.$copy(found)
      }
      if(!row) {
        let conn = this.$findapi('usersetting')
        conn.params.filter = this.setting>0? {id: this.setting} : {name: this.setting}
        connlist.push(conn)
      }
      let data = this.data? this.$copy(this.data) : undefined 
      if(!data) {
        let conn1 = this.$findapi(this.api)
        if(this.filter) conn1.params.filter = this.filter
        if(this.params) conn1.params = this.params
        connlist.push(conn1)
      }
      let ele = undefined
      if(connlist.length>0) {
        let rs = await this.$getapi(connlist)
        ele = this.$find(rs, {name: 'usersetting'})
        if(ele) {
          row = this.$copy(ele.data.rows[0])
          let copy = this.$copy(this.settings)
          copy.push(row)
          this.settings = copy
        }
        let obj = this.$find(rs, {name: this.api})
        if(obj) data = this.$copy(obj.data.rows)
      }
      this.$setpage(this.vpagename, row, ele)
      data = this.$formatArray(data, this.pagedata.fields)
      this.$store.commit('updateState', {name: this.vpagename, key: 'update', data: {data: data}})
    },
    remove(v) {
      this,this.current = v
      this.$dialog({width: '500px', title: 'Xác nhận', 
      content: `Bạn có chắc muốn xoá bản ghi ${v.id}`, type: 'is-primary', progress:true, duration: 10, askconfirm: true})
    },
    async delete() {
      await this.$deleterow(this.api, this.current.id)
      this.$emit('close')
    },
    dataEvent(row) {
      this.$emit('dataevent', row)
    },
    openSetting(v) {
      this.$emit('opensetting', v)
    },
    open(v) {
      this.$emit('open', v)
      this.$emit('modalevent', {name: 'open', data: v})
    },
    openCompany(v) {
      this.$emit('company', v)
      this.$emit('modalevent', {name: 'company', data: v})
    },
    insert() {
      this.vbind1 = {vpagename: this.vpagename, api: this.api}
      this.comp = this.$copy(this.component)
    },
    edit(v) {
      this.vbind1 = {vpagename: this.vpagename, api: this.api, row: v}
      if(this.vbind) {
        for (const [key, value] of Object.entries(this.vbind)) {
          this.vbind1[key] = value.indexOf('$')===0? v[value.replace('$', '')] : value
        }
      }
      this.comp = this.$copy(this.component)
    }
  }
}
</script>