<template>
    <!-- 一键同步 -->
    <div class="syncOldData" style="background-color:#ebedf0">
        <s-header :name="$t('syncOldData.header')" :noback="true"></s-header>
        <br>
        <div>

            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]" />
                    <van-field v-model="clientId" name="机器唯一码" label="机器唯一码" placeholder="eg.161199389060165244806465"
                        :rules="[{ required: true, message: '请填写机器唯一码' }]" />

                    <van-field v-model="startDate" is-link readonly name="开始日期" label="开始日期" placeholder="选择开始日期"
                        @click="showPicker1 = true" :rules="[{ required: true, message: '请选择开始日期' }]">
                    </van-field>
                    <van-popup v-model:show="showPicker1" position="bottom">
                        <van-date-picker @confirm="startDateConfirm($event)" :min-date="minDate" :max-date="maxDate"
                            @cancel="showPicker1 = false" />
                    </van-popup>

                    <van-field v-model="endDate" is-link readonly name="结束日期" label="结束日期" placeholder="选择结束日期 "
                        @click="showPicker2 = true" :rules="[{ required: true, message: '请选择结束日期' }]">
                    </van-field>
                    <van-popup v-model:show="showPicker2" position="bottom">
                        <van-date-picker @confirm="endDateConfirm($event)" :min-date="minDate" :max-date="maxDate"
                            @cancel="showPicker2 = false" />
                    </van-popup>

                </van-cell-group>
                <div style="margin: 16px; display: flex; justify-content: center; align-items: center;">
                    <van-button round class="custom-button" type="primary" size="small" @click="prevStep" :disabled="cancelBtn">
                        取消
                    </van-button>
                    <div style="width: 20%;"></div>
                    <van-button round class="custom-button" type="primary" size="small" native-type="submit"
                        @click="syncOldAllClk" :loading=reqApi :loading-text="$t('syncOldData.syncing')" >
                        一键同步
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import { showFailToast, showSuccessToast } from 'vant';
import { ref } from 'vue';
import sHeader from "../../components/SimpleHeader";
import router from '../../router';
import { syncAllData } from '@/service/syncOldData/index';
// import dateUtil from '../../utils/dateUtil';

export default {
    components: { sHeader },

    setup() {
        const username = ref("");
        const clientId = ref("");
        const startDate = ref("");
        const endDate = ref("");
        const showPicker1 = ref(false);
        const showPicker2 = ref(false);
        const reqApi = ref(false);
        const cancelBtn = ref(false);


        const syncOldAllClk = async () => {
            reqApi.value = true;
            cancelBtn.value = true;
            try {
                const { data } = await syncAllData({
                    username: username.value,
                    clientId: clientId.value,
                    startTime: startDate.value,
                    endTime: endDate.value,
                });
                if (data.code === '00000') {
                    reqApi.value = false;
                    cancelBtn.value = false;
                    showSuccessToast(data.message);
                } else {
                    reqApi.value = false;
                    cancelBtn.value = false;
                    showFailToast(data.message);
                }
            } catch (error) {
                console.error(error);
                reqApi.value = false;
                cancelBtn.value = false;
                showFailToast("同步失败");
            }
        }
        const prevStep = () => {
            router.go(-1);
        }

        // const startDateConfirm = (time) => {
        const startDateConfirm = ({ selectedValues }) => {
            // startDate.value = dateUtil.formateDate(time, "yyyy-MM-dd hh:mm:ss");
            startDate.value = selectedValues.join("-") + " 00:00:00";
            showPicker1.value = false;
        }

        const endDateConfirm = ({ selectedValues }) => {
            
            endDate.value = selectedValues.join("-") + " 23:59:59";

            showPicker2.value = false;
        }

        return {
            username,
            clientId,
            startDate,
            endDate,
            showPicker1,
            showPicker2,
            startDateConfirm,
            endDateConfirm,
            minDate: new Date(2023, 2, 19),
            maxDate: new Date(2025, 10, 1),
            prevStep,
            syncOldAllClk,
            reqApi,
            cancelBtn,
        }
    }

}
</script>

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