<template>
  <div id="app">
    <el-row style="padding-top:10px;padding-bottom:10px;padding-left:10px;padding-right:10px;">
        <el-col :span="24" class="toolbar" style="padding-bottom: 10px;">
          <el-col :span="6" class="toolbar" style="padding-bottom: 0px;">
            <el-input placeholder="请输入过滤条件" width="250"></el-input>
          </el-col>
          <el-col :span="18" class="toolbar" align="right" style="padding-left: 10px;">
            <el-button type="primary" icon="search" v-on:click="handleQuery">查询</el-button>
            <el-button type="primary" icon="plus">新增</el-button>
            <el-button icon="delete" type="danger" @click="handleDel">删除</el-button>
          </el-col>
        </el-col>
        <el-col :span="24">
          <tree-grid 
            :dataSource='data' 
            :columns='columns'
            :tree-structure="true"
            :tableType = 4
            :btns="btns"
            :selectAll="selectAll"
            :select="select"
          ></tree-grid>
        </el-col>
      </el-row>
  </div>
</template>

<script>
  import TreeGrid from '@/components/Template/TabPagin/TreeGrid'
  export default {
    data () {
      return {
        columns: [{
          title: '编码',
          dataIndex: 'code',
          sortable: true
        }, {
          title: '名称',
          dataIndex: 'name',
          sortable: true,
          align: 'center'
        }, {
          title: '状态',
          dataIndex: 'status'
        }, {
          title: '备注',
          dataIndex: 'remark'
        }],
        btns: {
          // type: 'button', // 如果单元格类型是按钮，必须要写btns参数
          btnArr: [
            {
              label: '修改', // 按钮的名称
              value: 'modify', // 按钮的值
              // type: 'text', // 按钮类型
              functionName: this.modify // 按钮的方法
            },
            {
              label: '删除',
              value: 'delete',
              type: 'danger',
              functionName: this.delete
            }
          ],
          value: 'operation',
          label: '操作'
        },
        data: [
          {
            id: '1',
            code: '0001',
            parentId: '0',
            name: '测试数据1',
            status: '启用',
            remark: '测试数据测试数据'
          }, {
            id: '2',
            code: '0002',
            parentId: '0',
            name: '测试数据2',
            status: '启用',
            remark: '测试数据测试数据',
            children: [{
              id: '01',
              code: '00001',
              parentId: '2',
              name: '测试数据01',
              status: '启用',
              remark: '测试数据测试数据'
            }, {
              id: '02',
              code: '00002',
              parentId: '2',
              name: '测试数据02',
              status: '启用',
              remark: '测试数据测试数据',
              children: [{
                id: '021',
                code: '1234',
                parentId: '02',
                name: '3333',
                status: '启用',
                remark: '测试数据测试数据'
              }]
            }]
          }, {
            id: '3',
            code: '0003',
            parentId: '0',
            name: '测试数据3',
            status: '启用',
            remark: '测试数据测试数据'
          }, {
            id: '4',
            code: '0004',
            parentId: '0',
            name: '测试数据4',
            status: '启用',
            remark: '测试数据测试数据'
          }
        ],
        selectSells: []
      }
    },
    components: {
      TreeGrid
    },
    methods: {
      modify (index, row) {
        this.$message(row.name + '现在不可修改')
      },
      delete (index, row) {
        this.$confirm('确认删除该记录吗?', '提示', {
          type: 'warning'
        }).then(() => {
          let id = row.id
          this.data = this.data.filter(u => !id.includes(u.id))
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        // this.queryData(this.currentPage, this.pageSize)
        })
      },
      handleDel () {
        let ids = this.selectSells.map(item => item.id)
        console.log(ids)
        if (ids.length === 0) {
          this.$message({
            message: '请选择要删除的记录',
            type: 'warning'
          })
        } else {
          this.$confirm('确认删除该记录吗?', '提示', {
            type: 'warning'
          }).then(() => {
            this.data = this.data.filter(u => !ids.includes(u.id))
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          })
        }
      },
      handleQuery () {

      },
      select (selection, index) {
        this.selectSells = selection
      },
      selectAll (selection) {
        this.selectSells = selection
      },
      rowClick (data, index, event) {
        console.log('当前行数据:' + data)
        console.log('点击行号:' + index)
        console.log('点击事件:' + event)
      },
      selectionClick (arr) {
        console.log('选中数据id数组:' + arr)
      },
      sortClick (key, type) {
        console.log('排序字段:' + key)
        console.log('排序规则:' + type)
      }
    }
  }
</script>

