<template>
  <div>
    <div class="mb-10 text-right">
      <Button
        type="primary"
        @click="onCreate"
      >
        {{ $t('KEYWORD_COLLECTION_CREATE_BTN') }}
      </Button>
    </div>
    <div>
      <div v-if="!listCollection.length">
        <Alert
          type="warning"
          show-icon
        >
          {{ $t('KEYWORD_LIST_EMPTY') }}
        </Alert>
      </div>

      <List>
        <ListItem
          v-for="(item, index) in listCollectionShow"
          :key="item._id"
        >
          <ListItemMeta
            :title="item.title"
            :description="item.description"
          />

          <template #action>
            <li>
              <Button
                type="text"
                size="small"
                class="text-success"
                :loading="item.loading"
                @click="onExport(item, index)"
              >
                {{ $t('EXPORT_BTN') }}
              </Button>
            </li>
            <li>
              <Button
                type="text"
                size="small"
                class="text-secondary"
                :loading="item.loading"
                @click="onEdit(item)"
              >
                {{ $t('EDIT_BTN') }}
              </Button>
            </li>
            <li>
              <Button
                type="text"
                size="small"
                class="text-primary"
                :loading="item.loading"
                @click="onOpen(item)"
              >
                {{ $t('OPEN_BTN') }}
              </Button>
            </li>
            <li style="width: 50px">
              <Button
                type="text"
                size="small"
                class="text-danger"
                :loading="item.loading"
                @click="onRemove(item)"
              >
                {{ $t('DELETE_BTN') }}
              </Button>
            </li>
          </template>
        </ListItem>
      </List>
    </div>

    <div>
      <Modal
        v-model="popupCreate"
        :title="$t('KEYWORD_COLLECTION_NEW')"
        @on-ok="handlerPopup"
      >
        <Form>
          <FormItem :label="$t('KEYWORD_COLLECTION_INPUT_NAME')">
            <Input
              v-model="formCreate.name"
              type="text"
            />
          </FormItem>
          <FormItem :label="$t('KEYWORD_COLLECTION_INPUT_DESCRIPTION')">
            <Input
              v-model="formCreate.description"
              type="text"
            />
          </FormItem>
        </Form>
      </Modal>
    </div>
  </div>
</template>

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

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