<template>
  <div class="ad-detail">
    <div class="ad-detail__toolbar">
      <Button
        type="primary"
        @click="openImportKeyword"
      >
        {{ $t('ADS_IMPORT_KEYWORD_FROM_STORE') }}
      </Button>

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

      <Button
        class="ad-detail__toolbar-end"
        type="default"
        @click="openCopyKeyword"
      >
        {{ $t('ADS_COPY_KEYWORD_TO_STORE') }}
      </Button>
    </div>

    <div class="ad-detail__panel">
      <div class="ad-detail__form">
        <Form
          :model="formAddKeyword"
          inline
        >
          <FormItem prop="user">
            <Input
              v-model="formAddKeyword.input"
              class="ad-detail__input--mass"
              type="textarea"
              :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 class="ad-detail__form">
        <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>

    <div class="ad-detail__table">
      <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"
            class="ad-detail__cell-control"
            @change="onChangeKeyword(row)"
          />
        </template>
        <template
          slot="price"
          slot-scope="{ row }"
        >
          <Input
            v-model="row.price"
            class="ad-detail__cell-control"
            type="number"
            size="small"
            @on-change="onChangeKeyword(row)"
          />
        </template>
        <template
          slot="active"
          slot-scope="{ row }"
        >
          <Checkbox
            v-model="row.isActive"
            @on-change="onChangeKeyword(row)"
          />
          <span class="ad-detail__cell-label">
            {{ $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="ad-detail__modal-field">
          <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="ad-detail__modal-actions">
            <check-all
              @select-all="checkSelectImport(true)"
              @deselect-all="checkSelectImport(false)"
            />
          </div>
          <div class="ad-detail__picker">
            <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="ad-detail__modal-field">
          <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="ad-detail__picker ad-detail__picker--tags">
          <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 lang="scss">
@import '@/vue/styles/tokens.scss';

.ads-info-row td {
  background-color: $c-link;
  color: $c-surface;
}

.ads-warning-row td {
  background-color: $c-warning-bg;
  color: $c-text-strong;
}

.ads-success-row td {
  background-color: $c-success-bg;
  color: $c-text-strong;
}
</style>

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

.ad-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;

  &__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  &__toolbar-end {
    margin-left: auto;
  }

  &__panel {
    @include card;

    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }

  &__form {
    display: flex;
    justify-content: center;
  }

  &__input--mass.ivu-input-wrapper {
    width: 400px;
    max-width: 100%;
  }

  &__table {
    @include card(12px);
  }

  &__cell-control {
    width: 100px;
  }

  &__cell-label {
    font-size: 12px;
    color: $c-text-muted;
  }

  &__modal-field {
    margin-bottom: 12px;
  }

  &__modal-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }

  &__picker {
    max-height: 320px;
    overflow-y: auto;
    padding: 10px;
    background: $c-surface-soft;
    border: 1px solid $c-border;
    border-radius: $radius-item;

    @include scrollbar;

    .ivu-checkbox-wrapper {
      color: $c-text;
    }

    del {
      color: $c-text-placeholder;
    }
  }

  &__picker--tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
}
</style>
