<template>
  <div class="table">
    <by-table :propConfig="config" ref="table" @detail="detail" @onChange="onChange">
      <template v-slot:slotField='{ row }'>插槽：{{ row.name }}</template>
    </by-table>
    <el-button type="primary" @click="setData">设置数据</el-button>
    <el-button type="primary" @click="validate">表格验证</el-button>
    <el-button type="primary" @click="getSelect">获取选中数据</el-button>
    <div>树型表格</div>
    <by-table :propConfig="treeConfig" ref="treeTable"></by-table>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class DemoTable extends Vue {


  config:any={
    attr:{
      size:'mini',
      height:240,
      seq:true,
      align:'center',
      checkbox:true,
      editRules:{
        name:[
          //必填
          { required: true, message: '请输入姓名'}, 
          //自定义验证
          { 
            validator: (parames:any) => {  //表格验证提示信息
              if (parames.cellValue && !/^\w+$/.test(parames.cellValue)) {
                return new Error('名称格式不正确，必须字母或数字')
              } 
            },
            validatorHandle:(v:any) => { //判断验证是否通过
              if (v && !/^\w+$/.test(v)) {
                return false
              } else{
                return true
              }
            }
          }
        ]
      }
    },
    columns:[{
      title:'id',
      field:'id',
      width:50
    },
    {
      title:'姓名',
      field:'name',
      isDetail:true,
      width:100,
			component:'by-input'
    },
    {
      title:'日期',
      field:'time',
      component:'by-input'
    },
    {
      title:'插槽',
      field:'slotField',
      slot:true
    },
    {
      title:'操作',
      action:true,
      plugins:[{
        icon:'el-icon-edit',
        name:'编辑',
        audit:'',
        event:{
          show:(item:any) => {
            //是否显示该按钮
            // console.log('该行数据：',item);
            return false
          },
          click:(item:any) => {
            console.log('该行数据：',item)
          }
        }
      },{
        name:'查看',
        event:{
          click:(item:any) => {
            console.log('该行数据：',item)
            this.fun();
            console.log('this:',this)
          }
        }
      }]
    }]
  }
  data:Array<any>=[{
    id:1,
    name:'',
    time:'2023-04-07'
  },{
    id:2,
    name:'',
    time:'2023-04-08'
  },{
    id:3,
    name:'',
    time:'2023-04-09'
  }]
  data2:Array<any>=[{
    id:1,
    name:'张三',
    time:'2023-04-12'
  },{
    id:2,
    name:'李四',
    time:'2023-04-18'
  },{
    id:3,
    name:'王五',
    time:'2023-04-19'
  }]


  treeConfig:any={
    attr:{
      size:'mini',
      height:400,
      seq:true,
      treeNodeSeq:true,
      seqWidth:140,
      align:'center',
      transform:true,
      rowField:'menuId',
      parentField:'parentId',

    },
    columns:[{
      // treeNode:true,
      title:'menuId',
      field:'menuId',
      width:150
    },
    {
      title:'标题',
      field:'menuName',
      width:200
    }]
  }
  treeData:Array<any>=[]

  mounted(){
    setTimeout(()=>{
      (this as any).$refs.table?.setValue(this.data);
    },500)
    this.request();
  }
  validate() {

    let v = (this.$refs.table as any).validate();
    if(v){
      this.$message({message:'成功',type:'success'})
    }else{
      this.$message({
        message:'失败',
        type:'warning'
      })
    }
  }
  onChange(data:Array<any>){
    console.log('表格数据：',data)
  }
  fun(){
    console.log('操作00000000')
  }
  setData(){
    (this as any).$refs.table?.setValue(this.data2);
  }
  detail(row:any){
    console.log('该行详情',row);
  }
  getSelect(){
    let data:Array<any>=(this as any).$refs.table.getSelectData();
    console.log('选中数据为：',data);
  }
  request(){
    (this as any).$request({
      url: '/system/menu/list',
      method: 'get'
    }).then((res:any) => {
      this.treeData = res.data;
      (this as any).$refs.treeTable.setValue(this.treeData);
    })
  }
}
</script>
<style lang="scss" scoped>

</style>