<template>
  <!-- 交易中心 -->
  <div class="tradingPage flex-col">
    <div class="listBox">
      <s-header :name="sys ? sys.title : $t('trading.tradingCenter')" :noback="true" :isFixed="false"></s-header>
      <van-notice-bar scrollable text="每周日15:00停盘，周一00:00开始新的一轮。" left-icon="info-o" />
      <!-- 挂单交易 -->
      <div class="tradingBox1 flex-col">
        <div class="searchRow flex-row justify-between">
          <div class="flex-col">
            <div class="flex-row justify-between bd3">
              <div class="flex-col outer4"></div>
              <span class="flex-col txt2">{{ $t("trading.dataOverview") }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 交易时间 倒计时 -->
      <div class="countDown" style="text-align: center; display: flex; align-items: center; justify-content: center;">
        <span>距离每周停盘还有：</span>
        <van-count-down :time="countDownTime">
          <template #default="timeData">
            <span class="block">{{ timeData.days }}</span>
            <span class="colon">日</span>
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">时</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">分</span>
            <span class="block">{{ timeData.seconds }}</span>
            <span class="colon">秒</span>
          </template>
        </van-count-down>
      </div>

      <!-- 分割线 -->
      <img class="pic1" src="../../assets/trading/line.png" />

      <!-- 卖家挂单 -->
      <div class="group7 flex-col justify-center">
        <div class="main9 flex-col justify-between">
          <div class="wrap1 flex-row justify-between">
            <div class="ImageText7 flex-col">
              <div class="mod5 flex-row justify-between">
                <div class="block3 flex-col"></div>
                <div class="TextGroup7 flex-col">
                  <span class="info3">卖家挂单</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 卖家挂单详情 -->
      <div class="buy-box" style="text-align: center;">
        <van-row justify="center" class="bold-row" style="font-weight: bold; color: #3CB371;">
          <van-col span="8">用户名</van-col>
          <van-col span="8">交易数量</van-col>
          <van-col span="8">单价￥</van-col>
        </van-row>
        <van-row v-for="(item, index) in sellerList" :key="index" justify="center">
          <van-col span="8">卖家{{ index + 1 }}</van-col>
          <van-col span="8">{{ item.amount }}</van-col>
          <van-col span="8">{{ item.price }}</van-col>
        </van-row>
      </div>

      <!-- 分割线 -->
      <img class="pic1" src="../../assets/trading/line.png" />

      <!-- 买家挂单 -->
      <div class="group7 flex-col justify-center">
        <div class="main9 flex-col justify-between">
          <div class="wrap1 flex-row justify-between">
            <div class="ImageText7 flex-col">
              <div class="mod5 flex-row justify-between">
                <div class="block3 flex-col"></div>
                <div class="TextGroup7 flex-col">
                  <span class="info3">买家挂单</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 买家挂单详情 -->

      <div class="buy-box">
        <van-row justify="center" class="bold-row" style="font-weight: bold; color: #CD5C5C;">
          <van-col span="8">用户名</van-col>
          <van-col span="8">交易数量</van-col>
          <van-col span="8">单价￥</van-col>
        </van-row>
        <van-row v-for="(item, index) in buyerList" :key="index" justify="center">
          <van-col span="8">买家{{ index + 1 }}</van-col>
          <van-col span="8">{{ item.amount }}</van-col>
          <van-col span="8">{{ item.price }}</van-col>
        </van-row>
      </div>
      <!-- 分割线 -->
      <img class="pic1" src="../../assets/trading/line.png" />


    </div>

    <div style="height: 40px;"></div>
    <!-- 买卖按键 -->
    <div class="buySellBtn">
      <van-row justify="space-around">
        <van-col span="6"><van-button style="font-size: 20px;" color="linear-gradient(to right, #ff5ebe, #f7189d)"
            size="large" round icon="refund-o" @click="pushPageList('/tradingBuy')">买</van-button></van-col>
        <van-col span="6"><van-button style="font-size: 20px;" color="linear-gradient(to right, #18d9f7, #17aff6)"
            size="large" round icon="after-sale" @click="pushPageList('/tradingSell')">卖</van-button></van-col>
      </van-row>
    </div>


    <div style="height: 40px;"></div>
    <!-- 分割线 -->
    <img class="pic1" src="../../assets/trading/line.png" />
    <!-- 交易历史记录 -->
    <!-- <van-cell-group inset>
      <van-cell title="交易历史记录" icon="underway-o" is-link to="transactionHistory"/>
    </van-cell-group> -->



    <div style="height: 100px;"></div>


    <!-- </van-list> -->
  </div>
</template>


<script>

import { onMounted, reactive, toRefs, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import { getLoginUser, Format_calcuDecial, styleUrl } from "@/common/js/utils";
import {

} from "../../service/trading/index";
import { useRouter } from "vue-router";


export default {
  name: "trading",
  components: { sHeader },
  setup() {
    const router = useRouter();
    const searchRef = ref(null);
    const oprRef = ref(null);
    const list = ref([]);
    const loading = ref(true);
    const error = ref(false);
    const finished = ref(false);
    const sys = ref(null);
    const user = getLoginUser();
    const labelList = ref([]);

    // const countDownTime = ref(0);

    const countDownTime = ref(calculateCountDownTime());

    function calculateCountDownTime() {
      const now = new Date();
      const day = now.getDay();
      const hours = now.getHours();
      const minutes = now.getMinutes();
      const seconds = now.getSeconds();

      let remainingTime = 0;

      // Sunday 3 PM to Monday 12 AM (0 AM)
      if (day === 0 && hours >= 15) {
        remainingTime = (8 - hours) * 3600 - minutes * 60 - seconds;
      } else {
        remainingTime = (7 - day) * 24 * 3600 + (15 - hours) * 3600 - minutes * 60 - seconds;
      }

      return remainingTime * 1000; // Convert to milliseconds
    }

    setInterval(() => {
      countDownTime.value = calculateCountDownTime();
    }, 1000);


    const buyerList = ref([]);
    buyerList.value = [
      { name: '张三', amount: 100, price: 50 },
      { name: '李四', amount: 90, price: 55 },
      { name: '王五', amount: 80, price: 60 },
      { name: '赵六', amount: 70, price: 65 },
      { name: '钱七', amount: 60, price: 70 }
    ];

    const sellerList = ref([]);
    sellerList.value = [
      { name: '张xx', amount: 10000, price: 50 },
      { name: '李xx', amount: 9000, price: 51 },
    ];


    const pushPageList = (url) => {
      router.push(url);
    }


    // 页面列表查询参数
    let searchParams = reactive({
      current: 1, // 当前页,默认第一页，1
      size: 10, // 每页多少条数据，默认10条
    });

    // 初始化页面获取列表
    onMounted(() => {
      init();
      // 加载样式
      styleUrl('trading');

    });
    // 初始化
    const init = () => {
      // 获取设备情况
      // if (localStorage.getItem("loginSys")) {
      //   const loginSysString = localStorage.getItem("loginSys");
      //   sys.value = JSON.parse(loginSysString);
      // }
      list.value = [];
      searchParams.current = 1;
    };


    // 滚动加载
    const onLoad = () => {
      if (!finished.value) {
        // console.log("滚动加载")
        searchParams.current = searchParams.current + 1;
      }
    };


    return {
      ...toRefs(searchParams),
      list,
      loading,
      error,
      finished,
      onLoad,
      searchRef,
      oprRef,
      sys,
      Format_calcuDecial,
      user,
      labelList,
      countDownTime,
      buyerList,
      sellerList,
      pushPageList
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../common/style/common.less";
</style>
