<template>
    <div class="search-key-page">
      <Card>
        <div class="add-keyword">
          <div class="tips" style="color:#FF0000">最多可以配置20个关键字</div>
          <Button type="info" @click="handleAdd">+ 新增关键字</Button>
        </div>
        <tables
          ref="tables"
          editable
          v-model="tableData"
          :columns="columns"
          :loading="loading"
        />
      </Card>
      <Modal
        title="添加关键字"
        v-model="modelStatus"
        :mask-closable="false"
      >
        <div class="model-item">
          <label class="label">关键字：</label>
          <Input
            placeholder="请输入关键字"
            class="search-input"
            v-model="keyword"
          />
        </div>
        <div class="model-item">
          <label class="label">显示顺序：</label>
          <Input
            placeholder="请输入显示顺序"
            class="search-input"
            type="number"
            v-model="displayOrder"
          />
        </div>
        <div slot="footer">
          <Button
            type="primary"
            @click="handleSure"
          >
            确定
          </Button>
        </div>
      </Modal>
    </div>
</template>
<script>
import Tables from '_c/tables'
export default {
  name: 'search-keyword',
  components: {
    Tables
  },
  data () {
    return {
      modelStatus: false,
      keyword: '',
      displayOrder: '',
      tableData: [],
      columns: [
        { title: '关键字', key: 'keyword', minWidth: 200, align: 'center' },
        { title: '排序', key: 'displayOrder', minWidth: 200, align: 'center' },
        {
          title: '操作',
          key: 'operate',
          minWidth: 200,
          // fixed: 'right',
          align: 'center',
          render: (h, params) => {
            let deleteBtn = h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: this.handleDelete(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '删 除'
            )
            return h('div', [deleteBtn])
          }
        }
      ],
      loading: false
    }
  },
  methods: {
    requestData () {
      this.loading = true
      this.api({
        apiName: 'getKeywordList',
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.tableData = res.data
        }
      })
    },

    handleAdd () {
      if (this.tableData.length == 20) {
        this.$Notice.warning({ title: '数据上限到达20条，请先删除其它数据再添加！' })
        return
      }
      this.keyword = ''
      this.displayOrder = ''
      this.modelStatus = true
    },
    handleDelete (row) {
      return () => {
        let { operationKeywordId } = row
        this.$Modal.confirm({
          title: '删除',
          content: `您确认要删除当前选项吗？`,
          onOk: () => {
            this.api({
              apiName: 'deleteKeyword',
              postdata: operationKeywordId,
              success: () => {
                this.requestData()
                this.$Notice.success({ title: `删除成功！` })
              }
            })
          }
        })
      }
    },
    handleSure () {
      let { keyword, displayOrder } = this
      if (!keyword) {
        this.$Message.warning('请输入关键字！')
        return
      }
      if (!displayOrder) {
        this.$Message.warning('请输入显示顺序！')
        return
      }
      if (displayOrder < 0 || !/^\d+$/.test(displayOrder)) {
        this.$Message.warning('显示顺序输入格式有误！')
        return
      }
      this.api({
        apiName: 'addKeyword',
        postdata: { keyword, displayOrder },
        complete: () => {
          this.modelStatus = false
        },
        success: () => {
          this.$Notice.success({ title: `新增成功！` })
          this.requestData()
        }
      })
    }
  },
  created () {
    this.requestData()
  }
}
</script>

<style scoped lang="less">
  .add-keyword {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between;
    .tips {
      margin-right: 20px;
    }
  }
  .model-item {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    .label {
      display: inline-block;
      width: 100px;
      text-align: right;
    }
  }
</style>
