<template>
    <div class="app-container">
        <el-form ref="dataFormRef" :rules="rules" :model="dataForm" status-icon label-width="300px">
            <el-form-item label="用户下单后超时" prop="litemall_order_unpaid">
                <el-input v-model="dataForm.litemall_order_unpaid" class="input-width">
                    <template slot="append">分钟</template>
                </el-input>
                <span class="info">用户未付款，则订单自动取消</span>
            </el-form-item>
            <el-form-item label="订单发货后超期" prop="litemall_order_unconfirm">
                <el-input v-model="dataForm.litemall_order_unconfirm" class="input-width">
                    <template slot="append"> 天</template>
                </el-input>
                <span class="info">未确认收货，则订单自动确认收货</span>
            </el-form-item>
            <el-form-item label="确认收货后超期" prop="litemall_order_comment">
                <el-input v-model="dataForm.litemall_order_comment" class="input-width">
                    <template slot="append">天</template>
                </el-input>
                <span class="info">未评价商品，则取消评价资格</span>
            </el-form-item>
            <el-form-item>
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="update">确定</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { listOrder, updateOrder } from '@/services/api/config/index'

let dataFormRef = ref()
let dataForm = ref({
    litemall_order_unpaid: 0,
    litemall_order_unconfirm: 0,
    litemall_order_comment: 0
})
let rules = ref({
    litemall_order_unpaid: [
        { required: true, message: '不能为空', trigger: 'blur' }
    ],
    litemall_order_unconfirm: [
        { required: true, message: '不能为空', trigger: 'blur' }
    ],
    litemall_order_comment: [
        { required: true, message: '不能为空', trigger: 'blur' }
    ]
})

let init = () => {
    listOrder().then((res: any) => {
        if (res.code === 200)
            dataForm.value = res.data
    })
}

init()

let update = () => {
    dataFormRef.value?.validate((valid: any) => {
        if (!valid) return false
        doUpdate()
    })
}
let doUpdate = () => {
    updateOrder(dataForm.value)
        .then((res: any) => {
            if (res.code === 200)
                ElMessage({
                    type: 'success',
                    message: '订单参数配置成功'
                })
        })
        .catch(res => {
            ElMessage({
                type: 'error',
                message: res.data.errmsg
            })
        })
}

let cancel = () => {
    init()
}

</script>

<style scoped>
.input-width {
    width: 50%;
}

.info {
    margin-left: 15px;
}
</style>
