
<template>
    <!-- 子设备管理页 -->
    <div class="SubDeviceAdmin">
        <el-row type="flex">
            <el-col :span="20">
                <el-page-header @back="goBack" :content="mainDeviceInfo.name" />
            </el-col>
            <el-col :span="4">
                <el-button @click="add" type="primary" icon="el-icon-document-add">添加</el-button>
            </el-col>
        </el-row>

        <el-table :data="subDeviceList" style="width: 100%">
            <el-table-column prop="id" label="序号"></el-table-column>
            <el-table-column prop="communicationId" label="通讯ID"></el-table-column>
            <el-table-column prop="deviceNo" label="MAC/SN"></el-table-column>
            <el-table-column prop="channelNo" label="通道"></el-table-column>
            <el-table-column label="使能状态">
                <template slot-scope="scope">
                    <span>{{ scope.row.enable==1?"工作":scope.row.enable==0?"关闭":scope.row.enable }}</span>
                </template>
            </el-table-column>
            <el-table-column label="最后一次">
                <template slot-scope="scope">
                    <span>{{ new Date(scope.row.updated).toLocaleDateString() }}</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                    <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
                        <el-button slot="reference" type="text" size="small">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加子设备信息 -->
        <el-dialog :title="isAdd?'添加子设备信息':'编辑子设备信息'" :visible.sync="showAddSubDevice">
            <el-row type="flex">
                <el-col :span="14">
                    <el-form ref="form" :model="form" label-width="100px">
                        <el-form-item label="通道:">
                            <el-input v-model="form.channelNo"></el-input>
                        </el-form-item>
                        <el-form-item label="设备是否可用:">
                            <el-radio-group v-model="form.enable">
                                <el-radio :label="1">可用</el-radio>
                                <el-radio :label="0">不可用</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item>
                            <el-button @click="onCancel">取 消</el-button>
                            <el-button type="primary" @click="saveSubDevice()">保 存</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>
<script>
import { mapActions } from "vuex";

export default {
    name: "SubDeviceAdmin",
    data() {
        return {
            mainDeviceInfo: {},
            subDeviceList: [], // 子设备信息列表
            showAddSubDevice: false,
            form: {
                channelNo: "",
                enable: 1
            },
            isAdd: null, // 是添加还是编辑 标识符
            editParmas: {} // 保存编辑的 请求参数
        };
    },
    created() { 
        this.mainDeviceInfo = this.$route.query;
        // 获取子设备信息列表
        this.doSubDeviceList();
    },
    methods: {
        ...mapActions(["fetch"]),
        // 获取子设备信息列表
        doSubDeviceList() {
            this.fetch({
                api: "/device/device-slave/list",
                method: "GET",
                data: {
                    communicationId: this.mainDeviceInfo.id
                },
                success: res => {
                    this.subDeviceList = res;
                },
                fail: err => {
                    console.log(err);
                    if (err.errMsg) this.$message.error(err.errMsg);
                    else this.$message.error("服务器发生异常");
                }
            });
        },

        add() {
            this.showAddSubDevice = true;
            this.isAdd = true;
            this.form = {
                channelNo: "",
                enable: 1
            };
        },

        // 删除  (接口有问题)
        del(row) {
            console.log("删除 未完成", row);
            this.fetch({
                api: "/device/device-slave/delete",
                method: "POST",
                data: {
                    id: row.id
                },
                success: res => {
                    this.subDeviceList = res;
                    // 获取子设备信息列表
                    this.doSubDeviceList();
                },
                fail: err => {
                    console.log(err);
                    if (err.errCode == "200") {
                        this.$message.error(err.errMsg);
                        // 获取子设备信息列表
                        this.doSubDeviceList();
                    } else if (err.errMsg) {
                        this.$message.success(err.errMsg);
                    } else this.$message.error("服务器发生异常");
                }
            });
        },
        // 编辑 /device-slave/update
        edit(row) {
            console.log("编辑", row);
            this.isAdd = false;
            this.showAddSubDevice = true;
            this.form.channelNo = row.channelNo;
            this.form.enable = row.enable;
            this.editParmas = {
                id: row.id,
                communicationId: row.communicationId,
                deviceNo: row.deviceNo,
                hardTypeId: row.hardTypeId
            };
        },
        // 保存 添加子设备信息 (接口有问题)
        saveSubDevice() {
            let data, api, method;
            // 是添加
            if (this.isAdd) {
                api = "/device/device-slave/add";
                method = "POST";
                data = Object.assign(this.form, {
                    communicationId: this.mainDeviceInfo.id,
                    deviceNo: this.mainDeviceInfo.deviceNo,
                    hardTypeId: this.mainDeviceInfo.hardTypeId
                });
            } else {
                // 是编辑
                api = "/device/device-slave/update";
                method = "POST";
                data = Object.assign(this.form, this.editParmas);
            }

            console.log(this.isAdd ? "添加" : "编辑");

            this.fetch({
                api,
                method,
                data,
                success: res => {
                    console.log(res);
                    // 获取子设备信息列表
                    this.doSubDeviceList();
                    this.showAddSubDevice = false;
                    this.form = {
                        communicationId: "",
                        channelNo: "",
                        enable: 1
                    };
                    this.$message.success(
                        this.isAdd
                            ? "添加子设备信息成功！"
                            : "编辑子设备信息成功！"
                    );
                },
                fail: err => {
                    console.log(err);
                    if (err.errMsg) this.$message.error(err.errMsg);
                    else this.$message.error("服务器发生异常");
                }
            });
        },
        onCancel() {
            this.showAddSubDevice = false;
        },

        goBack() {
            this.$router.back();
        }
    }
};
</script>

<style lang="scss" scoped>
</style>
