<template>
  <div class="content">
    <div class="topSearch">
      <div class="left">
        <Input style="width:280px" placeholder="请输入用户ID或内容" v-model="searchParams.title" search enter-button  @on-search='search(searchParams)'/>
         <span class="lable">
              属性
            </span>
             <Select  v-model="searchParams.type" style="width:120px" @on-change='selectChange'>
              <Option
                v-for="item in types"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</Option
              >
            </Select>
             <span class="lable">
             排序规则
            </span>
             <Select  v-model="searchParams.orderType" style="width:120px" @on-change='selectChange'>
              <Option
                v-for="item in orderTypes"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</Option
              >
            </Select>
      </div>
      <div class="right">
        <Button @click="add" type="primary">新增</Button>
        <Button type="error" @click="del">删除</Button>
      </div>
    </div>
     <Stable :data='data' @edit='edit' @select='select' @refresh='search(searchParams)'/>
     <Forms :visible.sync="visible" :search='search' :row='row'/>
     <div class="pagBox">
      <Pager class="margin-top-10"
               :config="config"
               @on-change="handlePager"></Pager>
      </div>
  </div>
</template>

<script>
import Stable from './table.vue'
import Forms from './form.vue'
import Pager from '@/view/common/Pager.vue'
import {
  treeholeList
} from '@/api/api'
export default {
  name: 'categories',
  components: {
    Stable,
    Forms,
    Pager
  },
  data () {
    return {
        types: [{id:0,name:'留言'},{id:1,name:'评论'}],
        orderTypes:[{id:0,name:'创建时间'},{id:1,name:'热度'}],
       searchParams: {
        page: 1,
        rows: 10,
        type: 0,
        orderType:0
      },
      config: { total: 0, size: 10, current: 1 },
      selectList: [],
      visible: false,
      draggableVisible: false,
      row: {},
      data: []
    }
  },
  methods: {
    selectChange(p) {
      console.log(p);
      this.search(this.searchParams);
    },
    handlePager (pager) {
      this.searchParams.page = pager.current
      this.searchParams.rows = pager.size
      this.search(this.searchParams)
    },
    edit (row) {
      this.visible = true
      console.log(row)
      this.row = row
    },
    add () {
      this.visible = true
      this.row = {
        id: 'add'
      }
    },
    select (val) {
      this.selectList = val
    },
    seq () {
      this.draggableVisible = true
    },
    del () {
      delBanners(this.selectList).then((res) => {
        if (res.code === 200) {
          this.$Message.success('删除成功')
          this.search()
        } else {
          this.$Message.error('删除失败')
        }
      })
    },
    search (p) {
      treeholeList(p).then((res) => {
        this.config.total = res.data.total
        this.config.size = res.data.size
        this.config.current = res.data.current
        this.data = res.data.records
      })
    }
  },
  mounted () {
    this.search(this.searchParams)
  }
}
</script>

<style lang="less"></style>
