<template>
    <div>
        <Test />
        <hr/>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
        <button @click="click">--[button]--</button>
        <el-button @click="click" size="mini">button1</el-button>
        <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
        <hi-table style="height:250px" emptyText="我是空数据！" :isBigData="isBigData" :isEdit="isEdit" hasSelection hasRowNumber :showSummary="true" :model="tableData" :columns="columns" :rules="rules" :tree-props="treeProps" :row-key="rowKey" :span-method="arraySpanMethod"></hi-table>        
        <HiPagination :page-count="5" />
    </div>
</template>
<script>
    import Test from "./test"
    // import biaodan from "/project/zhuomianduanyanshi/biaozhundanju/view/biaodan/dtv/1.0.0/desktop/biaodan.vue"
    // import BizEntity_jR02Xd from "/project/zhuomianduanyanshi/biaozhundanju/dataset/gongyingshang/bizstore/1.0.0/_extFile/desktop/BizEntity_jR02Xd.js"
    import { 
        HiTable,
        HiPagination
    } from "hi-ui"
    // console.log(HiTable)
    export default {
        components: {
            Test,
            HiTable,
            HiPagination
        },
        data() {
            return {
                isBigData: true,
                isEdit: true,
                num: 0,
                inputNumber: {
                    precision: 2,
                    format: "￥0.00",
                    controlsPosition: "right",
                },
                tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
                rules: {
                    createTime: [{
                        required: true,
                        message: "请选择日期",
                        trigger: "blur",
                    }, ],
                    FMoney: [{
                        min: 1,
                        trigger: "blur",
                    }, ],
                    FName: [{
                            required: true,
                            message: "请输入活动名称",
                            trigger: "blur",
                        },
                        {
                            min: 3,
                            max: 5,
                            message: "长度在 3 到 5 个字符",
                            trigger: "blur",
                        },
                    ],
                },
                treeProps: {
                    children: "children",
                    hasChildren: "hasChildren"
                },
                rowKey: "id",
                columns: [{
                        label: "自定义列",
                        width: 100,
                        slot: [{
                                element: "el-button",
                                label: "调单",
                                props: {
                                    size: "mini",
                                    round: true
                                },
                                handles: {
                                    click: this.handleClick
                                }
                            },
                            {
                                element: "el-tag",
                                label: "默认标签",
                                props: {},
                                handles: {
                                    click: this.handleClick
                                }
                            },
                        ],
                    },
                    {
                        name: "FName",
                        label: "姓名1",
                        element: "el-input",
                        width: 100,
                        formatFn: function(value) {
                            return "格式化：" + (value || "");
                        },
                        required: true,
                    },
                    {
                        name: "createTime",
                        label: "申请时间",
                        element: "el-date-picker",
                        required: true,
                        width: 100,
                        props: {
                            type: "datetime",
                            format: "yyyy-MM-dd HH:mm:ss",
                            valueFormat: "yyyy-MM-dd",
                        },
                    },
                    {
                        label: "基本信息",
                        align: "center",
                        children: [{
                                name: "FAge",
                                label: "年龄2",
                                element: "hi-number",
                                sortable: true,
                                summary: "avg",
                                formType: "dbInt",
                                props: {
                                    step: 2,
                                    format: "0岁",
                                },
                            },
                            {
                                name: "FSex",
                                label: "性别3",
                                element: "el-select",
                                props: {
                                    children: [{
                                            element: "el-option",
                                            props: {
                                                label: "男",
                                                value: "0"
                                            },
                                        },
                                        {
                                            element: "el-option",
                                            props: {
                                                label: "女",
                                                value: "1"
                                            },
                                        },
                                    ],
                                },
                            },
                        ],
                    },
                    {
                        name: "FMoney",
                        label: "钱",
                        element: "hi-number",
                        formType: "dbDouble",
                        props: {
                            precision: 2,
                            format: "￥0.00",
                            "controls-position": "right",
                        },
                        summary: "sum",
                    },
                    {
                        width: 200,
                        name: "FBiaoXian",
                        label: "表现",
                        element: "el-rate",
                        props: {
                            showText: true,
                        },
                    },
                    {
                        width: 200,
                        name: "FUse",
                        label: "启用",
                        element: "el-checkbox",
                        props: {},
                    },
                    {
                        width: 200,
                        name: "FDept",
                        label: "部门",
                        element: "hi-data-select",
                        props: {
                            lookup: {
                                storeCfg: {
                                    modelFile: "purchase/order/dataset/OrderEntity.xml",
                                    //数据集配置  部门
                                    id: "dept",
                                    //主键
                                    primary: ["id"],
                                    //操作权限
                                    operations: [
                                        "oinsert",
                                        "odelete",
                                        "oquery",
                                        "omodify",
                                    ],
                                    fields: {
                                        FID: {
                                            name: "FID", //字段ID
                                            label: "部门ID", //字段描述
                                            dbtype: "dbInt", //数据类型
                                            required: true,
                                            readonly: true,
                                            length: 50,
                                            rules: [],
                                        },
                                        FNUMBER: {
                                            name: "FNUMBER", //字段ID
                                            label: "部门描述", //字段描述
                                            dbtype: "dbText", //数据类型
                                        },
                                        FUSERID: {
                                            name: "FUSERID", //字段ID
                                            label: "部门名称", //字段描述
                                            dbtype: "dbString", //数据类型
                                        },
                                    },
                                },
                                active: true,
                                multiSelect: false,
                                returnFields: {
                                    FDept: "FNUMBER",
                                },
                                columns: [{
                                        name: "FID",
                                        label: "FID",
                                        width: 200,
                                    },
                                    {
                                        name: "FNUMBER",
                                        label: "编号",
                                        width: 400,
                                    },
                                    {
                                        name: "FUSERID",
                                        label: "FUSERID",
                                    },
                                ],
                                queryOption: {
                                    fields: [{
                                            name: "FID",
                                            label: "FID",
                                            element: "el-input",
                                        },
                                        {
                                            name: "FNUMBER",
                                            element: "el-input",
                                            label: "编号",
                                        },
                                        {
                                            name: "FUSERID",
                                            element: "el-input",
                                            label: "FUSERID",
                                            value: "admin",
                                        },
                                    ],
                                },
                            },
                        },
                    },
                ],
            }
        },
        mounted() {
            // console.log('this.$dsContainer----: ' , this.$dsContainer);
        },
        methods: {
            click() {
                alert(1)
            },
            arraySpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 3) {
                    if (rowIndex % 2 === 0) {
                        return {
                            rowspan: 2,
                            colspan: 1,
                        };
                    } else {
                        return {
                            rowspan: 0,
                            colspan: 0,
                        };
                    }
                }
            },
        }
    }
</script>
<style lang="scss">
    html,body{
        display: block;
        height: 100%;
    }
    button {
        background: #efefee;
        padding: 5px 10px;
        font-size: 12px;
        border: 1px #eee solid;
        border-radius: 5px; // transform: rotate(45deg);
    }
</style>