<template>
  <div>
    <div class="mb-10 text-right">
      <i-switch
        v-model="enableAuto"
        class="mr-5"
        @on-change="SetShopeeFlashsaleCampaignAuto($event)"
      />
      <span v-if="enableAuto">
        {{ $t("FLASHSALE_CAMPAIGN_JOB_AUTO_ON") }}
      </span>
      <span v-else>
        {{ $t("FLASHSALE_CAMPAIGN_JOB_AUTO_OFF") }}
      </span>
    </div>
    <div>
      <Tabs
        v-model="tabActive"
        :value="tabActive"
        :animated="false"
      >
        <TabPane
          :label="$t('FLASHSALE_CAMPAGIN_SCHEDULER_LIST')"
          name="list"
        >
          <div v-if="listCampaignShow.length">
            <div v-if="warningTimeSlot">
              <Alert
                type="warning"
                show-icon
              >
                {{ warningTimeSlot }}
              </Alert>
            </div>
            <div
              v-else
              class="mt-10"
            >
              <Alert
                type="info"
                show-icon
              >
                {{ logMessage || $t('FLASHSALE_CAMPAGIN_HOW_TO_USE') }}
              </Alert>
            </div>

            <List
              :data="listCampaignShow"
            >
              <ListItem
                v-for="item in listCampaignShow"
                :key="item._id"
              >
                <ListItemMeta>
                  <template #title>
                    <Checkbox
                      v-model="item.active"
                      v-tooltip="$t('SWITCH_ACTIVE')"
                      :value="item.active"
                      @on-change="toggleCampaign(item,$event)"
                    />
                    <a
                      :href="openFlashsaleId(item.flashsaleIdClone)"
                      target="_blank"
                    >
                      <b class="mr-5">[{{ $t('FLASHSALE_TIME_SLOT_LABEL',{start : item.timeSlotStart,end : item.timeSlotEnd}) }}]</b>
                      <span>{{ $t('FLASHSALE_CAMPAGIN_NAME_LABEL',{name : item.campaignName, product: item.productCount}) }}</span>
                    </a>
                  </template>
                  <template #description>
                    <div v-if="false">
                      <span class="mr-2">{{ $t('FLASHSALE_CAMPAGIN_SCHEDULER_PICK_TIME_RUN_RANGE') }}: </span>
                      <span class="mr-2">{{ $d(new Date(item.timeCampaginStart),'short') }} → {{ $d(new Date(item.timeCampaginEnd),'short') }}</span>
                    </div>
                    <span class="mr-5">{{ $t('FLASHSALE_CAMPAGIN_SCHEDULER_TIME_BEFORE_LABEL',{hour : item.timeFlashsaleBefore, day : (item.timeSchedulerBefore / 24)}) }}</span>
                  </template>
                </ListItemMeta>

                <template #action>
                  <div>
                    <Button
                      type="text"
                      size="small"
                      class="text-muted mr-2"
                      @click="removeCampaign(item)"
                    >
                      {{ $t("BTN_REMOVE_CONFIG") }}
                    </Button>
                  </div>

                  <Button
                    type="info"
                    size="small"
                    :loading="item.loading"
                    @click="runCampaign(item)"
                  >
                    {{ $t("BTN_RUN_CONFIG") }}
                  </Button>
                </template>
              </ListItem>
            </List>
          </div>
          <div v-else-if="isEmpty">
            <Alert
              type="warning"
              show-icon
            >
              {{ $t('FLASH_SALE_CAMPAIGN_EMPTY') }}
            </Alert>
          </div>
        </TabPane>
        <TabPane
          :label="$t('FLASHSALE_CAMPAGIN_SCHEDULER_CREATE')"
          name="create"
        >
          <Row>
            <Col
              :span="18"
              :offset="3"
            >
              <Row>
                <Col :span="24">
                  <Form
                    :model="createCampaign"
                    :label-width="240"
                  >
                    <FormItem :label="$t('FLASHSALE_CAMPAGIN_SCHEDULER_INPUT_NAME')">
                      <Input
                        v-model="createCampaign.campaignName"
                        :placeholder="$t('ENTER_CAMPAIGN_NAME')"
                      />
                    </FormItem>

                    <FormItem :label="$t('FLASHSALE_CAMPAGIN_SCHEDULER_SELECT_FLASHSALE')">
                      <Select v-model="createCampaign.flashsaleIdClone">
                        <Option
                          v-for="flashsale in listFlashsale"
                          :key="flashsale.flashSaleId"
                          :value="flashsale.flashSaleId"
                        >
                          {{ flashsale.name }}
                        </Option>
                      </Select>
                      <div

                        class="text-right"
                      >
                        <a
                          v-if="createCampaign.flashsaleIdClone"
                          :href="openFlashsaleId(createCampaign.flashsaleIdClone)"
                          target="_blank"
                        >
                          {{ $t("OPEN_PREVIEW_NAME", {name: listFlashsale.find((item) => item.flashSaleId === createCampaign.flashsaleIdClone).name}) }}
                        </a>
                      </div>
                      <Alert
                        v-if="!listFlashsale.length"
                        type="warning"
                        show-icon
                      >
                        {{ $t('FLASHSALE_CAMPAGIN_PLEASE_SAVE_ANY_FLASHSALE_CLONE') }}
                      </Alert>
                    </FormItem>

                    <FormItem :label="$t('FLASHSALE_CAMPAGIN_SCHEDULER_PICK_TIME_SLOT_RANGE')">
                      <Row>
                        <Col span="11">
                          <Select v-model="createCampaign.timeSlotStart">
                            <Option
                              v-for="timeSlot in listTimeSlot"
                              :key="timeSlot.value.toString()"
                              :value="timeSlot.value"
                            >
                              {{ timeSlot.label }}
                            </Option>
                          </Select>
                        </Col>
                        <Col
                          span="2"
                          style="text-align: center"
                        >
                          -
                        </Col>
                        <Col span="11">
                          <Select v-model="createCampaign.timeSlotEnd">
                            <Option
                              v-for="timeSlot in listTimeSlot"
                              :key="timeSlot.value.toString()"
                              :value="timeSlot.value"
                            >
                              {{ timeSlot.label }}
                            </Option>
                          </select>
                        </Col>
                      </Row>
                    </FormItem>
                    <FormItem :label="$t('FLASHSALE_CAMPAGIN_SCHEDULER_TIME_BEFORE_FLASHSALE')">
                      <InputNumber
                        v-model="createCampaign.timeFlashsaleBefore"
                        :min="6"
                        controls-outside
                        class="w-150"
                      />
                    </FormItem>

                    <FormItem :label="$t('FLASHSALE_CAMPAGIN_SCHEDULER_TIME_BEFORE_SCHEDULER')">
                      <InputNumber
                        v-model="createCampaign.daySchedulerBefore"
                        :min="2"
                        controls-outside
                        class="w-150"
                      />
                    </FormItem>
                    <FormItem
                      v-if="false"
                      :label="$t('FLASHSALE_CAMPAGIN_SCHEDULER_PICK_TIME_RUN_RANGE')"
                    >
                      <Row>
                        <Col span="11">
                          <DatePicker
                            v-model="createCampaign.timeCampaginStart"
                            type="date"
                          />
                        </Col>
                        <Col
                          span="2"
                          style="text-align: center"
                        >
                          -
                        </Col>
                        <Col span="11">
                          <DatePicker
                            v-model="createCampaign.timeCampaginEnd"
                            type="date"
                          />
                        </Col>
                      </Row>
                    </FormItem>
                  </Form>

                  <div
                    class="mt-10"
                  >
                    <div>
                      <span
                        v-if="validateErrorMessage"
                        class="text-muted"
                      >
                        {{ validateErrorMessage }}
                      </span>
                      <Button
                        type="primary"
                        style="float:right"
                        :disabled="btnDisabled"
                        :loading="btnLoading"
                        @click="handlerCreate"
                      >
                        {{ $t('FLASHSALE_CAMPAGIN_SCHEDULER_CREATE_BTN') }}
                      </Button>
                    </div>
                    <div
                      v-if="errorMessage "
                      class="text-danger"
                    >
                      {{ errorMessage }}
                    </div>
                  </div>
                </Col>
              </Row>
            </Col>
          </Row>
          <div
            v-if="campaginDescription"
            class="mt-10 text-warning"
          >
            {{ campaginDescription }}
          </div>
          <div
            v-else
            class="mt-10 text-muted"
          >
            <i>{{ $t('FLASHSALE_CAMPAGIN_SCHEDULER_CREATE_TIP') }}</i>
          </div>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>

<script>
import mixin from './mixin/Campaign';

export default {
  name: 'ShopeeFlashsaleCampagin',
  mixins: [mixin],
};
</script>

<style lang="scss" scoped>

</style>
