<template>
  <div>
    <Row v-if="warningCloneText">
      <Col :span="24">
        <Alert type="warning">
          <div v-html="warningCloneText" />
        </Alert>
      </Col>
    </Row>
    <Row
      :gutter="8"
      class="mb-10"
    >
      <Col>
        <Button
          class="mr-5"
          type="primary"
          size="small"
          icon="ios-download-outline"
          :loading="loadingImage"
          :disabled="btnDisable"
          @click="downLoadAllImageZip"
        >
          {{ $t('DOWNLOAD_ALL_IMAGE_PRODUCT') }}
        </Button>
      </Col>
      <Col>
        <Button
          class="mr-5"
          type="info"
          size="small"
          icon="ios-images-outline"
          @click="openViewImage"
        >
          {{ $t('VIEW_ALL_IMAGE_PRODUCT') }}
        </Button>
      </Col>
      <Col>
        <Tooltip
          placement="top"
          :content="$t('DOWNLOAD_VIDEO_PRODUCT_NO_VIDEO')"
          :disabled="productHasVideo"
        >
          <Button
            class="mr-5"
            type="warning"
            size="small"
            icon="ios-videocam-outline"
            :loading="loadingVideo"
            :disabled="!productHasVideo || btnDisable"
            @click="downloadAllVideo"
          >
            {{ $t('DOWNLOAD_VIDEO_PRODUCT') }}
          </Button>
        </Tooltip>
      </Col>
      <Col>
        <Tooltip
          placement="top"
          :content="$t('DOWNLOAD_VIDEO_PRODUCT_NO_VIDEO')"
          :disabled="productHasVideo"
        >
          <Button
            class="mr-5"
            type="success"
            size="small"
            icon="logo-tux"
            :loading="loadingPostVideo"
            :disabled="!productHasVideo || btnDisable"
            @click="postShopeeVideoToChannel"
          >
            {{ $t('SHOPEE_VIDEO_POST_BTN') }}
          </Button>
        </Tooltip>
      </Col>
      <Col v-if="getBetaMode">
        <Button
          class="mr-5"
          type="error"
          size="small"
          icon="ios-search"
          @click="openSpyProduct"
        >
          {{ $t('BTN_PRODUCT_SPY_DETAIL') }}
        </Button>
      </Col>
      <Col>
        <Button
          class="mr-5"
          type="success"
          size="small"
          icon="ios-star-outline"
          @click="openFetchReview"
        >
          {{ $t('BTN_REVIEW_GET') }}
        </Button>
      </Col>
    </Row>
    <Row :gutter="5">
      <Col :span="6">
        <Input
          v-model="shopeeProduct.sku"
          v-tooltip="$t('PRODUCT_SKU')"
          size="default"
        />
      </Col>
      <Col :span="16">
        <Input
          v-model="shopeeProduct.name"
          size="default"
        />
      </Col>
      <Col>
        <Poptip
          placement="bottom"
          width="780"
        >
          <Button
            v-tooltip="$t('PRODUCT_DESCRIPTION')"
            type="primary"
            long
            ghost
          >
            <Icon type="ios-arrow-down" />
          </Button>
          <template #content>
            <Input
              v-model="shopeeProduct.description"
              type="textarea"
              :autosize="{ minRows: 14, maxRows: 14 }"
              size="default"
            />
          </template>
        </Poptip>
      </Col>
    </Row>
    <Row
      :gutter="10"
      class="mt-15"
    >
      <Col :span="6">
        <Input
          v-model="editData.title.prepend"
          v-tooltip="$t('COPY_PRODUCT_EDIT_PARAM_PREPEND_TITLE')"
          size="default"
          :placeholder="$t('COPY_PRODUCT_EDIT_PARAM_PREPEND_TITLE')"
        />
      </Col>
      <Col :span="6">
        <Input
          v-model="editData.title.append"
          v-tooltip="$t('COPY_PRODUCT_EDIT_PARAM_APPEND_TITLE')"
          size="default"
          :placeholder="$t('COPY_PRODUCT_EDIT_PARAM_APPEND_TITLE')"
        />
      </Col>
      <Col :span="6">
        <Input
          v-model="editData.description.prepend"
          v-tooltip="$t('COPY_PRODUCT_EDIT_PARAM_PREPEND_DESCRIPTION')"
          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"
          v-tooltip="$t('COPY_PRODUCT_EDIT_PARAM_APPEND_DESCRIPTION')"
          size="default"
          type="textarea"
          :autosize="{ minRows: 1, maxRows: 1 }"
          :placeholder="$t('COPY_PRODUCT_EDIT_PARAM_APPEND_DESCRIPTION')"
        />
      </Col>
    </Row>
    <Row
      :gutter="16"
      class="mt-15"
    >
      <Col :span="4">
        <div>
          {{ $t('PRODUCT_CLONE_WEIGHT_DEFAULT_LABEL') }}
        </div>
        <Input
          v-model="editData.weight"
          v-tooltip="$t('COPY_PRODUCT_EDIT_PARAM_WEIGHT')"
          type="number"
          :min="1"
          size="default"
        />
      </Col>
      <Col :span="4">
        <div>
          {{ $t('PRODUCT_CLONE_STOCK_DEFAULT_LABEL') }}
        </div>
        <Input
          v-model="editData.stock"
          v-tooltip="$t('COPY_PRODUCT_EDIT_PARAM_STOCK')"
          type="number"
          :min="0"
          size="default"
        />
      </Col>
      <Col :span="4">
        <div>
          {{ $t('PRODUCT_CLONE_EXPIRED_DAY_DEFAULT_LABEL') }}
        </div>
        <Input
          v-model="editData.expiredDay"
          v-tooltip="$t('COPY_PRODUCT_EDIT_PARAM_EXPIRED_DAY')"
          size="default"
          type="number"
          :min="1"
        />
      </Col>
      <Col :span="6">
        <Poptip
          trigger="hover"
          :title="$t('PRICE_CHANGER_TITLE')"
        >
          <div>
            {{ $t('PRODUCT_CLONE_PRICE_DEFAULT_LABEL') }}
          </div>
          <Input
            v-model="editData.price.change"
            size="default"
          />
          <div slot="content">
            <ul>
              <li
                v-for="(item, index) in $t('PRICE_CHANGER_TOOLTIP')"
                :key="index"
              >
                <span v-html="item" />
              </li>
            </ul>
          </div>
        </Poptip>
      </Col>
      <Col :span="6">
        <div>
          {{ $t('PRODUCT_CLONE_PHONE_DEFAULT_LABEL') }}
        </div>
        <Input
          v-model="editData.replace.phone"
          v-tooltip="$t('COPY_PRODUCT_EDIT_PARAM_REPLACE_PHONE')"
          size="default"
        />
      </Col>
    </Row>
    <Row
      :gutter="16"
      class="mt-10"
    >
      <Col
        :span="6"
        class="mt-5"
      >
        <Checkbox
          v-model="editData.price.beforeDiscount"
          size="default"
        >
          {{ $t('COPY_PRODUCT_EDIT_PARAM_PRICE_BEFORE_DISCOUNT') }}
        </Checkbox>
      </Col>
      <Col
        :span="6"
        class="mt-5"
      >
        <Checkbox
          v-model="editData.image.spin"
          size="default"
        >
          {{ $t('COPY_PRODUCT_EDIT_PARAM_SPIN_IMAGE') }}
        </Checkbox>
      </Col>

      <Col
        :span="6"
        class="mt-5"
      >
        <Checkbox
          v-model="editData.description.json"
          size="default"
        >
          {{ $t('COPY_PRODUCT_EDIT_DESCRIPTION_IMAGE') }}
        </Checkbox>
      </Col>
      <Col
        :span="6"
        class="mt-5"
      >
        <Checkbox
          v-model="editData.skipDuplicateSku"
          size="default"
        >
          {{ $t('COPY_PRODUCT_EDIT_SKIP_DUPLICATE_SKU') }}
        </Checkbox>
      </Col>
      <Col

        :span="6"
        class="mt-5"
      >
        <Checkbox
          v-model="editData.title.gptWriter"
          v-tooltip="getUsageGptWriter.text"
          size="default"
          :disabled="!getUsageGptWriter.allow"
        >
          {{ $t('COPY_PRODUCT_EDIT_GPT_WRITER_NAME') }}
        </Checkbox>
      </Col>

      <Col

        :span="6"
        class="mt-5"
      >
        <Checkbox
          v-model="editData.description.gptWriter"
          v-tooltip="getUsageGptWriter.text"
          size="default"
          :disabled="!getUsageGptWriter.allow"
        >
          {{ $t('COPY_PRODUCT_EDIT_GPT_WRITER_DESCRIPTION') }}
        </Checkbox>
      </Col>

      <Col

        :span="6"
        class="mt-5"
      >
        <Checkbox
          v-model="editData.image.changeMd5"
          v-tooltip="$t('COPY_PRODUCT_EDIT_PARAM_CHANGE_MD5_TOOLTIP')"
          size="default"
        >
          {{ $t('COPY_PRODUCT_EDIT_PARAM_CHANGE_MD5') }}
        </Checkbox>
      </Col>

      <Col

        :span="6"
        class="mt-5"
      >
        <Checkbox
          v-model="getProductWartermark.active"
          v-tooltip="$t('COPY_PRODUCT_EDIT_PARAM_WATERMARK_TOOLTIP')"
          :disabled="!getProductWartermark.base64"
          size="default"
          @on-change="onChangeWartermark"
        >
          {{ $t('COPY_PRODUCT_EDIT_PARAM_WATERMARK') }}
        </Checkbox>
        <router-link
          v-tooltip="$t('COPY_PRODUCT_EDIT_PARAM_WATERMARK_CONFIG')"
          to="/setting?tab=shopeeClone"
        >
          <i
            class="fa fa-cog"
            style="font-size: 20px"
          />
        </router-link>
      </Col>
    </Row>
    <Row>
      <Col
        :span="24"
        class="row-end mt-10"
      >
        <Select
          v-if="isShopWarehouse"
          v-model="shopWarehouse.selected"
          class="mr-5"
          :max-tag-count="1"
          style="width: 200px;"
          :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>

        <Select
          v-model="getShopeeSellerLogistic.selected"
          class="mr-5"
          :max-tag-count="1"
          style="width: 250px; margin-right: auto;"
          :placeholder="$t('COPY_PRODUCT_SELECT_LOGISTIC')"
          multiple
          @on-change="onChangeLogistic"
        >
          <Option
            v-for="item in getShopeeSellerLogistic.list"
            :key="item.value"
            :value="item.value"
            :disabled="item.disabled"
          >
            {{ item.name }}
          </Option>
        </Select>

        <Checkbox
          v-model="editData.fetchStock"
          v-tooltip="$t('COPY_PRODUCT_EDIT_FETCH_STOCK_TOOLTIP')"
          size="default"
          @on-change="onChangeFetchStock"
        >
          <span>
            {{ $t('COPY_PRODUCT_EDIT_FETCH_STOCK' , { stats: productStockStats }) }}
          </span>
        </Checkbox>

        <Checkbox
          v-model="editData.unlisted"
          size="default"
        >
          {{ $t('COPY_PRODUCT_EDIT_UNLISTED') }}
        </Checkbox>

        <Button
          size="default"
          type="success"
          class="mr-2"
          icon="ios-cloud-upload-outline"
          :loading="btnDisable || btnLoading"
          :disabled="btnDisabled || btnLoading"
          @click="copyProduct"
        >
          <span>
            {{ $t('COPY_PRODUCT_TO.shopee') }}
          </span>
        </Button>
      </Col>
    </Row>
    <Row
      v-if="productHasVideo"
      :gutter="5"
      class="mt-15"
    >
      <Col :span="18">
        <AutoComplete
          v-model="syncVideoProduct.query"
          size="default"
          :placeholder="$t('SELECT_YOUR_PRODUCT_ON_SHOP')"
          @on-select="onChangeProduct"
          @on-search="searchProduct"
        >
          <Option
            v-for="item in syncVideoProduct.listProduct"
            :key="item.id"
            :value="item.id"
          >
            [{{ item.id }}] {{ item.name }}
          </Option>
        </AutoComplete>
      </Col>
      <Col :span="6">
        <Button
          size="default"
          type="primary"
          :loading="btnDisable || syncVideoProduct.loading || btnLoading"
          :disabled="!syncVideoProduct.isSelected || btnDisabled || btnLoading"
          long
          @click="syncVideoToProductId"
        >
          <span>
            {{ $t('SYNC_VIDEO_TO_YOUR_PRODUCT') }}
          </span>
        </Button>
      </Col>
    </Row>
    <div class="row-end mt-10">
      <div
        v-if="!getShopeeSellerAuthed"
        class="text-danger"
      >
        {{ $t('SHOPEE_SELLER_NO_LOGIN') }}
      </div>
    </div>
    <div :style="{ color: log.color, marginTop: '5px', textAlign: 'right' }">
      <span v-html="log.text" />
    </div>
  </div>
</template>
<script>
import mixin from './mixin';

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