<template>
  <div>
    <div>
      <!-- Button-->
      <div class="fs-list__toolbar">
        <span class="fs-list__toolbar-group">
          <Select
            v-model="filter.date"
            class="mr-5"
            size="default"
            style="width: 220px"
            :placeholder="$t('FILTER_FLASH_DATE')"
          >
            <Option
              v-for="item in listDateFilter"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </Option>
          </Select>
          <Button
            class="mr-5"
            type="success"
            @click="openFlashsaleCampaign"
          >
            <i
              class="fa fa-clock-o mr-5"
              aria-hidden="true"
            />

            <span>{{ $t('FLASHSALE_CAMPAGIN_CREATE_BTN') }}</span>
          </Button>
          <Button
            class="mr-5"
            type="warning"
            @click="openFlashsaleReport"
          >
            <i
              class="fa fa-line-chart mr-5"
              aria-hidden="true"
            />

            <span>{{ $t('FLASHSALE_OPEN_ANALYTIC') }}</span>
          </Button>
        </span>
        <span class="fs-list__toolbar-group fs-list__toolbar-group--end">

          <check-all
            class="mr-5"
            @select-all="selectAll(true)"
            @deselect-all="selectAll(false)"
          />

          <Button
            type="error"
            size="small"
            ghost
            :disabled="!listSelected.length"
            @click="onRemoveAll"
          >
            {{ $t('REMOVE_FLASHSALE_SELECTED', { selected: listSelected.length }) }}
          </Button>
        </span>
      </div>
      <!-- Tab-->
      <Tabs
        v-model="tabActive"
        class="mt-10"
        :value="tabActive"
        @on-click="onChangeTab"
      >
        <TabPane
          v-for="item in listTab"
          :key="item.value"
          :name="item.value"
          :label="renderTabLabel(item)"
        />
      </Tabs>

      <!-- List-->
      <div v-if="!listCampagin.length">
        <Alert
          type="warning"
          show-icon
        >
          {{ $t('FLASH_SALE_LIST_EMPTY') }}
        </Alert>
      </div>
      <div v-else-if="isTabScheduler">
        <div class="row-end mb-10">
          <i-switch
            v-model="enableAuto"
            class="mr-5"
            @on-change="SetShopeeFlashsaleSchedulerAuto($event)"
          />
          <span v-if="enableAuto">
            {{ $t("FLASHSALE_SCHEDULER_JOB_AUTO_ON") }}
          </span>
          <span v-else>
            {{ $t("FLASHSALE_SCHEDULER_JOB_AUTO_OFF") }}
          </span>
        </div>

        <div>
          <Alert
            v-if="getShopeeFlashsaleSchedulerJob.log"
            type="info"
            show-icon
          >
            {{ getShopeeFlashsaleSchedulerJob.log }}
          </Alert>
        </div>
      </div>
      <CheckboxGroup v-model="listSelected">
        <List :loading="loading">
          <ListItem
            v-for="item in listCampaginShow"
            :key="item.flashSaleId"
          >
            <ListItemMeta>
              <template #title>
                <span
                  v-if="isTabSave && item.fromSave"
                  class="mr-5"
                >[{{ $t("SHOP_LABEL",{label : (item.shopName || item.shopId)}) }}]</span>
                <span v-if="item.productCount">{{ item.name }}</span>
                <span
                  v-else
                  class="text-danger"
                >{{ item.name }}</span>
              </template>
              <template #description>
                <span :class="item.color">{{ item.description }}</span>
              </template>
            </ListItemMeta>

            <template #action>
              <li style="width: 80px">
                <Checkbox :label="item.flashSaleId">
                  &nbsp;
                </Checkbox>
              </li>
              <li v-if="item.urlOpen && !item.fromScheduler">
                <a

                  :href="item.urlOpen"
                  target="_blank"
                >
                  {{ $t('OPEN_BTN') }}
                </a>
              </li>
              <li
                v-if="item.urlClone"
                style="width: 140px"
              >
                <a
                  :href="item.urlClone"
                  target="_blank"
                  class="text-danger"
                >
                  <b> {{ $t('COPY_FLASHSALE_BTN') }}</b>
                </a>
              </li>
              <li
                v-if="!item.fromScheduler"
                style="width: 70px"
              >
                <Button
                  type="text"
                  size="small"
                  class="text-warning"
                  :disabled="item.fromSave"
                  :loading="item.loading"
                  @click="onSave(item)"
                >
                  <span v-if="item.fromSave"> {{ $t('SAVED_BTN') }}</span>
                  <span v-else> {{ $t('SAVE_FLASHSALE_BTN') }}</span>
                </Button>
              </li>
              <li
                v-if="item.fromScheduler"
                style="width: 100px"
              >
                <Button
                  v-if="!item.urlOpen"
                  class="text-primary"
                  type="text"
                  size="small"
                  :loading="item.loading"
                  @click="createFlashSaleFromScheduler(item)"
                >
                  <span>{{ $t('FLASHSALE_CREATE_NOW_BTN') }} </span>
                </Button>
                <a
                  v-else
                  :href="item.urlOpen"
                  class="text-primary"
                  target="_blank"
                >
                  {{ $t('FLASHSALE_WAS_CREATEED_BTN') }}
                </a>
              </li>
              <li style="width: 50px">
                <Button
                  type="text"
                  size="small"
                  class="text-muted"
                  :loading="item.loading"
                  @click="onRemove(item)"
                >
                  {{ $t('DELETE_BTN') }}
                </Button>
              </li>
            </template>
          </ListItem>
        </List>
      </CheckboxGroup>
    </div>
    <!-- Popup -->
    <div>
      <Modal
        v-model="popupReport"
        width="1200"
        :title="$t('FLASHSALE_REPORT_TITLE')"
        scrollable
        footer-hide
      >
        <flashsale-report ref="FlashsaleReport" />
      </Modal>
      <Modal
        v-model="popupCampagin"
        width="800"
        :title="$t('FLASHSALE_CAMPAGIN_CREATE_TITLE')"
        scrollable
        footer-hide
      >
        <div style="height: 450px; overflow-y: auto;">
          <flashsale-campaign ref="FlashsaleCampagin" />
        </div>
      </Modal>
    </div>
  </div>
</template>

<script>
import mixin from './mixin/List';
import FlashsaleReport from './Report.vue';
import FlashsaleCampaign from './Campaign.vue';

export default {
  name: 'ShopeeFlashsaleList',
  components: {
    'flashsale-report': FlashsaleReport,
    'flashsale-campaign': FlashsaleCampaign,
  },
  mixins: [mixin],
};
</script>

<style lang="scss" scoped>
@import '@/vue/styles/tokens.scss';

.fs-list {
  &__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
  }

  &__toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    &--end {
      margin-left: auto;
    }
  }
}
</style>
