<template>
    <div class="app-container">
        <el-form ref="dataFormRef" :rules="rules" :model="dataForm" status-icon label-width="300px">
            <el-form-item label="商场名称" prop="litemall_mall_name">
                <el-input v-model="dataForm.litemall_mall_name" />
            </el-form-item>
            <el-form-item label="商场地址" prop="litemall_mall_address">
                <el-input v-model="dataForm.litemall_mall_address" />
            </el-form-item>
            <el-form-item label="地理坐标">
                <el-col :span="11">
                    <el-input v-model="dataForm.litemall_mall_longitude" placeholder="经度" />
                </el-col>
                <el-col :span="2" style="text-align: center;">-</el-col>
                <el-col :span="11">
                    <el-input v-model="dataForm.litemall_mall_latitude" placeholder="纬度" />
                </el-col>
            </el-form-item>
            <el-form-item label="联系电话" prop="litemall_mall_phone">
                <el-input v-model="dataForm.litemall_mall_phone" />
            </el-form-item>
            <el-form-item label="联系QQ" prop="litemall_mall_qq">
                <el-input v-model="dataForm.litemall_mall_qq" />
            </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 { listMall, updateMall } from '@/services/api/config/index'

let dataFormRef = ref()
let dataForm = ref({
    litemall_mall_name: '',
    litemall_mall_address: '',
    litemall_mall_phone: '',
    litemall_mall_qq: '',
    litemall_mall_longitude: '',
    litemall_mall_latitude: ''
})
let rules = ref({
    litemall_mall_name: [
        { required: true, message: '不能为空', trigger: 'blur' }
    ],
    litemall_mall_address: [
        { required: true, message: '不能为空', trigger: 'blur' }
    ],
    litemall_mall_phone: [
        { required: true, message: '不能为空', trigger: 'blur' }
    ],
    litemall_mall_qq: [
        { required: true, message: '不能为空', trigger: 'blur' }
    ]
})


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

    })
}

init()

let cancel = () => {
    init()
}
let update = () => {
    dataFormRef.value?.validate((valid: any) => {
        if (!valid) return false
        doUpdate()
    })
}
let doUpdate = () => {
    updateMall(dataForm.value)
        .then((res: any) => {
            if (res.code === 200) ElMessage({
                type: 'success',
                message: '商场配置成功'
            })
        })
        .catch(res => {
            ElMessage({
                type: 'error',
                message: res.msg
            })
        })
}

</script>
