<template>
  <div v-if="!loading">
    <SmartCard v-for="(fieldset, index) in row" :key="index" :title="fieldset.node.field_set_name" :collapsed="fieldset.node.collapsed">
      <div class="row">
        <div v-for="column in 2" :key="column" class="col-sm-6">
          <span v-for="(field, index_field) in filterColumn(fieldset.node.field_set.edges, column-1)" :key="index_field">
            <label class="control-label col-sm-4 text-capitalize">{{field.node.field_name}}</label>
            <div class="input-display col-sm-8">{{getValue(field.node.identifier, field.node)}}</div>
          </span>
        </div>
      </div>
    </SmartCard>
  </div>
  <div v-else-if="loading" class="dot-flashing" role="status"/>
</template>

<script>

import Utils from './lib/utils.js'
import gql from 'graphql-tag'
import { useQuery, useResult } from '@vue/apollo-composable'
import { useI18n } from 'vue-i18n'
import SmartCard from '@/components/SmartCard'

export default {
  components: {
    SmartCard
  },
  props: {
    module: {
      type: String,
      required: true
    },
    refId: {
      type: String,
      required: false,
      default: null
    },
    values: {
      type: Object,
      required: false,
      default: function(){
        return {}
      }
    }
  },
  setup: function(props){
    const { t } = useI18n()
    const filterColumn = (data, pos) => (data.filter(function(field){
      return field.node.column_no == pos
    }))

    const queryField = gql`query get_CustomFieldList( $module: String! ) {
      fieldset_set (filters: [{and_filters: [{field: "module", qs: $module}]}]) {
        edges {
          node {
            id
            module
            field_set_name
            system_flag
            position
            collapsed
            field_set {
              edges {
                node {
                  id
                  field_name
                  field_type
                  mandatory_flag
                  field_length
                  column_no
                  row_no
                  active_flag
                  default_value
                  db_column
                  decimals
                  picklist_source
                  relation_module
                  internal_desc
                  identifier
                  module
                  regex
                }
              }
            }
          }
        }
      }
    }`

    const { result, loading } = useQuery( queryField, () => ({ module: props.module + (props.refId != null ? props.refId : '') }), () => ({ fetchPolicy: 'no-cache' }) )
    const row = useResult( result, {}, data => data.fieldset_set.edges )

    return { t, row, loading, filterColumn }
  },
  methods:{
    getValue : function(identifier, field){

      if(this.values == null){
        return this.t('ui.na')
      }

      const data = this.values.field_data_value_set.filter(value => value.field && value.field.identifier == identifier)
      let value = data[0] !== undefined && data[0].value !== undefined && data[0].value != '' ? data[0].value : this.t('ui.na')

      // value is always a string
      if(value != this.t('ui.na')){
        if(field.field_type == 'currency'){
          value = Utils.formatCurrency(value, field.decimals)
        } else if(field.field_type == 'boolean'){
          value = (['true', '1'].includes(value) ? this.t('ui.yes') : this.t('ui.no'))
        } else if(field.field_type == 'percentage'){
          value = Utils.formatPercentage(value, field.decimals)
        } else if(field.field_type == 'numeric'){
          value = Utils.formatNumber(value, field.decimals)
        } else if(field.field_type == 'relation'){
          // @todo: do a seperated query to get the node_description of the model (module) for this value
        }
      }

      return value
    }
  },
}
</script>
