<template>
  <div class="side-panel">
    <div class="side-panel-header">
      <h6>
        انتخاب ستون‌ها در حالت نمایش فهرستی(جدولی)
      </h6>
    </div>

    <div class="side-panel-content">
      <form @submit.prevent="saveColumn">
        <div class="row form-group">
          <label for="key" class="col-md-3">کلیدواژه: </label>
          <select
            class="form-control col-md-9"
            placeholder="کلیدواژه"
            type="key"
            id="key"
            name="key"
            v-model="localFormElement.key"
          >
            <option
              v-for="option in selectedForm.flatedItems"
              :value="option.key"
              >{{ option.label }}({{ option.key }})</option
            >
          </select>
        </div>
        <div class="row form-group">
          <label for="title" class="col-md-3">عنوان: </label>
          <input
            class="form-control col-md-9"
            placeholder="عنوان"
            type="title"
            id="title"
            name="title"
            v-model="localFormElement.title"
          />
        </div>
        <div class="row form-group">
          <label for="width" class="col-md-3">وزن: </label>
          <input
            class="form-control col-md-9"
            placeholder="وزن"
            type="width"
            id="width"
            name="width"
            v-model="localFormElement.width"
          />
        </div>
        <div class="row form-group">
          <div class="d-flex justify-content-between">
            <button-component
              classes="btn btn-primary d-inline-flex btn-default"
              buttonText="افزودن"
              type="submit"
            >
            </button-component>
            <button-component
              classes="d-inline-flex btn-danger"
              @click="closeFormShow"
              buttonText="بستن"
            >
              <!-- <span class="tavasi tavasi-Component-71--1"></span> -->
            </button-component>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  props: ["selectedItem", "selectedForm"],
  emits: ["close-form-show", "update-column"],

  data() {
    return {
      displayMode:'table',
      localFormElement: {
        title: null,
        key: null,
        width: 1,
      },
    };
  },
  mounted() {
    this.localFormElement = structuredClone(this.selectedItem);
  },
  watch: {
    selectedItem(newval) {
      this.localFormElement = structuredClone(newval);
    },
  },

  methods: {
    closeFormShow() {
      this.$emit("close-form-show");
    },
    saveColumn() {
      const clonedLocalFormElement = structuredClone(this.localFormElement);
      this.$emit("update-column", clonedLocalFormElement);
    },
  },
};
</script>