<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" placeholder="请选择..." @change="selectChange">
                        <el-option label="企业辅料" value="1"></el-option>
                        <el-option label="生产设备" value="2"></el-option>
                        <el-option label="企业产品" value="3"></el-option>
                        <el-option label="应急物资" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="searchData.goodsName" placeholder="请输入..."></el-input>
                </el-form-item>
                <el-form-item label="危险等级">
                    <el-select v-model="searchData.dangerGrade" placeholder="请选择...">
                        <el-option label="一级" value="g1"></el-option>
                        <el-option label="二级" value="g2"></el-option>
                        <el-option label="三级" value="g3"></el-option>
                        <el-option label="四级" value="g4"></el-option>
                    </el-select>
                </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="goodsName" label="名称"></el-table-column>
        <el-table-column label="类型">
            <template slot-scope="scope">
                <font v-if="scope.row.dataType == 1">企业辅料</font>
                <font v-if="scope.row.dataType == 2">生产设备</font>
                <font v-if="scope.row.dataType == 3">企业产品</font>
                <font v-if="scope.row.dataType == 4">应急物资</font>
            </template>
        </el-table-column>
        <el-table-column prop="number" 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="危险等级">
            <template slot-scope="scope">
                <font v-if="scope.row.dangerGrade == 'g1'">一级</font>
                <font v-if="scope.row.dangerGrade == 'g2'">二级</font>
                <font v-if="scope.row.dangerGrade == 'g3'">三级</font>
                <font v-if="scope.row.dangerGrade == 'g4'">四级</font>
                <font v-if="scope.row.isBigDanger == 1" class="jinColor">重大危险源</font>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="170">
            <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>
    <HazardsListMgEdit :dialogVisible="dialogVisible" :editForm="formData" :title="dialogTit" @dialogFun="closeDialog" @refreshTableData="getTableData" :levelArr="levelArr" :key="zjKey"></HazardsListMgEdit>
</div>
</template>

<script lang="ts">
import {
    Component,
    Vue,
    Provide
} from "vue-property-decorator";
import HazardsListMgEdit from "./HazardsListMgEdit.vue";
import METHOD from "@/utils/methods";
@Component({
    components: {
        HazardsListMgEdit
    }
})
export default class EnseList extends Vue {
    @Provide() tableData: Object = {
        pageData: [],
        total: 0
    };
    @Provide() PAGE: any = {
        page: 1,
        size: 10
    };
    @Provide() searchData: any = {
        dangerGrade: "",
        goodsName: "",
        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() levelArr: any = [];

    getTableData() {
        let that = this,
            param = Object.assign({}, that.PAGE, that.searchData);
        that.loading = true;
        METHOD.axiosPost(
            that,
            `/enterpriseGoods/selectEnterpriseGoodsList/${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 = {
            dangerGrade: "",
            goodsName: "",
            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,
            `/enterpriseGoods/deleteEnterpriseGoodsById/${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();
    }
    getDagerLevel() {
        let that = this;
        METHOD.axiosGet(
            that,
            `/systemConfig/getSystemCodeByParentId/6ac39587109749d1a23338bd72654087
`,
            function (res: any) {
                if (res.code == 0) {
                    that.levelArr = res.data;
                }
            })
    }
    created() {
        this.enterpriseId = METHOD.enterpriseId;
        this.getTableData();
        this.getDagerLevel();
    }
}
</script>

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