{{--<div class="create_step_filter">--}}
{{--	<div class="step_filter_pick">--}}
{{--		<div class="none_filter" v-if="option_display == 0">--}}
{{--			<p>選択中の配信対象：</p>--}}
{{--			<p>@{{ getFilterName }}</p>--}}
{{--		</div>--}}
{{--		<div class="pick_filter" v-if="option_display == 1">--}}
{{--			<div class="add_filter_condition">--}}
{{--				<p>配信対象</p>--}}
{{--				<button class="btn btn-sns-line btn_add_filter"--}}
{{--						@click="toggleFilter('is_new', {}, 1)"--}}
{{--				>--}}
{{--					<i class="fal fa-plus" style="color: #5799DB;"></i> 絞り込み条件追加</button>--}}
{{--			</div>--}}
{{--			<div class="btns_filter_cond">--}}
{{--				<button class="btn btn-sns-line btn_pick_filter"--}}
{{--						@click="selectedNoneFilter"--}}
{{--						:class="{ 'filter_selected': filter_select === ''}">--}}
{{--					友だち全員(絞り込みなし)--}}
{{--				</button>--}}
{{--				<button class="btn btn-sns-line btn_pick_filter"--}}
{{--						v-for="(filter, indexFilter) in list_filter"--}}
{{--						:key="indexFilter"--}}
{{--						:class="{ 'filter_selected': filter_select === indexFilter}"--}}
{{--						v-on:click="toggleFilter('edit', indexFilter, 1)">--}}
{{--					@{{ filter.name }}</button>--}}
{{--			</div>--}}
{{--		</div>--}}
{{--	</div>--}}
{{--	<div class="step_filter_changes"--}}
{{--		 v-show="filter_select === indexFilter && option_display == 1"--}}
{{--		 v-for="(filter, indexFilter) in list_filter"--}}
{{--	>--}}
{{--		<div style="display: flex; margin-bottom: 10px;">--}}
{{--			<input class="form-control edit_filter_name"--}}
{{--				   v-model="filter.name"--}}
{{--				   :ref="'input-name-filter-' + indexFilter"--}}
{{--				   @focusout="saveCommon('filter', $event)"--}}
{{--				   @keyup.enter="saveCommon('filter', $event)"--}}
{{--				   :disabled="!edit_name_filter"--}}
{{--			>--}}
{{--			<i class="fa fa-edit" @click="edit_name_filter = true" style="cursor: pointer;"></i>--}}
{{--			<p class="edit_filter"--}}
{{--			   :class="{'not-allowed': !filter.id}"--}}
{{--			   @click="showModalFilter(filter.id)">絞り込み条件編集</p>--}}
{{--			<p class="delete_filter" v-on:click="deleteFilterManager(indexFilter)">条件削除</p>--}}
{{--		</div>--}}
{{--		<div class="edit_filter_content">--}}
{{--			<div v-for="(preview, indexPreview) in filter.list_preview_filter ">--}}
{{--				@{{ preview }}--}}
{{--			</div>--}}
{{--		</div>--}}
{{--	</div>--}}
{{--	<div class="btn_show_option" v-if="option_display == 0" v-on:click="showOptionDisplay(1)">--}}
{{--		絞込みオプション--}}
{{--		<i class="far fa-chevron-down" style="color: #535657;"></i>--}}
{{--	</div>--}}
{{--	<div class="btn_show_option" v-if="option_display == 1" v-on:click="showOptionDisplay(0)"--}}
{{--		 :style="( toggle_filter == 1  ) ? 'color: #2B2F36; background-color: #E0E0E0' : ''">--}}
{{--		絞込みオプション--}}
{{--		<i class="far fa-chevron-up" style="color: #535657;"--}}
{{--		   :style="( toggle_filter == 1  ) ? 'color: #000000;' : ''"></i>--}}
{{--	</div>--}}
{{--</div>--}}

<div id="list-filter">
	<div class="note-default">
		<i class="fas fa-user"></i> 選択中の配信対象
	</div>
	<div class="filter-selected main-content-filter"
		v-show="!open_list_filter"
	>
		@{{ getFilterName }}
		<i v-show="filter_select !== '' && !open_list_filter"
		   class="fas fa-cog"
		   @click="edit_filter = !edit_filter"
		   :style="[edit_filter ? {color: '#5799DB'} : {}]"
		></i>

		<div class="circle-open-filter"
			@click="showListFilter"
		>
			<i class="fas fa-caret-right"></i>
		</div>

		<div class="preview-btn">
			配信対象（絞り込み）の追加・変更
		</div>
	</div>

	<div class=" wrap-open-filter"
		 v-show="open_list_filter"
	>
		<div class="list-item-filter">
			<div class="item-filter"
				 :class="{'filter-active': filter_select === ''}"
				@click="selectedNoneFilter"
			>
				ステップ購読者全員
			</div>
			<div class="item-filter"
				 v-for="(filter, indexFilter) in list_filter"
				 :class="{'filter-active': filter_select === indexFilter}"
				@click="toggleFilter('edit', indexFilter, 1)"
			>
				@{{ filter.name }}
			</div>
		</div>
		<div class="add-filter-new"
			 @click="toggleFilter('is_new', {}, 1)"
		>
			<i class="fas fa-user"></i>
			<i class="far fa-plus"></i>
			配信対象追加

			<div class="hide-filter"
				@click.stop="open_list_filter = false"
			>
				<i class="fas fa-caret-left"></i>
			</div>
		</div>
	</div>

	<div class="open-setting-filter"
		v-show=" edit_filter"
		 @click="open_setting_filter = !open_setting_filter"
	>
		閉じる
		<i v-show="open_setting_filter" class="fas fa-caret-up"></i>
		<i v-show="!open_setting_filter" class="fas fa-caret-down"></i>
	</div>
</div>

<template v-for="(filter, indexFilter) in list_filter">
	<div v-show="indexFilter === filter_select && open_setting_filter && edit_filter" class="wrap-content-filter w-90"
	>
		<div class="left">
			絞り込み条件
		</div>
		<div class="right">
			<div class="header">
				<div style="display: flex; align-items: center">
					<button class="btn btn-sns-line btn-sns-line-lg btn-setting-filter"
							@click="showModalFilter(filter.id)"
					>
						絞り込み条件 編集
					</button>
					<span style="color: #222222; font-size: 14px; font-weight: 300; padding: 0px 20px; white-space: nowrap">管理名（任意）</span>

					<input class="form-control input-name-filter"
						   v-model="filter.name"
						   :ref="'input-name-filter-' + indexFilter"
						   @focusout="list_filter[filter_select].id && saveCommon('filter', $event)"
						   @keyup.enter="list_filter[filter_select].id && saveCommon('filter', $event)"
					>
				</div>

				<div style="color: #F44336; font-size: 14px; font-weight: 300; text-decoration: underline; cursor: pointer"
					 @click="deleteFilterManager(indexFilter)">
					配信対象削除
				</div>
			</div>

			<div class="preview-filter">

				<div class="list-item-preview-filter"
				>
					<template v-for="(preview, indexPreview) in filter.list_preview_filter ">
						@include('basic.step_message.v2.preview-filter')
					</template>

				</div>

				<div v-show="filter.list_preview_filter.length == 0"
					class="note-not-set-up-filter"
				>
					絞り込み条件が登録されていません（登録は必須です）
				</div>
			</div>
		</div>
	</div>
</template>