@php
    use App\Enums\ItemConditionEnum;
    use App\Enums\FulfillmentChannelEnum;
    use App\Enums\ExhibitStatusEnum;
    use App\Enums\FeedProcTypeEnum;
    use App\Libs\SpApi;
@endphp
<div x-data="{{ $type }}" x-init="$watch('currentTab', (tab, old) => { tabChanged(tab, old) })" x-on:show="onShow(event)">
    <div class="buttons flex items-center justify-end">
        <x-primary-button x-show="items.data.length" x-on:click.prevent="downloadCsv()" class="">
            {{ __('CSVダウンロード') }}</x-primary-button>
    </div>
    <div class="my-2 flex space-x-4 justify-between">
        <div class="search-confitions flex flex-wrap gap-x-4">
            <div>
                <x-input-label for="sku" :value="__('SKU')" />
                <div class="mt-1 flex space-x-2 items-center">
                    <x-textarea x-model="inputs.sku" name="sku" rows="3" class="w-64" />
                </div>
            </div>
            <div>
                <x-input-label for="title" :value="__('商品名')" />
                <div class="mt-1 flex space-x-2 items-center">
                    <x-textarea x-model="inputs.title" name="title" rows="3" class="w-64" />
                </div>
            </div>
            <div>
                <x-input-label for="jan" :value="__('ISBN')" />
                <div class="mt-1 flex space-x-2 items-center">
                    <x-textarea x-model="inputs.jan" name="jan" rows="3" class="w-64" />
                </div>
            </div>
            <div>
                <x-input-label for="jan" :value="__('ASIN')" />
                <div class="mt-1 flex space-x-2 items-center">
                    <x-textarea x-model="inputs.asin" name="asin" rows="3" class="w-64" />
                </div>
            </div>
            <div>
                <x-input-label class="opacity-0" for="" :value="__('検索ボタン')" />
                <div class="mt-1 flex space-x-2 items-center">
                    <x-primary-button x-data="" x-on:click.prevent="onSearchClick($el)"
                        class="px-8 py-2 my-1">
                        {{ __('検索') }}</x-primary-button>
                </div>
            </div>
            <div>
                <x-input-label class="opacity-0" for="" :value="__('クリアボタン')" />
                <div class="mt-1 flex space-x-2 items-center">
                    <x-secondary-button x-data="" x-on:click.prevent="onClearClick($el)"
                        class="px-6 py-2 my-1">
                        {{ __('クリア') }}</x-secondary-button>
                </div>
            </div>
        </div>
    </div>
    <template x-if="items.data.length">
        <div>
            <x-alpine-paginator :paginator-data-name="'items'" />
            @if ($type == 'instock')
                <div class="mt-1 p-2 border border-sky-200 rounded bg-sky-50 text-sm text-sky-700">
                    <p>コンディション・配送パターンを変更する際は、編集後に「変更を反映する」ボタンを押してください</p>
                    <p>同じタイトルの本が複数出品中になっている場合、「同一出品」が「あり」になります。出荷時に商品を取り違えないようにご注意ください。</p>
                    <p>処理中のものは操作できません。ただし処理中のまま24時間経ったものは再処理が可能です。</p>
                </div>
            @elseif ($type == 'discontinued')
                <div class="mt-1 p-2 border border-sky-200 rounded bg-sky-50 text-sm text-sky-700">
                    <p>「削除する」ボタンを押すと、SKUの削除と当システムからの商品の削除が行われます</p>
                    <p>処理中のものは操作できません。ただし処理中のまま24時間経ったものは再処理が可能です。</p>
                </div>
            @endif
            <div class="mb-1 px-2">
                <span class="select-none cursor-pointer" x-on:click="toggleselectDefault()">
                    <x-text-input x-model="selectDefault" type="checkbox" class="w-4 h-4 mr-1" />
                    {{ __('検索条件に合致したもの全てに✔') }}
                </span>
            </div>
            <div class="mb-1 px-2">
                <span class="select-none cursor-pointer" x-on:click="togglePageSelect()">
                    <x-text-input x-model="pageSelect" type="checkbox" class="w-4 h-4 mr-1" />
                    {{ __('このページの全てに✔') }}
                </span>
            </div>
            <div class="relative overflow-x-auto shadow-md rounded-lg">
                <table class="w-full text-sm text-left text-gray-700">
                    <thead class="text-xs text-gray-700 uppercase bg-gray-200">
                        <tr>
                            <th class="w-6"></th>
                            <th class="px-2 py-3 w-16">状態</th>
                            <th class="px-2 py-3 w-16">画像</th>
                            <th class="px-2 py-3 cursor-pointer" x-on:click="onSort('sku')">
                                SKU
                                <x-sorticons :col="'sku'" />
                            </th>
                            <th class="px-2 py-3 cursor-pointer" x-on:click="onSort('title')">
                                商品情報
                                <x-sorticons :col="'title'" />
                            </th>
                            <th class="px-2 py-3 w-72 cursor-pointer" x-on:click="onSort('condition')">
                                コンディション
                                <x-sorticons :col="'condition'" />
                            </th>
                            <th class="px-2 py-3 w-24">
                                <p class="cursor-pointer" x-on:click="onSort('stock')">在庫数
                                    <x-sorticons :col="'stock'" />
                                </p>
                                <p class="cursor-pointer" x-on:click="onSort('price')">価格
                                    <x-sorticons :col="'price'" />
                                </p>
                                <p class="cursor-pointer" x-on:click="onSort('sales_rank')">売上ランク
                                    <x-sorticons :col="'sales_rank'" />
                                </p>
                            </th>
                            <th class="px-2 py-3">
                                <p>サイズ</p>
                                @if ($channel == FulfillmentChannelEnum::MFN)
                                    <p>配送パターン</p>
                                @endif
                                <p>配送料</p>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="item in items.data" :key="item.id">
                            <tr class="bg-white border-b hover:bg-gray-100">
                                <template x-if="item.operable">
                                    <td class="px-2 py-1"
                                        x-on:click="selectState[item.id] = !((selectState[item.id] == null) ? selectDefault : selectState[item.id])">
                                        <x-text-input
                                            x-model="(selectState[item.id] == null) ? selectDefault : selectState[item.id]"
                                            type="checkbox" class="w-4 h-4" />
                                    </td>
                                </template>
                                <template x-if="!item.operable">
                                    <td class="px-2 py-1"></td>
                                </template>
                                <td class="px-2 py-1 text-center">
                                    <p x-show="item.process_started_at">処理中</p>
                                    <x-heroicon-o-exclamation-triangle
                                        x-show="!item.process_started_at && hasMessages(item)"
                                        x-on:click="showMessages(item)"
                                        class="text-rose-600 inline w-6 h-6 cursor-pointer" />
                                </td>
                                <td class="px-2 py-1">
                                    <img x-show="item.catalog && item.image_url" :src="item.image_url"
                                        class="w-full max-h-32">
                                    <div x-show="item.catalog && !item.image_url" class="text-center">
                                        <x-heroicon-o-no-symbol class="text-gray-600 inline w-8 h-8" />
                                        <p><small>画像なし</small></p>
                                    </div>
                                    <div x-show="!item.catalog" class="text-center">
                                        <x-heroicon-o-arrow-path class="text-gray-600 inline w-8 h-8 loader" />
                                        <p><small>読込中</small></p>
                                    </div>
                                </td>
                                <td class="px-2 py-1">
                                    <b><span x-text="item.sku ?? 'SKU未確定'" class="break-all"></span></b><br>
                                    ISBN/ASIN: <span x-text="item.jan"></span><br>
                                    @if ($type == 'instock')
                                        同一出品: <span x-show="item.same_asin != null"
                                            x-text="item.same_asin ? 'あり' : 'なし'"
                                            :class="{ 'rounded bg-orange-400 text-white px-1': item.same_asin }"></span><span
                                            x-show="item.same_asin == null">集計中…</span><br>
                                    @endif
                                    ID: <span x-text="item.id"></span>
                                </td>
                                <td class="px-2 py-1">
                                    {{-- <span x-text="item.id"></span> --}}
                                    <b><a target="_blank" class="underline"
                                            x-bind:href="'https://www.amazon.co.jp/gp/offer-listing/' + item.asin"
                                            x-text="item.title"></a></b><br>
                                    著者: <span x-text="item.creator"></span><br>
                                    出版社: <span x-text="item.publisher"></span><br>
                                    出版日: <span x-text="getFormatedDate(item.publication_date)"></span>
                                </td>
                                <td class="px-2 py-1">
                                    <b><span x-text="conditions[item.condition]"></span></b>
                                    <br>
                                    <span x-text="strLimit(item.condition_note, 50, '…')" class=""></span>
                                    <br>
                                    @if ($type == 'instock')
                                        <x-secondary-button x-on:click="edit(item)">
                                            @if ($channel == FulfillmentChannelEnum::MFN)
                                                {{ __('コンディションや配送パターンを編集') }}
                                            @else
                                                {{ __('コンディションを編集') }}
                                            @endif
                                        </x-secondary-button>
                                    @else
                                        <x-secondary-button x-on:click="showCondition(item)">
                                            {{ __('確認') }}
                                        </x-secondary-button>
                                    @endif
                                </td>
                                <td class="px-2 py-1">
                                    <p><span x-text="item.stock ? numberFormat(item.stock) : '-'"></span></p>
                                    <p><span x-text="item.price ? numberFormat(item.price) : '-'"></span>円</p>
                                    <p><span x-text="item.sales_rank ? numberFormat(item.sales_rank) : '-'"></span></p>
                                </td>
                                <td class="px-2 py-1">
                                    <p><span x-text="item.size ? item.size : '-'"></span></p>
                                    @if ($channel == FulfillmentChannelEnum::MFN)
                                        <p><span x-text="item.shipping_pattern ?? '-'"></span></p>
                                        <p><span
                                                x-text="item.shipping_pattern_identified ? numberFormat(item.shipping_pattern_identified.price) + '円': '-'"></span>
                                        </p>
                                    @else
                                        <p>0円</p>
                                    @endif
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
            <x-alpine-paginator :paginator-data-name="'items'" :show-totals="false" :show-limit-selector="false" />

            <div class="text-center border-t pt-2">
                <p>チェック数: <span x-text="numberFormat(selectedCount())"></span>件</p>
                @if ($type == 'instock')
                    <x-danger-button x-on:click.prevent="discontinueItems()" x-bind:disabled="!selectedCount()"
                        class="m-2">
                        {{ __('出品を終了する') }}
                    </x-danger-button>
                    <x-primary-button x-on:click.prevent="editItems()" x-bind:disabled="!selectedCount()"
                        class="m-2">
                        {{ __('変更を反映する') }}
                    </x-primary-button>
                    @can('manage_global_settings')
                        @if ($channel == FulfillmentChannelEnum::MFN)
                            <x-primary-button x-on:click.prevent="editHandlingTime()" x-bind:disabled="!selectedCount()"
                                class="m-2">
                                {{ __('出荷作業日数を変更する') }}
                            </x-primary-button>
                        @endif
                    @endcan
                @elseif ($type == 'discontinued')
                    <x-danger-button x-on:click.prevent="deleteItems()" x-bind:disabled="!selectedCount()"
                        class="m-2">
                        {{ __('削除(破棄)') }}
                    </x-danger-button>
                    <x-primary-button x-on:click.prevent="reExhibitItems()" x-bind:disabled="!selectedCount()"
                        class="m-2">
                        {{ __('再出品する') }}
                    </x-primary-button>
                @endif

            </div>
        </div>
    </template>
    <template x-if="!items.data.length">
        <p>{{ __('商品が見つかりませんでした') }}</p>
    </template>

    <x-modal name="{{ $type }}-condition-note-view">
        <div class="p-6">
            <h2 class="text-lg font-medium text-gray-900">
                {{ __('コンディション確認') }}
            </h2>

            <div class="mt-1 text-sm text-gray-600 max-h-[70vh]">
                <div class="my-3">
                    <x-input-label for="" :value="__('商品名')" />
                    <p class="text-base font-bold" x-text="curItem.source.title"></p>
                </div>
                <div class="my-3">
                    <x-input-label for="" :value="__('コンディション')" />
                    <x-select-input disabled="disabled" class="bg-gray-100" x-model="curItem.condition"
                        :options="ItemConditionEnum::getDropdownOptions('exhibit')" />
                </div>
                <div class="my-3">
                    <x-input-label for="" :value="__('コンディション説明文')" />
                    <x-textarea disabled="disabled" class="w-full bg-gray-100" x-model="curItem.condition_note"
                        rows="10" />
                </div>
            </div>

            <div class="mt-6 flex justify-end">
                <x-secondary-button x-on:click="$dispatch('close')">
                    {{ __('閉じる') }}
                </x-secondary-button>
            </div>
        </div>
    </x-modal>

    <x-modal name="{{ $type }}-edit">
        <div class="p-6">
            <h2 class="text-lg font-medium text-gray-900">
                @if ($channel == FulfillmentChannelEnum::MFN)
                    {{ __('コンディション・配送パターン編集') }}
                @else
                    {{ __('コンディション編集') }}
                @endif
            </h2>

            <div class="mt-1 text-sm text-gray-600 max-h-[70vh]">
                <div class="my-3">
                    <x-input-label for="" :value="__('商品名')" />
                    <p class="text-base font-bold" x-text="curItem.source.title"></p>
                    <p x-show="!curItem.source.operable"
                        class="my-1 p-2 border border-sky-200 rounded bg-sky-50 text-sky-700">
                        {{ __('この商品は現在編集できません') }}</p>
                </div>
                <div class="my-3">
                    <x-input-label for="" :value="__('コンディション')" />
                    <x-select-input x-model="curItem.condition" :options="ItemConditionEnum::getDropdownOptions('exhibit')" />
                </div>
                <div class="my-3">
                    <x-input-label for="" :value="__('コンディション説明文')" />
                    <x-textarea class="w-full" x-model="curItem.condition_note" rows="10" />
                </div>
                @if ($channel == FulfillmentChannelEnum::MFN)
                    <div class="my-3">
                        <x-input-label for="" :value="__('配送パターン')" />
                        <x-select-input x-model="curItem.shipping_pattern" :options="'direct'">
                            <template x-for="p in curItem.source.shipping_patterns">
                                <option x-bind:value="p.name" x-text="p.name"
                                    x-bind:selected="p.name == curItem.shipping_pattern"></option>
                            </template>
                        </x-select-input>
                    </div>
                @endif
            </div>

            <div class="mt-6 flex justify-end">
                <x-secondary-button x-on:click="$dispatch('close')">
                    {{ __('キャンセル') }}
                </x-secondary-button>
                <x-primary-button x-show="curItem.source.operable" x-on:click="$dispatch('close'); saveEdit()"
                    class="ml-3">
                    {{ __('一時保存する') }}
                </x-primary-button>
            </div>
        </div>
    </x-modal>

    @if ($type == 'instock' && $channel == FulfillmentChannelEnum::MFN)
        <x-modal name="handling-time-edit">
            <div class="p-6">
                <h2 class="text-lg font-medium text-gray-900">
                    {{ __('出荷作業日数の変更') }}
                </h2>

                <div class="mt-1 text-sm text-gray-600 max-h-[70vh]">
                    <div class="my-3">
                        <p>選択中の商品について、</p>
                        <div class="m-2">
                            <label>
                                <x-text-input x-model="handlingTime.enable" type="radio" name="handling_time"
                                    class="mr-1" value="" />
                                Amazon標準の出荷作業日数に戻す
                            </label>
                        </div>
                        <div class="m-2">
                            <label>
                                <x-text-input x-model="handlingTime.enable" type="radio" name="handling_time"
                                    class="mr-1" value="1" />
                                独自の出荷作業日数を指定する
                            </label>
                            <x-text-input x-model="handlingTime.days" type="number" name="handling_time_days"
                                class="ml-2 w-16 p-1 text-center" min="1" max="30" />日
                            <small class="text-gray-600">※1～30日で指定</small>
                        </div>
                    </div>
                </div>

                <div class="mt-6 flex justify-end">
                    <x-secondary-button x-on:click="$dispatch('close')">
                        {{ __('キャンセル') }}
                    </x-secondary-button>
                    <x-primary-button x-on:click="$dispatch('close'); updateHandlingTime()" class="ml-3">
                        {{ __('実行する') }}
                    </x-primary-button>
                </div>
            </div>
        </x-modal>
    @endif

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('{{ $type }}', () => ({
                conditions: @js(ItemConditionEnum::getDropdownOptions()),
                items: {
                    data: []
                },
                inputs: {
                    // {{-- 検索条件(ユーザの入力を受け取る用) --}}
                },
                query: {
                    // {{-- 検索条件(実際の検索に使用する用。検索ボタンの押下でのみ検索条件を確定するため inputs と分けている) --}}
                },
                sort: {},
                selectDefault: false,
                selectState: {},
                curItem: {
                    source: {}
                },
                queue: [], // {{-- バックグラウンドで実行する処理(商品詳細情報の取得など)のキュー --}}
                queuePromise: null,

                pageSelect: false,

                handlingTime: {
                    enable: false,
                    days: 1,
                },

                init() {
                    const limit = localStorage.getItem('{{ request()->path() }}-limit');
                    if (limit) {
                        this.items.per_page = limit;
                    }

                    if (this.currentTab == '{{ $type }}') {
                        this.query = Object.assign({}, Alpine.raw(this.inputs));
                        this.loadData();
                    }
                },

                getItemMessages(item) {
                    const procTypes = [
                        {{ FeedProcTypeEnum::STOCK_EDIT_MFN_PRE }},
                        {{ FeedProcTypeEnum::STOCK_EDIT_AFN_PRE }},
                        {{ FeedProcTypeEnum::STOCK_EDIT_MFN }},
                        {{ FeedProcTypeEnum::STOCK_EDIT_AFN }},
                    ];
                    const feeds = (item.data?.feeds ?? []).reduce((acc, cur) => {
                        // EDIT は2つのフィードで1セットなのでまとめる
                        let last = acc.pop();
                        while (last) {
                            if (![{{ FeedProcTypeEnum::STOCK_EDIT_MFN_PRE }},
                                    {{ FeedProcTypeEnum::STOCK_EDIT_AFN_PRE }}
                                ].includes(last.proc_type)) {
                                break;
                            }
                            if (![{{ FeedProcTypeEnum::STOCK_EDIT_MFN }},
                                    {{ FeedProcTypeEnum::STOCK_EDIT_AFN }}
                                ].includes(cur.proc_type)) {
                                break;
                            }
                            last.messages = last.messages.concat(cur.messages);
                            acc.push(last);
                            return acc;
                        }
                        if (last) {
                            acc.push(last);
                        }
                        acc.push(cur);
                        return acc;
                    }, []);
                    const feed = feeds.filter(feed => procTypes.includes(feed.proc_type)).slice(-1)[0];
                    if (feed?.messages?.length) {
                        return feed.messages;
                    }
                    return null;
                },

                hasMessages(item) {
                    return !!this.getItemMessages(item);
                },

                showMessages(item) {
                    const messages = this.getItemMessages(item);
                    if (messages) {
                        promiseAlert(this, 'APIの警告/エラー', messages.join('<br>'));
                    }
                },

                toggleselectDefault() {
                    this.selectState = {};
                    this.selectDefault = !this.selectDefault;
                },

                togglePageSelect() {
                    this.pageSelect = !this.pageSelect;
                    this.items.data.forEach((item) => {
                        this.selectState[item.id] = this.pageSelect;
                    });
                },

                selectedCount() {
                    if (this.selectDefault) {
                        // 「デフォルトで選択」の場合は総件数から明示的な未選択の数を引いて計算する
                        let count = this.items.total;
                        for (const k of Object.keys(this.selectState)) {
                            if (this.selectState[k] === false) {
                                count--;
                            }
                        }
                        return count;
                    } else {
                        // 「デフォルトで未選択」の場合は明示的な選択数を返す
                        let count = 0;
                        for (const k of Object.keys(this.selectState)) {
                            if (this.selectState[k] === true) {
                                count++;
                            }
                        }
                        return count;
                    }
                },

                onSort(col) {
                    if (this.sort.col != col) {
                        this.sort.col = col;
                        this.sort.dir = 'asc';
                    } else {
                        this.sort.dir = (this.sort.dir == 'asc') ? 'desc' : 'asc';
                    }
                    this.loadData();
                },

                onLimitChange(el) {
                    localStorage.setItem('{{ request()->path() }}-limit', this.items.per_page);
                    this.loadData();
                },

                onPaginatorClick(el) {
                    if (el.href) {
                        this.loadData(el.href);
                    }
                },

                onSearchClick(el) {
                    this.query = Object.assign({}, Alpine.raw(this.inputs));
                    this.selectState = {};
                    this.loadData();
                },

                onClearClick(el) {
                    this.query = {};
                    this.inputs = {};
                    this.sort = {};
                    this.selectState = {};
                    this.loadData();
                },

                tabChanged(tab, old) {
                    if (!(tab != old && tab == '{{ $type }}')) {
                        return;
                    }
                    this.loadData();
                },

                async loadData(url) {
                    this.global_loader.show = true;

                    this.queue = [];

                    if (!url) {
                        url = '{{ route('stock.get_' . $type . '_items', [$channel]) }}';
                    }
                    url = addQueryString(url, {
                        ...this.sort,
                        ...this.query,
                        limit: this.items.per_page
                    });
                    const response = await ajaxGet(url);

                    this.global_loader.show = false;

                    response.json().then((data) => {
                        console.log(data);
                        this.items = data;
                        this.enqueueGetCatalogData();
                        this.enqueueGetSameAsin();
                        this.startQueue();
                    }).catch((e) => {
                        console.log(e);
                        promiseAlert(this, 'エラー', 'エラーが発生しました');
                    });
                },

                enqueueGetCatalogData() {
                    let unknownAsins = this.items.data.filter((item) => {
                        return item.catalog == null;
                    }).map((item) => {
                        return item.asin;
                    });
                    unknownAsins = arrayUnique(unknownAsins);
                    unknownAsins = arrayChunk(unknownAsins,
                        {{ SpApi::SEARCH_CATALOG_ITEMS_MAX_PAGE_SIZE }});
                    // console.log(unknownAsins);

                    unknownAsins.forEach((asins) => {
                        this.queue.push(async () => {
                            const url = '{{ route('catalog.get_data') }}';
                            const response = await jsonPost(url, {
                                body: JSON.stringify({
                                    asins: asins
                                })
                            });

                            return response.json().then(async (data) => {
                                console.log([asins, data]);
                                await this.reloadItems(this.items.data
                                    .filter((item) => {
                                        return data[item.asin];
                                    }));
                            });
                        });
                    });
                },

                enqueueGetSameAsin() {
                    this.items.data.forEach((item) => {
                        this.queue.push(async () => {
                            const url =
                                '{{ route('stock.get_same_asin', [$channel]) }}';
                            const response = await jsonPost(url, {
                                body: JSON.stringify({
                                    item: item
                                })
                            });

                            return response.json().then(async (data) => {
                                this.items.data.forEach((_item,
                                    index) => {
                                    if (_item.id == item.id) {
                                        this.items.data[index]
                                            .same_asin = data
                                            .count;
                                    }
                                });
                            });
                        });
                    });
                },

                async reloadItems(items) {
                    if (!items.length) {
                        return;
                    }

                    const ids = items.map((item) => {
                        return item.id;
                    });
                    const url = '{{ route('stock.get_item_data') }}';
                    const response = await jsonPost(url, {
                        body: JSON.stringify({
                            ids: ids
                        })
                    });

                    return response.json().then((data) => {
                        console.log(data);
                        this.items.data.forEach((item, index) => {
                            if (data[item.id]) {
                                this.items.data[index] = {
                                    ...Alpine.raw(item),
                                    ...data[item.id]
                                };
                            }
                        });
                    });
                },

                async startQueue() {
                    if (!this.queuePromise && this.queue.length) {
                        let task = this.queue.shift();
                        while (task) {
                            this.queuePromise = task();
                            await this.queuePromise;
                            task = this.queue.shift();
                        }
                        this.queuePromise = null;
                    }
                },

                showCondition(item) {
                    this.curItem = {
                        source: item,
                        condition: item.condition,
                        condition_note: item.condition_note
                    };
                    this.$dispatch('open-modal', '{{ $type }}-condition-note-view');
                },

                edit(item) {
                    this.curItem = {
                        source: item,
                        condition: item.condition,
                        condition_note: item.condition_note,
                        shipping_pattern: item.shipping_pattern
                    };
                    this.$dispatch('open-modal', '{{ $type }}-edit');
                },

                async saveEdit() {
                    this.curItem.source.edited = {
                        condition: this.curItem.condition,
                        condition_note: this.curItem.condition_note,
                        shipping_pattern: this.curItem.shipping_pattern
                    };
                    this.selectState[this.curItem.source.id] = true;
                },

                async discontinueItems() {
                    try {
                        await promiseConfirm(this, '出品の終了', 'チェックした商品の出品を終了します。よろしいですか？');

                        this.global_loader.show = true;

                        const url = '{{ route('stock.discontinue_items', [$channel]) }}';
                        const response = await jsonPost(url, {
                            body: JSON.stringify({
                                selectState: this.selectState,
                                selectDefault: this.selectDefault,
                                query: this.query
                            })
                        });

                        this.global_loader.show = false;

                        response.json().then((data) => {
                            if (data.success) {
                                setTimeout(() => {
                                    this.selectState = {};
                                    this.loadData();
                                }, 100);
                            } else {
                                promiseAlert(this, 'エラー', data.message ? data.message :
                                    'エラーが発生しました');
                            }
                        }).catch(() => {
                            promiseAlert(this, 'エラー', 'エラーが発生しました');
                        });
                    } catch (error) {
                        console.log(error);
                    }
                },

                async editItems() {
                    try {
                        await promiseConfirm(this, '商品情報の変更', 'チェックした商品について情報の変更を反映します。よろしいですか？');

                        this.global_loader.show = true;

                        let edited = this.items.data.filter((item) => {
                            return item.edited;
                        }).map((item) => {
                            return {
                                id: item.id,
                                ...item.edited
                            };
                        });
                        console.log(edited);

                        const url = '{{ route('stock.edit_items', [$channel]) }}';
                        const response = await jsonPost(url, {
                            body: JSON.stringify({
                                selectState: this.selectState,
                                selectDefault: this.selectDefault,
                                query: this.query,
                                edited: edited
                            })
                        });

                        this.global_loader.show = false;

                        response.json().then((data) => {
                            if (data.success) {
                                this.items.data.forEach((item, index) => {
                                    delete this.items.data[index].edited;
                                });
                                setTimeout(() => {
                                    this.selectState = {};
                                    this.loadData();
                                }, 100);
                            } else {
                                promiseAlert(this, 'エラー', data.message ? data.message :
                                    'エラーが発生しました');
                            }
                        }).catch(() => {
                            promiseAlert(this, 'エラー', 'エラーが発生しました');
                        });
                    } catch (error) {
                        console.log(error);
                    }
                },

                async deleteItems() {
                    try {
                        await promiseConfirm(this, '商品の削除', 'チェックした商品を削除します。よろしいですか？');

                        this.global_loader.show = true;

                        const url = '{{ route('stock.delete_items', [$channel]) }}';
                        const response = await jsonPost(url, {
                            body: JSON.stringify({
                                selectState: this.selectState,
                                selectDefault: this.selectDefault,
                                query: this.query
                            })
                        });

                        this.global_loader.show = false;

                        response.json().then((data) => {
                            if (data.success) {
                                setTimeout(() => {
                                    this.selectState = {};
                                    this.loadData();
                                }, 100);
                            } else {
                                promiseAlert(this, 'エラー', data.message ? data.message :
                                    'エラーが発生しました');
                            }
                        }).catch(() => {
                            promiseAlert(this, 'エラー', 'エラーが発生しました');
                        });
                    } catch (error) {
                        console.log(error);
                    }
                },

                async reExhibitItems() {
                    try {
                        await promiseConfirm(this, '再出品', 'チェックした商品を再出品します。よろしいですか？');

                        this.global_loader.show = true;

                        const url = '{{ route('stock.re_exhibit_items', [$channel]) }}';
                        const response = await jsonPost(url, {
                            body: JSON.stringify({
                                selectState: this.selectState,
                                selectDefault: this.selectDefault,
                                query: this.query
                            })
                        });

                        this.global_loader.show = false;

                        response.json().then((data) => {
                            if (data.success) {
                                this.items.data.forEach((item, index) => {
                                    delete this.items.data[index].edited;
                                });
                                setTimeout(() => {
                                    this.selectState = {};
                                    this.loadData();
                                }, 100);
                            } else {
                                promiseAlert(this, 'エラー', data.message ? data.message :
                                    'エラーが発生しました');
                            }
                        }).catch(() => {
                            promiseAlert(this, 'エラー', 'エラーが発生しました');
                        });
                    } catch (error) {
                        console.log(error);
                    }
                },

                async downloadCsv() {
                    try {
                        this.global_loader.show = true;

                        const url = '{{ route('stock.items_csv', [$channel, $type]) }}';
                        const response = await jsonPost(url, {
                            body: JSON.stringify({
                                selectState: this.selectState,
                                selectDefault: this.selectDefault,
                                query: {
                                    ...this.sort,
                                    ...this.query
                                }
                            })
                        });

                        this.global_loader.show = false;

                        response.json().then((data) => {
                            if (data.success) {
                                window.location = addQueryString(url, {
                                    key: data.key
                                });
                            } else {
                                promiseAlert(this, 'エラー', data.message ? data.message :
                                    'エラーが発生しました');
                            }
                        }).catch(() => {
                            promiseAlert(this, 'エラー', 'エラーが発生しました');
                        });
                    } catch (error) {
                        console.log(error);
                    }
                },

                editHandlingTime() {
                    this.$dispatch('open-modal', 'handling-time-edit');
                },

                async updateHandlingTime() {
                    try {
                        await promiseConfirm(this, '作業日数の変更',
                            'チェックした商品の作業日数を変更します。よろしいですか？<br>※件数が多い場合は自動的に1,000件ずつに分けて送信予約が行われます。'
                        );

                        this.global_loader.show = true;

                        const url = '{{ route('stock.change_handling_time', [$channel]) }}';
                        const response = await jsonPost(url, {
                            body: JSON.stringify({
                                selectState: this.selectState,
                                selectDefault: this.selectDefault,
                                query: this.query,
                                handlingTime: this.handlingTime,
                            })
                        });

                        this.global_loader.show = false;

                        response.json().then((data) => {
                            if (data.success) {
                                setTimeout(() => {
                                    this.selectState = {};
                                    this.loadData();
                                    promiseAlert(this, '作業日数の変更',
                                        '作業日数変更の送信予約を行いました。<br>結果は後ほど送信予約画面で確認することができます。'
                                    );
                                }, 100);
                            } else {
                                promiseAlert(this, 'エラー', data.message ? data.message :
                                    'エラーが発生しました');
                            }
                        }).catch(() => {
                            promiseAlert(this, 'エラー', 'エラーが発生しました');
                        });
                    } catch (error) {
                        console.log(error);
                    }
                }
            }));
        });
    </script>
</div>