<template>
  <div>
    <span class="visible-block text-x-large text-dark bottom-margin-medium">{{ tab_price }}</span>

    <aside-content :title="titleTabsAside(mktPriceTabs)" size-height="large">
      <template slot="asideHeader">
        <base-button
          @click.native="newPriceAdd"
          class="top-margin-large left-margin-large bottom-margin-medium"
        >
          {{ button_add_price }}
        </base-button>
      </template>

      <template slot="aside">
        <base-tabs
          :options="mktPriceTabs"
          vertical
          @click-tab="value => (!invalidForm ? clickDynamicTab('mktPrice', value) : '')"
        >
        </base-tabs>
      </template>

      <div
        v-if="mktPrice.length"
        v-for="(price, key) in mktPrice"
        :key="mktPrice[key].marketplace_price_id || mktPrice[key].id"
        v-show="mktPriceTabs[key] && mktPriceTabs[key].active"
      >
        <validation-provider
          tag="div"
          class="bottom-margin-large"
          :name="`mktPrice[${key}][title]`"
          :rules="{
            required: true,
            target_is_duplicated: {
              data: mktPrice,
              key: 'title',
            },
          }"
          v-slot="{ errors, valid }"
        >
          <base-input
            :label="entry_marketprice_title"
            :name="`mktPrice[${key}][title]`"
            v-model="mktPrice[key].title"
            :valid="valid"
            :error="errors[0]"
            :disabled="disableForm"
          >
          </base-input>
        </validation-provider>

        <validation-provider
          tag="div"
          class="bottom-margin-large"
          :name="`mktPrice[${key}][customer_group_id]`"
          rules="required"
          v-slot="{ errors, valid }"
        >
          <base-select
            :name="`mktPrice[${key}][customer_group_id]`"
            :label="entry_marketprice_table"
            v-model="mktPrice[key].customer_group_id"
            :valid="valid"
            :error="errors[0]"
            :disabled="disableForm"
            :required="true"
          >
            <option value=""> -Select- </option>
            <option
              v-for="(customer_group, keyc) in customer_groups"
              :value="customer_group.customer_group_id"
              :key="keyc"
              >{{ customer_group.name }}</option
            >
          </base-select>
        </validation-provider>

        <validation-provider
          tag="div"
          style="max-width: 300px"
          class="bottom-margin-large"
          :name="`mktPrice[${key}][standard]`"
          rules=""
          v-slot="{ errors, valid }"
        >
          <base-radio
            :name="`mktPrice[${key}][standard]`"
            :label="entry_marketprice_price_standard"
            :description="entry_marketprice_price_standard_obs"
            :valid="valid"
            :value="mktPrice[key].standard"
            :value-checked="1"
            :unchecked-value="0"
            :error="errors[0]"
            :disabled="disableForm"
            @change="changeMercadolivreStandard(key)"
          >
          </base-radio>
        </validation-provider>

        <base-button
          apperance="outline"
          class="top-margin-small bottom-margin-large"
          :loading="loadingBtn"
          :disabled="mktPrice[key].marketplace_price_adjustments.length == maxAjustments"
          @click.native="addAdjustmentPrice(key)"
        >
          {{ button_add_adjustment }}
        </base-button>

        <div
          v-show="mktPrice[key].marketplace_price_adjustments.length"
          v-for="(adjustment, keyAdjustment) in mktPrice[key].marketplace_price_adjustments"
          v-if="adjustment != null"
          :key="keyAdjustment"
          class="row small-space-xs bottom-xs"
        >
          <validation-provider
            tag="div"
            class="col-xs"
            :name="`mktPrice[${key}][marketplace_price_adjustments][${keyAdjustment}][type_adjustment]`"
            :rules="{
              handlerValidation: {
                valid: validateDuplicateAdjustment.valid[keyAdjustment],
                message: validateDuplicateAdjustment.message,
              },
            }"
            v-slot="{ errors, valid }"
          >
            <base-select
              :name="`mktPrice[${key}][marketplace_price_adjustments][${keyAdjustment}][type_adjustment]`"
              :label="entry_marketprice_type_adjustment"
              v-model="mktPrice[key].marketplace_price_adjustments[keyAdjustment].type_adjustment"
              :valid="valid"
              :error="errors[0]"
              :disabled="disableForm"
            >
              <option
                v-for="(value, key1) in Type_MarketplaceTypeAdjustment.getEnumList()"
                :value="key1"
                :key="key1"
                >{{ value }}</option
              >
            </base-select>
          </validation-provider>

          <validation-provider
            tag="div"
            class="col-xs"
            :name="`mktPrice[${key}][marketplace_price_adjustments][${keyAdjustment}][adjustment]`"
            :rules="{
              handlerValidation: {
                valid: validateDuplicateAdjustment.valid[keyAdjustment],
                message: validateDuplicateAdjustment.message,
              },
            }"
            v-slot="{ errors, valid }"
          >
            <base-select
              :name="`mktPrice[${key}][marketplace_price_adjustments][${keyAdjustment}][adjustment]`"
              :label="entry_marketprice_price_adjustment"
              v-model="mktPrice[key].marketplace_price_adjustments[keyAdjustment].adjustment"
              :valid="valid"
              :error="errors[0]"
              :disabled="disableForm"
            >
              <option
                v-for="(value, key2) in Type_MarketplaceAdjustmentPrice.getEnumList()"
                :value="key2"
                :key="key2"
                >{{ value }}</option
              >
            </base-select>
          </validation-provider>

          <validation-provider
            tag="div"
            class="col-xs"
            :name="`mktPrice[${key}][marketplace_price_adjustments][${keyAdjustment}][value]`"
            :rules="(mktPrice[key].marketplace_price_adjustments[keyAdjustment].adjustment == Type_MarketplaceAdjustmentPrice.Tp_Percentual
            && mktPrice[key].marketplace_price_adjustments[keyAdjustment].type_adjustment == Type_MarketplaceTypeAdjustment.Tp_Decre)
            ? {required: true, max_value: {max: 99}}: 'required'"
            v-slot="{ errors, valid }"
          >
            <base-input
              :label="entry_marketprice_value_adjustment"
              :name="`mktPrice[${key}][marketplace_price_adjustments][${keyAdjustment}][value]`"
              v-model="mktPrice[key].marketplace_price_adjustments[keyAdjustment].value"
              :valid="valid"
              :error="errors[0]"
              :disabled="disableForm"
              :mask="setMaskAdjustmentValue(mktPrice[key].marketplace_price_adjustments[keyAdjustment].adjustment)"
              :ummask="true"
              :required="true"
            >
            </base-input>
          </validation-provider>

          <div class="col-xs-12 col-md-width-auto">
            <base-button apperance="error" square @click.native="() => removeAdjustmentPrice(key, keyAdjustment)">
              <i class="fas fa-trash"></i>
            </base-button>
          </div>
        </div>

        <hr class="bottom-border-gray bottom-margin-medium top-margin-medium" />

        <base-button
          apperance="error"
          class="top-margin-small bottom-margin-large"
          :loading="loadingBtn"
          @click.native="() => removePrice(key)"
        >
          {{ button_remove_price }}
        </base-button>
      </div>
    </aside-content>
  </div>
</template>

<script src="./scripts.js"></script>
