<template>
  <view class="header">
    <Navigator :is-show-back="false" :title="t('tabbar.jiaoyi')" />
    <!-- <view class="card">
      <div class="left">
        <view class="flex">
          <view class="text-lg mr-[0.25rem]">{{ t('jiaoyi.total') }}</view>
          <van-icon :name="!isHidden ? 'eye-o' : 'closed-eye'" color="#50aff0" size="1rem" @click="isHidden = !isHidden" />
        </view>
        <view>
          <view v-if="isHidden">******</view>
          <view v-else>{{ pageType == 0 ? changeMoney(userMoneyInfo.total || 0) : changeMoney(userMoneyInfo.tota2 || 0) }}</view>
        </view>
      </div>
      <div class="right">
        <view id="charts"></view>
      </div>
    </view> -->
    <!-- <view class="card2">
      <view class="row">
        <view class="flex items-center">
          <view class="li blue"></view>
          <view v-if="pageType == 0 || pageType == 2">{{ t('jiaoyi.sunyiheji') }}</view>
          <view v-if="pageType == 1">{{ t('jiaoyi.sunyiheji2') }}</view>
        </view>
        <view>
          <view v-if="isHidden" @click="isHidden = !isHidden">******</view>
          <view v-if="pageType == 0 || pageType == 1" :class="(pageType == 0 ? jiaoyiInfo?.my_losses?.count_losses : jiaoyiInfo?.my_realized_losses?.count_losses) > 0 ? 'txt-red' : 'txt-green'">{{
            pageType == 0 ? changeMoney(jiaoyiInfo?.my_losses?.count_losses || 0) : changeMoney(jiaoyiInfo?.my_realized_losses?.count_losses || 0)
          }}</view>
          <view v-if="pageType == 2">{{ jiaoyiInfo?.xingu?.count_losses || 0 }}</view>
        </view>
      </view>
      <view class="row">
        <view class="flex items-center">
          <view class="li green"></view>
          <view v-if="pageType == 0 || pageType == 2">{{ t('jiaoyi.shizhiheji') }}</view>
          <view v-if="pageType == 1">{{ t('jiaoyi.shizhihej2i') }}</view>
        </view>
        <view>
          <view v-if="isHidden" @click="isHidden = !isHidden">******</view>
          <view v-if="pageType == 1 || pageType == 0">{{
            pageType == 0 ? changeMoney(jiaoyiInfo?.my_losses?.count_market || 0) : changeMoney(jiaoyiInfo?.my_realized_losses?.count_market || 0)
          }}</view>
          <view v-if="pageType == 2">{{ jiaoyiInfo?.xingu?.count_losses || 0 }}</view>
        </view>
      </view>
      <view class="row">
        <view class="flex items-center">
          <view class="li purple"></view>
          <view>{{ t('jiaoyi.yue') }}</view>
        </view>
        <view>
          <view v-if="isHidden" @click="isHidden = !isHidden">******</view>
          <view>{{ changeMoney(userMoneyInfo?.money || 0) }}</view>
        </view>
      </view>
    </view> -->
  </view>
  <view class="button_wrap">
    <view class="button" :class="{ active: pageType === 0 }" @click="changePageType(0)">{{ t('jiaoyi.weishixiansunyi') }}</view>
    <view class="button" :class="{ active: pageType === 2 }" @click="changePageType(2)">{{ t('jiaoyi.sunyiheji3') }}</view>
    <view class="button" :class="{ active: pageType === 1 }" @click="changePageType(1)">{{ t('jiaoyi.yishixiansunyi') }}</view>
  </view>
  <view class="content" :style="{ height: contentHeight }">
    <view class="gupiao_list">
      <view v-show="pageType === 0">
        <NotData v-if="!weishixianList.length" />
        <view v-for="(item, index) in weishixianList" :key="index" class="gupiao" @click="goPage(`../jiaoyiDetail/jiaoyiDetail?id=${item.id}&ismai=1`)">
          <view class="flex items-center justify-between pb-[0.4rem]">
            <view class="flex items-center" style="width: 60%">
              <view class="font-bold text_hied text-primary">{{ item?.product?.name }}</view>
              <view class="icon text-base">{{ item?.product?.shuzidaima }}</view>
              <view class="icon text-base" :class="item.fangxiang_data === '1' ? 'red' : 'green'">{{ item.fangxiang_data === '1' ? t('jiaoyi.zhang') : t('jiaoyi.die') }}</view>
            </view>
            <view class="icon_primary">{{ getStatus(item) }}</view>
          </view>
          <view class="flex justify-between info-box">
            <view class="half">
              <!-- <view class="row">{{ t('jiaoyi.dingdanxiangqing') }}</view> -->
              <!-- <view class="row">
                <view class="label">{{ t('jiaoyi.shuliang') }}</view>
                <view class="value">{{ item.shuliang }}</view>
              </view> -->
              <view class="row">
                <view class="label">{{ t('jiaoyi.chigushu') }}</view>
                <view class="value">{{ item.shuliang }}</view>
              </view>
              <view class="row">
                <view class="label">{{ t('jiaoyi.goumaijiage') }}</view>
                <view class="value">{{ qfw(item.price) }}</view>
              </view>
              <!-- <view class="row">
                <view class="label">{{ t('jiaoyi.shouxufei') }}</view>
                <view class="value"></view>
              </view> -->
              <view class="row">
                <view class="label">{{ t('jiaoyi.goumaizongjia') }}</view>
                <view class="value">{{ qfw(((item.price * item.shuliang) / Number(item.ganggan_ratio)).toFixed(1)) }}</view>
              </view>
              <!-- <view class="row">
                <view class="label">{{ t('jiaoyi.shijian') }}</view>
                <view class="value">{{ timestempToDate(item.buytime * 1000) }}</view>
              </view> -->
            </view>
            <view class="half">
              <!-- <view class="row">{{ t('jiaoyi.xianzaixianqging') }}</view> -->

              <view class="row">
                <view class="label">{{ t('jiaoyi.xianzaizongjia') }}</view>
                <view class="value">{{ qfw(item.shizhi) }}</view>
              </view>
              <view class="row">
                <view class="label">{{ t('jiaoyi.yugusunyi') }}</view>
                <view class="value" :class="Number(item?.yingkui) > 0 ? 'txt-red' : 'txt-green'">{{ changeMoney(item?.yingkui) }}</view>
              </view>
              <view class="row">
                <view class="label">{{ t('jiaoyi.sunyilv') }}</view>
                <view class="value" :class="Number(item?.yingkui) > 0 ? 'txt-red' : 'txt-green'">{{ item?.yisun }}</view>
              </view>
              <view class="row">
                <view class="label">{{ t('jiaoyi.xianjia') }}</view>
                <view class="value" :class="Number(item?.yingkui) > 0 ? 'txt-red' : 'txt-green'">{{ qfw(item?.product?.price) }}</view>
              </view>
            </view>
          </view>

          <view class="flex justify-between mt-[0.31rem]">
            <view class="icon_primary" @click="goPage(`/subPackages/jiaoyi/jiaoyiDetail/jiaoyiDetail?id=${item.id}&ismai=1`)">{{ t('jiaoyi.gupiaoxiangqing') }}</view>
            <view v-if="item.status !== '4'" class="icon_o" @click.stop="sell(item)">{{ t('jiaoyi.maichu') }}</view>
            <view v-if="item.status === '4'" class="icon_o" @click.stop="cancelOrde(item)">{{ t('jiaoyi.chedan') }}</view>
          </view>
        </view>
      </view>

      <view v-show="pageType === 1">
        <NotData v-if="!yishixianList.length" />
        <view v-for="(item, index) in yishixianList" :key="index" class="gupiao">
          <view class="flex items-center justify-between pb-[0.4rem]">
            <view class="flex items-center" style="width: 60%">
              <view class="font-bold text_hied text-primary">{{ item?.product?.name }}</view>
              <view class="icon text-base">{{ item?.product?.shuzidaima }}</view>
              <view class="icon text-base" :class="item.fangxiang_data === '1' ? 'red' : 'green'">{{ item.fangxiang_data === '1' ? t('jiaoyi.zhang') : t('jiaoyi.die') }}</view>
            </view>
            <view class="icon text-lg">{{ getStatus(item) }}</view>
          </view>
          <view class="flex justify-between">
            <view class="half">
              <!-- <view class="row">{{ t('jiaoyi.dingdanxiangqing') }}</view> -->
              <!-- <view class="row">
                <view class="label">{{ t('jiaoyi.shuliang') }}</view>
                <view class="value">{{ item.shuliang }}</view>
              </view> -->
              <view class="row">
                <view class="label">{{ t('jiaoyi.chigushu') }}</view>
                <view class="value">{{ item.shuliang }}</view>
              </view>
              <view class="row">
                <view class="label">{{ t('jiaoyi.goumaijiage') }}</view>
                <view class="value">{{ changeMoney(item.price) }}</view>
              </view>
              <!-- <view class="row">
                <view class="label">{{ t('jiaoyi.shouxufei') }}</view>
                <view class="value"></view>
              </view> -->
              <view class="row">
                <view class="label">{{ t('jiaoyi.goumaizongjia') }}</view>
                <view class="value">{{ changeMoney(((item.price * item.shuliang) / Number(item.ganggan_ratio)).toFixed(1)) }}</view>
              </view>
              <!-- <view class="row">
                <view class="label">{{ t('jiaoyi.shijian') }}</view>
                <view class="value">{{ timestempToDate(item.buytime * 1000) }}</view>
              </view> -->
              <view class="flex justify-between mt-[0.31rem]" style="margin-top: 50px">
                <view class="icon_primary" @click="goPage(`/subPackages/jiaoyi/jiaoyiDetail/jiaoyiDetail?id=${item.id}&ismai=0`)">{{ t('jiaoyi.gupiaoxiangqing') }}</view>
                <!-- <view class="icon_o" @click.stop="sell(item.id)">{{ t('jiaoyi.maichu') }}</view> -->
              </view>
            </view>
            <view class="half">
              <!-- <view class="row">{{ t('jiaoyi.xianzaixianqging') }}</view> -->

              <view class="row">
                <view class="label">{{ t('jiaoyi.xianzaijiage') }}</view>
                <view class="value">{{ qfw(item?.sellprice) }}</view>
              </view>
              <view class="row">
                <view class="label">{{ t('jiaoyi.xianzaizongjia') }}</view>
                <view class="value">{{ qfw(item.shizhi) }}</view>
              </view>
              <view class="row">
                <view class="label">{{ t('jiaoyi.yugusunyi2') }}</view>
                <view class="value" :class="Number(item?.yingkui) > 0 ? 'txt-red' : 'txt-green'">{{ changeMoney(item?.yingkui) }}</view>
              </view>
              <view class="row">
                <view class="label">{{ t('jiaoyi.sunyilv') }}</view>
                <view class="value" :class="Number(item?.yingkui) > 0 ? 'txt-red' : 'txt-green'">{{ item?.yisun }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-show="pageType === 2">
        <NotData v-if="!apply.length" />
        <view v-for="(item, index) in apply" :key="index" class="gupiao">
          <view class="flex items-center justify-between pb-[0.4rem]">
            <view class="flex items-center">
              <view class="font-bold text-primary">{{ item?.product?.name }}</view>
              <view class="icon text-base">{{ item?.product?.shuzidaima }}</view>
            </view>
            <view class="icon text-lg">{{ getText(item) }}</view>
          </view>
          <view class="flex justify-between">
            <view class="half">
              <!-- <view class="row">{{ t('jiaoyi.dingdanxiangqing') }}</view> -->
              <view class="row">
                <view class="label">{{ t('jiaoyi.jiage') }}</view>
                <view class="value">{{ changeMoney(item.price) }}</view>
              </view>
              <view class="row">
                <view class="label">{{ t('jiaoyi.shenqingliang') }}</view>
                <view class="value">{{ item.shengoushuliang }}</view>
              </view>
              <view class="row">
                <view class="label">{{ t('jiaoyi.chouqianri') }}</view>
                <view class="value">{{ item?.product?.chouqiandate }}</view>
              </view>
              <view class="row">
                <view class="label">{{ t('jiaoyi.faquanri') }}</view>
                <view class="value">{{ item?.product?.faquan_date }}</view>
              </view>
            </view>
            <view class="half">
              <!-- <view class="row">{{ t('jiaoyi.xianzaixianqging') }}</view> -->
              <view class="row">
                <view class="label">{{ t('jiaoyi.zhognqianshuliang') }}</view>
                <view class="value">{{ item.zhongqianshu }}</view>
              </view>
              <view class="row">
                <view class="label">{{ t('jiaoyi.renjiaogushu') }}</view>
                <view class="value">{{ item.renjiaonum || 0 }}</view>
              </view>
              <view class="row">
                <view class="label">{{ t('jiaoyi.txt1') }}</view>
                <view class="value">{{ changeMoney(item.yingrenjiao) }}</view>
              </view>
              <view class="row">
                <view class="label">{{ t('jiaoyi.txt2') }}</view>
                <view class="value">{{ changeMoney(item.yirenjiao) }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <CustomTabbar :id="2" />
</template>
<script setup lang="ts">
import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
import { useI18n } from 'vue-i18n'
import { getJiaoyiListApi, getUserMoneyApi, sellGupiaoApi, cancelOrdeApi } from '@/api/index/index'
import { useCounterStore } from '@/store/store'
import { onHide, onLoad, onShow } from '@dcloudio/uni-app'
import Navigator from '@/components/navigator/navigator.vue'
import { changeMoney, goPage } from '@/common/common'
import * as echarts from 'echarts'
import { computed, ref } from 'vue'
import { showLoadingToast, showToast } from 'vant'
const { t } = useI18n()
// 页面基础配置
const store = useCounterStore()
console.log(store)
const contentHeight = `calc(100vh - ${store.tabbarHeight} - 6.5rem )`
console.log(contentHeight)
onLoad(async () => {
  await getJiaoyiList()

  InitChart()
})

const tip1 = computed(() => t('jiaoyi.tip1'))
const tip2 = computed(() => t('jiaoyi.tip2'))
const tip3 = computed(() => t('jiaoyi.tip3'))
const tip4 = computed(() => t('jiaoyi.tip4'))
const tip5 = computed(() => t('jiaoyi.tip5'))

const statusText = [tip1, tip2, tip3, tip4, tip5]

const getStatus = (item) => {
  // 1=持仓中,2=已平仓,3=平仓中,4=挂单中,5=已撤单',
  return statusText[item.status * 1 - 1].value
}

const getText = (item) => {
  if (item.status === '0') {
    return t('jiaoyi.txt3')
  } else if (item.status === '1' && item.is_examine === 0) {
    return t('jiaoyi.txt4')
  } else if (item.status === '1' && item.is_examine === 1) {
    return t('jiaoyi.txt5')
  } else if (item.status === '1' && item.is_examine === 2) {
    return t('jiaoyi.txt6')
  } else if (item.status === '2') {
    return t('jiaoyi.txt6')
  }
}

let id: any = null
onShow(() => {
  getUserMoney()
  getJiaoyiList()
  id = setInterval(() => {
    getJiaoyiList()
  }, 8000)
})

onHide(() => {
  clearInterval(id)
})
// 获取交易列表
const weishixianList = ref([])
const yishixianList = ref([])
const pageType = ref(0)
const jiaoyiInfo = ref({
  my_losses: {}
})

// 新股抽签
const apply = ref([])
const getJiaoyiList = async () => {
  const res = await getJiaoyiListApi()
  weishixianList.value = res.data.already
  apply.value = res.data.apply
  yishixianList.value = res.data.future
  jiaoyiInfo.value = res.data
}
const changePageType = (e: number) => {
  pageType.value = e
  const data1 = [{ value: userMoneyInfo.value?.money || 0 }, { value: jiaoyiInfo.value?.my_losses?.count_market || 0 }, { value: jiaoyiInfo.value?.my_losses?.count_losses || 0 }]
  const data2 = [{ value: userMoneyInfo.value?.money || 0 }, { value: jiaoyiInfo.value?.my_realized_losses?.count_market || 0 }, { value: jiaoyiInfo.value?.my_realized_losses?.count_losses || 0 }]
  const option = {
    series: {
      data: e === 0 ? data1 : data2
    }
  }
  myChart.value.setOption(option)
}

// 获取用户余额
const userMoneyInfo = ref({
  total: 0,
  total2: 0
})
// const isHidden = ref(true)
const getUserMoney = async () => {
  const res = await getUserMoneyApi()
  res.data.total = (Number(jiaoyiInfo.value?.my_losses?.count_market || 0) + Number(jiaoyiInfo.value?.my_losses?.count_losses || 0) + Number(res.data.money || 0)).toFixed(1)
  res.data.tota2 = (Number(jiaoyiInfo.value?.my_realized_losses?.count_market || 0) + Number(jiaoyiInfo.value?.my_realized_losses?.count_losses || 0) + Number(res.data.money || 0)).toFixed(1)
  userMoneyInfo.value = res.data
}

// 图表
const myChart = ref(null)
const InitChart = () => {
  myChart.value = echarts.init(document.getElementById('charts'))
  const option = {
    series: {
      type: 'pie',
      radius: '80%',
      label: {
        show: false,
        position: 'center'
      },
      avoidLabelOverlap: false,
      color: ['#C850F0', '#50F0AA', '#50AFF0'],
      data: [{ value: userMoneyInfo.value?.money || 0 }, { value: jiaoyiInfo.value?.my_losses?.count_market || 0 }, { value: jiaoyiInfo.value?.my_losses?.count_losses || 0 }]
    }
  }
  option && myChart.value.setOption(option)
  console.log(myChart)
}

const qfw = (num) => {
  return Number(num).toLocaleString()
}

// 卖出
const sell = (item) => {
  uni.showModal({
    title: t('jiaoyi.tip6'),
    content: t('jiaoyi.tip7'),
    cancelText: t('jiaoyi.tip8'),
    confirmText: t('jiaoyi.tip9'),
    success: async (res) => {
      if (res.confirm) {
        showLoadingToast({ mask: true })
        const res = await sellGupiaoApi({ id: item.id, type: '1' })
        getUserMoney()
        // closeToast()
        showToast({
          message: res.data.msg,
          duration: 2000
        })
        getJiaoyiList()
      }
    }
  })
}
// 撤单
const cancelOrde = (item) => {
  uni.showModal({
    title: t('jiaoyi.tip6'),
    content: t('jiaoyi.tip10'),
    cancelText: t('jiaoyi.tip8'),
    confirmText: t('jiaoyi.tip9'),
    success: async (res) => {
      if (res.confirm) {
        showLoadingToast({ mask: true })
        const res = await cancelOrdeApi({ id: item.id, type: '1' })
        getUserMoney()
        showToast({
          message: res.msg,
          duration: 2000
        })
        getJiaoyiList()
      }
    }
  })
}
</script>
<style lang="scss" scoped>
.red {
  background: red !important;
}
.green {
  background: #34e607 !important;
}
.txt-green {
  color: #34e607 !important;
}

.txt-red {
  color: #ff4545 !important;
}

.text-primary {
  color: #fff;
}
.font-bold {
  // max-width: 50%;
}
.header {
  .card {
    height: 3.75rem;
    // border-radius: 0.94rem;
    background-color: #fff;
    margin-bottom: 0.25rem;
    padding: 0.31rem 1.25rem;
    display: flex;
    justify-content: space-between;
    .left {
      height: 100%;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
    }
    .right {
      view {
        width: 3.13rem;
        height: 3.13rem;
      }
    }
  }
  .card2 {
    height: 4rem;
    background-color: #fff;
    margin-top: 0.25rem;
    padding: 0.31rem 1.25rem;
    border-bottom: 0.12rem solid #00000022;
    .row {
      display: flex;
      justify-content: space-between;
      .li {
        width: 0.64rem;
        height: 0.64rem;
        border-radius: 50%;
        margin-right: 0.38rem;
      }
      .blue {
        background-color: #50aff0;
      }
      .green {
        background-color: #50f0aa;
      }
      .purple {
        background-color: #c850f0;
      }
      view {
        font-size: $uni-font-size-lg;
      }
    }
  }
}
.button_wrap {
  padding: 0.81rem 0.88rem;
  display: flex;
  justify-content: space-around;
  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.875rem;
    height: 2.125rem;
    padding: 0 0.5rem;
    line-height: 1.25rem;
    // line-height: $uni-font-size-lg;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    // border: 0.03rem solid $uni-color-primary;
    border-radius: 1.03rem;
    margin-right: 0.94rem;
    color: #fff;
    background: rgb(8, 24, 43, 0.7);
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
  }
  .active {
    background-color: $uni-color-primary;
    color: #fff;
  }
}
.content {
  overflow-y: auto;
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
  // box-shadow: 0px 0px 5px 2px #f4f4f4;
  background: rgb(12, 36, 64);

  .gupiao_list {
    view {
    }
    .gupiao {
      // background-color: #fff;
      margin-bottom: 0.31rem;
      padding: 1.25rem;
      .info-box {
        width: 20.9375rem;
        // height: 4.9688rem;
        background: #08182b;
        border-radius: 0.625rem;
        padding: 0.625rem 1.25rem;
      }
      .half {
        width: 48%;
        // display: flex;
        // flex-direction: column;
        // align-items: center;
        // justify-content: center;
      }
      .row {
        font-size: 0.8rem;
        color: #0a0a0a;
        display: flex;
        align-items: center;
        // padding: 0.21rem 0;
        justify-content: space-between;
        .value {
          color: #fff;
        }
        view {
          color: $uni-text-color-gray;
          font-size: $uni-font-size-lg;
        }
      }
    }
    .icon {
      background: #0575e6;
      padding: 0.14rem 0.44rem;
      border-radius: 0.31rem;
      color: #fff;
      margin-left: 1rem;
      white-space: nowrap;
      // font-size: $uni-font-size-base;
    }
    .icon_primary {
      background: $uni-color-primary;
      padding: 0.18rem 1rem;
      border-radius: 0.31rem;
      color: #fff;
      font-size: $uni-font-size-lg;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      word-break: break-all;
    }
    .icon_o {
      background: #fff;
      padding: 0.18rem 1rem;
      border-radius: 0.31rem;
      color: $uni-color-primary;
      border: 0.03rem solid $uni-color-primary;
      margin-left: 1rem;
      font-size: $uni-font-size-lg;
    }
  }
}
</style>
