# ZeenFaqList

ZeenFaqList

# Example

# Source Code

<template>
  <ZeenContainer>
    <div class="faq__title">
      <ZeenHeadline tag="h2" :theme="headTitleTheme" v-html="headTitle" />
      <slot name="top-btn" />
    </div>
    <div v-if="isSupport" class="faq-support">
      <div class="faq-support__left">
        <ZeenPlayer staticVideo v-bind="playerProps" />
      </div>
      <div class="faq-support__right">
        <div class="faq-support__title" v-html="supportTitle"></div>
        <div class="faq-support__subtitle" v-html="supportSubtitle"></div>
      </div>
    </div>

    <ul class="faq-list" :class="{'faq-list_indent': !isSupport}">
      <li class="faq-list__item" v-for="(item, index) in list" :key="`faq-list__item_${item.id}`">
        <slot v-bind:item="item" v-bind:checked="checked">
          <ZeenFaqRow v-model="checked" :value="index" index="index" v-bind="propsBind(item)">
            <template v-for="(slot, slotName) in faqRowSlots" v-slot:[slotName]="params">
              <slot :name="`${faqRowPrefix}${slotName}`" v-bind="params"></slot>
            </template>
          </ZeenFaqRow>
        </slot>
      </li>
    </ul>
  </ZeenContainer>
</template>

<script>
import ZeenFaqRow from '../../components/ZeenFaqRow/ZeenFaqRow'
import ZeenPlayer from '../../components/PlayerComponent/PlayerComponent'
import ZeenContainer from '../../components/ZeenContainer/ZeenContainer'
import ZeenHeadline from '../../components/ZeenHeadline/ZeenHeadline'
import {createSlotsFor} from '../../helpers/createBlockData'

export default {
  name: 'ZeenFaqList',
  components: {
    ZeenHeadline,
    ZeenContainer,
    ZeenPlayer,
    ZeenFaqRow,
  },
  props: {
    playerProps: Object,
    faqRowProps: Object,
    list: {
      type: Array,
    },
    isSingle: {
      type: Boolean,
      default: true,
    },
    isSupport: {
      type: Boolean,
      default: false,
    },
    supportSubtitle: {
      type: String,
    },
    supportTitle: {
      type: String,
    },
    headTitle: {
      type: String,
      default: 'Помощь',
    },
    headTitleTheme: {
      type: String,
      default: 'light',
    },
  },
  data() {
    return {
      checked: this.isSingle ? '' : [],
    }
  },
  computed: {
    faqRowPrefix() {
      return 'faq-row_'
    },
    faqRowEvents() {
      const prefix = this.faqRowPrefix
      const events = this.$listeners
      const eventNames = Object.keys(events)
        .filter((key) => key.substring(0, prefix.length) === prefix)
        .map((key) => key.substring(prefix.length))
      return eventNames.reduce((acc, eventKey) => {
        acc[eventKey] = events[`${prefix}${eventKey}`]
        return acc
      }, {})
    },
    faqRowSlots() {
      return createSlotsFor(this, this.faqRowPrefix)
    },
  },
  methods: {
    propsBind(item) {
      return {...this.faqRowProps, ...item}
    },
  },
}
</script>

<style lang="scss">
:root {
  /* Размеры */
  --faq-list-border-radius: 10px;
  --faq-list-margin-top: 50px;
  --faq-support-margin-top: 30px;
  --faq-support-margin-bottom: 50px;
  --faq-support-left-max-width: 474px;
  --faq-support-left-height: 266px;
  --faq-support-left-border-radius: 12px;
  --faq-support-left-margin-right: 50px;
  --faq-support-title-font-weight: bold;
  --faq-support-title-font-size: var(--main-larger-size);
  --faq-support-title-line-height: 42px;
  --faq-support-title-margin-bottom: 35px;
  --faq-support-title-margin-top: 0px;
  --faq-support-subtitle-font-size: var(--main-large-size);
  --faq-support-subtitle-line-height: 32px;
  --faq-support-subtitle-font-weight: normal;

  /* Цвет */
  --faq-support-background: var(--gray-1);
  --faq-support-title-color: var(--main-text-color);
  --faq-support-subtitle-color: var(--main-text-color);
}
</style>

<style lang="scss" scoped>
@import 'src/styles/mixins';

.faq-support {
  display: flex;
  background-color: var(--faq-support-background);
  margin: var(--faq-support-margin-top) 0 var(--faq-support-margin-bottom);

  @include phones {
    flex-direction: column;
  }

  &__left {
    flex: 0 0 auto;
    width: 100%;
    max-width: var(--faq-support-left-max-width);
    height: var(--faq-support-left-height);
    border-radius: var(--faq-support-left-border-radius);
    overflow: hidden;
    margin-right: var(--faq-support-left-margin-right);

    @include phones {
      margin-right: 0;
      flex: 1;
    }
  }

  &__title {
    color: var(--faq-support-title-color);
    font-weight: var(--faq-support-title-font-weight);
    font-size: var(--faq-support-title-font-size);
    line-height: var(--faq-support-title-line-height);
    margin: var(--faq-support-title-margin-top) 0 var(--faq-support-title-margin-bottom);
  }

  &__subtitle {
    color: var(--faq-support-subtitle-color);
    font-size: var(--faq-support-subtitle-font-size);
    line-height: var(--faq-support-subtitle-line-height);
    font-weight: normal;
  }
}

.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--faq-list-border-radius);

  &_indent {
    margin: var(--faq-list-margin-top) 0 0;
  }
}
</style>

# slots

v-slot:title
v-slot:icon - иконка задана по умолчанию
v-slot:description

# props

Название	Тип	Обязательный	По умолчанию	Описание
playerProps	Object	-	-	Принимает в себя объект с пропсами для плеера в блоке помощи с видеоинструкцией.
faqRowProps	Object	-	-	Принимает в себя объект с пропсами для строки.
list	Array	-	-	Принимает в себя массив с данными для вопросов и ответов.
isSingle	Boolean	-	false	Открывает только один элемент закрывая остальные.
isSupport	Boolean	-	false	Вкл/выкл блок с видеоинструкцией.
supportTitle	String	-	-	Принимает текст для заголовка блока помощи с видеоинструкцией.
supportSubtitle	String	-	-	Принимает текст для подзаголовка блока помощи с видеоинструкцией.
headTitle	String	-	Помощь	Открывает текст для заголовка блока ZeenFaqList.
headTitleTheme	String	-	light	Принимает параметр для theme компонента ZeenHeadline.

← ZeenSpeakerSection ZeenPlayerBlock →

# ZeenFaqList

# Example

Список

FAQ title

Одиночная строка

С Видеоинструкцией

Помощь

# Source Code

# slots

# props