<template>
  <div>
    <div class="mb-10">
      <Button
        type="primary"
        class="mr-5"
        @click="openImportKeyword"
      >
        {{ $t('ADS_IMPORT_KEYWORD_FROM_STORE') }}
      </Button>

      <Button
        type="success"
        @click="exportKeyword"
      >
        {{ $t('ADS_KEYWORD_EXPORT_BTN') }}
      </Button>

      <Button
        style="float: right"
        type="default"
        @click="openCopyKeyword"
      >
        {{ $t('ADS_COPY_KEYWORD_TO_STORE') }}
      </Button>
    </div>
    <!-- Add Keyword -->
    <div class="text-center mb-20">
      <div class="mb-5">
        <Form
          :model="formAddKeyword"
          inline
        >
          <FormItem prop="user">
            <Input
              v-model="formAddKeyword.input"
              type="textarea"
              style="width: 400px"
              :placeholder="$t('KEYWORD_MASS_INPUT')"
            />
          </FormItem>
          <FormItem>
            <Button
              type="primary"
              :loading="formAddKeyword.loading"
              :disabled="!formAddKeyword.input"
              @click="handlerInputKeyword"
            >
              {{ $t('KEYWORD_ADD_ITEM_MASS') }}
            </Button>
          </FormItem>
        </Form>
      </div>

      <div>
        <Form
          :model="formAddKeyword"
          inline
        >
          <FormItem prop="user">
            <Input
              v-model="formAddKeyword.keyword"
              type="text"
              :placeholder="$t('KEYWORD_ROW_KEYWORD')"
            />
          </FormItem>
          <FormItem prop="password">
            <Input
              v-model="formAddKeyword.price"
              type="number"
              :placeholder="$t('KEYWORD_ROW_PRICE')"
            />
          </FormItem>
          <FormItem>
            <Button
              type="primary"
              :loading="formAddKeyword.loading"
              :disabled="!addKeywordBtnActive"
              @click="handleSubmitKeyword"
            >
              {{ $t('KEYWORD_ADD_ITEM_BTN') }}
            </Button>
          </FormItem>
        </Form>
      </div>
    </div>
    <!-- Table Keyword -->
    <div>
      <Table
        ref="TableKeyword"
        :loading="tableKeyword.loading"
        :columns="tableKeyword.column"
        :data="tableKeyword.data"
        :row-class-name="rowKeywordColor"
        highlight-row
        size="small"
        @on-selection="onSelectKeyword"
        @on-selection-change="onSelectKeyword"
      >
        <template
          slot="keyword"
          slot-scope="{ row }"
        >
          <Input
            v-model="row.keyword"
            type="text"
            size="small"
            readonly
          />
        </template>
        <template
          slot="type"
          slot-scope="{ row }"
        >
          <select-keyword-type
            v-model="row.type"
            style="width: 100px"
            @change="onChangeKeyword(row)"
          />
        </template>
        <template
          slot="price"
          slot-scope="{ row }"
        >
          <Input
            v-model="row.price"
            type="number"
            style="width: 100px"
            size="small"
            @on-change="onChangeKeyword(row)"
          />
        </template>
        <template
          slot="active"
          slot-scope="{ row }"
        >
          <Checkbox
            v-model="row.isActive"
            @on-change="onChangeKeyword(row)"
          />
          <span>
            {{ $t('STATUS_ACTIVE') }}
          </span>
        </template>
        <template
          slot="action"
          slot-scope="{ row }"
        >
          <Button
            v-if="row.isCreated && !row.isUpdated"
            type="warning"
            size="small"
            ghost
            :loading="row.loading"
            @click="onUpdateKeyword(row)"
          >
            {{ $t('ADS_KEYWORD_UPDATE_BTN') }}
          </Button>
          <Button
            v-if="!row.isCreated"
            type="success"
            size="small"
            ghost
            :loading="row.loading"
            @click="onSubmitKeyword(row)"
          >
            {{ $t('ADS_KEYWORD_ADD_BTN') }}
          </Button>
        </template>
      </Table>
    </div>
    <!-- Import Keywords -->
    <div>
      <Modal
        v-model="formImportKeyword.openPopup"
        :title="$t('KEYWORD_IMPORT_FROM_COLLECTION')"
        :ok-text="$t('KEYWORD_IMPORT_BTN')"
        @on-ok="handlerImportKeyword"
      >
        <div class="mb-20">
          <Form>
            <FormItem :label="$t('KEYWORD_COLLECTION_SELECT')">
              <Select
                v-model="formImportKeyword.collectionId"
                @on-change="onSelectImport"
              >
                <Option
                  v-for="item in getShopeeKeywordCollection"
                  :key="item._id"
                  :value="item._id"
                  :disabled="!item.count"
                >
                  {{ item.label }}
                </Option>
              </Select>
            </FormItem>
          </Form>
        </div>
        <div v-if="formImportKeyword.list.length">
          <div class="text-right mb-10">
            <check-all
              @select-all="checkSelectImport(true)"
              @deselect-all="checkSelectImport(false)"
            />
          </div>
          <div class="box-container">
            <CheckboxGroup v-model="formImportKeyword.selected">
              <Row>
                <Col
                  v-for="item in formImportKeyword.list"
                  :key="item._id"
                  :span="12"
                >
                  <Checkbox :label="item._id">
                    <span v-if="item.active">{{ item.keyword }}</span>
                    <del v-else>{{ item.keyword }}</del>
                  </Checkbox>
                </Col>
              </Row>
            </CheckboxGroup>
          </div>
        </div>
      </Modal>
    </div>
    <!-- Copy Keywords -->
    <div>
      <Modal
        v-model="formCopyKeyword.openPopup"
        :title="$t('KEYWORD_COLLECTION_COPY')"
        :ok-text="$t('KEYWORD_COPY_BTN')"
        @on-ok="handlerCopyKeyword"
      >
        <div class="mb-5">
          <Form>
            <FormItem :label="$t('KEYWORD_COLLECTION_COPY_TO')">
              <Select v-model="formCopyKeyword.collectionId">
                <Option
                  v-for="item in getShopeeKeywordCollection"
                  :key="item._id"
                  :value="item._id"
                >
                  {{ item.label }}
                </Option>
              </Select>
            </FormItem>
          </Form>
        </div>
        <div class="box-container">
          <Tag
            v-for="item in tableKeyword.selected"
            :key="item.id"
            color="blue"
          >
            {{ item.keyword }}
          </Tag>
        </div>
      </Modal>
    </div>
  </div>
</template>

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

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

<style>
  .ads-info-row td {
    background-color: #409eff;
  }

  .ads-warning-row td {
    background-color: #d3c4ac65;
  }

  .ads-success-row td {
    background-color: #67c23a65;
  }
</style>

<style scoped>
  .container-keyword {
    height: 700px;
    overflow-y: auto;
    padding: 5px;
  }
</style>
