<template>
  <div class="fl-filter-select-status">
    <div class="fl-filter-select-status__title">Статус</div>
    <fl-tag-status
          v-for="status in saleStatusesList"
          :key="status.id"
          :status="status"
          :has-background="isActive(status)"
          has-border
          has-hover
          border
          @click="setValue(status)"/>
  </div>
</template>

<script>

import FlTagStatus from '@/components/FlTagStatus'
import { SALE_STATUS_LIST } from '@/mixins/cardMixin'

export default {
  name: 'FlSelectSaleStatus',
  components: { FlTagStatus },
  props: {
    initList: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      value: '',
      activeSaleStatuses: [],
      saleStatusesList: SALE_STATUS_LIST
    }
  },

  mounted () {
    this.activeSaleStatuses = this.initList
  },

  methods: {
    setValue (status) {
      const index = this.activeSaleStatuses.findIndex(item => status.id === item.id)
      if (index === -1) {
        this.activeSaleStatuses.push(status)
      } else {
        this.activeSaleStatuses.splice(index, 1)
      }
      this.value = this.activeSaleStatuses.map(item => item.value).toString()
    },

    isActive (status) {
      return Boolean(this.activeSaleStatuses.findIndex(item => status.id === item.id) + 1)
    }
  },

  watch: {
    activeSaleStatuses () {
      this.value = this.activeSaleStatuses.map(item => item.value).toString()
      this.$emit('change', this.activeSaleStatuses)
    }
  }
}
</script>
<style lang="scss" scoped>
.fl-filter-select-status {
  display: flex;
  align-items: center;
}

.fl-filter-select-status__title {
  min-width: 100px;
}

.fl-filter-select-status__save {
  box-sizing: border-box;
  width: 100%;
  padding: 11px 16px;
  color: $primary;
  cursor: pointer;
}

.active {
  background: $light-02;
}
</style>
