<template>
    <el-dialog draggable  v-model="dialogVisible" :title="title" width="450px" top="20vh">
        <el-scrollbar>
            <el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
                <!-- <el-form-item label="终端类型" prop="deviceType">
            <el-radio-group v-model="form.deviceType"  :disabled="title == '监测点退运'" @change="changeType">
                <el-radio border label="1">监测终端</el-radio>
                <el-radio border label="2">监测点</el-radio>
            </el-radio-group>
        </el-form-item> -->
                <el-form-item label="监测点" prop="deviceId">
                    <el-tree-select
                        v-model="form.deviceId"
                        :data="data"
                        filterable
                        :default-expand-all="true"
                        style="width: 100%"
                        @change="changeDevStatus"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="监测点当前状态:">
                    <el-select v-model="runFlag" disabled placeholder="请选择监测点" clearable class="select" filterable>
                        <el-option
                            v-for="item in runFlagList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="变更状态:" prop="devStatus">
                    <el-select v-model="form.devStatus" placeholder="请选择监测点变更状态" clearable class="select" filterable>
                        <el-option
                            v-for="item in runFlagData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="退运原因" prop="propertyNo">
                    <!-- <el-input
              v-model='form.propertyNo'
              clearable
              placeholder='请输入退役原因'
          /> -->
                    <el-input
                        type="textarea"
                        clearable
                        :autosize="{ minRows: 2, maxRows: 4 }"
                        placeholder="请输入退运原因"
                        v-model="form.propertyNo"
                    ></el-input>
                </el-form-item>
            </el-form>
        </el-scrollbar>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <!-- <el-button type="primary" @click="submit">确认</el-button> -->
                <el-button type="primary" @click="submit(true)" :loading="loading" >保存</el-button>
                <el-button type="primary" @click="submit(false)" :loading="loading" >提交审批</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { ElMessage } from 'element-plus'
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
import { getTerminalSelectTree } from '@/api/device-boot/Business'
import { addRunningDevice, quitRunningDeviceUpdate } from '@/api/supervision-boot/device/quitRunningDev'
import { getLineDetailData } from '@/api/device-boot/line'

//下拉数据源
const sourceData = ref()
const lineList = ref()
const data = ref()
const title = ref('')
const loading = ref(false)
const tableStore = inject('tableStore') as TableStore
const formRef = ref()
const runFlag = ref('')

const runFlagData: any = ref([])
const dialogVisible = ref(false)
// 注意不要和表单ref的命名冲突
const form = ref({
    id: '',
    deviceId: '',
    deviceType: '2',
    devOriginalStatus: '0',
    devStatus: '',
    saveOrCheckflag: '',
    propertyNo: ''
})
const runFlagList = [
    { id: '0', name: '投运' },
    { id: '1', name: '检修' },
    { id: '2', name: '停运' },
    { id: '3', name: '调试' },
    { id: '4', name: '退运' }
]

//form表单校验规则
const rules = {
    deviceId: [{ required: true, message: '终端不能为空', trigger: 'change' }],
    propertyNo: [{ required: true, message: '请输入退役原因', trigger: 'blur' }],
    devStatus: [{ required: true, message: '请选择变更状态', trigger: 'blur' }]
}
const resetForm = () => {
    if (formRef.value) {
        formRef.value.resetFields()
    }
}

const open = async (text: string, tempData?: any) => {
    title.value = text
    //监测点
    await getTerminalSelectTree(6).then(res => {
        lineList.value = res.data
    })

    sourceData.value = lineList.value
    data.value = lineList.value
    if (tempData) {
        // 表单赋值
        for (let key in form.value) {
            form.value[key] = tempData[key]
        }
        form.value.deviceType = form.value.deviceType + ''
        changeDevStatus(form.value.deviceId, true)
        form.value.devStatus = tempData.devStatus != null ? tempData.devStatus + '' : ''
    } else {
        resetForm()
        // 在此处恢复默认表单
        for (let key in form.value) {
            form.value[key] = ''
        }
        form.value.deviceType = '1'
        runFlag.value = ''
    }
    form.value.deviceType = '2'
    dialogVisible.value = true
}

/**
 * 提交用户表单数据
 */
const submit = async (flag: boolean) => {
    loading.value = true
    if (flag) {
        form.value.saveOrCheckflag = '1'

        await   addRunningDevice(form.value).then(res => {
            ElMessage.success('保存成功!')
            tableStore.index()
            dialogVisible.value = false
        })
    } else {
        formRef.value.validate(async (valid: any) => {
            if (valid) {
                form.value.saveOrCheckflag = '2'
                {
                    if (form.value.id) {
                        await quitRunningDeviceUpdate(form.value)
                        ElMessage.success('重新发起成功')
                        tableStore.index()
                        dialogVisible.value = false
                    } else {
                        await addRunningDevice(form.value)
                        //查询进线数据，避免一直处于loading状态
                        ElMessage.success('申请成功')
                        tableStore.index()
                        dialogVisible.value = false
                    }
                }
            }
        })
    }
    await setTimeout(() => {
        loading.value = false
    }, 0)
}

/**
 * 终端类型切换
 */

const changeType = (event: any) => {
    sourceData.value = lineList.value
    form.value.deviceId = ''
    data.value = sourceData.value
}
const changeDevStatus = async (event: any, flag?: any) => {
    await getLineDetailData(event).then(res => {
        //给当前终端赋值初始投运状态
        // switch (res.data.runFlag) {

        //     case '投运':
        //         form.value.devOriginalStatus = '0'
        //         break
        //     case '检修':
        //         form.value.devOriginalStatus = '1'
        //         break
        //     case '停运':
        //         form.value.devOriginalStatus = '2'
        //         break
        //     case '调试':
        //         form.value.devOriginalStatus = '3'
        //         break
        //     default:
        //         form.value.devOriginalStatus = '4'
        //         break
        // }
        runFlag.value = runFlagList.filter(item => item.name == res.data.runFlag)[0].id
        form.value.devOriginalStatus = runFlag.value
        if (!flag) {
            form.value.devStatus = ''
        }
        runFlagData.value = runFlagList.filter(item => item.name != res.data.runFlag)
    })
}

defineExpose({ open })
</script>

<style scoped>
.el-upload-list__item {
    transition: none !important;
}

.el-select {
    min-width: 180px;
}
</style>
