<script setup>
import sHeader from "@/components/SimpleHeader";
import { banUserOrder } from "@/service/userManage";
import { ref, onMounted, onBeforeUnmount } from "vue";
import { showToast, showFailToast } from "vant";
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router'
import dateUtil from "@/utils/dateUtil";

const userName = ref('');
const phone = ref('');
const identityCard = ref('');
const payeeCode = ref('');
// const allowMaximum = ref('');
// const cardNo = ref('');
// const buyPriorityRank = ref(''); // 买卖优先级/奋斗贡献值
const userId = ref(''); // 被禁用的用户id
const stockNum = ref()
// const applyId = ref('');
const userStore = useUserStore();
const router = useRouter();


const startTime = ref('');
const showStartTime = ref(false);
const onConfStartTime = ({ selectedValues }) => {
    startTime.value = selectedValues.join('-');
    showStartTime.value = false;
};

const endTime = ref('')
const showEndTime = ref(false)
const onConfEndTime = ({ selectedValues }) => {
    endTime.value = selectedValues.join('-');
    showEndTime.value = false;
};

const minDate = ref(new Date(2024, 4, 1))

onMounted(() => {
    if (userStore.userInfo) {
        console.log("userStore.userInfo >>>", userStore.userInfo);
        userName.value = userStore.userInfo.userName;
        phone.value = userStore.userInfo.phone;
        identityCard.value = userStore.userInfo.identityCard;
        payeeCode.value = userStore.userInfo.payeeCode;
        // cardNo.value = userStore.userInfo.cardNo;
        // applyId.value = userStore.userInfo.id;
        userId.value = userStore.userInfo.userId;
        stockNum.value = userStore.userInfo.stockNum;
    }
});

// 当组件卸载时清除用户信息
onBeforeUnmount(() => {
    userStore.clearUserInfo();
});

// 禁用用户
const banUserClc = async () => {
    const startTimeDate = new Date(startTime.value);
    const endTimeDate = new Date(endTime.value);
    const startTimeFmt = dateUtil.formateDate(startTimeDate, "yyyy-MM-dd") + " 00:00:00";
    const endTimeFmt = dateUtil.formateDate(endTimeDate, "yyyy-MM-dd") + " 00:00:00";
    
    console.log("Fmt >>>", startTimeFmt, endTimeFmt);
    const userCheck = {
        startTime: startTimeFmt,
        endTime: endTimeFmt,
        userId: userId.value
    }
    const { data } = await banUserOrder(userCheck);

    if (data.code === "00000") {
        // 成功
        showToast("已禁止该用户交易");
        router.go(-1)
    } else {
        showFailToast(data.message);
    }
}

</script>

<template>
    <!-- 禁止用户交易-->
    <div class="fife" style="background-color:#ebedf0">
        <s-header :name="'禁止用户交易'" :noback="false"></s-header>
        <br>
        <van-form>
            <van-cell-group inset>
                <van-field v-model="userName" readonly name="用户名" label="用户名" placeholder="用户名" left-icon="smile-o" />
                <van-field v-model="phone" readonly name="手机号码" label="手机号码" placeholder="手机号码" left-icon="phone-o"
                    :rules="[{ required: true, message: '手机号码不能为空' }]" />
                <van-field v-model="identityCard" readonly name="身份证号" label="身份证号" placeholder="身份证号"
                    left-icon="contact-o" />
                <van-field v-model="payeeCode" readonly name="支付宝号" label="支付宝号" placeholder="支付宝号"
                    left-icon="certificate" />

                <van-field v-model="stockNum" readonly name="当前股票份额" label="当前股票份额" placeholder="当前股票份额" left-icon="points" />

                <van-field v-model="startTime" is-link readonly name="startDatePicker" label="开始时间"
                    placeholder="选择开始禁用时间" @click="showStartTime = true" left-icon="clock-o" />
                <van-popup v-model:show="showStartTime" position="bottom">
                    <van-date-picker @confirm="onConfStartTime" @cancel="showStartTime = false" :min-date="minDate" />
                </van-popup>

                <van-field v-model="endTime" is-link readonly name="endDatePicker" label="结束时间" placeholder="选择结束禁用时间"
                    @click="showEndTime = true" left-icon="clock-o" />
                <van-popup v-model:show="showEndTime" position="bottom">
                    <van-date-picker @confirm="onConfEndTime" @cancel="showEndTime = false" :min-date="minDate" />
                </van-popup>


            </van-cell-group>
            <div style="margin: 20px 30px; display: flex; justify-content: center; align-items: center; gap: 50px;">
                <van-button round class="custom-button" type="primary" size="small" @click="banUserClc"
                    block>禁用</van-button>
            </div>
        </van-form>

    </div>
</template>

<style scoped></style>