{{-- tag --}}
<div class="item-filter tag"
	 v-if="preview.type == 'tag'"
	 :class="{and: preview.operator == 'and', or: preview.operator != 'and'}"
>
	<div class="row-content">
		<div class="type-name">
			<span class="symbol">@{{ preview.operator == 'and' ? '&' : 'or' }}</span> タグ
		</div>
		<div class="type-input">

		</div>
	</div>
	<div class="row-content">
		<div class="content-item-1">
			@{{ preview.list_name }}
		</div>
		<div class="content-item-2">
			<span class="content-more"
				  v-if="JSON.parse(preview.data).tag_condition == 0">選択したタグが1つでも付いている人</span>
			<span class="content-more"
				  v-if="JSON.parse(preview.data).tag_condition == 1">選択したタグの全てが付いている人</span>
			<span class="content-more"
				  v-if="JSON.parse(preview.data).tag_condition == 2">
				選択したタグが1つでも付いている人<span class="note">を除外</span>
			</span>
			<span class="content-more" v-if="JSON.parse(preview.data).tag_condition == 3">
				選択したタグの全てが付いている人<span class="note">を除外</span>
			</span>
		</div>
	</div>
</div>

{{-- friend-name --}}
<div class="item-filter friend-name"
	 v-else-if="preview.type == 'friend_name'"
	 :class="{and: preview.operator == 'and', or: preview.operator != 'and'}"
>
	<div class="row-content">
		<div class="type-name">
			<span class="symbol">@{{ preview.operator == 'and' ? '&' : 'or' }}</span> 友だち名
		</div>
		<div class="type-input">

		</div>
	</div>
	<div class="row-content">
		<div class="content-item-1">
			@{{ preview.text_preview }}
		</div>
		<div class="content-item-2">
			<span class="content-more"
				  v-if="JSON.parse(preview.data).checkbox_name.length == 1 && JSON.parse(preview.data).checkbox_name[0] == 0">
				のLINE名の人
			</span>
			<span class="content-more"
				  v-else-if="JSON.parse(preview.data).checkbox_name.length == 1 && JSON.parse(preview.data).checkbox_name[0] == 2">
				のシステム表示名の人
			</span>
			<span v-else class="content-more">
				のLINE名またはシステム表示名の人
			</span>
		</div>
	</div>
</div>

{{-- add friend --}}
<div class="item-filter add-friend"
	 v-else-if="preview.type == 'day_add_friend'"
	 :class="{and: preview.operator == 'and', or: preview.operator != 'and'}"
>
	<div class="row-content">
		<div class="type-name">
			<span class="symbol">@{{ preview.operator == 'and' ? '&' : 'or' }}</span> 友だち追加日
		</div>
		<div class="type-input">

		</div>
	</div>
	<div class="row-content">
		<div class="content-item-1">
			<template v-if="JSON.parse(preview.data).day_filter_type == 0">
				@{{ moment(JSON.parse(preview.data).modal_from_filter, 'YYYY-MM-DD').format('YYYY年MM月DD日') }} - @{{ moment(JSON.parse(preview.data).modal_to_filter, 'YYYY-MM-DD').format('YYYY年MM月DD日') }}にエルメに登録された人
			</template>
			<template v-else>
				エルメに登録されてから@{{ JSON.parse(preview.data).duration_day_start }}～@{{ JSON.parse(preview.data).duration_day_end }}︎日経過した人
			</template>
		</div>
		<div class="content-item-2">

		</div>
	</div>
</div>


{{-- step --}}
<div class="item-filter step"
	 :class="{and: preview.operator == 'and', or: preview.operator != 'and'}"
	 v-else-if="preview.type == 'scenario'"
>
	<div class="row-content">
		<div class="type-name">
			<span class="symbol">@{{ preview.operator == 'and' ? '&' : 'or' }}</span> ステップ配信
		</div>
		<div class="type-input">

		</div>
	</div>
	<div class="row-content">
		<div class="content-item-1">
			@{{ JSON.parse(preview.data).scenario_name }}
		</div>
		<div class="content-item-2">
			<span class="content-more"
				  v-if="JSON.parse(preview.data).scenario_condition == 0">現在配信中の人</span>
			<span class="content-more"
				  v-else-if="JSON.parse(preview.data).scenario_condition == 1">現在配信されていない人</span>
			<span class="content-more"
				  v-else-if="JSON.parse(preview.data).scenario_condition == 2">現在配信中で@{{ JSON.parse(preview.data).number_date }}日目まで送信された人</span>
			<span class="content-more"
				  v-else-if="JSON.parse(preview.data).scenario_condition == 3">最後のメッセージが送信され、配信が終了した人</span>
			<span class="content-more" v-else>
				友だち全体から配信終了した人<span class="note">を除外</span>
			</span>
		</div>
	</div>
</div>


{{-- qr code --}}
<div class="item-filter qr-code"
	 :class="{and: preview.operator == 'and', or: preview.operator != 'and'}"
	 v-else-if="preview.type == 'qr_code'"
>
	<div class="row-content">
		<div class="type-name">
			<span class="symbol">@{{ preview.operator == 'and' ? '&' : 'or' }}</span> QRコードアクション
		</div>
		<div class="type-input">

		</div>
	</div>
	<div class="row-content">
		<div class="content-item-1">
			@{{ preview.list_name }}
		</div>
		<div class="content-item-2">
			<span class="content-more"
				  v-if="JSON.parse(preview.data).qr_condition == 0">選択したどれか一つから友だち登録した人</span>
			<span class="content-more"
				  v-else-if="JSON.parse(preview.data).qr_condition == 2">
				選択したどれか一つから友だち登録した人<span class="note">を除外</span>
			</span>

{{--			thieu option 2, 4--}}
		</div>
	</div>
</div>


{{-- conversion --}}
<div class="item-filter conversion"
	 :class="{and: preview.operator == 'and', or: preview.operator != 'and'}"
	 v-else-if="preview.type == 'conversion'"
>
	<div class="row-content">
		<div class="type-name">
			<span class="symbol">@{{ preview.operator == 'and' ? '&' : 'or' }}</span> コンバージョン
		</div>
		<div class="type-input">

		</div>
	</div>
	<div class="row-content">
		<div class="content-item-1">
			@{{ preview.list_name }}
		</div>
		<div class="content-item-2">
			<span class="content-more"
				  v-if="JSON.parse(preview.data).conversion_condition == 0">選択したコンバージョンが全て反応した人</span>
			<span class="content-more"
				  v-else-if="JSON.parse(preview.data).conversion_condition == 1">
				選択したコンバージョンが全て反応した人<span class="note">を除外</span>
			</span>
		</div>
	</div>
</div>


{{-- trangj thai xac nhan --}}
<div class="item-filter status-confirm"
	 :class="{and: preview.operator == 'and', or: preview.operator != 'and'}"
	 v-else-if="preview.type == 'status_search'"
>
	<div class="row-content">
		<div class="type-name">
			<span class="symbol">@{{ preview.operator == 'and' ? '&' : 'or' }}</span> メッセージ確認状況
		</div>
		<div class="type-input">

		</div>
	</div>
	<div class="row-content">
		<div class="content-item-1">
			<template v-if="JSON.parse(preview.data).status_search[0] == 0">
				「未確認」状態の人
 			</template>
			<template v-else>
				「確認済」状態の人
			</template>
		</div>
		<div class="content-item-2">

		</div>
	</div>
</div>


{{-- friend info --}}
<div class="item-filter friend-info"
	 :class="{and: preview.operator == 'and', or: preview.operator != 'and'}"
	 v-else-if="preview.type == 'friend_info'"
>
	<div class="row-content">
		<div class="type-name">
			<span class="symbol">@{{ preview.operator == 'and' ? '&' : 'or' }}</span> 友だち情報（@{{ preview.friend_info_name }}）
		</div>
		<div class="type-input">
			<template v-if="JSON.parse(preview.data).type_data == 1">選択肢</template>
			<template v-else-if="JSON.parse(preview.data).type_data == 2">記述</template>
			<template v-else-if="JSON.parse(preview.data).type_data == 3">年月日</template>
			<template v-else-if="JSON.parse(preview.data).type_data == 6">ポイント</template>
		</div>
	</div>
	<div class="row-content">
		<div class="content-item-1"
			:class="{'date': [3, 6].includes(JSON.parse(preview.data).type_data),
			'text-5-6': [2].includes(JSON.parse(preview.data).type_data) && [5, 6].includes(preview.op_compare),
			'select': [1].includes(JSON.parse(preview.data).type_data) && [3, 4].includes(preview.op_compare),
			}"
		>
{{--			select--}}
			<template v-if="JSON.parse(preview.data).type_data == 1">
				<template v-if="[1, 2].includes(preview.op_compare)">@{{ preview.value }}</template>
				<template v-else-if="JSON.parse(preview.data).op_compare == 3">に情報が登録されている人</template>
				<template v-else-if="JSON.parse(preview.data).op_compare == 4">
					に情報が登録されている人<span class="note">を除外</span>
				</template>
			</template>

			{{--			text--}}
			<template v-if="JSON.parse(preview.data).type_data == 2">
				<template v-if="[1, 2, 3, 4].includes(preview.op_compare)">@{{ preview.value }}</template>
				<template v-else-if="preview.op_compare == 5">に情報が登録されている人</template>
				<template v-else>
					に情報が登録されている人<span class="note">を除外</span>
				</template>
			</template>

			{{--			ngayf thang --}}
			<template v-if="JSON.parse(preview.data).type_data == 3">
				<template v-if="preview.op_compare == 2">に情報が登録されている人</template>
				<template v-else-if="preview.op_compare == 3">
					に情報が登録されている人<span class="note">を除外</span>
				</template>
				<template v-else>
					に@{{ JSON.parse(preview.data).year + '年' + JSON.parse(preview.data).month + '月' + JSON.parse(preview.data).day + '日' }}@{{ JSON.parse(preview.data).limit_date == 1 ? ' - ' + JSON.parse(preview.data).year_to + '年' + JSON.parse(preview.data).month_to + '月' + JSON.parse(preview.data).day_to + '日' : ''  }}が登録されている人
				</template>
			</template>

			{{--			diem --}}
			<template v-if="JSON.parse(preview.data).type_data == 6">
				<template v-if="preview.op_compare == 6">に情報が登録されている人</template>
				<template v-else-if="preview.op_compare == 7">に情報が登録されている人<span class="note">を除外</span></template>
				<template v-else-if="preview.op_compare == 1">登録されているポイント = @{{ JSON.parse(preview.data).point }}︎ポイント の人</template>
				<template v-else-if="preview.op_compare == 2">登録されているポイント ≥ @{{ JSON.parse(preview.data).point }}︎ポイント の人（以上）</template>
				<template v-else-if="preview.op_compare == 3">登録されているポイント > @{{ JSON.parse(preview.data).point }}︎ポイント の人（超過）</template>
				<template v-else-if="preview.op_compare == 4">登録されているポイント ≤ @{{ JSON.parse(preview.data).point }}︎ポイント の人（以下）</template>
				<template v-else-if="preview.op_compare == 5">登録されているポイント < @{{ JSON.parse(preview.data).point }}︎ポイント の人（未満）</template>

			</template>
		</div>
		<div class="content-item-2">

			<template v-if="JSON.parse(preview.data).type_data == 1">
				<span class="content-more"
					  v-if="JSON.parse(preview.data).op_compare == 1">のどれかが登録されている人</span>
				<span class="content-more"
					  v-else-if="JSON.parse(preview.data).op_compare == 2">
					のどれかが登録されている人<span class="note">を除外</span>
				</span>
			</template>

			<template v-else-if="JSON.parse(preview.data).type_data == 2">
				<span class="content-more"
					  v-if="preview.op_compare == 1">
					と登録情報が完全に一致する人
				</span>
				<span class="content-more"
					  v-else-if="preview.op_compare == 2">
					と登録情報が部分的に一致する人
				</span>
				<span class="content-more"
					  v-else-if="preview.op_compare == 3">
					と登録情報が完全に一致する人<span class="note">を除外</span>
				</span>
				<span class="content-more"
					  v-else-if="preview.op_compare == 4">
					と登録情報が部分的に一致する人<span class="note">を除外</span>
				</span>
			</template>

		</div>
	</div>
</div>

{{-- trangj thai doi ung --}}
<div class="item-filter status-chat"
	 :class="{and: preview.operator == 'and', or: preview.operator != 'and'}"
	 v-else-if="preview.type == 'status_chat'"
>
	<div class="row-content">
		<div class="type-name">
			<span class="symbol">@{{ preview.operator == 'and' ? '&' : 'or' }}</span> 対応ステータス
		</div>
		<div class="type-input">

		</div>
	</div>
	<div class="row-content">
		<div class="content-item-1">
			@{{ preview.list_name }}
		</div>
		<div class="content-item-2">
			<span class="content-more"
				  v-if="JSON.parse(preview.data).status_chat_filter_type == 0">
				選択したどれかが付いている人
			</span>
			<span class="content-more"
				  v-else-if="JSON.parse(preview.data).status_chat_filter_type == 1">
				選択したどれかが付いている人<span class="note">を除外</span>
			</span>
		</div>
	</div>
</div>

{{-- lien ket --}}
<div class="item-filter affiliate"
	 :class="{and: preview.operator == 'and', or: preview.operator != 'and'}"
	 v-else-if="preview.type == 'affiliate'"
>
	<div class="row-content">
		<div class="type-name">
			<span class="symbol">@{{ preview.operator == 'and' ? '&' : 'or' }}</span> 紹介アフィリエイター
		</div>
		<div class="type-input">

		</div>
	</div>
	<div class="row-content">
		<div class="content-item-1">
			@{{ preview.list_name }}
		</div>
		<div class="content-item-2">
			<span class="content-more"
				  v-if="JSON.parse(preview.data).affiliate_filter_type == 0">
				選択したどれかから友だち登録した人
			</span>
			<span class="content-more"
				  v-else-if="JSON.parse(preview.data).affiliate_filter_type == 1">
				選択したどれかから友だち登録した人<span class="note">を除外</span>
			</span>
		</div>
	</div>
</div>

{{-- add friend --}}
<div class="item-filter bot_new_friend"
	 :class="{and: preview.operator == 'and', or: preview.operator != 'and'}"
	 v-else-if="preview.type == 'bot_new_friend'"
>
	<div class="row-content">
		<div class="type-name">
			<span class="symbol">@{{ preview.operator == 'and' ? '&' : 'or' }}</span> 新規・既存友だち
		</div>
		<div class="type-input">

		</div>
	</div>
	<div class="row-content">
		<div class="content-item-1">
			<template v-if="JSON.parse(preview.data).check_box_value == 0">
				新規友だち
			</template>
			<template v-if="JSON.parse(preview.data).check_box_value == 1">
				既存友だち
			</template>
		</div>
		<div class="content-item-2">

		</div>
	</div>
</div>