<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:"deviceName",label:"设备名称，设置设备名称。 设备名称在产品内具有唯一性。支持英文字母、数字、短划线（-）、下划线（_）、at（@）、英文句号（.）和英文冒号（:），长度限制为4~32个字符。",width:100},
                    {prop:"deviceRemark",label:"设备备注，设置备注名称。支持中文、英文字母、日文、数字和下划线（_），长度限制为4~64个字符，",width:100},
                    {prop:"deviceSecret",label:"DeviceSecret，平台为设备颁发的设备密钥，用于认证加密。需与DeviceName成对使用。",width:100},
                    {prop:"productKey",label:"productKey，平台为产品颁发的全局唯一标识符",width:100},
                    {prop:"connectStatus",label:"连接状态，0：离线  1：在线 2：未激活，默认2",width:100},
                    {prop:"useStatus",label:"启用状态，0：停用  1：启用 2: 测试，默认1",width:100},
                    {prop:"onlineTime",label:"最近上线时间",width:100},
                    {prop:"offlineTime",label:"最近离线时间",width:100},
                ],
                config: {
                    search: [
                        {
                            name: "customerId",
                            type: "text",
                            label: "用户ID",
                            fuzzy: true
                        },
                        {
                            name: "productName",
                            type: "text",
                            label: "产品名称，为产品命名。产品名称在账号内具有唯一性。例如，可以填写为产品型号。支持中文、英文字母、日文、数字、下划线（_）、短划线（-）、at（@）和英文圆括号，长度限制4~30个字符。",
                            fuzzy: true
                        },
                        {
                            name: "productType",
                            type: "select",
                            label: "所属品类，相当于产品模板。1，标准品类：2，其它品类",
                            fuzzy: true
                        },
                        {
                            name: "dataType",
                            type: "select",
                            label: "数据格式，设备上下行的数据格式。1，标准数据格式：是平台为开发者提供的设备与云端的数据交换协议，采用JSON格式",
                            fuzzy: true
                        },
                        {
                            name: "authType",
                            type: "select",
                            label: "认证方式，设备接入平台的安全认证方式。产品创建成功后，认证方式不可变更。1，设备密钥：使用物联网平台为设备生成的DeviceSecret进行设备认证签名计算。使用DeviceSecret签名计算",
                            fuzzy: true
                        },
                        {
                            name: "productRemark",
                            type: "text",
                            label: "产品备注",
                            fuzzy: true
                        },
                        {
                            name: "productKey",
                            type: "text",
                            label: "平台为产品颁发的全局唯一标识符",
                            fuzzy: true
                        },
                        {
                            name: "productStatus",
                            type: "checkbox",
                            label: "产品状态，（1.开发中，2.发布）",
                            fuzzy: true
                        },
                        {
                            name: "createUserId",
                            type: "text",
                            label: "创建用户",
                            fuzzy: true
                        },
                    ],
                    columns: [
                        {type: "selection", width: 60},
                        {label: "用户ID", prop: "customerId", formatter: this.formatterString},
                        {label: "产品名称，为产品命名。产品名称在账号内具有唯一性。例如，可以填写为产品型号。支持中文、英文字母、日文、数字、下划线（_）、短划线（-）、at（@）和英文圆括号，长度限制4~30个字符。", prop: "productName"},
                        {label: "所属品类，相当于产品模板。1，标准品类：2，其它品类", prop: "productType"},
                        {label: "数据格式，设备上下行的数据格式。1，标准数据格式：是平台为开发者提供的设备与云端的数据交换协议，采用JSON格式", prop: "dataType"},
                        {label: "认证方式，设备接入平台的安全认证方式。产品创建成功后，认证方式不可变更。1，设备密钥：使用物联网平台为设备生成的DeviceSecret进行设备认证签名计算。使用DeviceSecret签名计算", prop: "authType"},
                        {label: "产品备注", prop: "productRemark"},
                        {label: "平台为产品颁发的全局唯一标识符", prop: "productKey"},
                        {label: "产品状态，（1.开发中，2.发布）", prop: "productStatus"},
                        {label: "设备",
                          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.deviceList)}
                                      <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>