<template>
    <el-dialog draggable v-model="dialogVisible" :title="title" style="width: 1100px" :before-close="handleClose">
        <el-form :model="ordinaryA" :inline="true" class="form">
            <el-form-item>
                <Area v-model="ordinaryA.orgNo"></Area>
            </el-form-item>

            <el-form-item label="普测结果上传时间">
                <el-date-picker
                    v-model="ordinaryA.planStartTime"
                    type="month"
                    format="YYYY-MM"
                    value-format="YYYY-MM-DD"
                    placeholder="选择月"
                    @change="queryPlanName"
                ></el-date-picker>
            </el-form-item>

            <el-form-item label="普测计划名称">
                <el-select v-model="ordinaryA.planName" clearable placeholder="请选择" filterable>
                    <el-option
                        v-for="item in planNameList"
                        :key="item.planName"
                        :label="item.planName"
                        :value="item.planName"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-Search" @click="searchFnExcessive">查询</el-button>
            </el-form-item>
        </el-form>
        <vxe-table v-bind="defaultAttribute" height="350" ref="xTable2Ref" :data="ordinaryAddData">
            <vxe-column type="radio" width="60"></vxe-column>
            <vxe-column field="subName" title="变电站名称"></vxe-column>
            <vxe-column field="voltageLevelName" title="变电站电压等级"></vxe-column>
        </vxe-table>

        <el-form :model="ordinaryA" :rules="rules" ref="ordinaryARef" label-width="auto" :inline="true" class="form">
            <el-form-item label="稳态指标" prop="steadyState">
                <el-checkbox-group v-model="ordinaryA.steadyState">
                    <el-checkbox v-for="(item, ind) in steadyStateList" :key="ind" :label="item.code">
                        {{ item.name }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <br />
            <el-form-item label="暂态指标" prop="transientIndicators">
                <el-checkbox-group v-model="ordinaryA.transientIndicators">
                    <el-checkbox v-for="(item, ind) in transientIndicatorsList" :key="ind" :label="item.code">
                        {{ item.name }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <br />
            <el-form-item label="上传附件">
                <el-upload
                    ref="upload"
                    action=""
                    :auto-upload="false"
                    :show-file-list="false"
                    :limit="1"
                    :on-change="beforeUpload"
                >
                    <el-button icon="el-icon-Upload" type="primary" class="mr10">上传</el-button>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="submit">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useDictData } from '@/stores/dictData'
const emit = defineEmits(['onsubmit'])
const dictData = useDictData()
const dialogVisible = ref(false)
const title: any = ref('')
const steadyStateList = dictData.getBasicData('Steady_Indicator')
const transientIndicatorsList = dictData.getBasicData('Transient_Indicators')

const ordinaryA = ref({
    orgNo: '',
    orgName: '',
    planName: '',
    planStartTime: '',
    uploadTime: '',
    name: '',
    steadyState: [],
    transientIndicators: []
})
const defaultAttribute = ref([])
const rules = {
    problemName: [{ required: true, message: '请输入问题名称', trigger: 'blur' }],
    userName: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
    userNo: [{ required: true, message: '请输入用户编号', trigger: 'blur' }],
    complaintContent: [{ required: true, message: '请输入投诉内容', trigger: 'blur' }],
    complaintTime: [{ required: true, message: '请选择时间', trigger: 'change' }],
    problemSources: [{ required: true, message: '情选择问题来源', trigger: 'change' }],
    abnormalDevTime: [{ required: true, message: '请选择时间', trigger: 'change' }],
    transientIndicators: [{ required: true, message: '请选择暂态指标', trigger: 'change' }],
    steadyState: [{ required: true, message: '请选择稳态指标', trigger: 'change' }],
    eventDescription: [{ required: true, message: '请输入终端异常描述', trigger: 'blur' }],
    abnormalDevName: [{ required: true, message: '请输入问题名称', trigger: 'blur' }]
}
const submit = () => {
    handleClose()
}

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

const handleClose = () => {
    dialogVisible.value = false
}
const beforeUpload = () => {}
defineExpose({ open })
</script>
<style lang="scss" scoped>
:deep(.el-upload-list__item) {
    width: 400px;
}
</style>
