<template>
    <div class="page">
        <LayoutTable :data="tableData" :config="tableConfig">
                    </LayoutTable>

    </div>
</template>

<script>
    import table from "@/assets/mixins/table";
    export default {
        components: {
        },
        mixins: [table],
        created() {
        },
        methods: {
            renderTable(tableData) {
                return (
                    <el-table stripe data={tableData} class="total-table">
                    {this.columnSet.map((item) => this.renderTableColumn(item))}
                    </el-table>
                );
            },
            renderTableColumn(options) {
                return (
                    <el-table-column
                        prop={options.prop}
                        label={options.label}
                        width={options.width}
                    >
                    </el-table-column>
                 );
            },
        },
        data() {
            return {
                /** 子表列元素 */
                columnSet:[
                    {prop:"customerId",label:"用户ID",width:100},
                    {prop:"productId",label:"产品",width:100},
                    {prop:"productKey",label:"平台为产品颁发的全局唯一标识符",width:100},
                    {prop:"deviceId",label:"设备ID",width:100},
                    {prop:"deviceName",label:"设备名称",width:100},
                    {prop:"deviceTopicHandle",label:"设备对该Topic的操作，可设置为发布、订阅、发布和订阅。",width:100},
                    {prop:"topic",label:"设备的具体是topic信息，根据产品topic信息生产",width:100},
                    {prop:"deviceTopicRemark",label:"描述",width:100},
                ],
                config: {
                    search: [
                        {
                            name: "customerId",
                            type: "text",
                            label: "用户ID",
                            fuzzy: true
                        },
                        {
                            name: "productId",
                            type: "text",
                            label: "产品",
                            fuzzy: true
                        },
                        {
                            name: "deviceName",
                            type: "text",
                            label: "设备名称，设置设备名称。 设备名称在产品内具有唯一性。支持英文字母、数字、短划线（-）、下划线（_）、at（@）、英文句号（.）和英文冒号（:），长度限制为4~32个字符。",
                            fuzzy: true
                        },
                        {
                            name: "deviceRemark",
                            type: "text",
                            label: "设备备注，设置备注名称。支持中文、英文字母、日文、数字和下划线（_），长度限制为4~64个字符，",
                            fuzzy: true
                        },
                        {
                            name: "deviceSecret",
                            type: "text",
                            label: "平台为设备颁发的设备密钥，用于认证加密。需与DeviceName成对使用。",
                            fuzzy: true
                        },
                        {
                            name: "productKey",
                            type: "text",
                            label: "平台为产品颁发的全局唯一标识符",
                            fuzzy: true
                        },
                        {
                            name: "connectStatus",
                            type: "checkbox",
                            label: "连接状态，(0.离线，1.在线，2.未激活)",
                            fuzzy: true
                        },
                        {
                            name: "useStatus",
                            type: "checkbox",
                            label: "启用状态 (0.停用，1.启用，2.测试)",
                            fuzzy: true
                        },
                        {
                            name: "onlineTime",
                            type: "date",
                            label: "最近上线时间",
                            fuzzy: true
                        },
                        {
                            name: "offlineTime",
                            type: "date",
                            label: "最近离线时间",
                            fuzzy: true
                        },
                        {
                            name: "createUserId",
                            type: "text",
                            label: "创建用户",
                            fuzzy: true
                        },
                    ],
                    columns: [
                        {type: "selection", width: 60},
                        {label: "用户ID", prop: "customerId", formatter: this.formatterString},
                        {label: "产品", prop: "productId", formatter: this.formatterString},
                        {label: "设备名称，设置设备名称。 设备名称在产品内具有唯一性。支持英文字母、数字、短划线（-）、下划线（_）、at（@）、英文句号（.）和英文冒号（:），长度限制为4~32个字符。", prop: "deviceName"},
                        {label: "设备备注，设置备注名称。支持中文、英文字母、日文、数字和下划线（_），长度限制为4~64个字符，", prop: "deviceRemark"},
                        {label: "平台为设备颁发的设备密钥，用于认证加密。需与DeviceName成对使用。", prop: "deviceSecret"},
                        {label: "平台为产品颁发的全局唯一标识符", prop: "productKey"},
                        {label: "连接状态，(0.离线，1.在线，2.未激活)", prop: "connectStatus"},
                        {label: "启用状态 (0.停用，1.启用，2.测试)", prop: "useStatus"},
                        {label: "最近上线时间", prop: "onlineTime", formatter: this.formatterDate},
                        {label: "最近离线时间", prop: "offlineTime", formatter: this.formatterDate},
                        {label: "设备topic",
                          width: 120,
                          prop: "subColumns",
                          formatter: (row) => {
                              let widthsize = this.columnSet.reduce((pre, cur) => {
                                  return pre + Number(cur.width);
                              }, 50);
                              return (
                                  <el-popover placement="right" width={widthsize} trigger="click">
                                      {this.renderTable(row.deviceTopicList)}
                                      <el-button type="text" slot="reference">详细</el-button>
                                  </el-popover>
                              );
                          },
                        },
                        {
                            label: "操作",
                            width: 180,
                            formatter: row => {
                                return (
                                    <div><el-button type="primary" icon="el-icon-edit"  size='mini' onClick={()=>{this.toEdit(row)}}>编辑</el-button></div>
                            );
                            }
                        }
                    ]
                }
            };
        }
    };
</script>