<template>
<div class="EnseList">
    <el-row class="topBar">
        <el-col>
            <el-form :inline="true" :model="searchData">
                <el-form-item label="设备类型">
                    <el-select v-model="searchData.dataType">
                        <el-option label="监控设备" value="5"></el-option>
                        <el-option label="传感器" value="6"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备名称">
                    <el-input v-model="searchData.deviceName" placeholder="请输入..."></el-input>
                </el-form-item>
                <el-form-item label="设备号">
                    <el-input v-model="searchData.deviceNumber" placeholder="请输入..."></el-input>
                </el-form-item>
                <el-form-item label="设备短号">
                    <el-input v-model="searchData.shortNum" placeholder="请输入..."></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchFun()">
                        <i class="el-icon-search"></i> 搜索
                    </el-button>
                    <el-button type="primary" @click="resetFun()">
                        <i class="el-icon-refresh"></i> 重置
                    </el-button>
                </el-form-item>
                <el-form-item class="fr">
                    <el-button plain type="primary" @click="addFun()">
                        <i class="el-icon-plus"></i> 新增
                    </el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
    <el-table :data="tableData.pageData" stripe border style="width:100%;" :loading="loading">
        <el-table-column width="50" type="index" label="序号"></el-table-column>
        <el-table-column prop="deviceName" label="设备名称"></el-table-column>
        <el-table-column prop="deviceName" label="设备类型">
            <template slot-scope="scope">
                <font>{{ scope.row.dataType == 5 ? '监控设备' : '传感器'}}</font>
            </template>
        </el-table-column>
        <el-table-column prop="deviceIp" label="设备IP"></el-table-column>
        <el-table-column prop="deviceNumber" label="设备编号"></el-table-column>
        <el-table-column prop="shortNum" label="设备短号"></el-table-column>
        <el-table-column prop="goodsName" label="所在厂区位置"></el-table-column>
        <el-table-column prop="stockNum" label="库存数量"></el-table-column>
        <el-table-column prop="dangerGrade" label="危险等级"></el-table-column>
        <el-table-column label="操作" width="150">
            <template slot-scope="scope">
                <el-button @click="editFun(scope.row)" size="small">编辑</el-button>
                <el-button type="danger" @click="delFun(scope.row)" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination background layout="total,sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="PAGE.page" :page-size="PAGE.size"></el-pagination>
    <SafetyDeviceMgEdit :dialogVisible="dialogVisible" :editForm="formData" :title="dialogTit" @dialogFun="closeDialog" @refreshTableData="getTableData" :key="zjKey"></SafetyDeviceMgEdit>
</div>
</template>

<script lang="ts">
import {
    Component,
    Vue,
    Provide
} from "vue-property-decorator";
import SafetyDeviceMgEdit from "./SafetyDeviceMgEdit.vue";
import METHOD from "@/utils/methods";
@Component({
    components: {
        SafetyDeviceMgEdit
    }
})
export default class SafetyDeviceMg extends Vue {
    @Provide() tableData: Object = {
        pageData: [],
        total: 0
    };
    @Provide() PAGE: any = {
        page: 1,
        size: 10
    };
    @Provide() searchData: any = {
        deviceName: "",
        deviceNumber: "",
        shortNum: "",
        dataType: '',
    };
    @Provide() loading: Boolean = false;
    //编辑组件
    @Provide() dialogVisible: Boolean = false;
    @Provide() dialogTit: String = "新增";
    @Provide() formData: any = {
        dataType: "",
        enterpriseId: ""
    };
    @Provide() zjKey: any = 0;
    @Provide() enterpriseId: string = "";
    @Provide() dataType: string = "";

    getTableData() {
        let that = this,
            param = Object.assign({}, that.PAGE, that.searchData);
        that.loading = true;
        METHOD.axiosPost(
            that,
            `/safetyDeviceInfo/selectSafetyDeviceInfoList/${that.enterpriseId}`,
            param,
            function (res: any) {
                that.loading = false;
                if (res.code == 0) {
                    that.tableData = res.data;
                }
            }
        );
    }
    searchFun() {
        this.PAGE = {
            page: 1,
            size: 10
        };
        this.getTableData();
    }
    resetFun() {
        this.PAGE = {
            page: 1,
            size: 10
        };
        this.searchData = {
            deviceName: "",
            deviceNumber: "",
            shortNum: "",
            dataType: ''
        };
        this.getTableData();
    }
    addFun() {
        this.zjKey++;
        this.dialogVisible = true;
        this.formData.dataType = this.searchData.dataType;
        this.formData.enterpriseId = this.enterpriseId;
    }
    editFun(row: any) {
        this.dialogTit = "编辑";
        this.formData = Object.assign({}, row);
        this.zjKey++;
        this.dialogVisible = true;
    }
    delFun(row: any) {
        let that = this as any;
        METHOD.deleteFun(
            this,
            `/safetyDeviceInfo/deleteSafetyDeviceInfoById/${row.id}`,
            function () {
                that.getTableData();
            }
        );
    }
    handleSizeChange(val: any) {
        this.PAGE.size = val;
        this.getTableData();
    }
    handleCurrentChange(val: any) {
        this.PAGE.page = val;
        this.getTableData();
    }
    closeDialog() {
        //关闭窗口
        this.dialogVisible = false;
        this.formData = {};
    }
    selectChange(val: any) {
        this.searchData.dataType = val;
        this.getTableData();
    }
    created() {
        this.enterpriseId = METHOD.enterpriseId;
        this.getTableData();
    }
}
</script>

<style lang="scss">
@import "@/utils/public.scss";
</style>
