<template>
  <div>
    <h3
      v-if="flashSaleData.title"
      class="text-warning"
    >
      {{ flashSaleData.title }}
    </h3>

    <div
      style="text-align: right"
      class="mb-20 mr-20"
    >
      <Button
        v-if="isPrevStep"
        type="warning"
        class="mr-5"
        :loading="step.loading"
        :disabled="!isValidNext"
        @click="prevStep"
      >
        <Icon type="md-arrow-back" />
        {{ $t('STEP_PREVIOUS_BTN') }}
      </Button>
      <Button
        v-if="isNextStep"
        type="info"
        :loading="step.loading"
        :disabled="!isValidNext"
        @click="nextStep"
      >
        {{ $t('STEP_NEXT_BTN') }}
        <Icon type="md-arrow-forward" />
      </Button>
    </div>

    <div class="mb-20">
      <Steps :current="step.current">
        <Step
          v-for="item in stepList"
          :key="item.key"
          :name="item.key"
          :title="item.label"
        />
      </Steps>
    </div>

    <div class="mt-50">
      <!--Tutorial-->
      <div v-if="stepKey === 'step-tutorial'">
        <Row>
          <Col
            :span="12"
            :offset="6"
          >
            <div class="mb-20 text-right">
              <Button
                type="info"
                ghost
                @click="openExternalUrl(configApp.docUrl.shopeeFlashSale, true)"
              >
                <Icon type="md-help-circle" />
                {{ $t('TUTORIAL_GUIDE') }}
              </Button>
            </div>

            <div class="mb-20">
              <Alert
                :show-icon="false"
                type="warning"
              >
                <b>{{ $t('FLASHSALE_STEP_TUTORIAL.NOTE') }}</b>
                <template #desc>
                  <ul class="ml-10">
                    <li
                      v-for="(lineContent, indexLine) in $t('FLASHSALE_RULE_NOTE')"
                      :key="indexLine"
                    >
                      {{ lineContent }}
                    </li>
                    <li class="mt-20">
                      <b>{{ $t('FLASHSALE_STEP_TUTORIAL.TIP') }}</b>
                    </li>
                  </ul>
                </template>
              </Alert>

              <!-- Select Option -->
              <div class="mb-10">
                <RadioGroup v-model="selected.priceOrginalBy">
                  <Row :gutter="5">
                    <Col
                      v-for="item in options.listPriceOrignalType"
                      :key="item.value"
                      :span="8"
                      style="width: 400px"
                    >
                      <Card>
                        <Radio :label="item.value">
                          {{ item.text }}
                        </Radio>
                      </Card>
                    </Col>
                  </Row>
                </RadioGroup>
              </div>

              <div
                class="mb-10"
              >
                <RadioGroup
                  v-model="selected.setMethod"
                >
                  <Row :gutter="5">
                    <Col
                      v-for="item in options.listSetMethod"
                      :key="item.value"
                      :span="12"
                      style="width: 500px"
                    >
                      <Card>
                        <Radio
                          :label="item.value"
                          :disabled="item.disabled"
                        >
                          {{ item.text }}
                        </Radio>
                      </Card>
                    </Col>
                  </Row>
                </RadioGroup>
                <div v-if="isSchedulerFlashSale">
                  <div class="mt-10 text-right">
                    <span class="mr-5">{{ $t('FLASHSALE_TIME_CREATE_BEFORE') }}</span>
                    <InputNumber
                      v-model="schedulerConfig.timeBefore"
                      controls-outside
                    />
                  </div>
                </div>
                <div
                  v-else
                  class="mt-10 text-right"
                >
                  <span class="mr-5">{{ $t('FLASHSALE_DELAY_BETWEEN_CREATE') }}</span>
                  <InputNumber
                    v-model="delayCreateFlashSale"
                    :min="1"
                    :max="300"
                    controls-outside
                  />
                </div>
              </div>
            </div>
          </Col>
        </Row>
      </div>

      <!--Select Time-->
      <div v-if="stepKey === 'step-select-time'">
        <Row>
          <Col
            span="8"
            offset="9"
          >
            <div class="mb-10">
              <h3 class="mb-20">
                {{ $t('FLASHSALE_SELECT_TIME') }}
                <span>
                  {{ $t('TOTAL_SELECTED', { total: countTimeTotal, selected: countTimeSelected }) }}
                </span>
              </h3>

              <div class="text-right mb-20">
                <check-all
                  @select-all="timeSlotCheck(true)"
                  @deselect-all="timeSlotCheck(false)"
                />
              </div>
            </div>
            <div class="box-time-slot">
              <CheckboxGroup v-model="selected.listTimeId">
                <div
                  v-for="item in listSlotTime"
                  :key="item.value"
                >
                  <b
                    v-if="item.isParent"
                    class="hand-hover"
                    @click="timeSlotDate(item.value)"
                  >
                    <i
                      class="fa fa-check-square"
                      style="margin-right: 2px"
                    />
                    <span>{{ item.text }}</span>
                  </b>
                  <Checkbox
                    v-else
                    :label="item.value"
                    :disabled="item.disabled"
                  >
                    <span>{{ item.text }}</span>
                  </Checkbox>
                </div>
              </CheckboxGroup>
            </div>
          </Col>
        </Row>
      </div>

      <!--Select Product-->
      <div v-if="stepKey === 'step-select-product'">
        <Row>
          <Col span="24">
            <div class="mb-20">
              <Form
                ref="formInline"
                inline
              >
                <FormItem>
                  <Select
                    v-model="searchProduct.by"
                    style="width: 200px"
                  >
                    <Option
                      v-for="item in options.listSearchProductType"
                      :key="item.value"
                      :value="item.value"
                    >
                      {{ item.text }}
                    </Option>
                  </Select>
                </FormItem>
                <FormItem>
                  <Input
                    v-model="searchProduct.keyword"
                    type="text"
                    :placeholder="$t('SEARCH_INPUT')"
                    style="width: 500px"
                  />
                </FormItem>

                <FormItem>
                  <Button
                    type="primary"
                    :loading="searchProduct.loading"
                    @click="handlerSearchProduct"
                  >
                    {{ $t('SEARCH_BTN') }}
                  </Button>
                </FormItem>

                <span class="float-right">
                  <Button
                    type="info"
                    :loading="searchProduct.loading"
                    ghost
                    @click="loadSearchProduct"
                  >
                    {{
                      $t('LOAD_MORE_PRODUCT', {
                        page: searchProduct.product,
                        total: searchProduct.total
                      })
                    }}
                  </Button>
                </span>
              </Form>
            </div>
            <Table
              :loading="tableProduct.loading"
              :columns="tableProduct.column"
              :data="tableProduct.data"
              border
              highlight-row
              height="800"
              size="small"
            >
              <template
                slot="name"
                slot-scope="{ row }"
              >
                <Avatar
                  :src="row.image"
                  style="margin: 10px"
                />
                <a
                  :href="row.url"
                  target="_blank"
                >
                  {{ row.name }}
                </a>
              </template>
              <template
                slot="action"
                slot-scope="{ row }"
              >
                <div v-if="row.active">
                  <Button
                    v-if="row.added || checkProductWasAdded(row.id)"
                    type="error"
                    size="small"
                    ghost
                    @click="removeProductPromotion(row)"
                  >
                    <span>{{ $t('REMOVE_PRODUCT_BTN') }}</span>
                  </Button>
                  <Button
                    v-else
                    type="primary"
                    size="small"
                    ghost
                    @click="addProductPromotion(row)"
                  >
                    {{ $t('ADD_PRODUCT') }}
                  </Button>
                </div>
                <div v-else>
                  {{ row.status }}
                </div>
              </template>
            </Table>
          </Col>
        </Row>
      </div>

      <!--Config Promotion-->
      <div v-if="stepKey === 'step-change-promotion'">
        <Row>
          <Col span="24">
            <div class="mb-20">
              <Form inline>
                <FormItem :label="$t('PROMOTION_MASS_PRICE_CHANGE')">
                  <Input
                    v-model="formPromotion.pricePercent"
                    type="number"
                    @on-change="onChangePricePercent"
                  >
                    <template #append>
                      {{ $t('PERCENT_UINIT') }}
                    </template>
                  </Input>
                </FormItem>

                <FormItem :label="$t('PROMOTION_MASS_STOCK_LIMIT')">
                  <Input
                    v-model="formPromotion.stockLimit"
                    type="number"
                  />
                </FormItem>

                <FormItem :label="$t('PROMOTION_MASS_PURCHASE_LIMIT')">
                  <Input
                    v-model="formPromotion.purchaseLimit"
                    type="number"
                  />
                </FormItem>

                <FormItem :label="$t('PROMOTION_MASS_STATUS')">
                  <Checkbox v-model="formPromotion.status" />
                  <span>
                    {{ $t('STATUS_ACTIVE') }}
                  </span>
                </FormItem>

                <FormItem :label="$t('PROMOTION_MASS_APPLY')">
                  <Button
                    type="primary"
                    :loading="formPromotion.isLoading"
                    ghost
                    @click="onPromotionMass"
                  >
                    <span>{{ $t('PROMOTION_MASS_CHANGE_BTN') }}</span>
                  </Button>
                </FormItem>
              </Form>
            </div>
            <div>
              <Alert
                :show-icon="false"
                type="warning"
              >
                <span>{{ $t('FLASHSALE_PERCENT_MIN_LABEL') }}:</span>
                <InputNumber
                  v-model="flahsalePercentMinNumber"
                  :min="0"
                  :max="100"
                  :step="1"
                  size="small"
                  controls-outside
                  style="width: 80px; margin: 0 8px"
                >
                  <template #append>
                    {{ $t('PERCENT_UINIT') }}
                  </template>
                </InputNumber>
                <span>{{ flahsalePercentMinText }}</span>
              </Alert>
            </div>
            <div>
              <Table
                :loading="tablePromotion.loading"
                :columns="tablePromotion.column"
                :data="tablePromotion.data"
                :row-class-name="rowClassPromotion"
                border
                highlight-row
                height="800"
                size="small"
              >
                <template
                  slot="name"
                  slot-scope="{ row }"
                >
                  <Avatar
                    v-if="row.isFirstModel"
                    :src="row.image"
                    style="margin: 10px"
                  />
                  <a
                    v-if="row.isFirstModel"
                    :href="row.url"
                    target="_blank"
                  >
                    {{ row.name }}
                  </a>
                </template>
                <template
                  slot="priceOrginal"
                  slot-scope="{ row }"
                >
                  <div class="text-center">
                    {{ $n(row.priceOrginal) }}
                  </div>
                </template>
                <template
                  slot="priceDiscounted"
                  slot-scope="{ row }"
                >
                  <div class="text-center">
                    {{ $n(row.priceDiscounted) }}
                  </div>
                </template>
                <template
                  slot="pricePromotion"
                  slot-scope="{ row }"
                >
                  <div class="text-center">
                    <Input
                      v-model="row.pricePromotion"
                      type="number"
                      @on-change="onChangeRow(row)"
                    />
                  </div>
                </template>
                <template
                  slot="percentPromotion"
                  slot-scope="{ row }"
                >
                  <div class="text-center">
                    <div>
                      {{ $t('PERCENT_SHOW', { value: renderPercent(row) }) }}
                    </div>
                    <div
                      v-if="renderPercent(row) >= 95 && renderPercent(row) < 100"
                      class="text-warning"
                    >
                      {{ $t('PROMOTION_PERCENT_WARNING') }}
                    </div>
                    <div
                      v-if="renderPercent(row) > 100 || renderPercent(row) < 0"
                      class="text-danger"
                    >
                      {{ $t('PROMOTION_PERCENT_INVALID') }}
                    </div>
                  </div>
                </template>

                <template
                  slot="stockLimit"
                  slot-scope="{ row }"
                >
                  <Input
                    v-model="row.stockLimit"
                    type="number"
                    @on-change="onChangeRow(row)"
                  >
                    <template #append>
                      <span>{{ $t('MAX_LABEL', { max: row.stockMax }) }}</span>
                    </template>
                  </Input>
                </template>
                <template
                  slot="purchaseLimit"
                  slot-scope="{ row }"
                >
                  <Input
                    v-model="row.purchaseLimit"
                    type="number"
                    @on-change="onChangeRow(row)"
                  >
                    <template #append>
                      <span>{{ $t('MAX_LABEL', { max: row.purchaseMax }) }}</span>
                    </template>
                  </Input>
                </template>
                <template
                  slot="status"
                  slot-scope="{ row }"
                >
                  <Checkbox
                    v-model="row.status"
                    @on-change="onChangeRow(row)"
                  />
                  <span>
                    {{ $t('STATUS_ACTIVE') }}
                  </span>
                </template>
              </Table>
            </div>
          </Col>
        </Row>
      </div>
      <!--Final-->
      <div v-if="stepKey === 'step-final'">
        <Row>
          <Col
            span="12"
            offset="6"
          >
            <div class="mb-10 text-right">
              <Button
                type="primary"
                class="mr-5"
                :loading="excuteProcess.loading"
                :disabled="isProcessDone || excuteProcess.loading"
                @click="applyPromotion"
              >
                {{ $t('FLASHSALE_CREATE_BTN') }}
                <span>
                  {{
                    $t('TOTAL_SELECTED', {
                      total: excuteProcess.total,
                      selected: excuteProcess.current
                    })
                  }}
                </span>
              </Button>
            </div>

            <div class="mb-20">
              <Input
                v-model="processLogger"
                type="textarea"
                :rows="30"
                readonly
                :placeholder="$t('PROCESSING_LOG')"
              />
            </div>

            <div
              v-if="!isSchedulerFlashSale && isProcessDone"
              class="text-right"
            >
              <Button
                type="info"
                class="mr-5"
                style="float:left"
                @click="showErrorLog"
              >
                {{ $t('FLASHSALE_SHOW_ERROR_LOG') }}
              </Button>

              <excel-download
                :data="exportExcel.data"
                :fields="exportExcel.column"
                :worksheet="exportExcel.sheet"
                :name="exportExcel.file"
              >
                <Button type="success">
                  {{ $t('EXPORT_EXCEL_RESULT') }}
                </Button>
              </excel-download>
            </div>

            <div class="mt-10">
              <Alert
                :show-icon="false"
                type="warning"
              >
                <template #desc>
                  <ul class="ml-10">
                    <li
                      v-for="(lineContent, indexLine) in $t('FLASHSALE_RULE_NOTE')"
                      :key="indexLine"
                    >
                      {{ lineContent }}
                    </li>
                  </ul>
                </template>
              </Alert>
            </div>

            <Input
              v-if="false && isDevMode"
              class="mt-10"
              :value="JSON.stringify(exportExcel.data)"
              :rows="4"
              readonly
            />
          </Col>
        </Row>
      </div>
    </div>
    <div>
      <Modal
        v-model="errorLog.show"
        :title="$t('FLASHSALE_ERROR_TITLE')"
        width="60%"
        class="error-log-modal"
      >
        <div
          v-if="errorLog.data.length"
          class="error-log-container"
        >
          <div
            v-for="(flashsaleError, index) in errorLog.data"
            :key="index"
            class="mb-10"
          >
            <h3
              class="mb-5"
            >
              <a
                :href="flashsaleError.fashsaleUrl"
                target="_blank"
              >
                <span>{{ $t('FLASHSALE_TITLE_TIME', { time: flashsaleError.fashsaleName }) }}</span>
              </a>
              <span style="float: right;">{{ $t('ERORR_COUNT_TOTAL', { count: flashsaleError.list.length, total: flashsaleError.total }) }}</span>
            </h3>
            <Table
              :columns="errorLog.table"
              :data="flashsaleError.list"
              size="small"
              border
            />
          </div>
        </div>
        <div v-else>
          <Alert
            type="warning"
          >
            {{ $t('FLASHSALE_ERROR_LOG_EMPTY') }}
          </Alert>
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
import ExcelDownload from 'vue-json-excel';
import mixin from './mixin/Create';

export default {
  name: 'ShopeeFlashSaleCreate',
  components: {
    'excel-download': ExcelDownload,
  },
  props: {
    flashSaleId: {
      type: String,
      require: true,
    },
  },
  mixins: [mixin],
};
</script>

<style scoped>
  .container-flashsale {
    margin: 20px;
  }
  #time-slot-checkbox > .ivu-checkbox-wrapper {
    text-align: center;
    padding-left: 100px;
    margin: 5px;
  }

  .box-time-slot {
    height: 700px;
    overflow-y: auto;
    padding: 5px;
  }

  .error-log-container {
    max-height: 650px;
    overflow-y: auto;
    padding: 20px;
  }

  .error-log-container a {
    cursor: pointer !important;
    text-decoration: none;
  }

  .error-log-container a:hover {
    text-decoration: underline;
  }
</style>
