<template>
  <div>
    <div v-if="productLoading">
      <loading-app style="margin-top: 100px" />
    </div>
    <div v-else>
      <Row v-if="warningCloneText">
        <Col :span="24">
          <Alert type="warning">
            <div v-html="warningCloneText" />
          </Alert>
        </Col>
      </Row>
      <Row :gutter="5">
        <Col :span="4">
          <Dropdown class="mr-5">
            <Button
              type="primary"
              :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>
        <Col
          :span="24"
          class="mt-5 mb-5"
        >
          <div 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"
          class="mb-5"
        >
          <Input
            v-model="tiktokProduct.description"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 3 }"
            size="default"
          />
        </Col>
      </Row>
      <Row
        :gutter="16"
        class="mt-15"
      >
        <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="16"
        class="mt-15"
      >
        <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"
            :title="$t('PRICE_CHANGER_TITLE')"
          >
            <Input
              v-model="editData.price.change"
              size="default"
              :placeholder="$t('COPY_PRODUCT_EDIT_PARAM_PRICE')"
            />
            <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="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="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.skipDuplicateSku"
            size="default"
          >
            {{ $t('COPY_PRODUCT_EDIT_SKIP_DUPLICATE_SKU') }}
          </Checkbox>
        </Col>
        <Col
          :span="6"
          class="mt-5"
        >
          <Checkbox
            v-model="editData.unlisted"
            size="default"
          >
            {{ $t('COPY_PRODUCT_EDIT_UNLISTED') }}
          </Checkbox>
        </Col>
        <Col
          v-tooltip="getUsageGptWriter.text"
          :span="6"
          class="mt-5"
        >
          <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"
          class="mt-5"
        >
          <Checkbox
            v-model="editData.description.gptWriter"
            size="default"
            :disabled="!getUsageGptWriter.allow"
          >
            {{ $t('COPY_PRODUCT_EDIT_GPT_WRITER_DESCRIPTION') }}
          </Checkbox>
        </Col>
      </Row>
      <Row class="mt-20">
        <Col
          :span="16"
        >
          <div :style="{ color: log.color, }">
            <span v-html="log.text" />
          </div>
          <div>
            <small>{{ log.process }}</small>
          </div>
        </Col>

        <Col
          :span="8"
          class="text-right"
        >
          <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>

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

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

<style>
  .bg-red > .ivu-select-selection  {
    background: #ee4d2d
  }
</style>
