<template>
    <div class="app-container tower-data-collide">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch"
            label-width="68px">
            <el-form-item label="项目名称" prop="projectId" v-if="false">
                <el-select v-model="queryParams.projectId" clearable :disabled="currentPrjId ? true : false" filterable
                    placeholder="请选择所属项目" style="width: 200px" @change="queryProjectChange">
                    <el-option v-for="item in projects" :key="item.id" :label="item.projectName" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属单位" prop="deptId" v-if="false">
                <el-select v-model="queryParams.deptId" clearable :disabled="currentPrjId ? true : false" filterable
                    placeholder="请选择所属单位" style="width: 200px">
                    <el-option v-for="item in subDepts" :key="item.id" :label="item.subDeptName" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="设备序号" prop="deviceKey">
                <el-input
                v-model="queryParams.deviceKey"
                placeholder="请输入设备序列号"
                clearable
                @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item label="创建时间" style="width: 308px">
                <el-date-picker v-model="daterangeCreateTime" value-format="yyyy-MM-dd"
                    type="daterange" range-separator="-" start-placeholder="开始日期"
                    end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple"
                    @click="handleDelete" v-hasPermi="['device:towerDataCollide:remove']">删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="small" @click="handleExport"
                    v-hasPermi="['device:towerDataCollide:export']">导出</el-button>
            </el-col>
            <right-toolbar :showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="towerDataCollideList">
            <el-table-column label="编号" align="center" prop="id" width="88" />
            <el-table-column label="项目名称" align="center" prop="projectName" width="150" />
            <el-table-column label="设备序列号" align="center" prop="deviceKey" width="200" />
            <el-table-column label="塔机坐标x" align="center" prop="coordinateX" width="120" />
            <el-table-column label="塔机坐标y" align="center" prop="coordinateY" width="120" />
            <el-table-column label="前臂长度" align="center" prop="frontBrachium" width="100" />
            <el-table-column label="平衡臂长度" align="center" prop="afterBrachium" width="120" />
            <el-table-column label="塔身高度" align="center" prop="towerBodyHeight" width="100" />
            <el-table-column label="吊钩实时高度" align="center" prop="height" width="160" />
            <el-table-column label="塔机实时回转角度" align="center" prop="angle" width="200" />
            <el-table-column label="吊钩实时幅度" align="center" prop="range" width="160" />
            <el-table-column label="设置的预警距离" align="center" prop="earlyWarningDistance" width="180" />
            <el-table-column label="设置的报警距离" align="center" prop="alarmWarningDistance" width="180" />
            <el-table-column label="塔身高度相差" align="center" prop="contourValue" width="160" />
            <el-table-column label="是否有效" align="center" prop="isDel" width="100">
                <template #default="scope">
                    <dict-tag :options="dict.sys_common_isdel" :value="scope.row.isDel" />
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
                <template #default="scope">
                    <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}:{s}") }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100" fixed="right">
                <template #default="scope">
                    <el-button size="small" type="primary" text icon="el-icon-delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['device:towerDataCollide:remove']">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />

        <!-- 添加或修改塔机碰撞信息对话框 -->
        <el-dialog :title="title" v-model="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="项目主键" prop="projectId">
                    <el-input v-model="form.projectId" placeholder="请输入项目主键" />
                </el-form-item>
                <el-form-item label="总包单位主键" prop="deptId">
                    <el-input v-model="form.deptId" placeholder="请输入总包单位主键" />
                </el-form-item>
                <el-form-item label="设备序列号" prop="deviceKey">
                    <el-input v-model="form.deviceKey" placeholder="请输入设备序列号" />
                </el-form-item>
                <el-form-item label="设备来源" prop="deviceSource">
                    <el-input v-model="form.deviceSource" placeholder="请输入设备来源" />
                </el-form-item>
                <el-form-item label="塔机编号" prop="towerId">
                    <el-input v-model="form.towerId" placeholder="请输入塔机编号" />
                </el-form-item>
                <el-form-item label="塔机坐标x" prop="coordinateX">
                    <el-input v-model="form.coordinateX" placeholder="请输入塔机坐标x" />
                </el-form-item>
                <el-form-item label="塔机坐标y" prop="coordinateY">
                    <el-input v-model="form.coordinateY" placeholder="请输入塔机坐标y" />
                </el-form-item>
                <el-form-item label="前臂长度" prop="frontBrachium">
                    <el-input v-model="form.frontBrachium" placeholder="请输入前臂长度" />
                </el-form-item>
                <el-form-item label="平衡臂长度" prop="afterBrachium">
                    <el-input v-model="form.afterBrachium" placeholder="请输入平衡臂长度" />
                </el-form-item>
                <el-form-item label="塔身高度" prop="towerBodyHeight">
                    <el-input v-model="form.towerBodyHeight" placeholder="请输入塔身高度" />
                </el-form-item>
                <el-form-item label="吊钩实时高度" prop="height">
                    <el-input v-model="form.height" placeholder="请输入吊钩实时高度" />
                </el-form-item>
                <el-form-item label="塔机实时回转角度" prop="angle">
                    <el-input v-model="form.angle" placeholder="请输入塔机实时回转角度" />
                </el-form-item>
                <el-form-item label="吊钩实时幅度" prop="range">
                    <el-input v-model="form.range" placeholder="请输入吊钩实时幅度" />
                </el-form-item>
                <el-form-item label="设置的预警距离" prop="earlyWarningDistance">
                    <el-input v-model="form.earlyWarningDistance" placeholder="请输入设置的预警距离" />
                </el-form-item>
                <el-form-item label="设置的报警距离" prop="alarmWarningDistance">
                    <el-input v-model="form.alarmWarningDistance" placeholder="请输入设置的报警距离" />
                </el-form-item>
                <el-form-item label="塔身高度相差" prop="contourValue">
                    <el-input v-model="form.contourValue" placeholder="请输入塔身高度相差" />
                </el-form-item>
                <el-form-item label="是否有效" prop="isDel">
                    <el-select v-model="form.isDel" placeholder="请选择是否有效">
                        <el-option v-for="dict in dict.sys_common_isdel" :key="dict.value" :label="dict.label"
                            :value="parseInt(dict.value)"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" placeholder="请输入备注" />
                </el-form-item>
                <el-divider content-position="center">碰撞详情信息</el-divider>
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" icon="el-icon-plus" size="small"
                            @click="handleAddDevTowerDataCollideDetail">添加</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="danger" icon="el-icon-delete" size="small"
                            @click="handleDeleteDevTowerDataCollideDetail">删除</el-button>
                    </el-col>
                </el-row>
                <el-table :data="devTowerDataCollideDetailList" :row-class-name="rowDevTowerDataCollideDetailIndex"
                    @selection-change="handleDevTowerDataCollideDetailSelectionChange" ref="devTowerDataCollideDetail">
                    <el-table-column type="selection" width="50" align="center" />
                    <el-table-column label="序号" align="center" prop="index" width="50" />
                    <el-table-column label="设备序列号" prop="deviceKey" width="150">
                        <template #default="scope">
                            <el-input v-model="scope.row.deviceKey" placeholder="请输入设备序列号" />
                        </template>
                    </el-table-column>
                    <el-table-column label="设备来源" prop="deviceSource" width="150">
                        <template #default="scope">
                            <el-input v-model="scope.row.deviceSource" placeholder="请输入设备来源" />
                        </template>
                    </el-table-column>
                    <el-table-column label="塔机编号" prop="towerId" width="150">
                        <template #default="scope">
                            <el-input v-model="scope.row.towerId" placeholder="请输入塔机编号" />
                        </template>
                    </el-table-column>
                    <el-table-column label="塔机坐标x" prop="coordinateX" width="150">
                        <template #default="scope">
                            <el-input v-model="scope.row.coordinateX" placeholder="请输入塔机坐标x" />
                        </template>
                    </el-table-column>
                    <el-table-column label="塔机坐标y" prop="coordinateY" width="150">
                        <template #default="scope">
                            <el-input v-model="scope.row.coordinateY" placeholder="请输入塔机坐标y" />
                        </template>
                    </el-table-column>
                    <el-table-column label="前臂长度" prop="frontBrachium" width="150">
                        <template #default="scope">
                            <el-input v-model="scope.row.frontBrachium" placeholder="请输入前臂长度" />
                        </template>
                    </el-table-column>
                    <el-table-column label="平衡臂长度" prop="afterBrachium" width="150">
                        <template #default="scope">
                            <el-input v-model="scope.row.afterBrachium" placeholder="请输入平衡臂长度" />
                        </template>
                    </el-table-column>
                    <el-table-column label="塔身高度" prop="towerBodyHeight" width="150">
                        <template #default="scope">
                            <el-input v-model="scope.row.towerBodyHeight" placeholder="请输入塔身高度" />
                        </template>
                    </el-table-column>
                    <el-table-column label="吊钩实时高度" prop="height" width="150">
                        <template #default="scope">
                            <el-input v-model="scope.row.height" placeholder="请输入吊钩实时高度" />
                        </template>
                    </el-table-column>
                    <el-table-column label="塔机实时回转角度" prop="angle" width="150">
                        <template #default="scope">
                            <el-input v-model="scope.row.angle" placeholder="请输入塔机实时回转角度" />
                        </template>
                    </el-table-column>
                    <el-table-column label="吊钩实时幅度" prop="range" width="150">
                        <template #default="scope">
                            <el-input v-model="scope.row.range" placeholder="请输入吊钩实时幅度" />
                        </template>
                    </el-table-column>
                    <el-table-column label="最短碰撞水平距离" prop="collideHorizontalDistance" width="150">
                        <template #default="scope">
                            <el-input v-model="scope.row.collideHorizontalDistance" placeholder="请输入最短碰撞水平距离" />
                        </template>
                    </el-table-column>
                    <el-table-column label="最短碰撞前后距离" prop="collideVerticalDistance" width="150">
                        <template #default="scope">
                            <el-input v-model="scope.row.collideVerticalDistance" placeholder="请输入最短碰撞前后距离" />
                        </template>
                    </el-table-column>
                    <el-table-column label="碰撞状态" prop="collideState" width="150">
                        <template #default="scope">
                            <el-input v-model="scope.row.collideState" placeholder="请输入碰撞状态" />
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <div slot-slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    listTowerDataCollide, getTowerDataCollide, delTowerDataCollide,
    addTowerDataCollide, updateTowerDataCollide
} from "@/api/device/towerDataCollide";
import { listProProjectInfoSubdepts } from "@/api/manage/proProjectInfoSubdepts";
import useUserStore from '@/store/modules/user'
import { findMyProjectList } from "@/api/publics";
export default {
    name: "TowerDataCollide",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 子表选中数据
            checkedDevTowerDataCollideDetail: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 塔机碰撞信息表格数据
            towerDataCollideList: [],
            // 碰撞详情表格数据
            devTowerDataCollideDetailList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 碰撞状态时间范围
            daterangeCreateTime: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                projectId: null,
                projectName: null,
                deptId: null,
                deptName: null,
                deviceKey: null,
                deviceSource: null,
                towerId: null,
                createTime: null,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
            },
            dict: {
                sys_common_isdel: []
            },
            userStore: {},
            isAdmin: false,
            projects: [],
            currentPrjId: null,
            subDepts: [],
        };
    },
    created() {
        this.dict = this.useDict('sys_common_isdel');
        this.userStore = useUserStore()
        this.isAdmin = this.userStore.isAdmin;
        //this.queryParams.projectId = this.userStore.currentPrjId;
        //this.queryParams.comId = this.userStore.currentComId;
        this.currentPrjId = this.userStore.currentPrjId;
        this.queryProjectChange();
        this.getList();
        this.getProjectList();
    },
    methods: {
        queryProjectChange() {
            this.subDepts = []
            this.queryParams.deptId = "";
            if (this.queryParams.projectId) {
                this.getSubDepts(this.queryParams.projectId, data => {
                    this.subDepts = data;
                })
            }
        },
        getSubDepts(prjId, cb) {
            listProProjectInfoSubdepts({ projectId: prjId, pageNum: 1, pageSize: 100, activeTags: "finished" }).then(d => {
                let subdepts = d.rows || [];
                cb && cb(subdepts);
            });
        },
        /** 查询项目列表 */
        getProjectList() {
            findMyProjectList({ pageNum: 1, pageSize: 100 }).then(response => {
                this.projects = response.rows;
            });
        },

        /** 查询塔机碰撞信息列表 */
        getList() {
            this.loading = true;
            this.queryParams.params = {};
            if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
                this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
                this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
            }
            listTowerDataCollide(this.queryParams).then(response => {
                this.towerDataCollideList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                projectId: null,
                deptId: null,
                deviceKey: null,
                deviceSource: null,
                towerId: null,
                coordinateX: null,
                coordinateY: null,
                frontBrachium: null,
                afterBrachium: null,
                towerBodyHeight: null,
                height: null,
                angle: null,
                range: null,
                earlyWarningDistance: null,
                alarmWarningDistance: null,
                contourValue: null,
                isDel: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null,
                remark: null
            };
            this.devTowerDataCollideDetailList = [];
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.daterangeCreateTime = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加塔机碰撞信息";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids
            getTowerDataCollide(id).then(response => {
                this.form = response.data;
                this.devTowerDataCollideDetailList = response.data.devTowerDataCollideDetailList;
                this.open = true;
                this.title = "修改塔机碰撞信息";
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.form.devTowerDataCollideDetailList = this.devTowerDataCollideDetailList;
                    if (this.form.id != null) {
                        updateTowerDataCollide(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addTowerDataCollide(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal.confirm('是否确认删除塔机碰撞信息编号为"' + ids + '"的数据项？').then(function () {
                return delTowerDataCollide(ids);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        /** 碰撞详情序号 */
        rowDevTowerDataCollideDetailIndex({ row, rowIndex }) {
            row.index = rowIndex + 1;
        },
        /** 碰撞详情添加按钮操作 */
        handleAddDevTowerDataCollideDetail() {
            let obj = {};
            obj.deviceKey = "";
            obj.deviceSource = "";
            obj.towerId = "";
            obj.coordinateX = "";
            obj.coordinateY = "";
            obj.frontBrachium = "";
            obj.afterBrachium = "";
            obj.towerBodyHeight = "";
            obj.height = "";
            obj.angle = "";
            obj.range = "";
            obj.collideHorizontalDistance = "";
            obj.collideVerticalDistance = "";
            obj.collideState = "";
            this.devTowerDataCollideDetailList.push(obj);
        },
        /** 碰撞详情删除按钮操作 */
        handleDeleteDevTowerDataCollideDetail() {
            if (this.checkedDevTowerDataCollideDetail.length == 0) {
                this.$modal.msgError("请先选择要删除的碰撞详情数据");
            } else {
                const devTowerDataCollideDetailList = this.devTowerDataCollideDetailList;
                const checkedDevTowerDataCollideDetail = this.checkedDevTowerDataCollideDetail;
                this.devTowerDataCollideDetailList = devTowerDataCollideDetailList.filter(function (item) {
                    return checkedDevTowerDataCollideDetail.indexOf(item.index) == -1
                });
            }
        },
        /** 复选框选中数据 */
        handleDevTowerDataCollideDetailSelectionChange(selection) {
            this.checkedDevTowerDataCollideDetail = selection.map(item => item.index)
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('manage/device/towerDataCollide/export', {
                ...this.queryParams
            }, `towerDataCollide_${new Date().getTime()}.xlsx`)
        }
    }
};
</script>

<style lang="scss">
.tower-data-collide {}
</style>