
<template>
    <base-dialog :title="prop.title" width="60%" :visible="prop.visible" :autoHeight="false" @open="handleOpen"
        @handleConfirm="handleConfirm" @close="handleClose">
        <div class="body">
            <el-form :model="form" label-width="120px">
                <el-form-item>
                    <template #label>
                        <span>
                           <el-tooltip content="多个邮箱之间用逗号','分隔" placement="top">
                              <el-icon><question-filled /></el-icon>
                           </el-tooltip>
                           发送邮箱
                        </span>
                     </template>
                    <el-input v-model="form.email" placeholder="邮箱" />
                </el-form-item>
                <el-form-item label="设备类型">
                    <el-select v-model="form.typeId" @change="typeChange" filterable placeholder="选择设备类型">
                        <el-option value="" label="请选择"></el-option>
                        <el-option v-for="item in monitorList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="监控列表">
                    <el-select v-model="form.ids" :multiple="prop.type == 'add'?true:false" filterable placeholder="Select" style="width: 240px">
                        <el-option v-for="item in optionsList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="邮件标题">
                    <el-input v-model="form.title" placeholder="备注" />
                </el-form-item>
                <el-form-item>
                    <template #label>
                        <span>
                           <el-tooltip content="邮件内容可以用特殊字符代替，$t:设备类型，$x:超标值，$y:超标事件,$z:超标位置传感器" placement="top">
                              <el-icon><question-filled /></el-icon>
                           </el-tooltip>
                           邮件内容
                        </span>
                     </template>
                    <el-input v-model="form.content" placeholder="备注" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="form.remark" placeholder="备注" />
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-switch v-model="form.enable" size="large" style="margin-left: 24px" inline-prompt
                        :active-icon="Check" :inactive-icon="Close" active-value="启用" inactive-value="未启用" />
                </el-form-item>
            </el-form>
        </div>
    </base-dialog>
</template>
   
<script setup>
import { ref, watch, getCurrentInstance,onMounted } from 'vue'
import { Check, Close } from '@element-plus/icons-vue'
import { getDeptList } from '@/api/big/dept'
import {getEmailInfo,AddEmailAlarm,EditEmailAlarm,DeleteEmailAlarm} from '@/api/alarm/index'
import { getDeviceTypeList } from '@/api/big/deviceType'
import { getDeviceList } from '@/api/big/device'

const prop = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
        default: '提示',
    },
    type: {
        type: String,
        default: 'add',
    },
    
})

let form = ref({
            email: undefined,
            typeId: undefined,
            ids: undefined,
            title: '',
            content: undefined,
            remark: undefined,
            enable: '启用',
        })
let monitorList = ref()
//获取设备类型列表
function remoteMethodTypeId() {
    getDeviceTypeList({ pageSize: 100 }).then(res => {
        if (res.code === 200) {
            monitorList.value = res.rows.map(item => {
                return {
                    label: item.desc,
                    value: item.desc
                }
            })
        }
    })
}
//切换类型
function typeChange(val) {
    form.value.ids = []
    DeviceList(val)
}
const optionsList = ref([])
const { proxy: ctx } = getCurrentInstance()


const handleClose = () => {
    //baseFormRef.value.reset()
    form.value = {
        email: undefined,
        typeId: undefined,
        ids: undefined,
        title: '',
        content: undefined,
        remark: undefined,
            enable: '启用',
    }
    emit('closeDialog')
    emit('refreshTable')
}
// 弹窗弹出
const handleOpen = () => {
    if(prop.type == 'add') {
        form.value = {
            email: undefined,
            typeId: undefined,
            ids: undefined,
            title: '',
            content: undefined,
            remark: undefined,
            enable: '启用',
        }
    } else {
        getEmailInfo({deviceId: prop.type}).then(res => {
            form.value = res.data
            form.value.ids = res.data.ids.split(',')
        })
    }
    // getAddFormOptions()
}


// 刷新表格事件
const emit = defineEmits(['refreshTable', 'closeDialog','clearIds'])
// 添加/修改
async function addDeductionInfo() {
    emit('closeDialog')
    //增加
    if (prop.type == 'add') {
        let return_form = JSON.parse(JSON.stringify(form.value))
        return_form.ids = return_form.ids.join(',')
        let { code, msg } = await AddEmailAlarm(return_form)
        ctx.$message({
            type: code === 200 ? 'success' : 'warning',
            message: msg,
        })
        if (code === 200) {
            // 刷新表格
            emit('refreshTable')
            emit('closeDialog')
        }
    } else { //修改
        let { code, msg } = await EditEmailAlarm(form)
        ctx.$message({
            type: code === 200 ? 'success' : 'warning',
            message: msg,
        })
        if (code === 200) {
            // 刷新表格
            emit('refreshTable')
            emit('closeDialog')
        }
    }


}
// 点击确定
const handleConfirm = () => {
    addDeductionInfo()
}

/** 查询设备列表 */
function DeviceList(type) {
    // console.log(JSON.stringify(queryParams.value));
    getDeviceList({userId: 1,type}).then(res => {
        optionsList.value = res.rows.map(item => {
                return {
                    label: item.name,
                    value: item.id
                }
            })
    });
}

onMounted(() => {
    remoteMethodTypeId()
})

</script>
   
<style lang="scss" scoped>
.body {
    height: 100%;
}

.img-preview {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
    padding-top: 10px;
}
</style>