<template>
  <div class="ws-state-locales">
    <!-- <div class="locales-select-section">
      <v-icon color="textPrimary">mdi-web</v-icon>
      <div class="locales-select-section__title textPrimary--text">你正在編輯的語言是</div>
      <WsStateSelect
        minWidth="130px"
        v-model="selectingLocale"
        :items="_localeItems"
        round
        evevate
      ></WsStateSelect>
    </div> -->
    <v-row v-if="C_value">
      <v-col
        v-for="(field, fieldKey) in fields"
        cols="12"
        :sm="field.sm ? field.sm : 12"
        :key="fieldKey"
      >
        <WsState
          :placeholder="`請輸入${field.label}`"
          :type="field.type"
          :label="field.label"
          :fields="field.fields"
          :rules="field.rules"
          :displayLabel="field.displayLabel"
          :autofocus="field.autofocus"
          :value="C_value[$store.state.locale.selectingLocale][fieldKey]"
          @input="$_onInput($event,fieldKey)"
          @keyup.enter="$_onSubmit()"
        />
      </v-col>
    </v-row>
  </div>
</template>

<script>
export default {
  data: () => ({
    // selectingLocale: null,
    C_value: null,
  }),
  methods: {
    $_onInput($event, fieldKey) {
      this.C_value[this.$store.state.locale.selectingLocale][fieldKey] = $event;
    },
    $_valueInit() {
      const initValue = {};
      this._locales.forEach(locale => {
        initValue[locale.code] = {};
        for (let fieldKey in this.fields) {
          const field = this.fields[fieldKey];
          if (
            this.value &&
            this.value[locale.code] &&
            this.value[locale.code][fieldKey]
          ) {
            initValue[locale.code][fieldKey] = this.value[locale.code][
              fieldKey
            ];
          } else if (field.defaultValue !== undefined) {
            initValue[locale.code][fieldKey] = field.defaultValue;
          } else {
            initValue[locale.code][fieldKey] = null;
          }
        }
      });
      this.C_value = initValue;
    }
  },
  mounted() {
    // this.selectingLocale = this._locales[0].code;
    this.$_valueInit();
  },
  props: {
    fields: Object,
    value: {
      type: Object,
      default: null
    }
  },
  computed: {
    _localeItems() {
      const _localeItems = [];
      this._locales.forEach(locale => {
        _localeItems.push({
          value: locale.code,
          text: locale.name
        });
      });
      return _localeItems
    },
    _locales() {
      return this.$store.state.locale.locales;
    }
  },
  watch: {
    C_value: {
      handler() {
        this.$emit("input", this.C_value);
      }
    }
  }
};
</script>

<style lang="scss">
@import "../assets/scss/ws-state-locales.scss";
</style>