<template>
  <!-- 持仓 -->
  <div class="position flex-col">
    <div class="box1 flex-col">
      <s-header :name="$t('position.machineSalesRanking')" :noback="true" :isFixed="false"></s-header>
      <div class="positionBox1 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">持仓情况</span>
            </div>
          </div>
        </div>
      </div>

      <img class="pic1" src="../../assets/device/line.png" />
    </div>

    <div>
      <div class="o-plr-15 o-ptb-20">
        <div class="bd1 flex-col">
          <div class="box2 l-f l-flex-c l-flex-j-a">
            <div class="TextGroup flex-col">
              <div class="main6 flex-col justify-between align-center">
                <span class="word5">{{ buyPrice }}</span>
                <span class="word6">买入均价￥</span>
              </div>
            </div>

            <div class="TextGroup flex-col">
              <div class="main6 flex-col justify-between align-center">
                <span class="word5">{{ dailyDiff }}</span>
                <span class="word6">当日盈亏￥</span>
              </div>
            </div>

            <div class="TextGroup flex-col">
              <div class="main6 flex-col justify-between align-center">
                <span class="word5">{{ totalDiff }}</span>
                <span class="word6">总盈亏￥</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="positionBox">

    </div>

    <img class="img1" referrerpolicy="no-referrer" src="../../assets/line.png" />
    <div class="groove"></div>

    <div class="tradingHistory">
      <!-- 交易历史 -->
      <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">
              交易历史</span>
          </div>
        </div>
        <!-- 搜索 -->
        <div class="flex-col">
          <div class="main5 flex-row justify-between" @click="searchClick">
            <img class="label2" src="../../assets/position/searchIcon.png" />
          </div>
        </div>
      </div>
    </div>


    <!-- 历史记录明细 -->
    <div class="historyList">
      <div v-if="hisLength === 0">
        <van-empty image="search" description="暂无交易历史" />
      </div>
      <div v-else>
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div v-for="item in orderHisList" :key="item.id">
            <van-card>
              <template #title>
                <span class="word13">交易数量：{{ item.entrustNumber }} 股</span>
              </template>
              <template #desc>
                <span class="word11">创建时间：{{ item.createTime }}</span>
              </template>
              <template #tags>
                <div v-if="item.type === '1'">交易类型：<van-tag type="success">买入</van-tag></div>
                <div v-else>交易类型：<van-tag type="warning">卖出</van-tag></div>
                <!-- <van-tag  type="danger">挂单失败</van-tag> -->
              </template>
              <template #price-top>
                <!-- status 状态：0过期，1生效，2撤单，3全部成交，4部分成交 -->
                <!-- <div>
                  交易状态：<van-tag plain round type="danger">{{ showStatusText(item.status) }}</van-tag>
                </div> -->
                <div v-if="item.status === '0'">交易状态：<van-tag plain round type="danger">过期</van-tag></div>
                <div v-else-if="item.status === '1'">交易状态：<van-tag plain round type="success">生效</van-tag></div>
                <div v-else-if="item.status === '2'">交易状态：<van-tag plain round>撤单</van-tag></div>
                <div v-else-if="item.status === '3'">交易状态：<van-tag plain round type="primary">全部成交</van-tag></div>
                <div v-else-if="item.status === '4'">交易状态：<van-tag plain round type="warning">部分成交</van-tag></div>
                <div v-else>交易状态：<van-tag plain round>未知状态</van-tag></div>
              </template>
              <template #price>
                <span class="txt9">每股单价
                  ：￥{{ item.price }}
                </span>
              </template>
            </van-card>
            <br>
          </div>
        </van-list>
      </div>
    </div>


    <!-- 使用搜索弹窗组件 -->
    <SearchPop :showSearchPop="showSearchPop" @update:showSearchPop="handleUpdateShowSearchPop" />
    <div style="height: 50px;"></div>
    <TestComp param="哈哈哈" />
  </div>

</template>

<script setup>
// 导入无数据组件
import sHeader from "@/components/SimpleHeader"
import { onMounted, reactive, ref } from "vue"
import SearchPop from './SearchPop.vue';
import TestComp from './TestComp.vue'
import { listMyOrderHis, getMyStock } from "@/service/position";

const showSearchPop = ref(false);

const orderHisList = ref([]);
const loading = ref(false)
const finished = ref(false)
const hisLength = ref(0)

// const showStatusText = (statusVal) => {
//   const statusMap = {
//     0: '过期',
//     1: '生效',
//     2: '撤单',
//     3: '全部成交',
//     4: '部分成交',
//   }
//   return statusMap[statusVal] || '未知状态';
// }

const onLoad = async () => {
  if (!finished.value) {
    loading.value = true
    searchParams.current = searchParams.current + 1;
    getList();
    getMyStockFunc();
  }
};

let searchParams = reactive({
  current: 1, // 当前页，默认1
  size: 10, // 页大小，默认10条
})

const getList = async () => {
  finished.value = false;
  const params = Object.assign({}, searchParams);
  const { data } = await listMyOrderHis(params);
  if (data.code === "00000") {
    orderHisList.value = data.data.records
    hisLength.value = orderHisList.value.length
    if (orderHisList.value.length >= data.data.total) {
      finished.value = true;
    }
  }
  // 加载状态结束
  loading.value = false;
}

onMounted(
  onLoad,
);

const buyPrice = ref()
const dailyDiff = ref()
const totalDiff = ref()

const getMyStockFunc = async () => {
  const { data } = await getMyStock();
  if (data.code === '00000') {
    console.log("getMyStock >>>", data.data);
    buyPrice.value = data.data.buyPrice
    dailyDiff.value = data.data.dailyDiff
    totalDiff.value = data.data.totalDiff
  }
}

const searchClick = () => {
  console.log("点击搜索");
  showSearchPop.value = true;
}

// 处理子组件传递回来的更新事件
const handleUpdateShowSearchPop = (val) => {
  showSearchPop.value = val;
}

</script>

<style lang="less" scoped>
@import "../../styles/position/index.less";
</style>
