<template>
    <div class="zy-template">
        <div class="zy-main-title">设备列表-普适型</div>
        <div class="zy-module">
            <el-form ref="form" :model="query" label-width="60px">
                <el-form-item label="设备码:" class="zy-search-form-item">
                    <el-input v-model="query.openNum" size="mini" clearable></el-input>
                </el-form-item>
                <el-form-item label="设备组:" class="zy-search-form-item">
                    <el-select v-model="query.groupId" filterable clearable placeholder=" " size="mini">
                        <el-option v-for="item in groups" :key="item" :value="item"/>
                    </el-select>
                </el-form-item>
                <el-button type="primary" size="mini" @click="submit">查询</el-button>
            </el-form>
        </div>

        <div class="zy-module">
            <el-table :data="page.records" header-cell-class-name="zy-table-header-cell" cell-class-name='zy-table-cell'
                      stripe>
                <el-table-column prop="openNum" label="设备码" min-width="180">
                    <template #default="scope">IMEI{{scope.row.openNum}}</template>
                </el-table-column>
                <el-table-column prop="groupId" label="设备组" min-width="120"/>
                <el-table-column label="状态" min-width="100">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.status===1" size="small">在线</el-tag>
                        <el-tag type="danger" v-if="scope.row.status===0" size="small">离线</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="设备二维码" min-width="120">
                    <el-popover placement="right" :width="200" trigger="click">
                        <template #reference>
                            <el-button type="text">点击查看</el-button>
                        </template>
                        <img src="http://lq.ailishi.org:4032/chenyi/static/bg.59f1ed01.png" alt="二维码" width="200"
                             height="200">
                    </el-popover>
                </el-table-column>
                <el-table-column label="电池电压" min-width="80">
                    <template #default="scope">
                        {{scope.row.powerVolt==null?'':scope.row.powerVolt.toFixed(2)}}
                        <el-tooltip effect="dark" content="电压低于10V" placement="right-start"
                                    v-if="scope.row.powerVolt!=null && scope.row.powerVolt.toFixed(2)<10">
                            <i class="el-icon-warning warning"/>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="4G信号" min-width="80">
                    <template #default="scope">
                        {{scope.row.signal4g}}
                        <el-tooltip effect="dark" content="信号值低于18" placement="right-start"
                                    v-if="scope.row.signal4g != null && scope.row.signal4g!==''&& parseInt(scope.row.signal4g)<18">
                            <i class="el-icon-warning warning"/>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="oemType" label="板卡类型" min-width="100"/>
                <el-table-column prop="version" label="软件版本号" min-width="100"/>
                <el-table-column prop="lon" label="经度" min-width="120"/>
                <el-table-column prop="lat" label="纬度" min-width="120"/>
                <el-table-column prop="satNum" label="卫星颗数" min-width="80"/>
                <el-table-column prop="sim" label="卡号" min-width="120"/>
                <el-table-column prop="freq" label="上传频率(秒)" min-width="120"/>
                <el-table-column prop="updateTime" label="最近通讯时间" min-width="180"/>
                <el-table-column prop="createTime" label="创建时间" min-width="180"/>
                <el-table-column prop="remark" label="备注" min-width="240"/>
                <el-table-column label="操作" min-width="80">
                    <template #default="scope">
                        <el-button @click="editRemark(scope.row)" type="text" size="small">备注</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="zy-table-pagination" background layout="prev, pager, next"
                           :current-page="page.current" :total="page.total" :page-size="page.size"
                           @current-change="pagination"/>
        </div>

        <el-dialog title="设备详情" v-model="detailDialog" width="500px">
            <el-descriptions :column="2" border>
                <el-descriptions-item label="设备码:">{{detail.openNum}}</el-descriptions-item>
                <el-descriptions-item label="定位模式:">{{detail.mode==1?'GPS':'基站'}}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>

        <el-dialog title="编辑" v-model="updateDialog" width="500px">
            <el-form ref="updateForm" :model="updateForm" label-width="100px" :rules="rules">
                <el-form-item label="备注:">
                    <el-input type="textarea" v-model="updateForm.remark" maxlength="100"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="updateDialog = false">取 消</el-button>
					<el-button type="primary" @click="updateSubmit('updateForm')">提 交</el-button>
				</span>
            </template>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                query: {
                    openNum: "",
                    type: null,
                },
                page: {
                    current: 1,
                    size: 20,
                },
                groups: [], //设备组
                detailDialog: false, //详情弹出框
                updateDialog: false, //更新表单
                updateForm: {}, //更新表单
                detail: {}, //设备详情
            };
        },
        mounted() {
            this.getListPage();
            this.getGroupList();
        },
        methods: {
            /**
             * 提交查询条件
             */
            submit: function () {
                const param = {
                    current: 1,
                    size: this.page.size,
                    groupId: this.query.groupId,
                    openNum: this.query.openNum,
                };
                this.getListPage(param);
            },

            /**
             * 分页点击事件
             */
            pagination: function (current) {
                const param = {
                    current: current,
                    size: this.page.size,
                    groupId: this.query.groupId,
                    openNum: this.query.openNum,
                };
                this.getListPage(param);
            },

            /**
             * 编辑备注
             */
            editRemark: function (obj) {
                this.updateForm = {
                    openNum: obj.openNum,
                    remark: obj.remark
                };
                this.updateDialog = true;
            },

            /**
             * 获取设备列表
             */
            getListPage: function (params) {
                this.$http.Get(this.$global.ubi.listPage, params).then(res => {
                    this.page = res.data;
                })
            },

            /**
             * 提交更新表单
             */
            updateSubmit: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (!valid) return false;
                    //提交表单
                    this.$http.Post(this.$global.deviceBase.updateRemark, this.updateForm).then(res => {
                        this.$message.success("修改成功!");
                        this.refresh();
                    })
                });
            },

            /**
             * 获取设备组
             */
            getGroupList() {
                this.$http.Get(this.$global.group.listAll, {}).then(res => {
                    const arr = [];
                    this.groups = res.data.forEach(item => {
                        if (item.type == 'gnss') {
                            arr.push(item.code)
                        }
                    });
                    this.groups = arr;
                })
            },

            /**
             * 刷新列表
             */
            refresh: function () {
                this.updateDialog = false;
                const params = {
                    current: this.page.current,
                    size: this.page.size,
                    groupId: this.query.groupId,
                    openNum: this.query.openNum,
                };
                this.getListPage(params);
            }
        }
    };
</script>
