<template>

    <a-modal :title="title" :visible="innerVisible" @cancel="handleCancel" @ok="handleSubmit" cancelText="关闭"
        :confirm-loading="confirmLoading">
        <j-form-container>
            <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
                <a-form-model-item label="工时费" prop="price" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input-number v-model="model.price" :min="0" :max="9999" :precision="0" :formatter="limitNumber"
                        :parser="limitNumber" placeholder="请输入工时费" style="width: 100%" />
                </a-form-model-item>
            </a-form-model>
        </j-form-container>
    </a-modal>
</template>

<script>
import { getAction, httpAction } from '@/api/manage'
export default {
    name: 'PriceEdit',
    props: {
        visible: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            title: "工费编辑",
            innerVisible: false,
            disabled: true,
            model: {
                price: 0
            },
            validatorRules: {
                price: [{ required: true, message: '请输入工时费!' }],
            },
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            oldPrice: 0,
            confirmLoading: false,
        }
    },
    watch: {
        visible: {
            immediate: true,
            handler(val) {
                if (val) {
                }
                this.innerVisible = val
            }
        },
        innerVisible(val) {
            this.$emit('update:visible', val)
        },
    },
    created() {
        this.getPrice();
    },
    methods: {
        limitNumber(value) {
            if (typeof value === 'string') {
                return !isNaN(Number(value)) ? value.replace(/\./g, '') : 0
            } else if (typeof value === 'number') {
                return !isNaN(value) ? String(value).replace(/\./g, '') : 0
            } else {
                return 0
            }
        },
        getPrice() {
            getAction("/work_order/tblPrice/getPrice").then(res => {
                if (res.success) {
                    this.model.price = res.result.price;
                    this.oldPrice = res.result.price;
                    this.innerVisible = true;
                }
            })
        },
        changeInput() {
            this.disabled = !this.disabled;
        },
        handleCancel() {
            this.innerVisible = false
        },
        handleSubmit() {
            const _this = this
            this.$refs.form.validate((valid) => {
                if (valid) {
                    _this.confirmLoading = true
                    if (_this.model.price === _this.oldPrice) {
                        this.innerVisible = false
                        return;
                    }
                    _this.model.id = 0;
                    httpAction("/work_order/tblPrice/edit", _this.model, "post").then(res => {
                        if (res.success) {
                            _this.$message.success(res.message)
                            this.innerVisible = false;
                        } else {
                            _this.$message.warning(res.message)
                        }
                    }).finally(() => {
                        _this.confirmLoading = false
                    })
                }
            })
        },
        onFinish(e) {
            console.log('onFinish', e)
        },
        onFinishFailed(e) {
            console.log('onFinishFailed', e)
        }
    }
}
</script>