<template>
    <layout-form>
        <el-form :model="form" :loading="loading" :rules="rules" size='small' style="width:100%" label-width='120px' ref="form">
            <el-row>
                                    <Field label="用户ID" prop="customerId" v-model="form.customerId" placeholder="请输入用户ID"/>
                        <Field label="产品名称，为产品命名。产品名称在账号内具有唯一性。例如，可以填写为产品型号。支持中文、英文字母、日文、数字、下划线（" prop="productName" v-model="form.productName" placeholder="请输入产品名称，为产品命名。产品名称在账号内具有唯一性。例如，可以填写为产品型号。支持中文、英文字母、日文、数字、下划线（_）、短划线（-）、at（@）和英文圆括号，长度限制4~30个字符。"/>
                        <Field label="所属品类，相当于产品模板。1，标准品类：2，其它品类" prop="productType" v-model="form.productType" type="select" :enumData="dict.productType" placeholder="请选择所属品类，相当于产品模板。1，标准品类：2，其它品类"/>
                        <Field label="数据格式，设备上下行的数据格式。1，标准数据格式：是平台为开发者提供的设备与云端的数据交换协议，采用JSON格式" prop="dataType" v-model="form.dataType" type="select" :enumData="dict.dataType" placeholder="请选择数据格式，设备上下行的数据格式。1，标准数据格式：是平台为开发者提供的设备与云端的数据交换协议，采用JSON格式"/>
                        <Field label="认证方式，设备接入平台的安全认证方式。产品创建成功后，认证方式不可变更。1，设备密钥：使用物联网平台为设备生成的DeviceSecret进行设备认证签名计算。使用DeviceSecret签名计算" prop="authType" v-model="form.authType" type="select" :enumData="dict.authType" placeholder="请选择认证方式，设备接入平台的安全认证方式。产品创建成功后，认证方式不可变更。1，设备密钥：使用物联网平台为设备生成的DeviceSecret进行设备认证签名计算。使用DeviceSecret签名计算"/>
                        <Field label="产品备注" prop="productRemark" v-model="form.productRemark" placeholder="请输入产品备注"/>
                        <Field label="平台为产品颁发的全局唯一标识符" prop="productKey" v-model="form.productKey" placeholder="请输入平台为产品颁发的全局唯一标识符"/>
                        <Field label="产品状态，（" prop="productStatus" v-model="form.productStatus" type="select" :enumData="dict.productStatus" placeholder="请选择产品状态，（1.开发中，2.发布）"/>
            </el-row>
            <el-divider content-position="center">设备信息</el-divider>
            <br/>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddDevice">添加</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteDevice">删除</el-button>
                </el-col>
            </el-row>

            <el-table :data="deviceList" :row-class-name="rowDeviceIndex" @selection-change="handleDeviceSelectionChange" ref="device">
                <el-table-column type="selection" width="50" align="center" />
                <el-table-column label="序号" align="center" prop="index" width="50"/>
                <el-table-column label="用户ID" prop="customerId">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.customerId" placeholder="请输入用户ID" />
                    </template>
                </el-table-column>
                <el-table-column label="设备名称，设置设备名称。 设备名称在产品内具有唯一性。支持英文字母、数字、短划线（" prop="deviceName">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.deviceName" placeholder="请输入设备名称，设置设备名称。 设备名称在产品内具有唯一性。支持英文字母、数字、短划线（" />
                    </template>
                </el-table-column>
                <el-table-column label="设备备注，设置备注名称。支持中文、英文字母、日文、数字和下划线（" prop="deviceRemark">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.deviceRemark" placeholder="请输入设备备注，设置备注名称。支持中文、英文字母、日文、数字和下划线（" />
                    </template>
                </el-table-column>
                <el-table-column label="DeviceSecret，平台为设备颁发的设备密钥，用于认证加密。需与DeviceName成对使用。" prop="deviceSecret">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.deviceSecret" placeholder="请输入DeviceSecret，平台为设备颁发的设备密钥，用于认证加密。需与DeviceName成对使用。" />
                    </template>
                </el-table-column>
                <el-table-column label="productKey，平台为产品颁发的全局唯一标识符" prop="productKey">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.productKey" placeholder="请输入productKey，平台为产品颁发的全局唯一标识符" />
                    </template>
                </el-table-column>
                <el-table-column label="连接状态，0：离线  1：在线 2：未激活，默认2" prop="connectStatus">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.connectStatus" placeholder="请输入连接状态，0：离线  1：在线 2：未激活，默认2" />
                    </template>
                </el-table-column>
                <el-table-column label="启用状态，0：停用  1：启用 2: 测试，默认1" prop="useStatus">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.useStatus" placeholder="请输入启用状态，0：停用  1：启用 2: 测试，默认1" />
                    </template>
                </el-table-column>
                <el-table-column label="最近上线时间" prop="onlineTime">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.onlineTime" placeholder="请输入最近上线时间" />
                    </template>
                </el-table-column>
                <el-table-column label="最近离线时间" prop="offlineTime">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.offlineTime" placeholder="请输入最近离线时间" />
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="createTime">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.createTime" placeholder="请输入创建时间" />
                    </template>
                </el-table-column>
                <el-table-column label="更新时间" prop="updateTime">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.updateTime" placeholder="请输入更新时间" />
                    </template>
                </el-table-column>
            </el-table>

            <form-buttons @submit='submitForm'/>
        </el-form>
    </layout-form>
</template>

<script>
    import form from "@/assets/mixins/form";
    export default {
        mixins: [form],
        components: {
        },
        toString:[
            "productType",
            "dataType",
            "authType",
            "productStatus",
        ],
        methods: {
        /** 设备序号 */
        rowDeviceIndex({ row, rowIndex }) {
            row.index = rowIndex + 1;
        },
        /** 设备添加按钮操作 */
        handleAddDevice() {
            let obj = {};
            obj.customerId = "";
            obj.deviceName = "";
            obj.deviceRemark = "";
            obj.deviceSecret = "";
            obj.productKey = "";
            obj.connectStatus = "";
            obj.useStatus = "";
            obj.onlineTime = "";
            obj.offlineTime = "";
            obj.createTime = "";
            obj.updateTime = "";
            this.deviceList.push(obj);
        },
        /** 设备删除按钮操作 */
        handleDeleteDevice() {
            if (this.checkedDevice.length == 0) {
                this.$alert("请先选择要删除的设备数据", "提示", { confirmButtonText: "确定", });
            } else {
                this.deviceList.splice(this.checkedDevice[0].index - 1, 1);
            }
        },
        /** 单选框选中数据 */
        handleDeviceSelectionChange(selection) {
            if (selection.length > 1) {
                this.$refs.device.clearSelection();
                this.$refs.device.toggleRowSelection(selection.pop());
            } else {
                this.checkedDevice = selection;
            }
        },
        // 渲染前置处理
        beforeRender(data) {
            if(data.entity.deviceList) {
                this.deviceList = data.entity.deviceList;
            }
            return data
        },

        },
        data() {
            return {
                // 子表选中数据
                checkedDevice: [],
                // 设备表格数据
                deviceList: [],
                rules: {
                    productName: [
                        {required: true, trigger: "blur" },
                    ],
                    productType: [
                        {required: true, type: 'integer',trigger: "blur" },
                    ],
                    dataType: [
                        {required: true, type: 'integer',trigger: "blur" },
                    ],
                    authType: [
                        {required: true, type: 'integer',trigger: "blur" },
                    ],
                    productRemark: [
                        { trigger: "blur" },
                    ],
                    productKey: [
                        {required: true, trigger: "blur" },
                    ],
                    productStatus: [
                        {required: true, type: 'integer',trigger: "blur" },
                    ],
                }
            };
        }
    };
</script>