<template>
  <div>
    <div class="text-center mb-20">
      <div class="mb-5">
        <Form
          :model="formAdd"
          inline
        >
          <FormItem prop="user">
            <Input
              v-model="formAdd.input"
              type="textarea"
              style="width: 400px"
              :placeholder="$t('KEYWORD_MASS_INPUT')"
            />
          </FormItem>
          <FormItem>
            <Button
              type="primary"
              :loading="formAdd.loading"
              :disabled="!formAdd.input"
              @click="handlerInput"
            >
              {{ $t('KEYWORD_ADD_ITEM_MASS') }}
            </Button>
          </FormItem>
        </Form>
      </div>

      <div>
        <Form
          :model="formAdd"
          inline
        >
          <FormItem prop="user">
            <Input
              v-model="formAdd.keyword"
              type="text"
              :placeholder="$t('KEYWORD_ROW_KEYWORD')"
            />
          </FormItem>
          <FormItem prop="password">
            <Input
              v-model="formAdd.price"
              type="number"
              :placeholder="$t('KEYWORD_ROW_PRICE')"
            />
          </FormItem>
          <FormItem>
            <Button
              type="primary"
              :loading="formAdd.loading"
              :disabled="!addBtnActive"
              @click="handleSubmit"
            >
              {{ $t('KEYWORD_ADD_ITEM_BTN') }}
            </Button>
          </FormItem>
        </Form>
      </div>
    </div>
    <div>
      <Table
        :loading="tableKeyword.loading"
        :columns="tableKeyword.column"
        :data="tableKeyword.data"
        highlight-row
        size="small"
      >
        <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="onChange(row, 'type')"
          />
        </template>
        <template
          slot="price"
          slot-scope="{ row }"
        >
          <Input
            v-model="row.price"
            type="number"
            style="width: 100px"
            size="small"
            @on-change="onChange(row, 'price')"
          />
        </template>
        <template
          slot="note"
          slot-scope="{ row }"
        >
          <Input
            v-model="row.note"
            size="small"
            @on-change="onChange(row, 'note')"
          />
        </template>
        <template
          slot="active"
          slot-scope="{ row }"
        >
          <Checkbox
            v-model="row.active"
            @on-change="onChange(row, 'active')"
          />
          <span>
            {{ $t('STATUS_ACTIVE') }}
          </span>
        </template>
        <template
          slot="action"
          slot-scope="{ row }"
        >
          <Button
            type="error"
            ghost
            size="small"
            @click="onRemove(row)"
          >
            <span>{{ $t('REMOVE_BTN') }}</span>
          </Button>
        </template>
      </Table>
    </div>
  </div>
</template>

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

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