<template>
    <div>
        <el-dialog
            :close-on-click-modal="false"
            :title="title"
            :visible.sync="dialogVisible"
            width="1000px"
            :before-close="handleClose"
        >
            <el-form ref="form" :inline="true" :model="form" label-width="auto" :rules="rules" class="form">
                <el-form-item label="CVT名称:" prop="cvtName" style="width: 49%">
                    <el-input v-model.trim="form.cvtName" placeholder="请输入CVT名称" />
                </el-form-item>
                <el-form-item label="CVT型号:" prop="cvtModel" style="width: 49%">
                    <el-input v-model.trim="form.cvtModel" placeholder="请输入CVT型号" />
                </el-form-item>
                <el-form-item v-for="item in frequency" :label="`${item}次:`" :prop="`h${item}`">
                    <el-input type="number" v-model.trim="form[`h${item}`]" @input="handleInput($event, `h${item}`)" />
                </el-form-item>

                <!-- <el-form-item label="2次:" prop="h2">
                    <el-input type="number" v-model="form.h2"  @input="handleInput($event,'h2')"/>
                </el-form-item>
                <el-form-item label="3次:" prop="h3">
                    <el-input type="number" v-model="form.h3" @input="handleInput($event,'h3')"/>
                </el-form-item>
                <el-form-item label="4次:" prop="h4">
                    <el-input type="number" v-model="form.h4" @input="handleInput($event,'h4')"/>
                </el-form-item>
                <el-form-item label="5次:" prop="h5">
                    <el-input type="number" v-model="form.h5" @input="handleInput($event,'h5')"/>
                </el-form-item>
                <el-form-item label="6次:" prop="h6">
                    <el-input type="number" v-model="form.h6" @input="handleInput($event,'h6')"/>
                </el-form-item>
                <el-form-item label="7次:" prop="h7">
                    <el-input type="number" v-model="form.h7" @input="handleInput($event,'h7')"/>
                </el-form-item>
                <el-form-item label="8次:" prop="h8">
                    <el-input type="number" v-model="form.h8" @input="handleInput($event,'h8')"/>
                </el-form-item>
                <el-form-item label="9次:" prop="h9">
                    <el-input type="number" v-model="form.h9" @input="handleInput($event,'h9')"/>
                </el-form-item>
                <el-form-item label="10次:" prop="h10">
                    <el-input type="number" v-model="form.h10" @input="handleInput($event,'h10')"/>
                </el-form-item>
                <el-form-item label="11次:" prop="h11">
                    <el-input type="number" v-model="form.h11" @input="handleInput($event,'h11')"/>
                </el-form-item>
                <el-form-item label="12次:" prop="h12">
                    <el-input type="number" v-model="form.h12" @input="handleInput($event,'h12')"/>
                </el-form-item>
                <el-form-item label="13次:" prop="h13">
                    <el-input type="number" v-model="form.h13" @input="handleInput($event,'h13')"/>
                </el-form-item>
                <el-form-item label="14次:" prop="h14">
                    <el-input type="number" v-model="form.h14" @input="handleInput($event,'h14')"/>
                </el-form-item>
                <el-form-item label="15次:" prop="h15">
                    <el-input type="number" v-model="form.h15" @input="handleInput($event,'h15')"/>
                </el-form-item>
                <el-form-item label="16次:" prop="h16">
                    <el-input type="number" v-model="form.h16" @input="handleInput($event,'h16')"/>
                </el-form-item>
                <el-form-item label="17次:" prop="h17">
                    <el-input type="number" v-model="form.h17" @input="handleInput($event,'h17')"/>
                </el-form-item>
                <el-form-item label="18次:" prop="h18">
                    <el-input type="number" v-model="form.h18" @input="handleInput($event,'h18')"/>
                </el-form-item>
                <el-form-item label="19次:" prop="h19">
                    <el-input type="number" v-model="form.h19" @input="handleInput($event,'h19')"/>
                </el-form-item>
                <el-form-item label="20次:" prop="h20">
                    <el-input type="number" v-model="form.h20" @input="handleInput($event,'h20')"/>
                </el-form-item>
                <el-form-item label="21次:" prop="h21">
                    <el-input type="number" v-model="form.h21" @input="handleInput($event,'h21')"/>
                </el-form-item>
                <el-form-item label="22次:" prop="h22">
                    <el-input type="number" v-model="form.h22" @input="handleInput($event,'h22')"/>
                </el-form-item>
                <el-form-item label="23次:" prop="h23">
                    <el-input type="number" v-model="form.h23" @input="handleInput($event,'h23')"/>
                </el-form-item>
                <el-form-item label="24次:" prop="h24">
                    <el-input type="number" v-model="form.h24" @input="handleInput($event,'h24')"/>
                </el-form-item>
                <el-form-item label="25次:" prop="h25">
                    <el-input type="number" v-model="form.h25" @input="handleInput($event,'h25')"/>
                </el-form-item>
                <el-form-item label="26次:" prop="h26">
                    <el-input type="number" v-model="form.h26" @input="handleInput($event,'h26')"/>
                </el-form-item>
                <el-form-item label="27次:" prop="h27">
                    <el-input type="number" v-model="form.h27" @input="handleInput($event,'h27')"/>
                </el-form-item>
                <el-form-item label="28次:" prop="h28">
                    <el-input type="number" v-model="form.h28" @input="handleInput($event,'h28')"/>
                </el-form-item>
                <el-form-item label="29次:" prop="h29">
                    <el-input type="number" v-model="form.h29" @input="handleInput($event,'h29')"/>
                </el-form-item>
                <el-form-item label="30次:" prop="h30">
                    <el-input type="number" v-model="form.h30" @input="handleInput($event,'h30')"/>
                </el-form-item>
                <el-form-item label="31次:" prop="h31">
                    <el-input type="number" v-model="form.h31" @input="handleInput($event,'h31')"/>
                </el-form-item>
                <el-form-item label="32次:" prop="h32">
                    <el-input type="number" v-model="form.h32" @input="handleInput($event,'h32')"/>
                </el-form-item>
                <el-form-item label="33次:" prop="h33">
                    <el-input type="number" v-model="form.h33" @input="handleInput($event,'h33')"/>
                </el-form-item>
                <el-form-item label="34次:" prop="h34">
                    <el-input type="number" v-model="form.h34" @input="handleInput($event,'h34')"/>
                </el-form-item>
                <el-form-item label="35次:" prop="h35">
                    <el-input type="number" v-model="form.h35" @input="handleInput($event,'h35')"/>
                </el-form-item>
                <el-form-item label="36次:" prop="h36">
                    <el-input type="number" v-model="form.h36" @input="handleInput($event,'h36')"/>
                </el-form-item>
                <el-form-item label="37次:" prop="h37">
                    <el-input type="number" v-model="form.h37" @input="handleInput($event,'h37')"/>
                </el-form-item>
                <el-form-item label="38次:" prop="h38">
                    <el-input type="number" v-model="form.h38" @input="handleInput($event,'h38')"/>
                </el-form-item>
                <el-form-item label="39次:" prop="h39">
                    <el-input type="number" v-model="form.h39" @input="handleInput($event,'h39')"/>
                </el-form-item>
                <el-form-item label="40次:" prop="h40">
                    <el-input type="number" v-model="form.h40" @input="handleInput($event,'h40')"/>
                </el-form-item>
                <el-form-item label="41次:" prop="h41">
                    <el-input type="number" v-model="form.h41" @input="handleInput($event,'h41')"/>
                </el-form-item>
                <el-form-item label="42次:" prop="h42">
                    <el-input type="number" v-model="form.h42" @input="handleInput($event,'h42')"/>
                </el-form-item>
                <el-form-item label="43次:" prop="h43">
                    <el-input type="number" v-model="form.h43" @input="handleInput($event,'h43')"/>
                </el-form-item>
                <el-form-item label="44次:" prop="h44">
                    <el-input type="number" v-model="form.h44" @input="handleInput($event,'h44')"/>
                </el-form-item>
                <el-form-item label="45次:" prop="h45">
                    <el-input type="number" v-model="form.h45" @input="handleInput($event,'h45')"/>
                </el-form-item>
                <el-form-item label="46次:" prop="h46">
                    <el-input type="number" v-model="form.h46" @input="handleInput($event,'h46')"/>
                </el-form-item>
                <el-form-item label="47次:" prop="h47">
                    <el-input type="number" v-model="form.h47" @input="handleInput($event,'h47')"/>
                </el-form-item>
                <el-form-item label="48次:" prop="h48">
                    <el-input type="number" v-model="form.h48" @input="handleInput($event,'h48')"/>
                </el-form-item>
                <el-form-item label="49次:" prop="h49">
                    <el-input type="number" v-model="form.h49" @input="handleInput($event,'h49')"/>
                </el-form-item>
                <el-form-item label="50次:" prop="h50">
                    <el-input type="number" v-model="form.h50" @input="handleInput($event,'h50')"/>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { addCVT, updateCvt } from '@/api/CVT/index.js'
export default {
    components: {},
    props: {},
    data() {
        return {
            frequency: [
                2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29,
                30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50
            ],
            dialogVisible: false,
            title: '',
            form: {
                cvtName: '',
                cvtModel: '',
                h2: '1',
                h3: '1',
                h4: '1',
                h5: '1',
                h6: '1',
                h7: '1',
                h8: '1',
                h9: '1',
                h10: '1',
                h11: '1',
                h12: '1',
                h13: '1',
                h14: '1',
                h15: '1',
                h16: '1',
                h17: '1',
                h18: '1',
                h19: '1',
                h20: '1',
                h21: '1',
                h22: '1',
                h23: '1',
                h24: '1',
                h25: '1',
                h26: '1',
                h27: '1',
                h28: '1',
                h29: '1',
                h30: '1',
                h31: '1',
                h32: '1',
                h33: '1',
                h34: '1',
                h35: '1',
                h36: '1',
                h37: '1',
                h38: '1',
                h39: '1',
                h40: '1',
                h41: '1',
                h42: '1',
                h43: '1',
                h44: '1',
                h45: '1',
                h46: '1',
                h47: '1',
                h48: '1',
                h49: '1',
                h50: '1'
            },
            rules: {
                cvtName: [{ required: true, message: 'CVT名称不能为空', trigger: 'blur' }],
                cvtModel: [{ required: true, message: 'CVT型号不能为空', trigger: 'blur' }],
                h2: [{ required: true, message: '2次不能为空', trigger: 'blur' }],
                h3: [{ required: true, message: '3次不能为空', trigger: 'blur' }],
                h4: [{ required: true, message: '4次不能为空', trigger: 'blur' }],
                h5: [{ required: true, message: '5次不能为空', trigger: 'blur' }],
                h6: [{ required: true, message: '6次不能为空', trigger: 'blur' }],
                h7: [{ required: true, message: '7次不能为空', trigger: 'blur' }],
                h8: [{ required: true, message: '8次不能为空', trigger: 'blur' }],
                h9: [{ required: true, message: '9次不能为空', trigger: 'blur' }],
                h10: [{ required: true, message: '10次不能为空', trigger: 'blur' }],
                h11: [{ required: true, message: '11次不能为空', trigger: 'blur' }],
                h12: [{ required: true, message: '12次不能为空', trigger: 'blur' }],
                h13: [{ required: true, message: '13次不能为空', trigger: 'blur' }],
                h14: [{ required: true, message: '14次不能为空', trigger: 'blur' }],
                h15: [{ required: true, message: '15次不能为空', trigger: 'blur' }],
                h16: [{ required: true, message: '16次不能为空', trigger: 'blur' }],
                h17: [{ required: true, message: '17次不能为空', trigger: 'blur' }],
                h18: [{ required: true, message: '18次不能为空', trigger: 'blur' }],
                h19: [{ required: true, message: '19次不能为空', trigger: 'blur' }],
                h20: [{ required: true, message: '20次不能为空', trigger: 'blur' }],
                h21: [{ required: true, message: '21次不能为空', trigger: 'blur' }],
                h22: [{ required: true, message: '22次不能为空', trigger: 'blur' }],
                h23: [{ required: true, message: '23次不能为空', trigger: 'blur' }],
                h24: [{ required: true, message: '24次不能为空', trigger: 'blur' }],
                h25: [{ required: true, message: '25次不能为空', trigger: 'blur' }],
                h26: [{ required: true, message: '26次不能为空', trigger: 'blur' }],
                h27: [{ required: true, message: '27次不能为空', trigger: 'blur' }],
                h28: [{ required: true, message: '28次不能为空', trigger: 'blur' }],
                h29: [{ required: true, message: '29次不能为空', trigger: 'blur' }],
                h30: [{ required: true, message: '30次不能为空', trigger: 'blur' }],
                h31: [{ required: true, message: '31次不能为空', trigger: 'blur' }],
                h32: [{ required: true, message: '32次不能为空', trigger: 'blur' }],
                h33: [{ required: true, message: '33次不能为空', trigger: 'blur' }],
                h34: [{ required: true, message: '34次不能为空', trigger: 'blur' }],
                h35: [{ required: true, message: '35次不能为空', trigger: 'blur' }],
                h36: [{ required: true, message: '36次不能为空', trigger: 'blur' }],
                h37: [{ required: true, message: '37次不能为空', trigger: 'blur' }],
                h38: [{ required: true, message: '38次不能为空', trigger: 'blur' }],
                h39: [{ required: true, message: '39次不能为空', trigger: 'blur' }],
                h40: [{ required: true, message: '40次不能为空', trigger: 'blur' }],
                h41: [{ required: true, message: '41次不能为空', trigger: 'blur' }],
                h42: [{ required: true, message: '42次不能为空', trigger: 'blur' }],
                h43: [{ required: true, message: '43次不能为空', trigger: 'blur' }],
                h44: [{ required: true, message: '44次不能为空', trigger: 'blur' }],
                h45: [{ required: true, message: '45次不能为空', trigger: 'blur' }],
                h46: [{ required: true, message: '46次不能为空', trigger: 'blur' }],
                h47: [{ required: true, message: '47次不能为空', trigger: 'blur' }],
                h48: [{ required: true, message: '48次不能为空', trigger: 'blur' }],
                h49: [{ required: true, message: '49次不能为空', trigger: 'blur' }],
                h50: [{ required: true, message: '50次不能为空', trigger: 'blur' }]
            }
        }
    },
    created() {},

    methods: {
        // 提交
        submit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    if (this.title == '新增CVT系数') {
                        addCVT(this.form).then(res => {
                            if (res.code == 'A0000') {
                                this.$emit('querfromdata')
                                this.$message({
                                    type: 'success',
                                    message: '新增成功!'
                                })
                                this.handleClose()
                            }
                        })
                    } else {
                        updateCvt(this.form).then(res => {
                            if (res.code == 'A0000') {
                                this.$emit('querfromdata')
                                this.$message({
                                    type: 'success',
                                    message: '修改成功!'
                                })
                                this.handleClose()
                            }
                        })
                    }
                }
            })
        },
        // 关闭弹窗
        handleClose() {
            this.dialogVisible = false
            this.$refs.form.resetFields()
            this.$emit('showForm')
        },
        // 修改
        doEdit(row) {
            this.form = JSON.parse(JSON.stringify(row))
        },
        handleInput(value, key) {
            // 正则表达式，用于匹配最多保留 3 位小数的数字
            const reg = /^\d*(\.\d{0,3})?$/
            if (!reg.test(value)) {
                // 若输入不符合要求，去除多余的小数部分
                const parts = value.toString().split('.')
                if (parts.length > 1) {
                    this.form[key] = `${parts[0]}.${parts[1].slice(0, 3)}`
                } else {
                    this.form[key] = parts[0]
                }
            }
        }
    },

    computed: {},
    mounted() {
        // let data = []
        // for (let i = 2; i < 51; i++) {
        //     this.form[`h${i}`] = data[i - 2]
        // }
        // this.form.cvtName = '日新500-5H（9.79kv中间变）'
        // this.form.cvtModel = this.form.cvtName
    },
    watch: {}
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
// ::v-deep .form-two {
//     display: flex;
//     flex-wrap: wrap;
//     justify-content: space-between;
//     .el-form-item {
//         display: flex;
//         width: 49%;
//         .el-form-item__content {
//             flex: 1 !important;
//             .el-select {
//                 width: 100%;
//             }
//             .el-input__inner {
//                 width: 100% !important;
//             }
//             .el-date-editor {
//                 width: 100%;
//             }
//         }
//     }
// }
::v-deep .form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .el-form-item {
        display: flex;
        width: 24%;
        margin-bottom: 18px !important;
        .el-form-item__content {
            flex: 1 !important;
            .el-select {
                width: 100%;
            }
            .el-input__inner {
                width: 100% !important;
            }
            .el-date-editor {
                width: 100%;
            }
        }
    }
}
::v-deep .el-dialog .el-dialog__body {
    padding: 20px !important;
}
</style>
