<template>
  <div>
    <div>
      <h3>{{ product.name }}</h3>
    </div>
    <div class="mt-20">
      <Form>
        <Row :gutter="4">
          <Col :span="12">
            <FormItem :label="$t('SELECT_SHOP')">
              <Select
                v-model="selected.shop"
                size="default"
                long
                @on-change="onChangeShop($event)"
              >
                <Option
                  v-for="item in getTiktokShopList"
                  :key="item._id"
                  :value="item._id"
                  :disabled="item.disabled"
                >
                  {{ item.label }}
                </Option>
              </Select>
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem :label="$t('SELECT_WAREHOUSE')">
              <Select
                v-model="selected.warehouse"
                size="default"
                long
                @on-change="onWarehouse"
              >
                <Option
                  v-for="item in getTiktokWarehouseList"
                  :key="item.warehouse_id"
                  :value="item.warehouse_id"
                >
                  {{ item.warehouse_name }}
                </Option>
              </Select>
            </FormItem>
          </Col>
          <Col
            :span="24"
            class="text-right mt-10"
          >
            <Button
              type="info"
              class="mr-5"
              :loading="btnLoading"
              :disabled="btnDisabled"
              size="default"
              @click="saveUpload()"
            >
              {{ $t('SYNC_PRODUCT_PRE_EDIT') }}
            </Button>
            <Button
              type="success"
              class="mr-5"
              :loading="btnLoading"
              :disabled="btnDisabled || !score"
              size="default"
              @click="handlerUpload"
            >
              {{ $t('SYNC_PRODUCT_DIRECT') }}
              <span>/</span>
              {{ score }}
            </Button>
          </Col>
        </Row>
      </Form>
    </div>
    <div class="mt-20 text-right">
      <p v-if="!getTiktokShopList.length">
        <span class="text-warning">
          {{ $t('SHOP_LIST_EMPTY') }}
        </span>
        <a
          href="javascript:void(0)"
          @click="openAddShop"
        >
          {{ $t('SHOP_ADD_BTN') }}
        </a>
      </p>
      <p v-if="!getTiktokWarehouseList.length">
        <span class="text-warning">
          {{ $t('WAREHOUSE_LIST_EMPTY') }}
        </span>
      </p>
      <p v-if="!score">
        <span class="text-danger">
          {{ $t('SCORE_CLONE_PRODUCT_NOT_ENOUGH') }}
        </span>
        <a
          href="javascript:void(0)"
          @click="buyScore"
        >
          {{ $t('GET_MORE_SCORE') }}
        </a>
      </p>
      <p :style="{ color: log.color }">
        <span v-html="log.text" />
      </p>
    </div>
  </div>
</template>

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

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