<template>
    <!-- 感知设备 ---- 设备管理  -->
    <div class="app-container">
        <TableModel
            ref="tableRef"
            :formLabel="formLabel"
            :sendParams="sendParams"
            :columnsList="columnsList"
            :isSelectShow="false"
            :request-api="getEquipmentManageListInDetailsAPI"
        >
            <template slot="btn">
                <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleAddOrOther(null, 1)">
                    新增
                </el-button>
            </template>
            <template slot="handle" slot-scope="{ data }">
                <el-button size="mini" type="primary" @click="handleAddOrOther(data, 2)" icon="el-icon-edit">
                    修改
                </el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDeleteData(data)">
                    删除
                </el-button>
            </template>

            <template slot="status" slot-scope="{ data }">
                <el-tag size="mini">状态 </el-tag>
            </template>
        </TableModel>

        <!-- 弹框 -->
        <DialogModel :dialogConfig="dialogConfig" @closeDialogOuter="closeDialogOuter">
            <template slot="outerContent">
                <el-form label-width="auto" :model="addOrEditForm" :rules="addOrEditFormRules" ref="addOrEditFormRef">
                    <el-form-item label="监测名称：" prop="attrName">
                        <el-input placeholder="请输入监测名称" v-model="addOrEditForm.attrName" clearable />
                    </el-form-item>
                    <el-form-item label="编码：" prop="attrCode">
                        <el-input placeholder="请输入编码" v-model="addOrEditForm.attrCode" clearable />
                    </el-form-item>
                    <el-form-item label="监测时间：" prop="updateTime">
                        <el-date-picker
                            type="datetime"
                            style="width: 100%"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            v-model="addOrEditForm.updateTime"
                            placeholder="请选择监测时间"
                        />
                    </el-form-item>

                    <el-form-item label="采集值：" prop="attrVal">
                        <el-input placeholder="请输入采集值" v-model="addOrEditForm.attrVal" clearable />
                    </el-form-item>

                    <el-form-item label="采集值类型：" prop="dataType">
                        <el-input placeholder="请输入采集值类型" v-model="addOrEditForm.dataType" clearable />
                    </el-form-item>
                    <el-form-item label="采集值单位：" prop="unit">
                        <el-input placeholder="请输入采集值单位" v-model="addOrEditForm.unit" clearable />
                    </el-form-item>
                    <el-form-item label="是否告警：" prop="isWarn">
                        <el-select v-model="addOrEditForm.isWarn" clearable filterable style="width: 100%">
                            <el-option label="是" value="1" />
                            <el-option label="否" value="0" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="变化值：" prop="changeVal">
                        <el-input placeholder="请输入变化值" v-model="addOrEditForm.changeVal" clearable />
                    </el-form-item>

                    <el-form-item label="最大阈值：" prop="maxVal">
                        <el-input placeholder="请输入最大阈值" v-model="addOrEditForm.maxVal" clearable />
                    </el-form-item>
                    <el-form-item label="最小阈值：" prop="minVal">
                        <el-input placeholder="请输入最小阈值" v-model="addOrEditForm.minVal" clearable />
                    </el-form-item>

                    <el-form-item label="备注：" prop="remark">
                        <el-input placeholder="请输入编码" v-model="addOrEditForm.remark" clearable />
                    </el-form-item>

                    <el-form-item class="handle">
                        <el-button @click="onCancel"> 取消 </el-button>
                        <el-button type="primary" @click="onSubmitForm"> 保存 </el-button>
                    </el-form-item>
                </el-form>
            </template>
        </DialogModel>
    </div>
</template>

<script>
import TableModel from '@/components/TableModel'
import DialogModel from '@/components/DialogModel'

import { formLabel, columnsList, dialogConfig } from './config'
import {
    getEquipmentManageListInDetailsAPI,
    addEquipmentManageDataInDetailsAPI,
    editEquipmentManageDataInDetailsAPI,
    deleteEquipmentManageDataInDetailsAPI,
} from '@/api/perception-devices/equipment-manage.js'
export default {
    props: {
        detailsId: {
            type: [Number, String],
            default: () => '',
        },
    },
    components: {
        TableModel,
        DialogModel,
    },
    data() {
        return {
            formLabel,
            columnsList,
            dialogConfig,
            getEquipmentManageListInDetailsAPI,
            dialogType: 1,
            // 新增或修改接口
            addOrEditForm: {
                devId: '', // 外层列表id
                attrName: '', // 监测名称
                updateTime: '', // 创建时间
                attrVal: '', //采集值
                dataType: '', // 采集值类型
                unit: '', // 采集值单位
                isWarn: '', // 是否告警
                changeVal: '', // 变化值
                maxVal: '', // 最大阈值
                minVal: '', // 最小阈值
                attrCode: '', // 设备级联编码
                remark: '', // 备注
                attrId: '',
            },
            addOrEditFormRules: {
                attrName: [
                    {
                        required: true,
                        message: '请输入监测名称',
                        trigger: 'blur',
                    },
                ],
                attrCode: [
                    {
                        required: true,
                        message: '请输入编码',
                        trigger: 'blur',
                    },
                ],
            },

            // 列表查询参数
            sendParams: {
                devId: '',
            },
        }
    },
    methods: {
        handleAddOrOther(data, type) {
            const titleType = {
                1: '新增',
                2: '修改',
            }

            if (type === 2) {
                const {
                    devId, // 外层列表id
                    attrName, // 监测名称
                    updateTime, // 创建时间
                    attrVal, //采集值
                    dataType, // 采集值类型
                    unit, // 采集值单位
                    isWarn, // 是否告警
                    changeVal, // 变化值
                    maxVal, // 最大阈值
                    minVal, // 最小阈值
                    attrCode, // 设备级联编码
                    remark, // 备注
                    attrId, // 列表id
                } = data

                Object.assign(this.addOrEditForm, {
                    devId, // 外层列表id
                    attrName, // 监测名称
                    updateTime, // 创建时间
                    attrVal, //采集值
                    dataType, // 采集值类型
                    unit, // 采集值单位
                    isWarn, // 是否告警
                    changeVal, // 变化值
                    maxVal, // 最大阈值
                    minVal, // 最小阈值
                    attrCode, // 设备级联编码
                    remark, // 备注
                    attrId, // 列表id
                })
            } else {
                this.addOrEditForm = {
                    devId: '', // 外层列表id
                    attrName: '', // 监测名称
                    updateTime: '', // 创建时间
                    attrVal: '', //采集值
                    dataType: '', // 采集值类型
                    unit: '', // 采集值单位
                    isWarn: '', // 是否告警
                    changeVal: '', // 变化值
                    maxVal: '', // 最大阈值
                    minVal: '', // 最小阈值
                    attrCode: '', // 设备级联编码
                    remark: '', // 备注
                    attrId: '',
                }
            }
            this.dialogType = type
            this.dialogConfig.outerVisible = true
            this.dialogConfig.outerTitle = titleType[type]
        },
        handleDeleteData(data) {
            this.$modal
                .confirm(`是否确认删除该条数据`)
                .then(async () => {
                    const res = await deleteEquipmentManageDataInDetailsAPI({ attrId: data.attrId })
                    if (res.code === 200) {
                        this.$modal.msgSuccess('删除成功')
                        this.$refs.tableRef.getTableList()
                    }
                })
                .catch(() => {})
        },
        /** 关闭外侧弹框 */
        closeDialogOuter() {
            this.$refs.addOrEditFormRef.resetFields()
            this.dialogConfig.outerVisible = false
        },

        // 表单提交
        onSubmitForm() {
            this.$refs.addOrEditFormRef.validate(async (valid) => {
                if (valid) {
                    // this.dialogConfig.outerVisible = false

                    const {
                        devId, // 外层列表id
                        attrName, // 监测名称
                        updateTime, // 创建时间
                        attrVal, //采集值
                        dataType, // 采集值类型
                        unit, // 采集值单位
                        isWarn, // 是否告警
                        changeVal, // 变化值
                        maxVal, // 最大阈值
                        minVal, // 最小阈值
                        attrCode, // 设备级联编码
                        remark, // 备注
                        attrId,
                    } = this.addOrEditForm
                    const params = {
                        devId, // 外层列表id
                        attrName, // 监测名称
                        updateTime, // 创建时间
                        attrVal, //采集值
                        dataType, // 采集值类型
                        unit, // 采集值单位
                        isWarn, // 是否告警
                        changeVal, // 变化值
                        maxVal, // 最大阈值
                        minVal, // 最小阈值
                        attrCode, // 设备级联编码
                        remark, // 备注
                    }

                    // 当修改表单时需要传递列表id
                    if (this.dialogType === 2) {
                        params.attrId = attrId
                    }

                    params.devId = this.detailsId
                    console.log(
                        `%c🔍 感知设备详情属性${this.dialogType === 1 ? '新增' : '修改'}入参 %c`,
                        'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
                        '',
                        params,
                    )

                    const API =
                        this.dialogType === 1 ? addEquipmentManageDataInDetailsAPI : editEquipmentManageDataInDetailsAPI

                    const res = await API(params)

                    if (res.code === 200) {
                        this.$modal.msgSuccess(this.dialogType === 1 ? '新增成功' : '修改成功')
                        this.$refs.tableRef.getTableList()
                    }
                    this.$refs.addOrEditFormRef.resetFields()
                    this.dialogConfig.outerVisible = false
                }
            })
        },

        // 取消按钮
        onCancel() {
            this.$refs.addOrEditFormRef.resetFields()
            this.dialogConfig.outerVisible = false
        },
    },

    watch: {
        detailsId: {
            handler(newValue) {
                this.sendParams.devId = newValue
            },
            deep: true,
            immediate: true,
        },
    },
}
</script>

<style></style>
