<template>
  <el-main
    v-shortkey="shortsKey"
    @shortkey.native="keyAction"
  >
    <el-form
      label-position="top"
      size="small"
      class="create-bp"
    >
      <el-row :gutter="24">
        <field-definition
          v-for="(field) in fieldsList"
          :key="field.columnName"
          :metadata-field="field"
        />

        <el-col :span="24">
          <samp style="float: right; padding-right: 10px;">
            <el-button
              type="primary"
              class="custom-button-create-bp"
              icon="el-icon-check"
              :loading="isLoadingRecord"
              @click="createBusinessParter"
            />
            <el-button
              type="danger"
              class="custom-button-create-bp"
              icon="el-icon-close"
              @click="clearValues"
            />
          </samp>
        </el-col>
      </el-row>
    </el-form>
  </el-main>
</template>

<script>
import { requestCreateBusinessPartner } from '@/api/ADempiere/system-core.js'
import formMixin from '@/components/ADempiere/Form/formMixin.js'
import fieldsList from './fieldsListCreate.js'
import BParterMixin from './mixinBusinessPartner.js'

export default {
  name: 'BusinessPartnerCreate',
  mixins: [
    formMixin,
    BParterMixin
  ],
  props: {
    metadata: {
      type: Object,
      default: () => {
        return {
          uuid: 'Business-Partner-Create',
          containerUuid: 'Business-Partner-Create',
          fieldsList
        }
      }
    }
  },
  data() {
    return {
      businessPartnerRecord: {},
      isLoadingRecord: false,
      fieldsList,
      isCustomForm: true,
      unsubscribe: () => {}
    }
  },
  beforeDestroy() {
    this.unsubscribe()
  },
  methods: {
    // TODO: Get locations values.
    createBusinessParter() {
      let values = this.$store.getters.getValuesView({
        containerUuid: this.containerUuid,
        format: 'object'
      })
      if (this.isEmptyValue(values)) {
        return
      }
      values = this.convertValuesToSend(values)

      this.isLoadingRecord = true
      requestCreateBusinessPartner(values)
        .then(responseBPartner => {
          // TODO: Add new record into vuex store.
          this.setBusinessPartner(responseBPartner)
          this.clearValues()
          this.$message({
            type: 'success',
            message: 'Socio de negocio creado exitosamente',
            duration: 1500,
            showClose: true
          })
        })
        .catch(error => {
          this.showsPopovers.isShowCreate = true
          this.$message({
            type: 'warning',
            message: error.message,
            duration: 1500,
            showClose: true
          })
          console.warn(`Error create Business Partner. Message: ${error.message}, code ${error.code}.`)
        })
        .finally(() => {
          this.isLoadingRecord = false
        })
    },
    clearValues() {
      this.showsPopovers.isShowCreate = false

      this.$store.dispatch('setDefaultValues', {
        containerUuid: this.containerUuid,
        panelType: this.panelType
      })
      this.clearLocationValues()
    },
    clearLocationValues() {
      this.$store.commit('updateValuesOfContainer', {
        containerUuid: this.containerUuid,
        attributes: [{
          columnName: 'C_Location_ID',
          value: undefined
        }, {
          columnName: 'DisplayColumn_C_Location_ID',
          value: undefined
        }, {
          columnName: 'C_Country_ID',
          value: undefined
        }, {
          columnName: 'C_Country_ID_UUID',
          value: undefined
        }, {
          columnName: 'DisplayColumn_C_Country_ID',
          value: undefined
        }, {
          columnName: 'C_Region_ID',
          value: undefined
        }, {
          columnName: 'C_Region_ID_UUID',
          value: undefined
        }, {
          columnName: 'DisplayColumn_C_Region_ID',
          value: undefined
        }, {
          columnName: 'C_City_ID',
          value: undefined
        }, {
          columnName: 'C_City_ID_UUID',
          value: undefined
        }, {
          columnName: 'DisplayColumn_C_City_ID',
          value: undefined
        }, {
          columnName: 'Address1',
          value: undefined
        }, {
          columnName: 'Address2',
          value: undefined
        }, {
          columnName: 'Address3',
          value: undefined
        }, {
          columnName: 'Address4',
          value: undefined
        }]
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .create-bp {
    .el-form-item {
        margin-bottom: 0px !important;
    }
  }

  .custom-button-create-bp {
    float: right;
    margin-right: 10px;
  }
</style>
