<template>
  <div>
    <div class="pb-1" v-if="pagedata.showFilter && filters.length>0">
      <div class="field is-grouped is-grouped-multiline pl-2" v-if="filters? filters.length>0 : false">
        <div class="control mr-5">
          <a class="button is-primary is-outlined is-rounded fs-10" @click="clearFilter()">
            <span class="fs-13">Xóa lọc</span>
          </a>
        </div>
        <div class="control pr-2 mr-5">
          <span class="icon has-text-primary fsb-18"> <i class="mdi mdi-sigma"> </i> 
            {{totalRows}}
          </span>
        </div>
        <div class="control" v-for="(v,i) in filters" :key="i">
          <div class="tags has-addons is-marginless">
            <a class="tag is-primary is-marginless" @click="showCondition(v)">{{v.label.indexOf('>')>=0? $stripHtml(v.label,30) : v.label}}</a>
            <a class="tag is-delete is-marginless has-text-black-bis" @click="removeFilter(i)"></a>
          </div>
          <span class="help has-text-black-bis">
            {{v.sort? v.sort : (v.select? ('[' + (v.select.length>0? $stripHtml(v.select[0],20) : '') + '...&#931;' + v.select.length + ']') :
            (v.condition))}}</span>
        </div>
      </div>
    </div>
    <div class="table-container" ref="container">
    <table class="table is-bordered is-narrow is-hoverable" ref="table" :style="getSettingStyle('table')">
    <thead>
      <tr>
      <th v-for="(field,i) in displayFields" :key="i" :ref="`th${field.name}`"
      :style="getSettingStyle('header', field)">
      <div class="hyperlink" @click="showField(field)" :style="getSettingStyle('dropdown', field)"> 
        <template v-if="field.label.indexOf('<')<0">{{field.label}}</template>
        <template v-else>
          <component v-bind="{row: field, tick: tickall}" :is="compiledComponent(field.label)" @clickevent="doAction($event, field)" />
        </template>
      </div>
      </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(v,i) in displayData" :key="i">
        <td v-for="(field, j) in fields.filter(v=>v.show)" :key="j" :ref="`${v.stock_code}${field.name}`" :id="`${v.stock_code}${field.name}`"
          :style="v[`${field.name}color`]" @dblclick="doubleClick(field, v)">
          <component v-bind="{row: v, tick: tick, pagename: pagename, field: field, highlight: highlight}" v-if="field.template" 
            :is="compiledComponent(field.template)" @clickevent="doAction($event, v, field)"
          />
          <template v-else-if="field.tooltip">
            <b-tooltip :label="v[field.tooltip.field]"
              :position="field.tooltip.placement"
              :type="field.tooltip.type">
            {{v[field.name]}}
              </b-tooltip>
          </template>
          <template v-else> {{v[field.name]}} </template>
        </td>
      </tr>
    </tbody>
    </table>
      <div class="mt-3 px-3" v-if="showPaging">
        <b-pagination
          :total="totalRows"
          :current.sync="currentPage"
          :order="'is-centered'"
          :rounded="true"
          :per-page="perPage"
          @change="changePage()"
        >
        </b-pagination>
      </div>
    </div>
    <Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"
      @dosearch="doSearch(currentField, $event)" @doselect="doSelect(currentField, $event)" @dosort="doSort(currentField, $event)" 
      @setfilter="setFilter(currentField, $event)" @showsidebar="showSidebar($event)" @copyfield="copyField">
    </Modal>
    <Modal @close="showmodal1=undefined" v-bind="showmodal1" v-if="showmodal1" @updatefields="updateFields"></Modal>
    </div>
</template>
<script>
  import Vue from 'vue'
  export default {
    props: ['pagename'],
    data() {
      return {
        data: [],
        fields: [],
        search: '',
        filters: [],
        currentPage: 1,
        filterData: [],
        timer: undefined,
        perPage: 30,
        currentField: undefined,
        flagSearch: false,
        scrollbar: undefined,
        tablesetting: undefined,
        tick: {},
        tickall: false,
        displayData: [],
        displayFields: [],
        showmodal: undefined,
        showmodal1: undefined,
        totalRows: 0,
        showPaging: false,
        highlight: undefined
      }
    },
    created() {
      if(this.pagedata.data) this.data = this.$copy(this.pagedata.data)
      if(this.pagedata.fields) this.fields = this.$copy(this.pagedata.fields)
      if(this.pagedata.filters) this.filters = this.$copy(this.pagedata.filters)
      this.tablesetting = this.$copy(this.pagedata.tablesetting || this.gridsetting)
      this.perPage = this.pagedata.perPage? this.pagedata.perPage : this.$formatNumber(this.tablesetting.find(v=>v.code==='per-page').detail)
      if(this.data.length>0 && this.fields.length>0) this.updateShow()
      else this.showPagination()
    },
    watch: {
      'pagedata.update': function(newVal) {
        if(newVal) this.updateData(newVal)
      },
      menuaction: function(newVal) {
        if(this.$empty(newVal)) return
        if(newVal.name==='export-excel' && (newVal.pagename? newVal.pagename===this.pagename : true)) {
          this.$exportExcel(this.data, this.menuaction.file, this.fields.filter(v=>v.show))
        } else if(newVal.name==='opensidebar' && (newVal.pagename? newVal.pagename===this.pagename : true)) {
          this.showmodal = {component: 'datatable/TableOption', vbind: {pagename: this.pagename}, width: '850px', height: '600px', title: 'Danh sách cột'}
        }
      }
    },
    computed: {
      pagedata: {
        get: function() {return this.$store.state[this.pagename]},
        set: function(val) {this.$store.commit('updateStore', {name: this.pagename, data: val})}
      },
      gridsetting: {
        get: function() {return this.$store.state.tablesetting},
        set: function(val) {this.$store.commit("updateTableSetting", {tablesetting: val})}
      },
      menuaction: {
        get: function() {return this.$store.state.menuaction},
        set: function(val) {this.$store.commit("updateMenuAction", {menuaction: val})}
      },
      currentsetting: {
        get: function() {return this.$store.state.currentsetting},
        set: function(val) {this.$store.commit("updateCurrentSetting", {currentsetting: val})}
      }
    },
    methods: {
      showPagination() {
        this.showPaging = this.pagedata.pagination===false? false : true
        this.totalRows = this.data.length
        if(this.showPaging && this.pagedata.api) {
          if(this.pagedata.api.full_data===false) this.totalRows = this.pagedata.api.total_rows
          this.showPaging = this.totalRows > this.perPage
        }
      },
      clearFilter() {
        this.updateData({filters: []})
      },
      async updateData(newVal) {
        if(newVal.columns) {  //change attribute
          this.fields = this.$copy(newVal.columns)
          this.$store.commit('updateState', {name: this.pagename, key: 'fields', data: this.fields})
          this.$emit('changefield', this.fields)
          let fields = this.fields.filter(v=>v.show)
          this.data.map(v=>{
            fields.map(x=>v[`${x.name}color`] = this.getStyle(x, v))
          })
          return this.updateShow()
        }
        if(newVal.tablesetting) {
          this.tablesetting = newVal.tablesetting
          this.$store.commit('updateState', {name: this.pagename, key: 'tablesetting', data: this.tablesetting})
          this.perPage = this.$formatNumber(this.tablesetting.find(v=>v.code=="per-page").detail)
          this.currentPage = 1
        }
        this.tablesetting = this.$copy(this.pagedata.tablesetting || this.gridsetting)
        if(this.tablesetting) {
         this.perPage = this.pagedata.perPage? this.pagedata.perPage : Number(this.tablesetting.find(v=>v.code==='per-page').detail)
        }
        if(newVal.fields) {
          this.fields = this.$copy(newVal.fields)
          this.$store.commit('updateState', {name: this.pagename, key: 'fields', data: this.$copy(this.fields)})
          this.$emit('changefield', this.fields)
        } else this.fields = this.$copy(this.pagedata.fields)
        if(newVal.data || newVal.fields) {
          let copy = this.$copy(newVal.data || this.data)
          this.data = this.$calculateData(copy, this.fields)
          let fields = this.fields.filter(v=>v.show)
          this.data.map(v=>{
            fields.map(x=>v[`${x.name}color`] = this.getStyle(x, v))
          })
          if(newVal.data) {
            this.$store.commit('updateState', {name: this.pagename, key: 'data', data: this.$copy(this.data)})
            this.$emit('changedata', this.data)
          }
        }
        if(newVal.filters) this.filters = this.$copy(newVal.filters)
        else if(this.pagedata.filters) this.filters = this.$copy(this.pagedata.filters)
        if(newVal.data || newVal.fields || newVal.filters) {
          let copy = this.$copy(this.filters)
          this.filters.map((v,i)=>{
            let idx = this.$findIndex(this.fields, {name: v.name})
            let index = this.$findIndex(copy, {name: v.name})
            if(idx<0 && index>=0) this.$delete(copy, index)
            else if(idx>=0 && index>=0) copy[index].label = this.fields[idx].label
          })
          this.filters = copy
          this.doFilter(this.filters)
        }
        if(newVal.data || newVal.fields || newVal.filters || newVal.tablesetting) this.updateShow()
        if(newVal.data || newVal.fields) setTimeout(()=> this.scrollbarVisible(), 100)
        if(newVal.highlight) {
          this.highlight = this.$copy(newVal.highlight)
          setTimeout(()=>this.highlight = undefined, 500)
        }
      },
      updateShow(full_data) {
        this.showPagination()
        this.displayFields = this.fields.filter(v=>v.show)
        if(full_data===false) this.displayData = this.data
        else this.displayData = this.data.filter((ele,index) => (index>=(this.currentPage-1)*this.perPage && index<this.currentPage*this.perPage))
      },
      async changePage() {
        if(this.pagedata.api? this.pagedata.api.full_data===false : false) await this.backendFilter(this.filters)
        else this.updateShow()
        this.$emit('changepage', this.currentPage)
      },
      doubleClick(field, v) {
        this.doSelect(field, v[field.name])
      },
      showField(field) {
        if(this.pagedata.contextMenu===false || field.menu==='no') return
        this.showContextMenu(field)
        let doc = this.$refs[`th${field.name}`]
        let width = (doc? doc.length>0 : false)? doc[0].getBoundingClientRect().width : 100
        if(this.pagedata.setting) this.currentsetting = this.$copy(this.pagedata.setting)
        this.showmodal = {vbind: {pagename: this.pagename, field: this.currentField, filters: this.filters, filterData: this.filterData, width: width},
        component: 'datatable/ContextMenu', title:  this.$stripHtml(field.label), width: '600px', height: '500px'}
      },
      showCondition(v) {
        this.$emit('contextmenu', 'open')
        this.currentField = this.$find(this.pagedata.fields, {'name': v.name})
        this.showField(this.currentField)
      },
      compiledComponent(value) {
        return {
          template: `${value}`,
          props: ['row', 'tick', 'pagename', 'field', 'highlight'],
          methods: {
            formatNumber(val) {
              return this.$formatNumber(val)
            }
          }
        }
      },
      showContextMenu(field) {
        this.currentField = field
        this.filterData = this.$unique(this.data, [field.name])
        this.menuaction = {name: 'display', key: this.$id(), field: field}
        this.$emit('contextmenu', 'open')
      },
      showSidebar(event) {
        let title = 'Danh sách cột'
        if(event.name==="bgcolor") title = `Đổi màu nền: ${event.field.name} / ${this.$stripHtml(event.field.label, 30)}`
        else if(event.name==="color") title = `Đổi màu chữ: ${event.field.name} / ${this.$stripHtml(event.field.label, 30)}`
        else if(event.name==='template') title = `Định dạng nâng cao: ${this.$stripHtml(event.field.label, 30)}` 
        this.showmodal1 = {component: 'datatable/FormatOption', 
        vbind: {event: event, currentField: this.currentField, pagename: this.pagename}, width: '850px', height: '700px', title: title}
      },
      getStyle(field, record) {     
        var stop = false
        let val = this.tablesetting.find(v=>v.code==='td-border')? this.tablesetting.find(v=>v.code==='td-border').detail : 'border: solid 1px rgb(44, 44, 44); '
        val = val.indexOf(';')>=0? val : val + ';'
        if(field.bgcolor? !Array.isArray(field.bgcolor) : false) {
          val += ` background-color:${field.bgcolor}; `
        } else if(field.bgcolor? Array.isArray(field.bgcolor) : false) {
          field.bgcolor.map(v=>{
            if(v.type==='search') {
              if(record[field.name] && !stop? record[field.name].toLowerCase().indexOf(v.keyword.toLowerCase())>=0 : false) {
                val += ` background-color:${v.color}; `
                stop = true
              }
            } else {
              let res = this.$calculate(record, v.tags, v.expression)
              if(res.success && res.value && !stop) {
                val += ` background-color:${v.color}; `
                stop = true
              }
            }
          })
        }
        stop = false
        if(field.color? !Array.isArray(field.color) : false) {
          val += ` color:${field.color}; `
        } else if(field.color? Array.isArray(field.color) : false) {
          field.color.map(v=>{
            if(v.type==='search') {
              if(record[field.name] && !stop? record[field.name].toLowerCase().indexOf(v.keyword.toLowerCase())>=0 : false) {
                val += ` color:${v.color}; `
                stop = true
              }
            } else {
              let res = this.$calculate(record, v.tags, v.expression)
              if(res.success && res.value && !stop) {
                val += ` color:${v.color}; `
                stop = true
              }
            }
          })
        }
        stop = false
        if(field.textsize? !Array.isArray(field.textsize) : false) {
          val += ` font-size:${field.textsize}px; `
        } else if(field.textsize? Array.isArray(field.textsize) : false) {
          field.textsize.map(v=>{
             if(v.type==='search') {
              if(record[field.name] && !stop? record[field.name].toLowerCase().indexOf(v.keyword.toLowerCase())>=0 : false) {
                val += ` font-size:${v.size}px; `
                stop = true
              }
            } 
            else {
              let res = this.$calculate(record, v.tags, v.expression)
              if(res.success && res.value && !stop) {
                  val += ` font-size:${v.size}px; `
                  stop = true
                }
              }
          })
        } else val += ` font-size:${this.tablesetting.find(v=>v.code==='table-font-size').detail}px;`
        if(field.textalign) val += ` text-align:${field.textalign}; `
        if(field.minwidth) val += ` min-width:${field.minwidth}px; `
        if(field.maxwidth) val += ` max-width:${field.maxwidth}px; `
        return val
      },
      getSettingStyle(name, field) {
        let value = ''
        if(name==='container') {
          value = 'min-height:' + this.tablesetting.find(v=>v.code==='container-height').detail + 'rem; '
        } else if(name==='table') {
          value += 'background-color:' + this.tablesetting.find(v=>v.code==='table-background').detail + '; '
          value += 'font-size:' + this.tablesetting.find(v=>v.code==='table-font-size').detail + 'px;'
          value += 'color:' + this.tablesetting.find(v=>v.code==='table-font-color').detail + '; '
        } else if(name==='header') {
          value += 'background-color:' + this.tablesetting.find(v=>v.code==='header-background').detail + '; '
          if(field.minwidth) value += ' min-width: ' + field.minwidth + 'px; '
          if(field.maxwidth) value += ' max-width: ' + field.maxwidth + 'px; '
        } else if(name==='menu') {
          let arg = this.tablesetting.find(v=>v.code==='menu-width').detail
          arg = field? (field.menuwidth? field.menuwidth : arg) : arg
          value += 'width:'  + arg + 'rem; '
          value += 'min-height:'  + this.tablesetting.find(v=>v.code==='menu-min-height').detail + 'rem; '
          value += 'max-height:'  + this.tablesetting.find(v=>v.code==='menu-max-height').detail + 'rem; '
          value += "overflow:auto; "
        }  else if(name==='dropdown') {
          value += 'font-size:' + this.tablesetting.find(v=>v.code==='header-font-size').detail + 'px; '
          let found = this.filters.find(v=>v.name===field.name)
          found? value += 'color:' + this.tablesetting.find(v=>v.code==='header-filter-color').detail + '; '
          :value += 'color:' + this.tablesetting.find(v=>v.code==='header-font-color').detail + '; '
        }
        return value
      },
      removeFilter(i) {
        Vue.delete(this.filters, i)
        this.doFilter(this.filters)
        this.updateShow()
      },
      updateFields(field) {
        let copy = this.$copy(this.pagedata.fields)
        let idx = copy.findIndex(v=>v.name===field.name)
        copy[idx] = field
        this.updateData({columns: copy})
        this.currentField = this.$copy(field)
        if(this.showmodal) {
          this.showmodal.vbind.field = this.$copy(field)
          this.showmodal = this.$copy(this.showmodal)
        }
      },
      doAction(event, row, field) {
        let name = typeof event === "string"? event : event.name
        let data =  typeof event === "string"? event : event.data
        this.$store.commit('updateState', {name: this.pagename, key: 'action', data: {event: name, row: row, field: field, data: data, time: new Date()}})
        if(name==='remove') this.$deleterow(this.pagedata.api.name, row.id, this.pagename, true)
        if(name==='batchdelete') this.batchDelete()
        this.$emit(name, row, field, data)
        if(name==='tickall') {
          this.tickall = data
          if(data===false) this.tick = {}
          else {
            this.data.map(v=>this.tick[v.id] = true)
            this.tick = this.$copy(this.tick)
          }
        }
      },
      batchDelete() {
        let arr = []
        Object.entries(this.tick).forEach(([key, value]) => {
          if(value) arr.push({id: Number(key)})
        })
        if(arr.length===0) this.$buefy.toast.open({message: 'Bạn chưa chọn bản ghi để xoá', type: 'is-warning'})
        else this.$deleterow(this.pagedata.api.name, arr, this.pagename, true)
      },
      doSort(field, type) {
        let filter = {name: field.name, label: field.label, sort: type, format: field.format}
        let idx = this.filters.findIndex(v=>v.name===field.name)
        if(idx>=0) Vue.set(this.filters, idx, filter)
        else this.filters.push(filter)
        this.doFilter(this.filters)
        this.updateShow()
      },
      doSearch(field, search) {
        let copy = this.$copy(this.filters)
        let idx = copy.findIndex(v=>v.name===field.name)
        if(idx>=0) Vue.delete(copy, idx)
        if(this.pagedata.origin_api.full_data) {
          let data = this.frontendFilter(copy)
          let rows = this.$empty(search)? data
          : data.filter(v=>v[field.name]? v[field.name].toString().toLowerCase().indexOf(search.toLowerCase())>=0 : false)
          this.filterData = this.$unique(rows, [field.name])
          if(this.showmodal) this.showmodal.vbind.filterData = this.filterData
        } else {
          copy.push({name: field.name, label: field.label, search: search.toLowerCase(), format: field.format})
          this.flagSearch = true
          this.backendFilter(copy)
        }
      },
      doSelect(field, value) {
        let found = this.filters.find(v=>v.name===field.name)
        if(found) {
          !found.select? found.select = [] : false
          let idx = found.select.findIndex(x=>x===value)
          idx>=0? Vue.delete(found.select, idx) : found.select.push(value)
          if(found.select.length===0) {
            idx = this.filters.findIndex(v=>v.name===field.name)
            if(idx>=0) Vue.delete(this.filters, idx)
          }
        } else {
          this.filters.push({name: field.name, label: field.label, select: [value], format: field.format})
        }
        this.doFilter(this.filters)
        this.updateShow()
      },
      setFilter(field, filter) {
        let idx = this.filters.findIndex(v=>v.name===field.name)
        if(idx<0) this.filters.push(filter)
        else Vue.set(this.filters, idx, filter)
        this.doFilter(this.filters)
        this.updateShow()
      },
      doFilter(newVal, nonset) {
        if(this.currentPage>1 && nonset!==true) this.currentPage = 1
        if(this.pagedata.origin_api.full_data) {
          this.data = this.frontendFilter(newVal)
          this.$store.commit("updateState", {name: this.pagename, key: "dataFilter", data: this.$copy(this.data)})
          this.$emit('changedata', newVal)
        }
        else {
          if(this.timer) clearTimeout(this.timer)
          this.timer = setTimeout(() => this.backendFilter(newVal), 200)
        }
        this.$store.commit("updateState", {name: this.pagename, key: "filters", data: this.$copy(newVal)})
        this.$emit('changefilter', newVal? newVal.length>0 : false)
      },
      frontendFilter(newVal) {
        let self = this
        let checkValid = function(name, x, filter) {
          if(self.$empty(x[name])) return false
          else {
            let text = ''
            filter.map((y,k)=>{
              text += `${k>0? (filter[k-1].operator==='and'? ' &&' : ' ||') : ''} ${self.$formatNumber(x[name])} 
              ${y.condition==='='? '==' : (y.condition==='<>'? '!==' : y.condition)} ${self.$formatNumber(y.value)}`
            })
            return self.$calc(text)
          }
        }
        newVal = this.$copy(newVal)
        var data = this.$copy(this.pagedata.data)
        newVal.filter(m=>m.select || m.filter).map(v => {
          if(v.select) {
            data = data.filter(x => v.select.findIndex(y => this.$empty(y)? this.$empty(x[v.name]) : (y===x[v.name])) >-1)
          } else if(v.filter) {
            data = data.filter(x => checkValid(v.name, x, v.filter)) 
          }
        })
        let sort = {}
        let format = {}
        let list = this.filters.filter(x=>x.sort)
        list.map(v=>{
          sort[v.name] = v.sort === "az" ? "asc" : "desc"
          format[v.name] = v.format;
        })
        return list.length>0? this.$multiSort(data, sort, format) : data 
      },
      // Sử dụng backend filter
      async backendFilter(newVal) {
        let arr = [{code: '>', name: 'gt'}, {code: '>=', name: 'gte'}, {code: '<', name: 'lt'}, {code: '<=', name: 'lte'}, {code: '=', name: 'e'},
        {code: '<>', name: 'e'}]
        let params = this.pagedata.origin_api.params? this.$copy(this.pagedata.origin_api.params) : {}
        params.page = this.currentPage
        var where = params.filter? params.filter : {}
        var exclude = {}
        var sort = params.sort? params.sort.split(',') :  []
        var filter = newVal.filter(v=>!v.formula)
        if (this.pagedata.origin_api.url.indexOf("data/") >= 0) {
          filter.forEach(v => {
            if(v.search) where[v.name + "__icontains"] = v.search
            else if (v.select) where[v.name + "__in"] = v.select
            else if (v.filter) {
              v.filter.map(x=>{
                let obj = this.$find(arr, {code: x.condition})
                if(obj) {
                  if(x.condition==='<>') exclude[v.name + (obj.name==='e'? '' :  '__' + obj.name)] = this.$formatNumber(x.value)
                  else where[v.name + (obj.name==='e'? '' :  '__' + obj.name)] = this.$formatNumber(x.value)
                }
              })
            }
            else if (v.sort) sort.push(v.sort==="az" ? v.name : "-" + v.name)
          })
          params.filter = Object.keys(where).length>0? where : undefined
          params.exclude = Object.keys(exclude).length>0? exclude : undefined
          params.sort = sort.length === 0 ? undefined : sort.toString()
        }
        // Tải lại dữ liệu
        let found = this.$copy(this.pagedata.api)
        found.params = params
        await this.loadData(found)
      },
      async loadData(found) {
        let result = await this.$getapi([found])
        if(result==='error') return
        if(this.flagSearch) {
          this.flagSearch = false
          var rows = result[0].data.rows
          if(this.currentField) this.filterData = this.$unique(rows, [this.currentField.name])
        } else {
          let copy = this.$copy(result[0])
          copy.total_rows = copy.data.total_rows
          copy.full_data = copy.data.full_data
          delete copy.data
          this.$store.commit("updateState", {name: this.pagename, key: "data", data: this.$copy(result[0].data.rows)})
          this.$store.commit("updateState", {name: this.pagename, key: "api", data: this.$copy(copy)})
          this.data = this.$copy(result[0].data.rows)
          this.updateShow(copy.full_data)
        }
      },
      scrollbarVisible() {
        let element = this.$refs['container']
        if(!element) return
        let result = element.scrollWidth > element.clientWidth? true : false
        if(this.scrollbar) {
          element.parentNode.removeChild(this.scrollbar)
          this.scrollbar = undefined
        }
        if(result) this.doubleScroll(element)
      },
      doubleScroll(element) {
        var scrollbar= document.createElement('div');
        scrollbar.appendChild(document.createElement('div'));
        scrollbar.style.overflow= 'auto';
        scrollbar.style.overflowY= 'hidden';
        scrollbar.firstChild.style.width= element.scrollWidth+'px';
        scrollbar.firstChild.style.height = '1px'
        scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
        var running = false;
        scrollbar.onscroll= function() {
          if(running) {
            running = false;
            return;
          }
          running = true;
          element.scrollLeft= scrollbar.scrollLeft;
        };
        element.onscroll= function() {
          if(running) {
            running = false;
            return;
          }
          running = true;
          scrollbar.scrollLeft= element.scrollLeft;
        }
        element.parentNode.insertBefore(scrollbar, element)
        scrollbar.scrollLeft= element.scrollLeft
        this.scrollbar = scrollbar
      },
      copyField(field) {
        let newField = this.$copy(field)
        newField.name = `f${this.$id()}`
        newField.label = field.label + '-copy'
        if(field.format==='number') {
          newField.formula = field.name
          newField.tags = [field.name]
          newField.unit = field.unit==='0.01'? field.unit : '1'
        } else {
          newField.copy = field.name
          if(newField.mandatory==='yes') delete newField['mandatory'] 
        }
        let copy = this.$copy(this.pagedata.fields)
        let idx = copy.findIndex(v=>v.name===field.name)
        copy.splice(idx+1, 0, newField)
        this.$store.commit("updateState", {name: this.pagename, key: "update", data: {fields: copy, data: this.pagedata.data}})
      }
    }
  }
</script>
<style>
  .table tbody tr:hover td, .table tbody tr:hover th {
    background-color: hsl(0, 0%, 29%);
    color: white;
  }
</style>