<template>
    <el-dialog draggable v-model="dialogVisible" :title="title" style="width: 800px" :before-close="handleClose">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="auto" :scroll-to-error="true">
            <el-row>
                <el-col :span="12">
                    <el-form-item for="-" label="用户名称:" prop="userName">
                        <el-input v-model="form.userName" clearable style="width: 100%"
                            placeholder="请输入用户名称" maxlength="32" show-word-limit></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item for="-" label="用户编号:" prop="userNumber">
                        <el-input v-model="form.userNumber" clearable style="width: 100%"
                            placeholder="请输入用户编号" maxlength="32" show-word-limit></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item for="-" label="是否实现监测:" prop="detectionFlag">
                        <el-radio-group v-model="form.detectionFlag">
                            <el-radio value="0">否</el-radio>
                            <el-radio value="1">是</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item for="-" label="负责单位:" prop="dutyOrgId">
                        <Area ref="areaRef" v-model="form.dutyOrgId" style="width: 100%" />
                        <!-- <el-select v-model="form.dutyOrgId" clearable placeholder="请选择负责单位">
                            <el-option
                                v-for="item in areaOptionList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select> -->
                    </el-form-item>
                </el-col>
                <el-col v-if="form.detectionFlag == '1'" :span="12">
                    <!-- <el-form-item for="-" label="监测点名称:" prop="monitorName">
                        <el-input
                            v-model="form.monitorName"
                            clearable
                            style="width: 100%"
                            placeholder="请输入监测点名称"
                        ></el-input>
                    </el-form-item> -->
                    <el-form-item for="-" label="监测点:" prop="monitorNumber">
                        <el-select v-model="form.monitorNumber" clearable filterable style="width: 100%" placeholder="请选择监测点" >
                            <el-option v-for="item in minitorList" :key="item.id" :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- <el-row v-if="form.detectionFlag == '1'">
                <el-col :span="12">
                    <el-form-item for="-" label="监测点编号:" prop="monitorNumber">
                        <el-input
                            v-model="form.monitorNumber"
                            clearable
                            style="width: 100%"
                            placeholder="请输入监测点编号"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row> -->

            <el-form-item for="-" label="投诉内容:" prop="complaintText">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容"
                    v-model="form.complaintText"></el-input>
            </el-form-item>
            <el-form-item for="-" label="稳态指标:">
                <el-checkbox-group v-model="form.steadyIndicator">
                    <div style="width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start">
                        <el-checkbox style="flex: none; width: 120px" v-for="(item, ind) in steadyStateList" :key="ind"
                            :label="item.name">
                            <!-- @change="changeSteadyState" -->
                            {{ item.name }}
                        </el-checkbox>
                    </div>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item for="-" label="暂态指标:">
                <el-checkbox-group v-model="form.transientIndicators">
                    <div style="width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start">
                        <el-checkbox style="flex: none; width: 120px" v-for="(item, ind) in transientIndicatorsList"
                            :key="ind" :label="item.name">
                            <!-- @change="changeTransientIndicators" -->
                            {{ item.name }}
                        </el-checkbox>
                    </div>
                </el-checkbox-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="submit" :loading="loading">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, defineEmits } from 'vue'
import { useDictData } from '@/stores/dictData'
import { useAdminInfo } from '@/stores/adminInfo'
import { genFileId, ElMessage } from 'element-plus'
import { addComplaintsData, getLineDetailByDeptId } from '@/api/process-boot/electricitymanagement'
import Area from '@/components/form/area/index.vue'
const emits = defineEmits(['onSubmit'])
const dictData = useDictData()
const dialogVisible = ref(false)
const loading = ref(false)
const title: any = ref('')
const steadyStateList = dictData.getBasicData('Steady_Indicator')
const transientIndicatorsList = dictData.getBasicData('Transient_Indicators')
const form: any = ref({})
//获取登陆用户姓名和部门
const adminInfo = useAdminInfo()
//获取监测点信息
const minitorList = ref([])
const getMinitorList = () => {
    getLineDetailByDeptId({ id: adminInfo.$state.deptId }).then(res => {
        minitorList.value = res.data
    })
}
getMinitorList()
const resetForm = () => {
    form.value = {
        complaintText: '', //投诉内容
        detectionFlag: '0', //是否实现监测
        steadyIndicator: [], //稳态指标
        transientIndicators: [], //暂态指标
        userName: '', //用户名称
        userNumber: '', //用户编号
        userCategory: '', //用户类别
        monitorName: '', //监测点名称
        monitorNumber: '', //监测点编号
        dutyOrgId: ''
    }
}
//字典获取所在地市
const areaOptionList = dictData.getBasicData('jibei_area')

const rules = {
    userName: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
    userNumber: [{ required: true, message: '请输入用户编号', trigger: 'blur' }],
    userCategory: [{ required: true, message: '请选择用户类别', trigger: 'change' }],
    complaintText: [{ required: true, message: '请输入投诉内容', trigger: 'blur' }],
    detectionFlag: [{ required: true, message: '请选择是否实现监测', trigger: 'change' }],
    transientIndicators: [{ required: true, message: '请选择暂态指标', trigger: 'change' }],
    steadyIndicator: [{ required: true, message: '请选择稳态指标', trigger: 'change' }],
    monitorName: [{ required: true, message: '请输入监测点名称', trigger: 'blur' }],
    monitorNumber: [{ required: true, message: '请选择监测点', trigger: 'change' }],
    dutyOrgId: [{ required: true, message: '请选择负责单位', trigger: 'change' }]
}
const formRef = ref()
const submit = async () => {
    loading.value = true
    formRef.value.validate(async (valid) => {
        if (valid) {
            form.value = {
                ...form.value,
                steadyIndicator: form.value.steadyIndicator.join(','),
                transientIndicators: form.value.transientIndicators.join(','),
                monitorName: minitorList.value.find(item => {
                    return item.id == form.value.monitorNumber
                })?.name
            }
            await addComplaintsData(form.value).then(res => {
                if (res.code == 'A0000') {
                    ElMessage({
                        message: '新增成功',
                        type: 'success'
                    })
                    emits('onSubmit')
                    formRef.value && formRef.value.resetFields()
                    resetForm()
                    handleClose()
                }
            })
        } else {
            console.log('表单验证失败')
            return false
        }
    })
    await setTimeout(() => {
        loading.value = false
    }, 0)
}

const open = (row: any) => {
    resetForm()
    dialogVisible.value = true
    title.value = row.text
}

const handleClose = () => {
    formRef.value && formRef.value.resetFields()
    dialogVisible.value = false
}
const changeSteadyState = () => {
    form.value.transientIndicators = []
}
const changeTransientIndicators = () => {
    form.value.steadyIndicator = []
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
.el-form {
    width: 96%;
    margin: 0 auto;
    height: 400px;
    margin-top: 20px;
}
</style>
