<template>
    <!-- 数据同步 -->
    <div class="syncOldData" style="background-color:#ebedf0">
        <s-header :name="$t('syncOldData.header')" :noback="false"></s-header>
        <br>
        <div>
            <van-progress :percentage="percentNum" :color="progressColor" />
            <br>
            <van-form v-if="step === 1" @submit="onSubmitStep1">
                <van-cell-group inset>
                    <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]" />
                </van-cell-group>
                <div style="margin: 16px; display: flex; justify-content: center; align-items: center;">
                    <van-button round block type="primary" native-type="submit" size="small"
                        style="width: 150px; margin-right: 8px;">
                        同步权限
                    </van-button>
                </div>
            </van-form>

            <van-form v-if="step === 2" @submit="onSubmitStep2">
                <van-cell-group inset>
                    <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]" />
                    <van-field v-model="clientId" name="机器唯一码" label="机器唯一码" placeholder="机器唯一码"
                        :rules="[{ required: true, message: '请填写机器唯一码' }]" />
                </van-cell-group>
                <div style="margin: 16px; display: flex; justify-content: center; align-items: center;">
                    <van-button round block type="primary" size="small" @click="prevStep" disabled>
                        上一步
                    </van-button>
                    <div style="width: 100px;"></div>
                    <van-button round block type="primary" size="small" native-type="submit">
                        同步设备
                    </van-button>
                </div>
            </van-form>

            <van-form v-if="step === 3" @submit="onSubmitStep3">
                <van-cell-group inset>
                    <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]" />
                    <van-field v-model="clientId" name="机器唯一码" label="机器唯一码" placeholder="机器唯一码"
                        :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-datetime-picker type="date" @confirm="onConfirm1" :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-datetime-picker type="date" @confirm="onConfirm2" :min-date="minDate" :max-date="maxDate"
                            @cancel="showPicker2 = false" />
                    </van-popup>

                    <!-- <van-datetime-picker v-model="currentDate" type="date" title="选择开始日期年月日" :min-date="minDate"
                        :max-date="maxDate" />
                    <van-datetime-picker v-model="currentDate" type="date" title="选择结束日期年月日" :min-date="minDate"
                        :max-date="maxDate" /> -->
                </van-cell-group>
                <div style="margin: 16px; display: flex; justify-content: center; align-items: center;">
                    <van-button round block type="primary" size="small" @click="prevStep" disabled>
                        上一步
                    </van-button>
                    <div style="width: 100px;"></div>
                    <van-button round block type="primary" size="small" native-type="submit">
                        同步订单
                    </van-button>
                </div>
            </van-form>

            <van-form v-if="step === 4" @submit="onSubmitStep4">
                <van-row justify="center">
                    <van-col span="12">
                        <van-image width="10rem" height="10rem" fit="cover" position="center"
                            :src="require('../../assets/user/syncOldDataIcon.png')" />
                        
                        <p style="display: center;">同步完成</p>
                    </van-col>
                </van-row>
                <van-cell-group inset>
                    <van-cell>
                        <p style="text-align: center;">同步完成</p>
                    </van-cell>
                </van-cell-group>

            </van-form>
        </div>

    </div>
</template>

<script>
import { ref } from 'vue';
import sHeader from "../../components/SimpleHeader";

export default {
    components: { sHeader },

    setup() {
        const percentNum = ref(0);
        const step = ref(1);
        const username = ref("");
        const clientId = ref("");
        const startDate = ref("");
        const endDate = ref("");
        const showPicker1 = ref(false);
        const showPicker2 = ref(false);
        const progressColor = ref("#1989fa");

        const prevStep = () => {
            step.value--;
        }

        const onConfirm1 = (value) => {
            console.log("confirm1");
            console.log("startDate>>>", startDate.value);
            startDate.value = value;
            console.log("showPicker1>>>", showPicker1);
            showPicker1.value = false;
        }

        const onConfirm2 = (value) => {
            console.log("confirm2");
            console.log("endDate>>>", endDate.value);
            endDate.value = value;
            console.log("showPicker2>>>", showPicker2);
            showPicker2.value = false;
        }

        const onSubmitStep1 = async () => {
            console.log("submit1");
            step.value = 2;
            percentNum.value = 20;
        }

        const onSubmitStep2 = async () => {
            console.log("submit2");
            step.value = 3;
            percentNum.value = 40;
        }

        const onSubmitStep3 = async () => {
            console.log("submit3");
            percentNum.value = 80;
            step.value = 4;
        }

        const onSubmitStep4 = async () => {
            console.log("submit4");
            percentNum.value = 100;
            progressColor.value = "#0dbc79";
        }


        return {
            step,
            onSubmitStep1,
            onSubmitStep2,
            onSubmitStep3,
            onSubmitStep4,
            percentNum,
            username,
            clientId,
            showPicker1,
            showPicker2,
            startDate,
            endDate,
            onConfirm1,
            onConfirm2,
            minDate: new Date(2023, 2, 19),
            maxDate: new Date(2025, 10, 1),
            progressColor,
            prevStep
        }
    }
}
</script>

<style></style>