<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="分类管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <div slot="content"></div>
        <slot>
          <div>
            <Input style="width: 200px; margin-right: 10px" placeholder="关键字搜索" />
            <Button type="primary" @click="getType">查询</Button>
            <Button type="primary" style="margin-left: 10px" @click="$refs['addClassify'].isShow = true,$refs['addClassify'].type = 'add'">新增分类</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table :is-page="false" :list="list" :table-item="table" :indent="25" @editor="showEditor" @delete="deleteType">
    </xy-table>

<!--    <div style="display: flex;justify-content: flex-end;">-->
<!--      <Page :total="5" show-elevator />-->
<!--    </div>-->
    <addClassify ref="addClassify" @refresh="getType"></addClassify>
  </div>
</template>

<script>
import {index,destroy} from "@/api/type"

import addClassify from './components/addClassify'
import { Message } from 'element-ui'
export default {
  components:{
    addClassify
  },
  data() {
    return {
      select:{
        pageSize:10,
        pageIndex:1
      },

      list:[],
      table:[
        {
          prop:'name',
          label:'名称',
          align:'left'
        },
        {
          prop:'level',
          label:'排序'
        },
        {
          prop:'id',
          label:'id'
        }
      ]
    }
  },
  methods: {
    async getType(){
      const res = await index()
      this.list = res
    },

    deleteType(row){
      destroy({id:row.id}).then(res => {
        Message({
          type:'success',
          message:'删除成功'
        })
        this.getType()
      })
    },

    showEditor(row){
      this.$refs['addClassify'].type = 'editor'
      this.$refs['addClassify'].isShow = true
      this.$refs['addClassify'].id = row.id
      this.$refs['addClassify'].form = {
        pid:row.pid,
        name:row.name,
        sortnumber:row.sortnumber
      }
    }
  },
  mounted() {
    this.getType()
  }

}
</script>

<style scoped lang="scss">
</style>
