<template>
    <div class="dashboard-container">
        <div class="search-content">
            <el-input placeholder="请输入终端编码" v-model="queryParams.terminalCode" style="width: 220px" clearable />
            <el-input placeholder="请输入终端名称" v-model="queryParams.terminalName" style="width: 220px" clearable />
            <!-- <el-select v-model="queryParams.status" placeholder="请选择终端状态" style="width: 220px" clearable>
                <el-option v-for="item in statusType" :key="item.value" :label="item.label" :value="item.value" clerable />
            </el-select> -->
            <div class="search-btn">
                <div class="search" @click="handleQuery">查询</div>
                <div class="reset" @click="reset">重置</div>
            </div>
        </div>
        <div class="table-content">
            <div style="width: 100%;height: 30px;">
                <!-- <div style="font-size: 18px;height: 30px;float: left;position: relative;top: 17px;">
                    当前相机个数:<span style="font-size: 24px; color: red">{{
                        total
                    }}</span>
                </div> -->
                <div class="btn" @click="addTerminalBtn">
                    <span class="icon font_family">&#xe604;</span>
                    新增
                </div>
                <div class="btn" @click="batchDelTerminal">
                    <span class="icon font_family">&#xe607;</span>
                    批量删除
                </div>
                <div class="btn" @click="importLoadIn">
                    <span class="icon font_family">&#xe606;</span>
                    导入
                </div>
                <div class="btn" @click="exportBaseVehicleTerminal">
                    <span class="icon font_family">&#xe605;</span>
                    导出
                </div>
                <div class="btn" @click="downloaExcel">
                    <span class="icon font_family">&#xe603;</span>
                    下载模板
                </div>
                <el-dialog center :visible.sync="uploadDialog" title="终端信息导入" width="620px">
                    <el-upload style="text-align: center" ref="uploadFile" class="upload-demo" drag action="#"
                        :http-request="uploadHttpRequest" :auto-upload="false" :file-list="fileList"
                        :on-change="uploadFileList">
                        <i class="el-icon-upload" />
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <!-- <div class="el-upload__tip">只能上传xls/xlsx文件,且不超过500kb</div> -->
                    </el-upload>
                    <div class="hxj">支持扩展名：.xlsx</div>
                    <div class="hxj">请先下载模板，根据模板内容填写，再上传文件 <span class="xzmba" @click="downloaExcel">下载模板</span>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <div class="search" @click="httpRequest">保 存</div>
                        <div class="reset" @click="uploadDialog = false">取 消</div>
                    </div>

                </el-dialog>
                <addTerminalDialog v-if="addTerminalData.dialogVisible" :addTerminalData="addTerminalData"
                    @addTerminal="addTerminal"></addTerminalDialog>
                <updateTerminalDialog @updateTerminalBtn="updateTerminalBtn" :updataTerminalData="updataTerminalData">
                </updateTerminalDialog>
            </div>
            <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="terminalCode" label="终端编码" width="150px" align="center" />
                <el-table-column prop="terminalName" show-overflow-tooltip="true" label="终端名称" align="center" width="200" />

                <!-- <el-table-column prop="vehicleCode" label="关联机车号" width="150px" align="center" /> -->

                <el-table-column prop="vehicleCode" show-overflow-tooltip="true" label="机车号" width="150px" align="center" />
                <el-table-column prop="end" label="AB端" width="150px" align="center" />

                <el-table-column prop="remark" label="备注" show-overflow-tooltip="true" align="center" width="180"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="170" align="center" />
                <el-table-column prop="updateTime" label="更新时间" width="170" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <div class="operateBtn" style="display:flex">
                            <div type="text" @click="updateTerminal(scope.row)">修改</div>
                            <div type="text" @click="delTerminal(scope.row)">删除</div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination :page-sizes="[10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
  
<script>
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
import {
    vehicleTerminalList,
    exportBaseVehicleTerminal,
    downloaExcel,
    importBaseVehicleTerminal,
    vehicleTerminaleDelete,
    vehicleTerminalAdd,
    vehicleTerminalUpdate
} from '@/api/account/terminalManagement'
import addTerminalDialog from './components/addTerminalDialog.vue'
import updateTerminalDialog from './components/updateTerminalDialog.vue'
export default {
    name: 'Cart',
    computed: {
        ...mapGetters(['name'])
    },
    components: {
        addTerminalDialog,
        updateTerminalDialog
    },
    data() {
        return {
            addTerminalData: {
                dialogVisible: false
            },
            updataTerminalData: {
                dialogVisible: false,
                data: {}
            },
            uploadDialog: false,
            fileList: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                terminalCode: '',
                terminalName: '',
                status: '',
            },
            tableData: [],
            statusType: [
                {
                    label: '在线',
                    value: '1'
                },
                {
                    label: '离线',
                    value: '2'
                }
            ],
            delTerminalList: '',
            exportData: {
                ids: []
            }
        }
    },
    watch: {

    },
    created() {
        this.vehicleTerminalList(this.queryParams)
    },
    methods: {
        handleSizeChange(val) {
            this.queryParams.pageSize = val
            this.vehicleTerminalList(this.queryParams)
        },
        handleCurrentChange(val) {
            this.queryParams.pageNum = val
            this.vehicleTerminalList(this.queryParams)
        },
        addTerminal(payload) {
            vehicleTerminalAdd(payload).then(res => {
                if (res.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '新增成功!'
                    });
                    this.vehicleTerminalList(this.queryParams)
                    this.addTerminalData.dialogVisible = false
                } else {
                    this.$message({
                        type: 'error',
                        message: res.msg
                    });
                }
            })
        },
        addTerminalBtn() {
            this.addTerminalData.dialogVisible = true
        },
        updateTerminal(row) {
            this.updataTerminalData.data = {
                id: row.id,
                terminalCode: row.terminalCode,
                terminalName: row.terminalName,
                status: row.status.toString(),
                terminalLongitude: row.terminalLongitude,
                terminalLatitude: row.terminalLatitude,
                remark: row.remark
            }
            this.updataTerminalData.dialogVisible = true
        },
        updateTerminalBtn(payload) {
            vehicleTerminalUpdate(payload).then(res => {
                if (res.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.vehicleTerminalList(this.queryParams)
                    this.updataTerminalData.dialogVisible = false
                } else {
                    this.$message({
                        type: 'error',
                        message: res.msg
                    });
                }
            })
        },
        vehicleTerminalList(params) {
            vehicleTerminalList(params).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data.records
                    this.total = res.data.total
                }
            })
        },
        handleQuery() {
            this.vehicleTerminalList(this.queryParams)
        },
        reset() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                terminalCode: '',
                terminalName: '',
                status: '',
            }
            this.vehicleTerminalList(this.queryParams)
        },
        exportBaseVehicleTerminal() {
            if (this.exportData.ids.length == 0) {
                return this.$message({
                    type: 'error',
                    message: '请选择要导出的终端信息!'
                });
            } else {
                exportBaseVehicleTerminal(this.exportData).then(res => {
                    // const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });
                    // const url = window.URL.createObjectURL(blob);
                    // const a = document.createElement('a');
                    // a.href = url;
                    // a.download = '车载终端信息.xlsx';
                    // a.click();
                    // window.URL.revokeObjectURL(url);


                    if (res.type == "application/json") {
                        const reader = new FileReader();
                        reader.readAsText(res, 'utf-8');
                        reader.onload = function () {
                            const msg = JSON.parse(reader.result);
                            if (msg.code == 200) {
                                const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });
                                const url = window.URL.createObjectURL(blob);
                                const a = document.createElement('a');
                                a.href = url;
                                a.download = '车载终端信息.xlsx';
                                a.click();
                                window.URL.revokeObjectURL(url);
                            } else {
                                Message({
                                    type: 'error',
                                    message: msg.msg
                                });
                            }
                        }
                    } else {
                        const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });
                        const url = window.URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = url;
                        a.download = '车载终端信息.xlsx';
                        a.click();
                        window.URL.revokeObjectURL(url);
                    }



                })
            }
        },
        downloaExcel() {
            downloaExcel('/baseVehicleTerminal/downloaExcel').then(res => {
                const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = '车载终端信息模板.xlsx';
                a.click();
                window.URL.revokeObjectURL(url);
            })
        },
        importLoadIn: function () {
            this.uploadDialog = true
        },
        uploadFileList(file) {
            if (file.status === 'ready') {
                this.fileList.push(file)
                if (this.fileList.length > 1) {
                    this.fileList.splice(0, 1)
                }
            }
        },
        //导入
        httpRequest() {
            let formData = new FormData();
            // formData.append('file', this.dataForm.file.raw);
            formData.append('file', this.fileList[0].raw)
            let configHeaders = {
                headers: { "Content-Type": "multipart/form-data" }
            };
            importBaseVehicleTerminal(formData).then(res => {
                if (res.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '导入成功!'
                    });
                    let uid = this.fileList[0].raw.uid
                    let idx = this.$refs.uploadFile.uploadFiles.findIndex(item => item.uid === uid)
                    this.$refs.uploadFile.uploadFiles.splice(idx, 1)
                    this.vehicleTerminalList(this.queryParams)
                    this.uploadDialog = false
                } else {
                    let uid = this.fileList[0].raw.uid
                    let idx = this.$refs.uploadFile.uploadFiles.findIndex(item => item.uid === uid)
                    this.$refs.uploadFile.uploadFiles.splice(idx, 1)
                    this.$message({
                        type: 'error',
                        message: res.msg
                    });
                }
            })
        },
        delTerminal(scope) {
            this.$confirm('确定要删除吗?', '信息提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                vehicleTerminaleDelete(scope.id).then(res => {
                    if (res.code == 200) {
                        this.vehicleTerminalList(this.queryParams)
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.msg
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleSelectionChange(v) {
            let delTerminalList = ''
            this.exportData.ids = []
            v.forEach(element => {
                delTerminalList += element.id + ','
                this.exportData.ids.push(element.id)
            });
            delTerminalList = delTerminalList.slice(0, delTerminalList.length - 1)
            this.delTerminalList = delTerminalList
        },
        batchDelTerminal() {
            if (this.delTerminalList.length == 0) {
                return this.$message({
                    type: 'error',
                    message: '请选择要删除的机车信息!'
                });
            }
            this.$confirm('确定要删除吗?', '信息提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                vehicleTerminaleDelete(this.delTerminalList).then(res => {
                    if (res.code == 200) {
                        this.vehicleTerminalList(this.queryParams)
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.msg
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
}
</script>
  
<style lang="scss" scoped>
.dashboard {
    &-container {
        margin: 30px;
    }

    &-text {
        font-size: 30px;
        line-height: 46px;
    }
}

.dashboard-container {
    .search-content {
        width: 100%;
        height: 74px;
        background-color: #fff;
        display: flex;
        align-items: center;
        padding-left: 10px;

        .el-input {
            margin: 0 10px;
        }

        .el-select {
            margin: 0 10px;
        }

        .search-btn {
            display: flex;
            align-items: center;
            height: 100%;
            margin-left: 10px;

            div {
                // margin: 0 6px;
                display: inline-block;
                width: 80px;
                height: 40px;
                border-radius: 2px;
                font-size: 14px;
                line-height: 40px;
                text-align: center;
            }

            div:hover {
                cursor: pointer;
            }

            .search {
                margin-right: 10px;
                background-color: #2766DD;
                color: #F7F8FB;
            }

            .search:hover {
                background-color: #4D85F4;
            }

            .reset {
                color: #333334;
                border: 1px solid #D7D7D7;
            }

            .reset:hover {
                color: #1F9FFF;
                border: 1px solid #1F9FFF;
            }
        }
    }

    .table-content {
        margin-top: 15px;
        width: 100%;
        background-color: #fff;
        padding: 0 20px 20px;

        .btn {
            margin: 15px 20px 15px 0;
            cursor: pointer;
            float: left;
            text-align: center;
            width: 98px;
            height: 34px;
            border-radius: 2px;
            border: 1px solid #ABC7FD;
            line-height: 34px;
            font-weight: 400;
            font-size: 14px;
            color: #2250C8;
            background-color: #E7EEFF;
        }

        .btn:hover {
            color: #FFFFFF;
            background-color: #2250C8;
            border: 1px solid #2250C8;
        }

        .btn:active {
            color: #FFFFFF;
            background-color: #194DA4;
            border: 1px solid #194DA4;
        }


        .startUsing {
            width: 60px;
            height: 25px;
            margin: 14.5px auto 0;
            line-height: 25px;
            text-align: center;
            font-size: 12px;
            color: #fff;
            border-radius: 5px;
            background-color: #00974B;
        }

        .Deactivate {
            width: 60px;
            height: 25px;
            margin: 14.5px auto 0;
            line-height: 25px;
            text-align: center;
            font-size: 12px;
            color: #fff;
            border-radius: 5px;
            background-color: #FF9933;
        }

        .operateBtn {
            display: flex;
            justify-content: center;
            color: #2866DD;

            div {
                font-size: 14px;
                margin: 0 5px;
                cursor: pointer;
            }
        }

        .pagination {
            margin: 10px 0;
            width: 100%;
            height: 20px;

            .el-pagination {
                float: right;
                margin: 10px 0;
            }
        }
    }
}


.operateBtn {
    display: flex;
    justify-content: center;
    color: #2866DD;

    div {
        font-size: 16px;
        margin: 0 5px;
        cursor: pointer;
    }
}

.el-tooltip__popper {
    max-width: 30%;
    padding-bottom: 5px !important;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 15;
    -webkit-box-orient: vertical;

}

.el-tooltip__popper,
.el-tooltip__popper.is-dark {
    background: rgb(48, 65, 86) !important;
    color: #fff !important;
    line-height: 24px;
}

.hxj {
    height: 46px;
    line-height: 46px;
    text-align: center;
}

.xzmba {
    color: #2766dd;
    text-decoration: underline;
    cursor: pointer;
}
</style>
  