import { BeTable, BeTableColumn} from '@brewer/beerui'
const indexMethod = (index) => {
	return index * 2;
}
const tableData = [{
	date: '2016-05-02',
	name: '王小虎',
	address: '上海市普陀区金沙江路 1518 弄'
}, {
	date: '2016-05-04',
	 name: '王小虎',
	 address: '上海市普陀区金沙江路 1517 弄'
}, {
	date: '2016-05-03',
	 name: '王小虎',
	 address: '上海市普陀区金沙江路 1519 弄'
}, {
	date: '2016-05-01',
	 name: '王小虎',
	 address: '上海市普陀区金沙江路 1519 弄'
}]
const placeholderRegexHandle = (v) => v === undefined || v === 'undefined'

		
<BeTable data={tableData} placeholder="-" placeholderRegex={placeholderRegexHandle} indexMethod={indexMethod}>
	<BeTableColumn width="600" type="index" prop='index' label='索引' />
    <BeTableColumn align='center' headeralign='left' width="355" prop='name' label='姓名' />
	<BeTableColumn prop='placeholder' label='placeholder' />
	<BeTableColumn prop="date" label="日期" />
	<BeTableColumn prop="address" label="地址" />
</BeTable>
	

		
let tableRowClassName = ({row, rowIndex}) => {
	if (rowIndex === 1) {
	return 'warning-row';
	} else if (rowIndex === 3) {
	return 'success-row';
	}
	return '';
};
	
		
<BeTable data={tableData} stripe border rowClassName={tableRowClassName}>
	<BeTableColumn prop="name" label="姓名" />
	<BeTableColumn prop="date" label="日期" />
	<BeTableColumn prop="address" label="地址" />
</BeTable>
		
	

		
		
<BeTable data={mutilTableData} height="250px" border>
	<BeTableColumn prop='date' label='日期' width='150' />
	<BeTableColumn label="配送信息">
		<BeTableColumn prop='name' label='姓名' width='120' />
		<BeTableColumn label="地址">
			<BeTableColumn prop='province' label='省份' width='120' />
			<BeTableColumn prop='city' label='市区' width='120' />
			<BeTableColumn prop='address' label='地址' width='300' />
			<BeTableColumn prop='zip' label='邮编' />
		</BeTableColumn>
	</BeTableColumn>
</BeTable>
	
	

		
const checkBoxTableData = [{
  ids: '1',
  date: '2016-05-03',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1518 弄'
}]
let toggleRowTable = null
const toggleRowSelectionHandle = (item) => {
	console.log('toggleRowTable', toggleRowTable);
	toggleRowTable.toggleRowSelection(item)
};
const handleSelectionChangeGetId = ({ detail }) => console.log('handleSelectionChangeGetId', detail);
const handleSelectionChangeGetRows = ({ detail }) => console.log('handleSelectionChangeGetRows', detail);

		
<BeButton on:click={() => toggleRowSelectionHandle([2, 3])}>切换第二、第三行的选中状态</BeButton>
<BeButton on:click={() => toggleRowSelectionHandle([])}>取消选择</BeButton>

<BeTable
bind:this={toggleRowTable}
label='ids'
data={checkBoxTableData}
on:handleSelectionChangeGetId={handleSelectionChangeGetId}
on:handleSelectionChangeGetRows={handleSelectionChangeGetRows}
>
	<BeTableColumn prop='selection' width="55" />
	<BeTableColumn prop='name' label='姓名' />
	<BeTableColumn prop='date' label='日期' />
</BeTable>

	

		
let clickBtn1 = (row) => {
	console.log('clickBtn1');
	console.log(row);
};
let clickBtn2 = () => {
	console.log('clickBtn2');
};
		
<BeTable data={tableTempData}>
	<BeTableColumn prop="name" label="姓名" />
	<BeTableColumn prop="date" label="日期" />
	<BeTableColumn prop="tableSlot" name='tableSlot1' label="操作1" />
	<BeTableColumn prop="tableSlot" name='tableSlot2' label="操作2" />
	<div slot="tableSlot1" let:prop={row}>
		<BeButton on:click={() => clickBtn1(row)}>默认1</BeButton>
		<BeButton>默认1</BeButton>
	</div>
	<div slot="tableSlot2">
		<BeButton on:click={clickBtn2}>默认2</BeButton>
		<BeButton>默认2</BeButton>
	</div>
</BeTable>