<template>
  <Navigater :title="`${gupiaoDetail.name}(${gupiaoDetail.shuzidaima})`">
    <template #right>
      <view class="collect" @click="collect">
        <van-icon v-if="collectInfo == 0" name="star-o" size="1rem" color="#f7ac33"></van-icon>
        <van-icon v-else name="star" size="1rem" color="#f7ac33"></van-icon>
      </view>
    </template>
  </Navigater>
  <view class="content" :style="{ height: contentHeight }">
    <view class="jiage">{{ gupiaoDetail.price }}</view>
    <view class="zd">
      <view class="text-primary text-lg">
        <text v-if="gupiaoDetail.zhangdiebaifenbi === 0"> - </text>
        <van-icon v-else :class="getColor(gupiaoDetail, true)" name="down" size=".75rem" />
      </view>
      <view class="text-lg" :class="getColor(gupiaoDetail)">({{ gupiaoDetail.zhangdiebaifenbi }}%)</view>
    </view>
    <!-- <view class="card">
      <view class="flex justify-between">
        <view class="flex-1">
          <view class="text-lg font-bold">{{ gupiaoDetail.name }}</view>
          <view class="text-lg">{{ gupiaoDetail.shuzidaima }}</view>
        </view>

        <view class="flex justify-end flex-1 items-center">
          <view class="text-[1.2rem]">{{ gupiaoDetail.price }}</view>
          <view class="text-primary text-lg">
            <text v-if="gupiaoDetail.zhangdiebaifenbi === 0"> - </text>
            <van-icon v-else :class="getColor(gupiaoDetail, true)" name="down" size=".75rem" />
          </view>
          <view class="text-lg" :class="getColor(gupiaoDetail)">({{ gupiaoDetail.zhangdiebaifenbi }}%)</view>
        </view>
      </view>
    </view> -->
    <view class="card">
      <view class="flex justify-between">
        <view class="flex flex-1 text-left">
          <view class="text-lg text-gray">{{ t('gupiaoDetail.label1') }}：</view>
          <view class="text-lg">{{ gupiaoDetail.open }}</view>
        </view>
        <view class="flex flex-1 text-left">
          <view class="text-lg text-gray">{{ t('gupiaoDetail.label2') }}：</view>
          <view class="text-lg">{{ gupiaoDetail.close }}</view>
        </view>
      </view>
      <view class="flex justify-between">
        <view class="flex flex-1 text-left">
          <view class="text-lg text-gray">{{ t('gupiaoDetail.label3') }}：</view>
          <view class="text-lg" style="color: #ff0021">{{ gupiaoDetail.high }}</view>
        </view>
        <view class="flex flex-1 text-left">
          <view class="text-lg text-gray">{{ t('gupiaoDetail.label4') }}：</view>
          <view class="text-lg">{{ gupiaoDetail.low }}</view>
        </view>
      </view>
      <view class="flex justify-between">
        <view class="flex flex-1 text-left">
          <view class="text-lg text-gray">{{ t('gupiaoDetail.label5') }}：</view>
          <view class="text-lg" style="color: #ff0021">{{ gupiaoDetail.vol }}</view>
        </view>
        <view class="flex flex-1 text-left">
          <view class="text-lg text-gray">{{ t('gupiaoDetail.label6') }}：</view>
          <view class="text-lg">{{ gupiaoDetail.totalMoney }}(億)</view>
        </view>
      </view>
    </view>

    <view class="date_wrap">
      <view v-for="(item, index) in columns" :key="index" :class="{ active: item.value == dateActive }" class="date" @click="getChart(gupiaoDetail.id, item.value)">{{ item.label }}</view>
      <!-- <van-field v-model="fieldValue" is-link readonly :label="t('gupiaoDetail.tip1')" :placeholder="t('gupiaoDetail.tip2')" style="padding: 0" @click="showPicker = true" /> -->
    </view>
    <view class="chart_wrap">
      <GupiaoChart :value="chartValue" />
    </view>

    <view class="box">
      <view class="button_wrap">
        <view class="flex justify-between">
          <view class="button" :class="{ active: buyGupiaoParams.buytype === 0 }" @click="buyGupiaoParams.buytype = 0">{{ t('gupiaoDetail.shijia') }}</view>
          <view class="button" :class="{ active: buyGupiaoParams.buytype === 1 }" @click="buyGupiaoParams.buytype = 1">{{ t('gupiaoDetail.xianjia') }}</view>
        </view>
      </view>
      <view class="submit_wrap">
        <view v-show="buyGupiaoParams.buytype === 1" class="row">
          <view class="text-lg title">{{ t('gupiaoDetail.inputLabel1') }}</view>
          <view class="input_wrap">
            <van-field v-model="price" type="number" :placeholder="buyGupiaoParams.price" @blur="priceChange" />
            <!-- <input v-model="buyGupiaoParams.price" /> -->
          </view>
        </view>
        <view class="row">
          <view class="text-lg title">{{ t('gupiaoDetail.inputLabel2') }}</view>
          <view class="input_wrap">
            <van-field v-model="buyGupiaoParams.shuliang" type="digit" />
            <!-- <input v-model="buyGupiaoParams.shuliang" /> -->
          </view>
        </view>
        <view v-if="userMoneyInfo.peizi_data === '1'" class="row">
          <view class="text-lg title">{{ t('gupiaoDetail.inputLabel3') }}</view>
          <view class="input_wrap">
            <van-field v-model="buyGupiaoParams.ganggan_ratio" type="digit" @update:model-value="changeganggan_ratio" />
            <!-- <input v-model="buyGupiaoParams.shuliang" /> -->
          </view>
        </view>
        <view class="button_wrap">
          <view class="flex justify-between">
            <view class="button" :class="{ active: buyGupiaoParams.fangxiang === 'duo' }" @click="buyGupiaoParams.fangxiang = 'duo'">{{ t('gupiaoDetail.maiduo') }}</view>
            <view class="button" :class="{ active: buyGupiaoParams.fangxiang === 'kong' }" @click="buyGupiaoParams.fangxiang = 'kong'">{{ t('gupiaoDetail.maikong') }}</view>
          </view>
          <view class="button submit" @click="openWindow()">{{ t('gupiaoDetail.submit') }}</view>
        </view>
      </view>
    </view>
  </view>
  <van-popup v-model:show="gupiaoWindowShow" class="buy_window" v-bind="windowOptions">
    <view class="title row">{{ gupiaoDetail.name }}/{{ gupiaoDetail.shuzidaima }}</view>
    <view class="row">
      <view>{{ t('gupiaoDetail.windowLabel1') }}</view>
      <view v-if="buyGupiaoParams.buytype == 0">{{ gupiaoDetail.price ? changeMoney(gupiaoDetail.price) : '-' }}</view>
      <view v-else>{{ price ? changeMoney(price) : gupiaoDetail.price ? changeMoney(gupiaoDetail.price) : '-' }}</view>
    </view>
    <view class="row">
      <view>{{ t('gupiaoDetail.windowLabel2') }}</view>
      <view>{{ buyGupiaoParams.shuliang }}</view>
    </view>
    <view class="row">
      <view>{{ t('gupiaoDetail.windowLabel3') }}</view>
      <view v-if="buyGupiaoParams.buytype == 0">{{
        gupiaoDetail.price !== '-'
          ? userMoneyInfo.peizi_data === '1'
            ? changeMoney((gupiaoDetail.price * buyGupiaoParams.shuliang) / buyGupiaoParams.ganggan_ratio)
            : changeMoney(gupiaoDetail.price * buyGupiaoParams.shuliang)
          : '-'
      }}</view>
      <view v-else>{{
        price !== ''
          ? buyGupiaoParams.price
            ? userMoneyInfo.peizi_data === '1'
              ? changeMoney((price * buyGupiaoParams.shuliang) / buyGupiaoParams.ganggan_ratio)
              : changeMoney(price * buyGupiaoParams.shuliang)
            : '-'
          : gupiaoDetail.price !== '-'
          ? userMoneyInfo.peizi_data === '1'
            ? changeMoney((gupiaoDetail.price * buyGupiaoParams.shuliang) / buyGupiaoParams.ganggan_ratio)
            : changeMoney(gupiaoDetail.price * buyGupiaoParams.shuliang)
          : '-'
      }}</view>
    </view>
    <view class="row">
      <view>{{ t('gupiaoDetail.windowLabel4') }}</view>
      <view>{{ gupiaoDetail.price !== '-' ? changeMoney(gupiaoDetail.price * buyGupiaoParams.shuliang) : '-' }}</view>
    </view>
    <view class="row">
      <view>{{ t('gupiaoDetail.windowLabel6') }}</view>
      <view v-if="buyGupiaoParams.buytype === 0">{{ userMoneyInfo.peizi_data === '1' ? changeMoney(heji / buyGupiaoParams.ganggan_ratio) : changeMoney(heji) }}</view>
      <view v-else>{{
        price === ''
          ? userMoneyInfo.peizi_data === '1'
            ? changeMoney((gupiaoDetail.price * (buyGupiaoParams.shuliang || 0)) / buyGupiaoParams.ganggan_ratio)
            : changeMoney(gupiaoDetail.price * (buyGupiaoParams.shuliang || 0))
          : userMoneyInfo.peizi_data === '1'
          ? changeMoney((price * (buyGupiaoParams.shuliang || 0)) / buyGupiaoParams.ganggan_ratio)
          : changeMoney(price * (buyGupiaoParams.shuliang || 0))
      }}</view>
    </view>
    <view class="row">
      <view>{{ t('gupiaoDetail.windowLabel7') }}</view>
      <view>{{ changeMoney(userMoneyInfo.money) }}</view>
    </view>
    <view class="button" @click="buyGupiao">{{ t('gupiaoDetail.submit') }}</view>
  </van-popup>
  <!-- <van-popup v-model:show="showPicker" round position="bottom">
    <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
  </van-popup> -->
</template>
<script setup lang="ts">
import GupiaoChart from './components/gupiaoChart.vue'
import { useCounterStore } from '@/store/store'
import { useI18n } from 'vue-i18n'
import { getGupiaoDetailApi, getTickerKApi, collectApi, collectDetailApi, getUserMoneyApi, buyGupiaoApi } from '@/api/index/index'
import { timestempToDate, getColor, changeMoney } from '@/common/common'
import { onHide, onLoad, onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { buyGupiaoType } from '@/api/index/indexType'
import { showConfirmDialog, showToast } from 'vant'
const { t } = useI18n()
// 页面基础配置
const store = useCounterStore()
console.log(store)
const contentHeight = `calc(100vh - ${store.navigaterHeight})`
onLoad(async (options) => {
  getUserMoney()
  buyGupiaoParams.value.pro_id = options?.id
})

const changeganggan_ratio = () => {
  if (buyGupiaoParams.value.ganggan_ratio < 1) {
    buyGupiaoParams.value.ganggan_ratio = 1
  } else if (buyGupiaoParams.value.ganggan_ratio > 100) {
    buyGupiaoParams.value.ganggan_ratio = 100
  }
}

let gpdId: any = null
onShow(async () => {
  await getGupiaoDetail(buyGupiaoParams.value.pro_id)
  getChart(gupiaoDetail.value.id, dateActive.value)
  gpdId = setInterval(async () => {
    await getGupiaoDetail(buyGupiaoParams.value.pro_id)

    await getChart(gupiaoDetail.value.id, dateActive.value)
  }, 10000)
})
onHide(() => {
  clearInterval(gpdId)
})

// 获取股票详情

const gupiaoDetail = ref({
  is_zixuan: 0,
  price: '-'
})
const price = ref('')
const getGupiaoDetail = async (id: any) => {
  const res = await getGupiaoDetailApi({ id })
  res.data.time = timestempToDate(res.data.updatetime * 1000, '/')
  res.data.totalMoney = Math.floor(((res.data.vol * res.data.price * 1000) / 100000000) * 100) / 100
  gupiaoDetail.value = res.data
  collectInfo.value = res.data.is_zixuan
  buyGupiaoParams.value.price = res.data.price
}

const columns = [
  { label: t('gupiaoDetail.tip3'), value: 1 },
  { label: t('gupiaoDetail.tip4'), value: 2 },
  { label: t('gupiaoDetail.tip5'), value: 3 },
  { label: t('gupiaoDetail.tip6'), value: 4 },
  { label: t('gupiaoDetail.tip7'), value: 5 },
  { label: t('gupiaoDetail.tip8'), value: 6 },
  { label: t('gupiaoDetail.tip9'), value: 7 },
  { label: t('gupiaoDetail.tip10'), value: 8 }
]
// const fieldValue = ref('1分钟')
// const showPicker = ref(false)

// const onConfirm = ({ selectedOptions }) => {
//   showPicker.value = false
//   fieldValue.value = selectedOptions[0].text
//   getChart(gupiaoDetail.value.id, dateActive.value)
// }

// 股票K线
const dateActive = ref(1)

const chartValue = ref({})
const getChart = async (id: number, kline_type: number = 0) => {
  dateActive.value = kline_type

  const res = await getTickerKApi({ kline_type: dateActive.value, id })
  const kLineList = res.data.map((item: any) => {
    return {
      close: item.c,
      high: item.h,
      low: item.l,
      open: item.o,
      timestamp: item.t * 1000,
      volume: item.v
    }
  })
  chartValue.value = kLineList
}

// 收藏股票
const collectInfo = ref(0)
const collect = async () => {
  const res = await collectApi({ id: gupiaoDetail.value.id })
  const info = await collectDetailApi({ id: gupiaoDetail.value.id })
  collectInfo.value = info.data.msg === 'yes' ? 1 : 0
  showToast(res.data.msg)
}

// 购买股票
const buyGupiaoParams = ref<buyGupiaoType>({
  buytype: 0,
  fangxiang: 'duo',
  price: 0,
  pro_id: 0,
  shuliang: 1,
  ganggan_ratio: 10
})
const gupiaoWindowShow = ref(false)
const windowOptions = {
  position: 'bottom',
  'close-on-click-overlay': true,
  'safe-area-inset-bottom': true,
  round: true
}
const heji = ref(0)
const openWindow = (e: string) => {
  const price1 = buyGupiaoParams.value.buytype === 0 ? Number(gupiaoDetail.value.price) : Number(price.value)
  const sxf = Number(parseFloat(userMoneyInfo.value.sxf * price1 * Number(buyGupiaoParams.value.shuliang)).toFixed(3))
  if (sxf > userMoneyInfo.value.sxfzdi) {
    shouxufei.value = sxf
  } else {
    shouxufei.value = Number(parseFloat(userMoneyInfo.value.sxfzdi).toFixed(3))
  }
  heji.value = (price1 || 0) * (buyGupiaoParams.value.shuliang || 0)
  gupiaoWindowShow.value = true
}

const priceChange = () => {
  if (price.value) {
    price.value = Number(price.value).toFixed(1)
  }
}

const buyGupiao = async () => {
  const params = { ...buyGupiaoParams.value }
  params.price = buyGupiaoParams.value.buytype === 0 ? Number(gupiaoDetail.value.price) : price.value !== '' ? Number(price.value) : Number(gupiaoDetail.value.price)
  params.ganggan_ratio = userMoneyInfo.value.peizi_data === '1' ? buyGupiaoParams.value.ganggan_ratio : 1
  const res = await buyGupiaoApi(params)
  if (res.code === 1) {
    getUserMoney()
    // showSuccessToast(res.data.msg)
    showConfirmDialog({
      message: res.data.msg,
      confirmButtonText: t('gupiaoDetail.tip11'),
      cancelButtonText: t('gupiaoDetail.tip12')
    })
      .then(() => {
        // on confirm
        uni.switchTab({ url: '/pages/jiaoyi/jiaoyi' })
        // uni.navigateTo({ url: '/subPackages/transactionLog/transactionLog?isLs=1' })
      })
      .catch(() => {
        // on cancel
      })
    setTimeout(() => {
      gupiaoWindowShow.value = false
    }, 1500)
  } else {
    showToast({
      message: res.msg,
      // message: '您的餘額不足，請儲值\n2625000000.請儲值',
      wordBreak: 'break-all'
    })
  }
}

// 获取手续费
const userMoneyInfo = ref({})
const shouxufei = ref(0)
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
}
</script>

<style scoped lang="scss">
.collect {
  position: absolute;
  right: 0;
  height: 100%;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  image {
    width: 1.31rem;
    height: 1.31rem;
  }
}
.text-left {
  text-align: left;
}
button {
  font-family: none;
}
.content {
  overflow: auto;
  padding-bottom: 16.1875rem;

  .box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 23.4375rem;
    height: 17.1875rem;
    border-top-left-radius: 1.5625rem;
    border-top-right-radius: 1.5625rem;
    background: #fff;
    z-index: 9;
  }

  .zd {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .jiage {
    margin-top: 0.7188rem;
    text-align: center;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 500;
  }
  .card {
    width: 21.5625rem;
    height: 5.375rem;
    margin: 0.5938rem auto 0;
    padding: 0.6875rem 0.9375rem;
    // height: 5rem;
    border-radius: 1.03rem;
    background-color: rgb(11, 32, 56, 0.7);

    margin-top: 0.34rem;
    text-align: left;

    .text-lg {
      color: #fff;
    }

    .text-gray {
      color: #a6abb5;
    }
  }
  .date_wrap {
    width: 21.5625rem;
    height: 2.75rem;
    margin: 0.9375rem auto 0;
    padding: 0.3125rem 0.2813rem;
    background-color: rgb(11, 32, 56, 0.7);
    border-radius: 1.5625rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.34rem;
    .date {
      width: 2.625rem;
      height: 2.125rem;
      border-radius: 1.5625rem;
      line-height: 2.125rem;
      font-size: 0.875rem;
      text-align: center;
      color: #a0a5b0;
    }
    .active {
      background-color: #45d9fd;
      color: $uni-color-primary;
    }
  }
  .chart_wrap {
    // background-color: #f1f3f4;
    padding: 0.56rem 1.25rem 2.56rem;
    // border-top-right-radius: 1.03rem;
    // border-top-left-radius: 1.03rem;
    margin-top: 0.34rem;
  }
  .button_wrap {
    padding: 1.25rem 1.25rem 0.625rem;
    justify-content: space-between;
    .button {
      width: 10rem;
      height: 2.4375rem;
      line-height: 2.4375rem;
      text-align: center;
      color: #fff;
      font-size: 0.9375rem;
      background: #08182b;
      border-radius: 1.5625rem;
    }
    .submit {
      height: 3.0625rem !important;
      line-height: 3.0625rem !important;
      width: 100% !important;
      margin-top: 0.63rem !important;
      background: #6a69e9 !important;
    }
    .active {
      background-color: #45d9fd;
      color: #fff;
    }
  }
  .submit_wrap {
    background-color: #fff;
    border-radius: 1.03rem;
    padding: 0 1.56rem 1.25rem;
    .row {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title {
        font-size: 0.8125rem;
        color: #a6abb5;
      }
    }
    .input_wrap {
      // height: 1.91rem;
      // display: flex;
      // align-items: center;
      // border-radius: 1.25rem;
      // border: 0.03rem solid $uni-color-primary;
      // padding: 0 0.88rem;
      // margin-left: auto;
      // margin-right: auto;
      // font-size: 1rem;
      // margin: 0.38rem 0 0.59rem;
      .van-field {
        width: 15.0625rem;
        height: 2.0625rem;
        display: flex;
        align-items: center;
        border-radius: 1.25rem;
        border: 0.03rem solid #d2d2f8;
        padding: 0 0.88rem;
        margin-left: auto;
        margin-right: auto;
        font-size: 1rem;
        margin: 0.38rem 0 0.59rem;
      }
      // input {
      //   flex: 1;
      //   text-align: left;
      //   color: $uni-color-primary;
      //   .uni-input-placeholder {
      //     color: $uni-color-primary;
      //   }
      // }
    }
    .button_wrap {
      padding: 0;
      .button {
        width: 10rem;
        height: 2.4375rem;
        line-height: 2.4375rem;
        margin: 0;
        background-color: #08182b;
        color: #fff;
      }
      .active {
        background-color: #45d9fd;
        color: #fff;
      }
    }
  }
}

.buy_window {
  background-color: #4d5e69;
  padding: 0 0.81rem 1.25rem 0.81rem;
  .row {
    display: flex;
    justify-content: space-between;
    padding: 0.94rem 0.56rem;
    border-bottom: 0.03rem solid #27343c;
    color: #fff;
    view {
      color: #fff;
      font-size: 0.81rem;
    }
  }
  .title {
    justify-content: center;
  }
  .button {
    height: 2.19rem;
    line-height: 2.19rem;
    width: 100%;
    text-align: center;
    border-radius: 1.03rem;
    background-color: $uni-color-primary;
    color: #fff;
    font-size: 0.81rem;
    margin-top: 1.25rem;
  }
}

::v-deep .van-popup--round {
  border-radius: 1.88rem !important;
}
</style>
