<!-- 
** 新增、编辑站点 
-->

<template>
    <el-dialog v-model="isDisplay.isShowDialog" class="main-content" width="769px">
        <el-form :model="dataList" ref="ruleFormRef" label-width="8.5em" :rules="addStationRules" size="default"
            v-model="isDisplay.loading">
            <el-row :gutter="35">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="站点名称" :required="true" validate-event prop="name">
                        <el-input v-model="dataList.name" placeholder="请输入站点名称" clearable />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="站点ID" :required="true" prop="buildId">
                        <el-input v-model="dataList.buildId" placeholder="请输入站点ID" clearable />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="经度" :required="true" prop="longitude">
                        <el-input v-model="dataList.longitude" type="number" placeholder="请输入经度" clearable />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="纬度" :required="true" prop="latitude">
                        <el-input v-model="dataList.latitude" type="number" placeholder="请输入纬度" clearable />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="云端服务地址" :required="true" prop="cloudService">
                        <el-input v-model="dataList.cloudService" placeholder="请输入云端服务地址" clearable />
                    </el-form-item>
                </el-col>

                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="客户端id" :required="true" prop="secretId">
                        <el-input v-model="dataList.secretId" placeholder="请输入客户端id" clearable />
                    </el-form-item>
                </el-col>

                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="云端密钥" :required="true" prop="acessKey">
                        <el-input v-model="dataList.acessKey" placeholder="请输入云端密钥" clearable />
                    </el-form-item>
                </el-col>

                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="小程序地址" :required="true" prop="smallProgram">
                        <el-input v-model="dataList.smallProgram" placeholder="请输入小程序地址" clearable />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="webSocket端口" :required="true" prop="webSocketPort">
                        <el-input v-model="dataList.webSocketPort" placeholder="请输入webSocket端口" clearable />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="icard地址" prop="icardService">
                        <el-input v-model="dataList.icardService" placeholder="请输入icard地址" clearable />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="mqtt地址" :required="true" prop="mqttService">
                        <el-input v-model="dataList.mqttService" placeholder="请输入mqtt地址" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="onCancel" icon="ele-CircleClose" size="default">取 消</el-button>
                <el-button type="primary" @click="submit" size="default">确 定</el-button>
            </span>
        </template>

    </el-dialog>
</template>
<script setup lang="ts">
import { ref, defineExpose, reactive } from 'vue';
import { addStation } from '/@/api/api';
import { addStationRules } from '/@/api/FormValidation';
import eventBus from "/@/utils/mitt";


const isDisplay = reactive({
    isShowDialog: false,
    loading: false
})

// 定义 所需添加数据
let dataList = ref({
    /** 云端服务地址 */
    cloudService: '',
    /** 开放给油机连接的的端口 */
    // servicePort: null,
    /** 客户端id */
    secretId:'',
    /** 云端通讯密钥 */
    acessKey:'',
    /** 小程序地址 */
    smallProgram: '',
    /** 站点id */
    buildId: null,
    /** webSocket端口 */
    webSocketPort: '',
    /** icard数据库连接地址 */
    icardService: '',
    /** mqtt连接地址 */
    mqttService: '',
    /** 油站名称 */
    name: '',
    /** 经度 */
    longitude: null,
    /** 纬度 */
    latitude: null,
})

// 创建表单实例
const ruleFormRef = ref()
// 提交按钮
const submit = async () => {
    ruleFormRef.value.validate(async (valid: boolean) => {
        // 表单验证不成功，不进行任何操作
        if (!valid) return

        isDisplay.loading = true
        await addStation(dataList.value).then((res) => {
            console.log(res)
            isDisplay.loading = false
            if (res?.result) {
                eventBus.emit('refreshViewStation')
                isDisplay.isShowDialog = false
            }
        })
    })
}

// 取消按键
const onCancel = () => {
    // dataList.value = []
    isDisplay.isShowDialog = false
}

const openDialog = (val: any) => {
    if (val) {
        dataList.value = val
    } else {
        const array = new Uint8Array(16);
        crypto.getRandomValues(array);
        var secret = Array.from(array, byte => byte.toString(16).padStart(2, '0')).join('');
        dataList.value = {
            cloudService: '',
            secretId: secret,
            acessKey: '',
            smallProgram: '',
            buildId: null,
            webSocketPort: '',
            icardService: '',
            mqttService: '',
            name: '',
            longitude: null,
            latitude: null,
        }
    }
    isDisplay.isShowDialog = true
}
defineExpose({
    openDialog,
})

</script>

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