<template>
    <vxe-modal v-model="value" id="addConfig" width="400" v-loading="load" @hide="hide" height="200" show-footer
        title="新增超时时间">
        <by-form :propConfig="config" ref="form"></by-form>
        <template #footer>
            <div class="btn">
                <el-button plain size="small" @click="value = false">取消</el-button>
                <el-button type="primary" size="small" @click="btn">确定</el-button>
            </div>
        </template>
    </vxe-modal>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { addOrderTimeConfig, updateOrderTimeConfig } from '@/api/orderConfig'
@Component({ components: {} })
export default class AddConfig extends Vue {
    timerId: number = 0;
    value = false;
    load = false;
    config: any = {
        attr: {
            rules: {
                timeout: [
                    { required: true, message: '超时时间不能为空！', trigger: 'blur' }
                ]
            }
        },
        columns: [
            [{
                label: '超时时间(分钟)',
                prop: 'timeout',
                labelWidth: '120px',
                component: 'by-input'
            }]
        ]
    }

    @Prop({
        type: Number,
        default: 1
    })
    isSystem?: number

    hide() {
        (this.$refs.form as any).clearValidate();
        (this.$refs.form as any).clearValue();
    }
    setShow(v: boolean) {
        this.value = v;
    }
    setValue(v: any) {
        this.timerId = v.id;
        (this.$refs.form as any).setValue(v);
        console.log(this.timerId)
    }
    getValue() {
        return (this as any).$lodash.cloneDeep(this.value);
    }
    btn() {
        (this.$refs.form as any).validate({ noMsg: true }).then(() => {
            let data = (this.$refs.form as any).getValue() as { timeout: number };
            data.timeout = Number(data.timeout);
            //data.isSystem = this.isSystem;
            this.load = true;
            if (this.timerId === 0) {
                addOrderTimeConfig({ timeout: data.timeout }).then(() => {
                    this.load = false;
                    this.$emit('handleSuccess');
                    this.value = false;
                }).catch(() => {
                    this.load = false;
                })
            } else {
                updateOrderTimeConfig({ id: this.timerId, timeout: data.timeout }).then(() => {
                    this.load = false;
                    this.$emit('handleSuccess');
                    this.value = false;
                }).catch(() => {
                    this.load = false;
                })
            }
        }).catch(() => { })
    }
}
</script>

<style lang="scss" scoped></style>