<template>
  <Navigater :title="t('hongli.title')" />

  <view class="button_group">
    <view class="button" :class="{ active: pageType === 0 }" @click="changePageType(0)">{{ t('hongli.button1') }}</view>
    <view class="button" :class="{ active: pageType === 1 }" @click="changePageType(1)">{{ t('hongli.button2') }}</view>
  </view>

  <view v-show="pageType === 0" class="column flex">
    <view>{{ t('hongli.column_name') }}</view>
    <view>{{ t('hongli.column_jiage') }}</view>
    <view>{{ t('hongli.column_daima') }}</view>
  </view>
  <view v-show="pageType === 1" class="column flex">
    <view>{{ t('hongli.column_name2') }}</view>
    <view>{{ t('hongli.column_jiage2') }}</view>
    <view>{{ t('hongli.column_chengjiaoe') }}</view>
    <view>{{ t('hongli.column_zhuangtai') }}</view>
  </view>
  <scroll-view scroll-y :style="{ height: 'calc(100vh - 130px)' }">
    <view class="gupiao_list">
      <view v-show="pageType === 0">
        <view v-if="gupiaoList.length === 0" class="nodata">{{ t('common.nodata') }}</view>

        <view v-for="(item, index) in gupiaoList" :key="index" class="gupiao flex" @click="openWindow(item)">
          <view>{{ item?.product?.name }}</view>
          <view>{{ changeMoney(item.buy_in_money) }}</view>
          <view>{{ item?.product?.shuzidaima }}</view>
        </view>
      </view>

      <view v-show="pageType === 1">
        <view v-if="shenqingList.length === 0" class="nodata">{{ t('common.nodata') }}</view>
        <view v-for="(item, index) in shenqingList" :key="index" class="gupiao flex">
          <view style="display: flex; flex-direction: column">
            <view class="text_ellipsis" style="color: #fff">{{ item?.product?.name }}</view>
            <view style="color: #a6a6a6">{{ item?.product?.shuzidaima }}</view>
          </view>
          <view style="display: flex; flex-direction: column">
            <view style="color: #ff0021">{{ changeMoney(item.buy_in_money) }}</view>
            <view v-if="item.order_status == '2' || item.order_status == '3' || item.order_status == '4'" style="color: #ff0021">
              {{ Math.floor(item.final_num) }}
            </view>
            <view v-else-if="item.order_status == '1'" style="color: #ff0021">
              {{ Math.floor(item.buy_in_num) }}
            </view>
          </view>
          <view class="flex1 flex justify-center items-center text-red" style="color: #ff0021">{{ changeMoney(Math.floor(item.buy_in_amount)) }}</view>
          <view class="flex1 flex justify-center items-center">
            <view v-if="item.status == '2'" style="color: #0cd17c"> {{ t('hongli.tip1') }} </view>
            <view v-if="item.status == '3'" class="text-red">{{ t('hongli.tip2') }} </view>
            <view v-if="item.status == '1'">{{ t('hongli.tip3') }}</view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>

  <van-popup v-model:show="gupiaoWindowShow" class="buy_window" v-bind="windowOptions">
    <view class="title">{{ t('hongli.title2') }}</view>
    <view class="row_wrap">
      <view class="row" style="width: 100%">
        <view class="label">{{ t('hongli.column_name') }}：</view>
        <view class="value">{{ windowDetail.name }}</view>
      </view>
      <view class="row">
        <view class="label">{{ t('hongli.column_daima') }}：</view>
        <view class="value">{{ windowDetail.shuzidaima }}</view>
      </view>
      <view class="row">
        <view class="label">{{ t('hongli.window_shijia') }}：</view>
        <view class="value">{{ changeMoney(windowDetail.price) }}</view>
      </view>
      <!-- <view class="row">
        <view class="label">{{ t('hongli.window_bianma') }}：</view>
        <view class="value">{{ windowDetail.zimudaima }}</view>
      </view> -->
      <view class="row">
        <view class="label">{{ t('hongli.window_zhangdie') }}：</view>
        <view class="value">{{ windowDetail.zhangdiebaifenbi }}%</view>
      </view>
      <view class="row">
        <view class="label">{{ t('hongli.column_jiage') }}：</view>
        <view class="value">{{ changeMoney(windowDetail.buy_in_money) }}</view>
      </view>
      <!-- <view class="row">
        <view class="label">{{ t('jiaoyi.shouxufei') }}：</view>
        <view class="value">{{ shouxufei.toFixed(1) }}</view>
      </view> -->
      <view class="row">
        <view class="label">{{ t('hongli.window_heji') }}：</view>
        <view class="value">{{ changeMoney(totalPrice) }}</view>
      </view>
      <view class="row">
        <view class="label">{{ t('hongli.window_yue') }}：</view>
        <view class="value">{{ changeMoney(userMoneyInfo.money) }}</view>
      </view>

      <view class="row" style="width: 100%">
        <view class="label">{{ t('ipo.windowLabel2') }}：</view>
        <view class="value"
          ><view class="flex justify-center my-[.8rem] a"> <van-stepper v-model="buyParams.num" integer input-width="100" button-size="2rem" /> </view
        ></view>
      </view>
    </view>

    <view class="button" @click="buy">{{ t('gupiaoDetail.submit') }}</view>
  </van-popup>
</template>

<script setup lang="ts">
import { getHongliListApi, buyHongliApi, getUserMoneyApi } from '@/api/index/index'
import { onHide, onShow } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
import { changeMoney } from '@/common/common'
import { ref, computed } from 'vue'
const { t } = useI18n()
let inId: any = null
onShow(() => {
  getHongliList()
  getUserMoney()
  inId = setInterval(() => {
    getHongliList()
    getUserMoney()
  }, 10000)
})

onHide(() => {
  clearInterval(inId)
})
const pageType = ref(0)
const changePageType = async (e: number) => {
  pageType.value = e
}

// 獲取新股列表
const gupiaoList = ref([])
const shenqingList = ref([])
const getHongliList = async () => {
  const res = await getHongliListApi()
  gupiaoList.value = res.data.pro_list
  shenqingList.value = res.data.order_list
}

// 獲取手續費
const userMoneyInfo = ref({})
const getUserMoney = async () => {
  const res = await getUserMoneyApi()
  res.data.sxf = Number(res.data.sxf)
  res.data.sxfzdi = Number(res.data.sxfzdi)
  userMoneyInfo.value = res.data
}

// 彈窗
const gupiaoWindowShow = ref(false)
const windowOptions = {
  position: 'bottom',
  'close-on-click-overlay': true,
  'safe-area-inset-bottom': true,
  round: true
}
const windowDetail = ref({
  hedging_price: 0
})
const openWindow = (e: any) => {
  windowDetail.value = e
  gupiaoWindowShow.value = true
}
// const shouxufei = computed(() => {
//   const sxf = totalPrice.value * userMoneyInfo.value.sxf
//   if (sxf > userMoneyInfo.value.sxfzdi) {
//     return sxf
//   }
//   return userMoneyInfo.value.sxfzdi || 20
// })
const totalPrice = computed(() => {
  return buyParams.value.num * 100 * Number(windowDetail.value.buy_in_money)
})

// 購買
const buyParams = ref({
  dividend_id: 0,
  num: 1
})
const buy = async () => {
  buyParams.value.dividend_id = windowDetail.value.id
  const res = await buyHongliApi(buyParams.value)
  gupiaoWindowShow.value = false
  getHongliList()
  getUserMoney()
  if (res.code === 1) {
    uni.showToast({
      title: res.msg,
      icon: 'none'
    })
  }
}
</script>

<style scoped lang="scss">
// .flex1 {
//   width: 25%;
// }
.nodata {
  color: #a0a5b0;
  font-size: 0.75rem;
}
.column,
.gupiao {
  padding: 0.52rem 0rem;
  display: flex;
  // background-color: #fff;
  text-align: center;
  > view {
    flex: 1;
    color: #a0a5b0;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.a {
  align-items: center;
}
.column {
  // background-color: $uni-color-gray;
}

.button_group {
  width: 21.5625rem;
  height: 2.75rem;
  background: #08182b;
  border-radius: 1.5625rem;
  margin: 0 auto;
  padding: 0.3125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .button {
    width: 10.3125rem;
    height: 2.125rem;
    line-height: 2.125rem;
    border-radius: 1.25rem;
    text-align: center;
    font-size: 0.875rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .active {
    background: #45d9fd;
    color: $uni-color-primary;
    font-weight: 500;
    font-size: 0.875rem;
  }
}
.gupiao_list {
  margin-bottom: 0.31rem;
  display: flex;
  align-items: center;
  justify-content: center;
  // padding: 0.62rem;
  .column,
  .gupiao {
    width: 22.6563rem;
    height: 3.5rem;
    padding: 0.52rem 0rem;
    display: flex;
    background-color: rgb(10, 31, 55, 0.7);
    border-radius: 0.3125rem;
    text-align: center;
    margin-bottom: 0.625rem;
    > view {
      flex: 1;
      font-size: $uni-font-size-lg;
      white-space: pre-wrap;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      // white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .column {
    // background-color: $uni-color-gray;
  }
  .text_ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.buy_window {
  background-color: #fff;
  padding: 0 0.81rem 1.25rem 0.81rem;
  .title {
    text-align: center;
    padding: 0.8rem 0 0.5rem;
    font-size: 1rem;
  }
  .row_wrap {
    display: flex;
    flex-wrap: wrap;
    .row {
      display: flex;
      width: 50%;
      align-items: center;
      padding: 0.24rem 0.56rem;
      color: #fff;
      view {
        color: $uni-text-color;
        font-size: 0.775rem;
      }
    }
  }
  .button {
    height: 2.19rem;
    line-height: 2.19rem;
    width: 100%;
    text-align: center;
    border-radius: 1.03rem;
    background-color: #6a69e9;
    color: #fff;
    font-size: 0.81rem;
    margin-top: 1.25rem;
  }
}
</style>
