<template>
  <div class="global-page">
    <Card>
      <div class="search-con">
        <Input
          placeholder="请输入问题关键字"
          class="search-input"
          v-model="searchContent.keyword"
          style="width: 200px"
          clearable
        />
        <Select
          placeholder="请选择问题导航"
          class="search-input"
          style="width: 200px;margin-right: 20px"
          v-model="searchContent.navigationId"
          @on-change="handleChange"
        >
          <Option value>全部</Option>
          <Option
            v-for="(item, index) of navigationList"
            :value="item.navigationId"
            :key="'series-option-' + index"
          >{{ item.navigationName }}</Option
          >
        </Select>

        <ButtonGroup class="search-btngroup">
              <Button type="primary" @click="handleSearch">查找</Button>
              <Button type="primary" @click="handleRefresh">
                <Icon type="md-refresh" />
              </Button>
            </ButtonGroup>
        <Button type="info" @click="handleAdd" style="margin-left: 20px">+ 添加常见问题</Button>
      </div>
      <tables
        ref="tables"
        editable
        pagable
        v-model="tableData"
        :columns="columns"
        :currentPage="searchContent.pageNum"
        :pageSize="searchContent.pageSize"
        :totalSize="totalSize"
        :loading="loading"
        @on-change="handleCurrentChange"
      />
    </Card>
  </div>
</template>
<script>
import Tables from '_c/tables'
import { formatTime } from '@/libs/tools'
export default {
  inject: ['reload'],
  components: {
    Tables
  },
  data () {
    return {
      navigationList: [],
      searchContent: {
        keyword: '',
        navigationId: '',
        page: 1,
        pageSize: 10
      },
      tableData: [],
      columns: [
        { title: '编号', type: 'index', align: 'center', width: 100 },
        { title: '导航', key: 'navigationName', align: 'center', minWidth: 100 },
        { title: '问题', key: 'question', align: 'left', minWidth: 100 },
        { title: '回答', key: 'answer', align: 'left', minWidth: 100 },
        { title: '更新时间',
          key: 'updateTime',
          align: 'center',
          minWidth: 130,
          render: (h, params) => {
            return h('span', formatTime(params.row.updateTime))
          }
        },
        { title: '操作',
          key: 'operate',
          align: 'center',
          minWidth: 130,
          render: (h, params) => {
            let editBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: this.handleUpdate(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '编 辑'
            )
            let delBtn = h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: this.handleDelete(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '删 除'
            )
            return h('div', [editBtn, delBtn])
          }
        }
      ],
      totalSize: 0,
      loading: false
    }
  },
  methods: {
    requestData () {
      this.loading = true
      this.api({
        apiName: 'getSysQuestionList',
        postdata: this.searchContent,
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.tableData = res.data.records
          this.totalSize = res.data.total
        }
      })
    },
    getNavigationList () {
      this.api({
        apiName: 'getSysNavigationList',
        success: (res) => {
          this.navigationList = res.data
        }
      })
    },
    handleSearch () {
      this.requestData()
    },
    handleRefresh () {
      this.reload()
    },
    handleChange (e) {
      this.searchContent.navigationId = e
      // this.requestData()
    },
    handleAdd () {
      this.$router.push({ name: 'add_question' })
    },

    handleUpdate (row) {
      return () => {
        let query = { questionId: row.questionId }
        this.$router.push({ name: 'edit_question', query })
      }
    },
    handleDelete (row) {
      return () => {
        let questionId = row.questionId
        this.$Modal.confirm({
          title: '删除',
          content: `确认要删除此条数据吗 ？`,
          onOk: () => {
            this.api({
              apiName: 'deleteSysQuestion',
              postdata: questionId,
              success: (res) => {
                this.requestData()
                this.$Notice.success({ title: `删除成功！` })
              }
            })
          }
        })
      }
    },
    handleCurrentChange (pageNum) {
      this.searchContent.pageNum = pageNum
      this.requestData()
    }
  },
  created () {
    this.getNavigationList()
    this.requestData()
  }
}
</script>
<style lang="less" scoped>
  .search-con {
    padding: 10px 0;
  }
  .search-input {
    margin-right: 10px;
  }
</style>
