<!--暂降治理参数准备页面-->
<template>
    <el-form :inline='false' :model='form' label-width='135px' :rules='rules' ref='formRef'>
        <!--基础数据-->
        <div class='singleParamContent'>
            <el-divider content-position='left' class='divider'>
                <span class='dividerFontStyle'>基础信息</span>
            </el-divider>
            <el-row>
                <el-col :span='7'>
                    <el-form-item label='用户' prop='userId'>
                        <el-select v-model='form.userId' @change='changeUser'>
                            <el-option v-for='item in userListData' :key='item.id' :label='item.userName'
                                :value='item.id' />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span='7' :offset='1'>
                    <el-form-item label='生产线' prop='productLineId'>
                        <el-select v-model='form.productLineId' filterable>
                            <el-option v-for='item in productLineData' :key='item.id' :label='item.name'
                                :value='item.id' />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span='8'>
                    <el-button style='height: 72px;position: absolute;right: 0;' type='primary' @click='calcSag'>开始评估
                    </el-button>
                </el-col>

                <el-col :span='7'>
                    <el-form-item label='期望回收周期' prop='payBackPeriod'>
                        <el-select v-model='form.payBackPeriod'>
                            <el-option v-for='item in 5' :key='item' :label='item + "年"' :value='item' />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span='13' :offset='1'>
                    <el-form-item label='参考数据范围' style='grid-column: span 2; max-width: unset'>
                        <date-picker ref='datePickerRef'></date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
        </div>
        <!--UPS参数-->
        <div class='singleParamContent'>
            <el-divider content-position='left' class='divider'>
                <span class='dividerFontStyle'>UPS补偿</span>
            </el-divider>
            <el-row>
                <el-col :span='7'>
                    <el-form-item label='购置价格' prop='ups.price'>
                        <el-input v-model='form.ups.price' clearable>
                            <template #append>万元/kVA</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='7' :offset='1'>
                    <el-form-item label='补偿能力' prop='ups.compensation'>
                        <el-input v-model='form.ups.compensation' clearable>
                            <template #append>p.u.</template>
                        </el-input>
                    </el-form-item>
                </el-col>

                <el-col :span='7' :offset='1'>
                    <el-form-item label='年维护费' prop='ups.maintainFee'>
                        <el-input v-model='form.ups.maintainFee' clearable>
                            <template #append>万元/kVA</template>
                        </el-input>
                    </el-form-item>
                </el-col>

                <el-col :span='7'>
                    <el-form-item label='响应时间' prop='ups.responseTime'>
                        <el-input v-model='form.ups.responseTime' clearable>
                            <template #append>ms</template>
                        </el-input>
                    </el-form-item>
                </el-col>

                <el-col :span='7' :offset='1'>
                    <el-form-item label='后备时间' prop='ups.backupTime'>
                        <el-input v-model='form.ups.backupTime' clearable>
                            <template #append>s</template>
                        </el-input>
                    </el-form-item>
                </el-col>


            </el-row>
        </div>
        <!--AVC参数-->
        <div class='singleParamContent'>
            <el-divider content-position='left' class='divider'>
                <span class='dividerFontStyle'>AVC补偿</span>
            </el-divider>
            <el-row>
                <el-col :span='7'>
                    <el-form-item label='购置价格' prop='avc.price'>
                        <el-input v-model='form.avc.price' clearable>
                            <template #append>万元/kVA</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='7' :offset='1'>
                    <el-form-item label='补偿能力' prop='avc.compensation'>
                        <el-input v-model='form.avc.compensation' clearable>
                            <template #append>p.u.</template>
                        </el-input>
                    </el-form-item>
                </el-col>

                <el-col :span='7' :offset='1'>
                    <el-form-item label='年维护费' prop='avc.maintainFee'>
                        <el-input v-model='form.avc.maintainFee' clearable>
                            <template #append>万元/kVA</template>
                        </el-input>
                    </el-form-item>
                </el-col>

                <el-col :span='7'>
                    <el-form-item label='响应时间' prop='avc.responseTime'>
                        <el-input v-model='form.avc.responseTime' clearable>
                            <template #append>ms</template>
                        </el-input>
                    </el-form-item>
                </el-col>

                <el-col :span='7' :offset='1'>
                    <el-form-item label='后备时间' prop='avc.backupTime'>
                        <el-input v-model='form.avc.backupTime' clearable>
                            <template #append>s</template>
                        </el-input>
                    </el-form-item>
                </el-col>

            </el-row>
        </div>
        <!--快切参数-->
        <div class='singleParamContent'>
            <el-divider content-position='left' class='divider'>
                <span class='dividerFontStyle'>快切开关</span>
            </el-divider>
            <el-row>
                <el-col :span='7'>
                    <el-form-item label='备用进线' prop='quick.incomingLineId'>
                        <el-select v-model='form.quick.incomingLineId'>
                            <el-option v-for='item in incomingLineListData' :key='item.id' :label='item.name'
                                :value='item.id' />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span='7' :offset='1'>
                    <el-form-item label='终端容量' prop='quick.governMachinePower'>
                        <el-input v-model='form.quick.governMachinePower' clearable>
                            <template #append>kVA</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='7' :offset='1'>
                    <el-form-item label='购置价格' prop='quick.price'>
                        <el-input v-model='form.quick.price' clearable>
                            <template #append>万元</template>
                        </el-input>
                    </el-form-item>
                </el-col>

                <el-col :span='7'>
                    <el-form-item label='建设成本' prop='quick.buildFee'>
                        <el-input v-model='form.quick.buildFee' clearable>
                            <template #append>万元</template>
                        </el-input>
                    </el-form-item>
                </el-col>

                <el-col :span='7' :offset='1'>
                    <el-form-item label='年维护费用' prop='quick.quickMaintainFee'>
                        <el-input v-model='form.quick.quickMaintainFee' clearable>
                            <template #append>万元</template>
                        </el-input>
                    </el-form-item>
                </el-col>

                <el-col :span='7' :offset='1'>
                    <el-form-item label='动作时间' prop='quick.actionTime'>
                        <el-input v-model='form.quick.actionTime' clearable>
                            <template #append>ms</template>
                        </el-input>
                    </el-form-item>
                </el-col>

            </el-row>
        </div>

    </el-form>
</template>
<script setup lang='ts'>
import DatePicker from '@/components/form/datePicker/index.vue'
import { ref, reactive, onMounted } from 'vue'
import emitter from '@/utils/emitter'
import { numberRegex } from '@/utils/regexPattern'
import { querySgProductLineByUserId } from '@/api/advance-boot/sgGroven/sgProductLine'
import { ElMessage } from 'element-plus'
import { sgUserList } from '@/api/advance-boot/sgGroven/sgUser'
import { querySgIncomingLineByUserId } from '@/api/advance-boot/sgGroven/incomingLine'
import { calc } from '@/api/advance-boot/sgGroven/sgScheme'

defineOptions({
    name: 'calcParamPrepare'
})

const props = defineProps(['userId'])


const productLineOwnIncomingLineId = ref('')
const formRef = ref()
const datePickerRef = ref()
const userListData: any = ref([])
const productLineData: any = ref([])
const incomingLineListData: any = ref([])


// 注意不要和表单ref的命名冲突
let form = reactive({
    userId: '',
    productLineId: '',
    startTime: '',
    endTime: '',
    payBackPeriod: 5,
    ups: {
        price: 0.145,
        compensation: 1,
        maintainFee: 0.001,
        responseTime: 1,
        backupTime: 900
    },
    avc: {
        price: 0.25,
        compensation: 0.3,
        maintainFee: 0.001,
        responseTime: 1,
        backupTime: 3
    },
    quick: {
        governMachinePower: 252,
        price: 50,
        buildFee: 10,
        quickMaintainFee: 0.5,
        actionTime: 20,
        incomingLineId: ''
    }
})


//form表单校验规则
const rules = {
    userId: [{ required: true, message: '用户必选', trigger: 'change' }],
    productLineId: [{ required: true, message: '生产线必选', trigger: 'change' }],
    payBackPeriod: [{ required: true, message: '期望回收周期必填', trigger: 'change' }],
    ups: {
        price: [
            { required: true, message: '购置价格不能为空', trigger: 'blur' },
            { pattern: numberRegex, message: '请输入有效的数值', trigger: 'blur' }
        ],
        compensation: [
            { required: true, message: '补偿能力不能为空', trigger: 'blur' },
            { pattern: numberRegex, message: '请输入有效的数值', trigger: 'blur' }
        ],
        maintainFee: [
            { required: true, message: '年维护费不能为空', trigger: 'blur' },
            { pattern: numberRegex, message: '请输入有效的数值', trigger: 'blur' }
        ],
        responseTime: [
            { required: true, message: '响应时间不能为空', trigger: 'blur' },
            { pattern: numberRegex, message: '请输入有效的数值', trigger: 'blur' }
        ],
        backupTime: [
            { required: true, message: '后备时间不能为空', trigger: 'blur' },
            { pattern: numberRegex, message: '请输入有效的数值', trigger: 'blur' }
        ]
    },

    avc: {
        price: [
            { required: true, message: '购置价格不能为空', trigger: 'blur' },
            { pattern: numberRegex, message: '请输入有效的数值', trigger: 'blur' }
        ],
        compensation: [
            { required: true, message: '补偿能力不能为空', trigger: 'blur' },
            { pattern: numberRegex, message: '请输入有效的数值', trigger: 'blur' }
        ],
        maintainFee: [
            { required: true, message: '年维护费不能为空', trigger: 'blur' },
            { pattern: numberRegex, message: '请输入有效的数值', trigger: 'blur' }
        ],
        responseTime: [
            { required: true, message: '响应时间不能为空', trigger: 'blur' },
            { pattern: numberRegex, message: '请输入有效的数值', trigger: 'blur' }
        ],
        backupTime: [
            { required: true, message: '后备时间不能为空', trigger: 'blur' },
            { pattern: numberRegex, message: '请输入有效的数值', trigger: 'blur' }
        ]
    },

    quick: {
        governMachinePower: [
            { required: true, message: '终端容量不能为空', trigger: 'blur' },
            { pattern: numberRegex, message: '请输入有效的数值', trigger: 'blur' }
        ],
        price: [
            { required: true, message: '购置价格不能为空', trigger: 'blur' },
            { pattern: numberRegex, message: '请输入有效的数值', trigger: 'blur' }
        ],
        buildFee: [
            { required: true, message: '构建成本不能为空', trigger: 'blur' },
            { pattern: numberRegex, message: '请输入有效的数值', trigger: 'blur' }
        ],
        quickMaintainFee: [
            { required: true, message: '年维护费不能为空', trigger: 'blur' },
            { pattern: numberRegex, message: '请输入有效的数值', trigger: 'blur' }
        ],
        actionTime: [
            { required: true, message: '动作时间不能为空', trigger: 'blur' },
            { pattern: numberRegex, message: '请输入有效的数值', trigger: 'blur' }
        ],
        incomingLineId: [{ required: true, message: '备用进线必选', trigger: 'change' }]
    }
}

/**
 * 用户下拉框发生更新
 */
const changeUser = async () => {
    await querySgProductLineByUserId(form.userId).then(res => {
        if (res.data && res.data.length > 0) {
            productLineData.value = res.data
            //并且默认选中第一个生产线
            const productLineObj = productLineData.value[0]
            form.productLineId = productLineObj.id
        } else {
            form.productLineId = ''
            productLineData.value = []
            ElMessage.error('请先创建生产线')
        }
    })
}

//初始化用户下拉框
const initUserData = async () => {
    //获取用户数据
    await sgUserList().then(res => {
        if (res.data && res.data.length > 0) {
            userListData.value = res.data
        } else {
            ElMessage.error('请先创建用户')
        }
    })
    //如果传了用户id,则用，否则默认第一个用户
    if (props.userId !== 'undefined') {
        form.userId = String(props.userId)
    } else {
        form.userId = userListData.value[0].id
    }
    //查询生产线数据赋值
    await querySgProductLineByUserId(form.userId).then(res => {
        if (res.data && res.data.length > 0) {
            productLineData.value = res.data
            //并且默认选中第一个生产线
            const productLineObj = productLineData.value[0]
            form.productLineId = productLineObj.id
            if (!productLineObj.incomingLineId) {
                ElMessage.error('该生产线没有关联实际进线')
            } else {
                productLineOwnIncomingLineId.value = productLineObj.incomingLineId
            }
        } else {
            form.productLineId = ''
            productLineData.value = []
            ElMessage.error('请先创建生产线')
        }
    })

    //查询进线数据赋值
    await querySgIncomingLineByUserId(form.userId).then(res => {
        if (res.data && res.data.length > 0) {
            //将当前生产线的进线过滤掉，剩余的交给备用进行选择
            let allIncomingLineData = res.data.filter((obj: any) => obj.id !== productLineOwnIncomingLineId.value)
            if (allIncomingLineData.length > 0) {
                form.quick.incomingLineId = allIncomingLineData[0].id
                incomingLineListData.value = allIncomingLineData
            } else {
                form.quick.incomingLineId = ''
                incomingLineListData.value = []
                ElMessage.error('请先创建备用进线')
            }

        } else {
            form.quick.incomingLineId = ''
            incomingLineListData.value = []
            ElMessage.error('请先创建备用进线')
        }
    })

}

/**
 * 挂载时初始化数据内容
 */
onMounted(() => {
    initUserData()
    datePickerRef.value.setTheDate(1)
    form.startTime = datePickerRef.value.timeValue[0]
    form.endTime = datePickerRef.value.timeValue[1]
})


/**
 * 计算暂降治理
 */
function calcSag() {
    formRef.value.validate((valid: any, errorMsg: any) => {
        if (valid) {
            //将所有参数传递到后端进行数据计算
            form.startTime = datePickerRef.value.timeValue[0]
            form.endTime = datePickerRef.value.timeValue[1]
            calc(form).then(res => {
                //先通知父组件打开历史页面
                emitter.emit('schemeRadio', '评估计算结果')
                emitter.emit('calcResult', false)
                //再将历史数据传递到历史页面
                emitter.emit('send-scheme-result', res.data)
            })
        } else {
            for (const item in errorMsg) {
                ElMessage.error(errorMsg[item][0].message)
            }
        }
    })
}

</script>

<style scoped>
.divider {
    font-family: AlimamaDongFangDaKai;
}

@keyframes colorChange {
    0% {
        color: #205CE8;
    }

    100% {
        color: #32B9FC;
    }
}


.dividerFontStyle {
    font-size: 25px !important;
    animation: colorChange 3s infinite;
}

.singleParamContent {
    padding: 5px 30px;
}
</style>