<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button
					type="primary"
					icon="el-icon-plus"
					@click="table_add"
					v-auth="'riskpoint.create'"
				></el-button>
			</div>
			<div class="right-panel">
				<el-input
					style="margin-right: 5px"
					v-model="query.search"
					placeholder="名称"
					clearable
				></el-input>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="handleQuery"
				></el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" row-key="id" :query="query">
				<el-table-column label="类型" prop="type">
                    <template #default="scope"
						>{{ riskTypeEnum[scope.row.type]?.text }}
					</template>
                </el-table-column>
				<el-table-column label="等级" prop="level">
                    <template #default="scope">
                        <el-tag :type="riskLevelEnum[scope.row.level]?.type">{{
                    riskLevelEnum[scope.row.level]?.text }}</el-tag>
					</template>
                </el-table-column>
				<el-table-column
					label="名称"
					prop="name"
					min-width="100"
				></el-table-column>
				<el-table-column
					label="所在区域"
					prop="area_name"
				></el-table-column>
				<el-table-column
					label="具体地点"
					prop="area_name"
					min-width="100"
				></el-table-column>
				<el-table-column
					label="责任部门"
					prop="dept_res_name"
				></el-table-column>
				<el-table-column
					label="责任人"
					prop="user_res_name"
				></el-table-column>
				<el-table-column
					label="操作"
					fixed="right"
					align="center"
					width="150"
				>
					<template #default="scope">
						<el-button
							link
							size="small"
							@click="table_edit(scope.row)"
							v-auth="'riskpoint.update'"
							type="primary"
							>编辑</el-button>
                        <el-button
							link
							size="small"
							@click="risk_set(scope.row)"
							v-auth="'riskpoint.update'"
							type="warning"
							>风险配置</el-button>
						<el-popconfirm
							title="确定删除吗？"
							@confirm="table_del(scope.row, scope.$index)"
						>
							<template #reference>
								<el-button
									link
									size="small"
									v-auth="'riskpoint.delete'"
									type="danger"
									>删除</el-button
								>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
		<el-dialog v-model="saveDialog" title="新增/编辑">
			<el-form :model="saveForm" label-width="100px" ref="saveForm">
                <el-row>
            <el-col :span="12">
				<el-form-item label="类型" prop="type" required>
					<el-select
						v-model="saveForm.type"
						clearable
						style="width: 100%"
					>
						<el-option
							v-for="e in riskTypeEnum.values"
							:key="e.key"
							:value="e.key"
							:label="e.text"
						></el-option>
					</el-select>
				</el-form-item>
            </el-col>
            <el-col :span="12">
				<el-form-item label="等级" prop="level" required>
					<el-select
						v-model="saveForm.level"
						clearable
						style="width: 100%"
					>
						<el-option
							v-for="e in riskLevelEnum.values"
							:key="e.key"
							:value="e.key"
							:label="e.text"
						></el-option>
					</el-select>
				</el-form-item>
            </el-col>
            <el-col :span="24">
				<el-form-item label="名称" prop="name" required>
					<el-input v-model="saveForm.name" clearable></el-input>
				</el-form-item>
            </el-col>
            <el-col :span="12">
				<el-form-item label="责任部门" prop="dept_res" required>
					<el-select
						v-model="saveForm.dept_res"
						style="width: 100%"
                        filterable
					>
						<el-option
							v-for="e in deptOptions"
							:key="e.id"
							:value="e.id"
							:label="e.name"
						></el-option>
					</el-select>
				</el-form-item>
            </el-col>
            <el-col :span="12">
				<el-form-item label="责任人" prop="user_res" required>
					<span style="display:flex">
                <el-input readonly v-model="saveForm.user_res_name"></el-input>
                <span style="width: 4px"></span>
                <ehsUserSelect :multiple="false" @submit="getUserRes"/>
                </span>
				</el-form-item>
            </el-col>
            <el-col :span="12">
				<el-form-item label="所在区域" prop="area">
					<el-select
						v-model="saveForm.area"
						style="width: 100%"
                        filterable
					>
						<el-option
							v-for="e in areaOptions"
							:key="e.id"
							:value="e.id"
							:label="e.name"
						></el-option>
					</el-select>
				</el-form-item>
            </el-col>
            <el-col :span="12">
				<el-form-item label="具体地点" prop="place">
					<el-input v-model="saveForm.place" clearable></el-input>
				</el-form-item>
            </el-col>
            </el-row>
			</el-form>
			<template #footer>
				<el-button
					type="primary"
					:loading="formSaving"
					@click="formSubmit()"
					>保 存</el-button
				>
			</template>
		</el-dialog>
        <el-drawer v-model="drawerVisible" title="风险点详情" size="40%">
            <Risk :modelv="rowData"></Risk>
        </el-drawer>
	</el-container>
</template>
<script>
import { riskLevelEnum, manageLevelEnum, riskTypeEnum } from "@/utils/enum.js";
import Risk from "./risk.vue"
const defaultForm = {};
export default {
    components:{ Risk },
	data() {
		return {
            riskTypeEnum, riskLevelEnum, manageLevelEnum,
            drawerVisible: false,
			formSaving: false,
			saveDialog: false,
			query: {
				search: "",
			},
			apiObj: this.$API.dpm.riskpoint.list,
			saveForm: Object.assign({}, defaultForm),
            deptOptions:[],
            rowData: {}
		};
	},
    mounted() {
        this.getDeptOptions();
        this.getAreaOptions();
    },
	methods: {
        risk_set(row) {
            this.rowData = row;
            this.drawerVisible = true;
        },
        getAreaOptions() {
            this.$API.am.area.list.req({page: 0}).then(res=>{
                this.areaOptions = res
            })
        }, 
        getDeptOptions() {
            this.$API.system.dept.list.req({page: 0}).then(res=>{
                this.deptOptions = res
            })
        },
        getUserRes(data) {
            this.saveForm.user_res=data.id;
      		this.saveForm.user_res_name=data.name
        },
		handleQuery() {
			this.$refs.table.queryData(this.query);
		},
		table_add() {
			this.saveDialog = true;
		},
        table_edit(row) {
            this.saveForm = Object.assign({}, row);
            this.saveDialog = true;
        },
        table_del(row, index){
            this.$API.dpm.riskpoint.delete.req(row.id).then(res=>{
                this.$message.success("删除成功");
                this.handleQuery();
            })
        },
        formSubmit() {
            this.formSaving = true;
			if (this.saveForm.id){
				this.$API.dpm.riskpoint.update.req(this.saveForm.id, this.saveForm).then(res=>{
					this.$message.success("更新成功");
					this.formSaving = false;
					this.saveDialog = false;
					this.handleQuery();
				}).catch(e=>{this.formSaving=false})
			}else{
				this.$API.dpm.riskpoint.create.req(this.saveForm).then(res=>{
					this.$message.success("创建成功");
					this.formSaving = false;
					this.saveDialog = false;
					this.handleQuery();
				}).catch(err=>{
					this.formSaving = false;
				})
			}
        }
	},
};
</script>
