<template>
    <div class="hotUpdateAdd" style="background-color: #ebedf0;">
        <s-header :name="'热更新添加'" :noback="false"></s-header>
        <br>
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <!-- 版本号originalVersion，patchVersion，补丁状态，停止/发布，补丁是国内外，外链，选填clientId多个，灰度/全量，备注：更新内容 -->
                <!-- 更新了xxx版本的设备有多少台 -->
                <van-field v-model="originalVersion" name="原始版本号" label="原始版本：" placeholder="原始版本号" required clearable
                    :rules="[{ required: true, message: '请输入原始版本号' }]" />
                <van-field v-model="patchVersion" name="目标版本号" label="目标版本：" placeholder="目标补丁版本号" required clearable
                    :rules="[{ required: true, message: '请输入补丁版本号' }]" />
                <!-- 补丁状态：停止/发布 -->
                <van-field name="radio" label="补丁状态：">
                    <template #input>
                        <van-radio-group v-model="patchStatus" direction="horizontal" shape="dot">
                            <van-radio name="0">停止</van-radio>
                            <van-radio name="1">发布</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>

                <!-- 补丁目标区域：国内/海外 -->
                <van-field name="checkboxGroup" label="推送区域：">
                    <template #input>
                        <van-checkbox-group v-model="targetAreasBlock" direction="horizontal">
                            <van-checkbox name="1" shape="square">国内</van-checkbox>
                            <van-checkbox name="2" shape="square">海外</van-checkbox>
                        </van-checkbox-group>
                    </template>
                </van-field>
                <!-- 补丁链接：外链 -->
                <van-field v-model="patchLink" name="补丁外链" label="补丁外链：" placeholder="补丁外链" required clearable
                    :rules="[{ required: true, message: '请填写补丁状态' }]" />
                <!-- 选填clientId，填了就是灰度更新，不填就是全量更新 -->
                <van-field v-model="clientId" rows="2" autosize name="clientId" label="设备编号：" type="textarea" clearable
                    placeholder="选填clientId，使用','隔开" :disabled="hasTargetAreas" maxlength="230" show-word-limit />
                <!-- 补丁更新内容note -->
                <van-field v-model="note" name="note" label="更新内容：" placeholder="补丁更新内容(选填)" clearable rows="2" autosize
                    maxlength="50" show-word-limit type="textarea" />

            </van-cell-group>
            <br>
            <div style="margin: 16px; display: flex; justify-content: center; align-items: center;">
                <van-button round class="custom-button" type="primary" size="small" native-type="submit" block>
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import sHeader from "@/components/SimpleHeader";
import { postPatchInfo } from "../../service/hotUpdate/index";
import { watch } from "vue";
import { ref } from "vue";
import { showFailToast, showToast } from "vant";

export default {
    components: { sHeader },
    setup() {
        const originalVersion = ref(''); // 原始版本号
        const patchVersion = ref(''); // 目标补丁版本号
        const patchStatus = ref('0'); // 补丁状态: 停止('0') 发布('1')
        const targetAreasBlock = ref([]); // 目标区域数组
        const targetAreas = ref(''); // 目标区域
        const patchLink = ref(''); // 补丁外链
        const clientId = ref(''); // 设备编号
        const note = ref(''); // 更新内容
        const hasTargetAreas = ref(false); // 是否有目标区域

        watch(targetAreasBlock, (newVal) => {
            hasTargetAreas.value = newVal.length > 0;
            if (hasTargetAreas.value) {
                clientId.value = ''; // 清空设备编号
            }
        })

        // 点击提交
        const onSubmit = async () => {
            if (targetAreasBlock.value.length === 0) {
                targetAreas.value = '0';
            } else if (targetAreasBlock.value.length === 1) {
                targetAreas.value = targetAreasBlock.value[0];
            } else {
                targetAreas.value = '3';
            }
            // console.log("targetAreas >>> ", targetAreas.value);
            const patchInfoCheck = {
                originalVersion: originalVersion.value,
                patchVersion: patchVersion.value,
                patchStatus: patchStatus.value,
                targetAreas: targetAreas.value,
                patchLink: patchLink.value,
                clientId: clientId.value,
                note: note.value
            }
            try {
                const { data } = await postPatchInfo(patchInfoCheck);
                if (data.code === '00000') {
                    showToast('提交成功', 'success');
                } else {
                    showFailToast(data.message);
                }
                // 提交成功后重置表单
                resetForm();
            } catch (error) {
                // 处理请求出错的情况
                showFailToast(error.response.data.error);
            }

        }
        const formData = ref({
            originalVersion: originalVersion.value,
            patchVersion: patchVersion.value,
            patchStatus: patchStatus.value,
            targetAreas: targetAreas.value,
            patchLink: patchLink.value,
            clientId: clientId.value,
            note: note.value
        })
        // 重置表单的方法
        const resetForm = () => {
            formData.value = {
                originalVersion: '',
                patchVersion: '',
                patchStatus: '',
                targetAreas: '',
                patchLink: '',
                clientId: '',
                note: ''
            };
        };
        return {
            onSubmit,
            originalVersion,
            patchVersion,
            patchStatus,
            targetAreasBlock,
            targetAreas,
            patchLink,
            clientId,
            note,
            hasTargetAreas
        }
    }
}
</script>

<style>
.custom-button {
    width: 120px;
}
</style>