<template>
  <div>
    <by-bill :propConfig="config" @search="search" @onSmt="onSmt" ref="bill" @showLogBefore="showLogBefore" @onAdd="onAdd" @onUpdate="onUpdate" @resert="resert" @pagination="pagination" @detail="detail">
      <template v-slot:cus>我是插槽</template>
    </by-bill>
    <div style="clear: both;"></div>
    <div>
      <el-button type="primary" plain @click="setSourceValue">设置引单1数据</el-button><br/>
      <el-button type="primary" plain @click="setSourcePage">设置引单1分页</el-button><br/>
      <el-button type="primary" plain @click="setSmtValue">设置已提交数据</el-button><br/>
      <el-button type="primary" plain @click="setSmtPage">设置已提交分页</el-button><br/>
      <el-button type="primary" plain @click="setdraftsBoxValue">设置草稿箱数据</el-button><br/>
      <el-button type="primary" plain @click="setBillTableData">设置单据表格1数据</el-button><br/>
      <el-button type="primary" plain @click="getBillTableSelectData">获取单据表格1数据</el-button><br/>
      <el-button type="primary" plain @click="setReadonly">设置单据只读</el-button><br/>
    </div>
    
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class BillDemo extends Vue {
  config:any={
    attr:{
      // activeName:'smt'
    },
    source:[{
      title:'引单1',
      search:{
        attr:{
          size:'mini'
        },
        columns:[
          [{
            span:6,
            label:'创建时间',
            prop:'created',
            component:'by-date-picker',
            compConfig:{
              format:'yyyy-MM-dd',
              type:'datetime'
            }
          }]
        ]
      },
      tool:{
        tools:{
          edit:true,
          delete:true,
          search:true,
          refresh:true
        }
      },
      table:{
        attr:{
          size:'mini',
          seq:true,
          align:'center',
          checkbox:true
        },
        columns:[{
          title:'id',
          field:'id',
          width:50
        },
        {
          title:'姓名',
          field:'name',
          isDetail:true,
          width:100
        },
        {
          title:'日期',
          field:'time',
          // width:200
        }]
      }
    },{
      title:'引单2',
      search:{
        attr:{
          size:'mini'
        },
        columns:[
          [{
            span:6,
            label:'名称',
            prop:'name',
            component:'by-input'
          }]
        ]
      },
      tool:{
        tools:{
          edit:true,
          export:true,
          search:true,
          refresh:true
        }
      },
      table:{
        attr:{
          size:'mini',
          seq:true,
          align:'center',
          checkbox:true
        },
        columns:[{
          title:'id',
          field:'id',
          width:50
        },
        {
          title:'姓名',
          field:'name',
          width:100
        },
        {
          title:'日期',
          field:'time',
          // width:200
        }]
      }
    }],
    bill:{
      tool:{
        tools:{
          add:true,
          edit:true
        }
      },
      form:{
        attr:{
          size:'small'
        },
        columns:[
          [{
            span:6,
            label:'创建时间',
            prop:'created',
            component:'by-date-picker',
            compConfig:{
              format:'yyyy-MM-dd HH:mm:ss',
              type:'datetime'
            }
          }]
        ]
      },
      log:{
        request:{
          url:'/supply/supplyEntryOrderOperateLog/page',
          method:'GET'
        }
      },
      tableConfig:[{
        title:'单据表格1数据',
        tool:{
          tools:{
            add:true
          }
        },
        table:{
          attr:{
            size:'mini',
            height:240,
            seq:true,
            align:'center',
            checkbox:true
          },
          columns:[{
            title:'id',
            field:'id',
            width:50
          },
          {
            title:'姓名',
            field:'name',
            width:100
          },{
            title:'操作',
            action:true,
            plugins:[{
              icon:'el-icon-edit',
              name:'编辑',
              audit:'',
              event:{
                click:(item:any) => {
                  console.log('该行数据：',item)
                }
              }
            }]
          }]
        }
      },{
        title:'单据表格2数据',
        tool:{
          tools:{
            add:true
          }
        },
        table:{
          attr:{
            size:'mini',
            height:140,
            seq:true,
            align:'center',
            checkbox:true
          },
          columns:[{
            title:'id',
            field:'id',
            width:50
          },
          {
            title:'姓名',
            field:'name',
            width:100
          },{
            title:'操作',
            action:true,
            plugins:[{
              icon:'el-icon-edit',
              name:'编辑',
              audit:'',
              event:{
                click:(item:any) => {
                  console.log('该行数据：',item)
                }
              }
            }]
          }]
        }
      }]
    },
    smt:{
      search:{
        attr:{
          size:'mini',
          rules:{
            name:[{
              required: true, message: '请输入名称', trigger: 'blur'
            }]
          }
        },
        columns:[
          [{
            span:6,
            label:'创建时间',
            prop:'created',
            component:'by-date-picker',
            compConfig:{
              format:'yyyy-MM-dd',
              type:'datetime'
            }
          }]
        ]
      },
      tool:{
        tools:{
          smt:true,
          export:true,
          search:true,
          refresh:true
        }
      },
      table:{
        attr:{
          size:'mini',
          seq:true,
          align:'center',
          checkbox:true
        },
        columns:[{
          title:'id',
          field:'id',
          width:50
        },
        {
          title:'姓名',
          field:'name',
          isDetail:true,
          width:100
        },
        {
          title:'日期',
          field:'time',
          // width:200
        }]
      }
    },
    draftsBox:{
      search:{
        attr:{
          size:'mini',
          rules:{
            name:[{
              required: true, message: '请输入名称', trigger: 'blur'
            }]
          }
        },
        columns:[
          [{
            span:6,
            label:'名称',
            prop:'name',
            component:'by-input'
          }]
        ]
      },
      tool:{
        tools:{
          smt:true,
          export:true,
          search:true,
          refresh:true
        }
      },
      table:{
        attr:{
          size:'mini',
          seq:true,
          align:'center',
          checkbox:true
        },
        columns:[
        {
          title:'姓名',
          field:'name',
          width:100
        },
        {
          title:'日期',
          field:'time',
          // width:200
        }]
      }
    },
    customs:[{
      label:'自定义',
      name:'cus'
    }]
  }

  mounted(){
    setTimeout(()=>{
      (this.$refs.bill as any).setBillFormValue({
        id:'1000032023060100001'
      })
    },500)
    
  }
  showLogBefore(){
    
  }
  setReadonly(){
    let c = (this as any).$lodash.cloneDeep(this.config.bill);
    //表单不可操作
    c.form.attr.readonly = true;
    //修改单据表格内工具栏
    for(const item of c.tableConfig){
      delete item.tool
    }
    (this.$refs.bill as any).setBillConfig(c)
  }
  setBillTableData(){
    let data:Array<any>=[{
      id:1,
      name:'张三11111',
    },{
      id:2,
      name:'李四',
    }];
    (this.$refs.bill as any).setBillTableValue(data,0);
  }
  getBillTableSelectData(){
    const d = (this.$refs.bill as any).getBillTableSelect(0);
    console.log('单据表格1已选数据：',d);
  }
  search(parames:any){
    console.log('搜索回传参数',parames);
  }
  resert(parames:any){
    console.log('重置回传参数',parames);
  }
  onSmt(n:string){
    console.log(n+':工具栏执行操作onSmt')
  }
  onAdd(n:string){
    console.log(n);
  }
  onUpdate(n:string){
    console.log(n+':工具栏执行操作onUpdate')
  }
  setSourceValue(){
    let data:Array<any>=[{
      id:1,
      name:'王五',
      time:'2023-02-02'
    },{
      id:2,
      name:'李四',
      time:'2023-02-02'
    }];
    (this.$refs.bill as any).setSourceTableData(0,data);
  }
  setSmtValue(){
    let data:Array<any>=[{
      id:1,
      name:'张三',
      time:'2023-02-02'
    },{
      id:2,
      name:'李四',
      time:'2023-02-02'
    }];
    (this.$refs.bill as any).setTabTableValue('smt',data);
  }
  setSourcePage(){
    (this.$refs.bill as any).setSourcePage(0,{
      pageNo:1,
      pageSize:20,
      total:100
    });
  }
  detail(parames:any){
    console.log('点击详情：',parames)
  }
  pagination(parames:any){
    console.log('点击分页：',parames)
  }
  setSmtPage(){
    (this.$refs.bill as any).setTablePage('smt',{
      pageNo:1,
      pageSize:10,
      total:500
    });
  }
  setdraftsBoxValue(){
    let data:Array<any>=[{
      name:'王五',
      time:'2023-02-02'
    },{
      name:'赵六',
      time:'2023-02-02'
    }];
    (this.$refs.bill as any).setTabTableValue('draftsBox',data);
  }
}
</script>
