<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="productId" v-model="form.productId" placeholder="请输入产品"/>
                        <Field label="设备名称，设置设备名称。 设备名称在产品内具有唯一性。支持英文字母、数字、短划线（" prop="deviceName" v-model="form.deviceName" placeholder="请输入设备名称，设置设备名称。 设备名称在产品内具有唯一性。支持英文字母、数字、短划线（-）、下划线（_）、at（@）、英文句号（.）和英文冒号（:），长度限制为4~32个字符。"/>
                        <Field label="设备备注，设置备注名称。支持中文、英文字母、日文、数字和下划线（" prop="deviceRemark" v-model="form.deviceRemark" placeholder="请输入设备备注，设置备注名称。支持中文、英文字母、日文、数字和下划线（_），长度限制为4~64个字符，"/>
                        <Field label="平台为设备颁发的设备密钥，用于认证加密。需与DeviceName成对使用。" prop="deviceSecret" v-model="form.deviceSecret" placeholder="请输入平台为设备颁发的设备密钥，用于认证加密。需与DeviceName成对使用。"/>
                        <Field label="平台为产品颁发的全局唯一标识符" prop="productKey" v-model="form.productKey" placeholder="请输入平台为产品颁发的全局唯一标识符"/>
                        <Field label="连接状态，(0.离线，1.在线，2.未激活)" prop="connectStatus" v-model="form.connectStatus" type="select" :enumData="dict.connectStatus" placeholder="请选择连接状态，(0.离线，1.在线，2.未激活)"/>
                        <Field label="启用状态 (0.停用，1.启用，2.测试)" prop="useStatus" v-model="form.useStatus" type="select" :enumData="dict.useStatus" placeholder="请选择启用状态 (0.停用，1.启用，2.测试)"/>
                        <Field label="最近上线时间" prop="onlineTime" v-model="form.onlineTime" type="date" />
                        <Field label="最近离线时间" prop="offlineTime" v-model="form.offlineTime" type="date" />
            </el-row>
            <el-divider content-position="center">设备topic信息</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="handleAddDeviceTopic">添加</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteDeviceTopic">删除</el-button>
                </el-col>
            </el-row>

            <el-table :data="deviceTopicList" :row-class-name="rowDeviceTopicIndex" @selection-change="handleDeviceTopicSelectionChange" ref="deviceTopic">
                <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="productId">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.productId" placeholder="请输入产品" />
                    </template>
                </el-table-column>
                <el-table-column label="平台为产品颁发的全局唯一标识符" prop="productKey">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.productKey" placeholder="请输入平台为产品颁发的全局唯一标识符" />
                    </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="设备对该Topic的操作，可设置为发布、订阅、发布和订阅。" prop="deviceTopicHandle">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.deviceTopicHandle" placeholder="请输入设备对该Topic的操作，可设置为发布、订阅、发布和订阅。" />
                    </template>
                </el-table-column>
                <el-table-column label="设备的具体是topic信息，根据产品topic信息生产" prop="topic">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.topic" placeholder="请输入设备的具体是topic信息，根据产品topic信息生产" />
                    </template>
                </el-table-column>
                <el-table-column label="描述" prop="deviceTopicRemark">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.deviceTopicRemark" placeholder="请输入描述" />
                    </template>
                </el-table-column>
                <el-table-column label="创建用户" prop="createUserId">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.createUserId" 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:[
            "connectStatus",
            "useStatus",
        ],
        methods: {
        /** 设备topic序号 */
        rowDeviceTopicIndex({ row, rowIndex }) {
            row.index = rowIndex + 1;
        },
        /** 设备topic添加按钮操作 */
        handleAddDeviceTopic() {
            let obj = {};
            obj.customerId = "";
            obj.productId = "";
            obj.productKey = "";
            obj.deviceName = "";
            obj.deviceTopicHandle = "";
            obj.topic = "";
            obj.deviceTopicRemark = "";
            obj.createUserId = "";
            obj.createTime = "";
            obj.updateTime = "";
            this.deviceTopicList.push(obj);
        },
        /** 设备topic删除按钮操作 */
        handleDeleteDeviceTopic() {
            if (this.checkedDeviceTopic.length == 0) {
                this.$alert("请先选择要删除的设备topic数据", "提示", { confirmButtonText: "确定", });
            } else {
                this.deviceTopicList.splice(this.checkedDeviceTopic[0].index - 1, 1);
            }
        },
        /** 单选框选中数据 */
        handleDeviceTopicSelectionChange(selection) {
            if (selection.length > 1) {
                this.$refs.deviceTopic.clearSelection();
                this.$refs.deviceTopic.toggleRowSelection(selection.pop());
            } else {
                this.checkedDeviceTopic = selection;
            }
        },
        // 渲染前置处理
        beforeRender(data) {
            if(data.entity.deviceTopicList) {
                this.deviceTopicList = data.entity.deviceTopicList;
            }
            return data
        },

        },
        data() {
            return {
                // 子表选中数据
                checkedDeviceTopic: [],
                // 设备topic表格数据
                deviceTopicList: [],
                rules: {
                    deviceName: [
                        {required: true, trigger: "blur" },
                    ],
                    deviceRemark: [
                        { trigger: "blur" },
                    ],
                    deviceSecret: [
                        {required: true, trigger: "blur" },
                    ],
                    productKey: [
                        {required: true, trigger: "blur" },
                    ],
                    connectStatus: [
                        {required: true, type: 'integer',trigger: "blur" },
                    ],
                    useStatus: [
                        {required: true, type: 'integer',trigger: "blur" },
                    ],
                    onlineTime: [
                        { },
                    ],
                    offlineTime: [
                        { },
                    ],
                }
            };
        }
    };
</script>