<template>
  <!-- 
    NOTES: 
    * THERE IS A DEFAULT VALUE FOR "dataToUpdate"
      -> if "dataToUpdate" from the parent/(this.$parent[this.dataToUpdate]) component is empty, it will get the first element of the given array
      -> else it will show the value from the parent/(this.$parent[this.dataToUpdate]) component
    WARNING:
     > This should not be added directly to the tabs-c || TabsC because where you are not in control of the data inside this component. The
       prop "dataToUpdate" will not work because it send data to it's parent.
     > SOLUTION: Create a perent component and add it there...

  -->
  <div class="z-10"
    :class="[
      (this.w === '111px' ? 'w-'+this.w : 'w-'+this.w),
      (this.h === '42px' ? 'h-'+this.h : 'h-'+this.h),
    ]">
    <div class="w-100 h-100"
        @mouseenter="hover = true"
        @mouseleave="hover = false">
      <div class="w-100 h-100 bo-1px bo-D8D8D8 bor-3px d-fx jc-sb ai-c pr-15px pl-13px cursor-pointer">
        <span class="f-15px">{{ selected }}</span>
        <ic-icon name="drop-down_arrow" width="12" height="7"></ic-icon>
      </div>
    </div>

    <div class="pt-12px" v-show="hover === true"
        @mouseenter="hover = true"
        @mouseleave="hover = false">
      <div class="w-100 bo-1px bo-D8D8D8 bor-6px b-we" >
        <!-- Array Name -->
        <div class="h-42px c-A4A4A4 bo_b-1px bo-D8D8D8  d-fx ai-c cursor-pointer" v-if="this.arrayName">
          <span class="f-11px fw-500 p-a"
          :class="[(txt_pos === '' ? 'pl-21px' : txt_pos)]">{{arrayName}}</span>
        </div>
        <!-- dropdown items -->
        <div class="h-29px bo-D8D8D8 d-fx ai-c cursor-pointer c-bk c-246EE8-H h-36px"
          :class="[(index === data.length - 1 ? '' : 'bo_b-1px')]"
          v-for="(val, index) in data" :key="index"
          @click="updateSelected(val)"
          >
          <span class="f-15px p-a"
          :class="[(txt_pos === '' ? 'pl-21px' : txt_pos)]" >{{val}}</span>
        </div>
      </div>
    </div>
    <!-- {{this.dataToUpdate}} -->
    <!-- {{this.getArrayFirstData}} -->
  </div>
</template>

<script>
export default {
  name: 'guideC',
  extends: {},
  props: {
    data: Array,
    dataToUpdate: String,
    arrayName: String,
    w: {
      type: String,
      default: '111px'
    },
    h: {
      type: String,
      default: '42px'
    },
    txt_pos: {
      type: String,
      default: ''
    },
    
  },
  data(){
    return{
      hover: false,
      selected: this.getArrayFirstData,
      name: 'selected'
    };
  },
  components: {},
  created () {
    this.selected = this.getArrayFirstData
  },
  computed: {
    getArrayFirstData () {
      if (this.$parent[this.dataToUpdate] == '' )  {
        const [data] = this.data
        return `${data}`
      } else {
        return this.$parent[this.dataToUpdate]
      }
    }
  },
  watch: {},
  methods: {
    updateSelected (data) {
      this.selected = data
      this.$parent[this.dataToUpdate] = data
      // alert(data)
      // console.log(data)
    }
  },
  beforeCreate(){},
  mounted(){}
}
</script>


