<template>
  <div class="tk-clone">
    <div
      v-if="productLoading"
      class="tk-clone__loading"
    >
      <loading-app />
    </div>
    <div v-else>
      <Row v-if="warningCloneText">
        <Col :span="24">
          <Alert
            type="warning"
            class="tk-clone__alert"
          >
            <div v-html="warningCloneText" />
          </Alert>
        </Col>
      </Row>

      <div class="tk-clone__section">
        <Row :gutter="12">
          <Col :span="4">
            <Dropdown class="tk-clone__tools">
              <Button
                type="primary"
                class="tk-clone__tools-btn"
                :loading="btnLoading"
              >
                {{ $t('PRODUCT_TOOL_FEAUTURE_BTN') }}
                <Icon type="ios-arrow-down" />
              </Button>
              <template #list>
                <DropdownMenu>
                  <DropdownItem @click.native="downLoadAllImageZip">
                    {{ $t('DOWNLOAD_ALL_IMAGE_PRODUCT') }}
                  </DropdownItem>
                  <DropdownItem @click.native="openViewImage">
                    {{ $t('VIEW_ALL_IMAGE_PRODUCT') }}
                  </DropdownItem>
                  <DropdownItem
                    v-if="false"
                    @click.native="openSpyProduct"
                  >
                    {{ $t('BTN_PRODUCT_SPY_DETAIL') }}
                  </DropdownItem>
                  <DropdownItem
                    v-if="false"
                    @click.native="openFetchReview"
                  >
                    {{ $t('BTN_REVIEW_GET') }}
                  </DropdownItem>
                </DropdownMenu>
              </template>
            </Dropdown>
          </Col>
          <Col :span="4">
            <Input
              v-model="tiktokProduct.sku"
              v-tooltip="$t('PRODUCT_SKU')"
              size="default"
            />
          </Col>
          <Col :span="16">
            <Input
              v-model="tiktokProduct.name"
              size="default"
            />
          </Col>
        </Row>

        <Row :gutter="12">
          <Col :span="24">
            <div
              class="tk-clone__hint"
              v-html="$t('TIKTOK_ORIGNAL_CATEOGRY_ID' ,{ category : categoryProduct.originCategoryTree})"
            />
            <Select
              v-model="categoryProduct.selected"
              filterable
              :placeholder="$t('COPY_PRODUCT_SELECT_CATEGORY_MAPPING')"
              @on-change="saveCategoryMatch"
            >
              <Option
                v-for="item in categoryProduct.options"
                :key="item.value"
                :value="item.value"
              >
                {{ item.name }}
              </Option>
            </Select>
          </Col>
          <Col :span="24">
            <Input
              v-model="tiktokProduct.description"
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 3 }"
              size="default"
            />
          </Col>
        </Row>
      </div>

      <div class="tk-clone__section">
        <Row :gutter="12">
          <Col :span="6">
            <Input
              v-model="editData.title.prepend"
              size="default"
              :placeholder="$t('COPY_PRODUCT_EDIT_PARAM_PREPEND_TITLE')"
            />
          </Col>
          <Col :span="6">
            <Input
              v-model="editData.title.append"
              size="default"
              :placeholder="$t('COPY_PRODUCT_EDIT_PARAM_APPEND_TITLE')"
            />
          </Col>
          <Col :span="6">
            <Input
              v-model="editData.description.prepend"
              size="default"
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 1 }"
              :placeholder="$t('COPY_PRODUCT_EDIT_PARAM_PREPEND_DESCRIPTION')"
            />
          </Col>
          <Col :span="6">
            <Input
              v-model="editData.description.append"
              size="default"
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 1 }"
              :placeholder="$t('COPY_PRODUCT_EDIT_PARAM_APPEND_DESCRIPTION')"
            />
          </Col>
        </Row>

        <Row :gutter="12">
          <Col :span="3">
            <Input
              v-model="editData.weight"
              v-tooltip="$t('COPY_PRODUCT_EDIT_PARAM_WEIGHT')"
              size="default"
            />
          </Col>
          <Col :span="3">
            <Input
              v-model="editData.expiredDay"
              v-tooltip="$t('COPY_PRODUCT_EDIT_PARAM_EXPIRED_DAY')"
              size="default"
            />
          </Col>
          <Col :span="6">
            <Poptip
              trigger="hover"
              class="tk-clone__price-tip"
              :title="$t('PRICE_CHANGER_TITLE')"
            >
              <Input
                v-model="editData.price.change"
                size="default"
                :placeholder="$t('COPY_PRODUCT_EDIT_PARAM_PRICE')"
              />
              <div slot="content">
                <ul class="tk-clone__tip-list">
                  <li
                    v-for="(item, index) in $t('PRICE_CHANGER_TOOLTIP')"
                    :key="index"
                  >
                    <span v-html="item" />
                  </li>
                </ul>
              </div>
            </Poptip>
          </Col>
          <Col :span="12">
            <Input
              v-model="editData.replace.phone"
              size="default"
              :placeholder="$t('COPY_PRODUCT_EDIT_PARAM_REPLACE_PHONE')"
            />
          </Col>
          <Col
            v-show="false"
            :span="6"
          >
            <Input
              v-model="editData.replace.address"
              size="default"
              :placeholder="$t('COPY_PRODUCT_EDIT_PARAM_REPLACE_ADDRESS')"
            />
          </Col>
        </Row>

        <Row
          :gutter="12"
          class="tk-clone__options"
        >
          <Col :span="6">
            <Checkbox
              v-model="editData.price.beforeDiscount"
              size="default"
            >
              {{ $t('COPY_PRODUCT_EDIT_PARAM_PRICE_BEFORE_DISCOUNT') }}
            </Checkbox>
          </Col>
          <Col :span="6">
            <Checkbox
              v-model="editData.image.spin"
              size="default"
            >
              {{ $t('COPY_PRODUCT_EDIT_PARAM_SPIN_IMAGE') }}
            </Checkbox>
          </Col>
          <Col :span="6">
            <Checkbox
              v-model="editData.skipDuplicateSku"
              size="default"
            >
              {{ $t('COPY_PRODUCT_EDIT_SKIP_DUPLICATE_SKU') }}
            </Checkbox>
          </Col>
          <Col :span="6">
            <Checkbox
              v-model="editData.unlisted"
              size="default"
            >
              {{ $t('COPY_PRODUCT_EDIT_UNLISTED') }}
            </Checkbox>
          </Col>
          <Col
            v-tooltip="getUsageGptWriter.text"
            :span="6"
          >
            <Checkbox
              v-model="editData.title.gptWriter"
              size="default"
              :disabled="!getUsageGptWriter.allow"
            >
              {{ $t('COPY_PRODUCT_EDIT_GPT_WRITER_NAME') }}
            </Checkbox>
          </Col>
          <Col
            v-tooltip="getUsageGptWriter.text"
            :span="6"
          >
            <Checkbox
              v-model="editData.description.gptWriter"
              size="default"
              :disabled="!getUsageGptWriter.allow"
            >
              {{ $t('COPY_PRODUCT_EDIT_GPT_WRITER_DESCRIPTION') }}
            </Checkbox>
          </Col>
        </Row>
      </div>

      <div class="tk-clone__footer">
        <Row :gutter="12">
          <Col :span="16">
            <div
              class="tk-clone__log"
              :style="{ color: log.color, }"
            >
              <span v-html="log.text" />
            </div>
            <div class="tk-clone__log-process">
              <small>{{ log.process }}</small>
            </div>
          </Col>
          <Col
            :span="8"
            class="tk-clone__actions"
          >
            <Select
              v-if="isShopWarehouse"
              v-model="shopWarehouse.selected"
              class="tk-clone__warehouse"
              :max-tag-count="1"
              :placeholder="$t('COPY_PRODUCT_SELECT_WAREHOUSE')"
              multiple
              @on-change="onChangeWarehouse"
            >
              <Option
                v-for="item in shopWarehouse.options"
                :key="item.value"
                :value="item.value"
                :disabled="item.disabled"
              >
                {{ item.name }}
              </Option>
            </Select>

            <Button
              size="default"
              type="success"
              class="tk-clone__submit"
              :loading="btnDisable || btnLoading"
              :disabled="btnDisabled || btnLoading"
              @click="copyProduct"
            >
              <span>
                {{ $t('COPY_PRODUCT_TO.shopee') }}
              </span>
            </Button>
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>
<script>
import mixin from './mixin';

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

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

.bg-red > .ivu-select-selection {
  background: $c-brand;
}
</style>

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

.tk-clone {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: $c-text;

  &__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
  }

  &__alert.ivu-alert {
    border-radius: $radius-item;
    margin-bottom: 0;
  }

  &__section {
    @include card(16px);

    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid $c-border;
    transition: box-shadow $motion-base, border-color $motion-base;

    &:hover {
      box-shadow: $shadow-hover;
    }
  }

  &__tools {
    display: block;
    width: 100%;
  }

  &__tools-btn.ivu-btn {
    width: 100%;
    border-radius: $radius-item;
    background: $c-tiktok;
    border-color: $c-tiktok;
    transition: background $motion-fast, border-color $motion-fast;

    &:hover,
    &:focus {
      background: $c-surface-dark;
      border-color: $c-surface-dark;
    }
  }

  &__hint {
    font-size: 12px;
    color: $c-text-muted;
    margin-bottom: 6px;
    line-height: 1.5;
  }

  &__tip-list {
    margin: 0;
    padding-left: 16px;
    font-size: 12px;
    color: $c-text;
    line-height: 1.6;

    li {
      list-style: disc;
    }
  }

  &__price-tip {
    display: block;
    width: 100%;
  }

  &__options {
    padding-top: 4px;
    row-gap: 8px;
  }

  &__footer {
    @include card(16px);

    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid $c-border;
  }

  &__log {
    font-size: 13px;
    line-height: 1.5;
    color: $c-text;
    word-break: break-word;
  }

  &__log-process {
    font-size: 11px;
    color: $c-text-placeholder;
    margin-top: 2px;
  }

  &__actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
  }

  &__warehouse {
    width: 200px;
  }

  &__submit.ivu-btn {
    border-radius: $radius-item;
    font-weight: 600;
    transition: box-shadow $motion-fast, opacity $motion-fast;

    &:hover:not([disabled]) {
      box-shadow: $shadow-hover;
    }
  }
}

.tk-clone ::v-deep {
  .ivu-input,
  .ivu-select-selection {
    border-radius: $radius-item;
    border-color: $c-border-input;
    transition: border-color $motion-fast, box-shadow $motion-fast;
  }

  .ivu-input::placeholder {
    color: $c-text-placeholder;
  }

  .ivu-select-placeholder {
    color: $c-text-placeholder;
  }

  .ivu-checkbox-wrapper {
    color: $c-text;
    font-size: 13px;
  }

  .ivu-row {
    margin-bottom: 0;
  }
}

@media (max-width: 860px) {
  .tk-clone {
    &__actions {
      flex-direction: column;
      align-items: stretch;
    }

    &__warehouse {
      width: 100%;
    }
  }
}
</style>
