<template>
  <view class="header">
    <Navigator :is-show-back="false" :title="t('tabbar.jiaoyi')">
      <template #right>
        <van-badge :dot="dot" style="position: absolute; top: 1.0313rem; right: 0.9375rem">
          <image src="/static/image/index/tishi.png" class="xiaoxi" mode="widthFix" @click="goPage('/subPackages/message/message')"></image>
        </van-badge>
      </template>
    </Navigator>
  </view>
  <div class="container">
    <div class="wrap">
      <view id="button_wrap" class="button_wrap">
        <view class="button" :class="{ active: pageType === 0 }" @click="changePageType(0)">{{ t('jiaoyi.weishixiansunyi') }}</view>
        <view class="button" :class="{ active: pageType === 1 }" @click="changePageType(1)">{{ t('jiaoyi.yishixiansunyi') }}</view>
        <view class="button" :class="{ active: pageType === 2 }" @click="changePageType(2)">{{ t('jiaoyi.sunyiheji3') }}</view>
      </view>
      <view class="content" :style="{ height: `calc(${store.pageHeight} - 11.1rem )` }">
        <view class="gupiao_list">
          <view v-show="pageType === 0">
            <NotData v-if="!weishixianList.length" />
            <view v-for="(item, index) in weishixianList" :key="index" class="gupiao1" @click="goPage(`/subPackages/jiaoyi/jiaoyiDetail/jiaoyiDetail?id=${item.id}&ismai=1`)">
              <div class="head">
                <view class="icon_primary">{{ getStatus(item) }}</view>
                <view class="tag" :class="item.fangxiang_data === '1' ? 'red_tag' : 'green_tag'">{{ item.fangxiang_data === '1' ? t('jiaoyi.zhang') : t('jiaoyi.die') }}</view>
                <div class="icon_wrap">
                  <van-icon name="arrow" color="#afafaf"></van-icon>
                </div>
              </div>
              <div class="info">
                <div class="left">
                  <div class="title">{{ item?.product?.name }}</div>
                  <div class="daima">{{ item?.product?.shuzidaima }}</div>
                </div>
                <div class="right">
                  <div class="price">
                    <view class="label">{{ t('jiaoyi.xianjia') }}：</view>
                    <view class="value" :class="{ red: item.yingkui > 0, green: item.yingkui <= 0 }">{{ qfw(item?.product?.price) }}{{ t('common.unit') }}</view>
                  </div>
                </div>
              </div>
              <div class="bottom">
                <div class="row">
                  <div class="flex">
                    <view class="label">{{ t('jiaoyi.chigushu') }}</view>
                    <view class="value">{{ item.shuliang }}</view>
                  </div>
                  <div class="flex">
                    <view class="label">{{ t('jiaoyi.xianzaizongjia') }}</view>
                    <view class="value">{{ qfw(item.shizhi) }}</view>
                  </div>
                </div>
                <div class="row">
                  <div class="flex">
                    <view class="label">{{ t('jiaoyi.goumaijiage') }}</view>
                    <view class="value">{{ qfw(item.price) }}{{ t('common.unit') }}</view>
                  </div>
                  <div class="flex">
                    <view class="label">{{ t('jiaoyi.yugusunyi') }}</view>
                    <view class="value" :class="Number(item?.yingkui) > 0 ? 'txt-red' : 'txt-green'">{{ changeMoney(item?.yingkui) }}</view>
                  </div>
                </div>
                <div class="row">
                  <div class="flex">
                    <view class="label">{{ t('jiaoyi.goumaizongjia') }}</view>
                    <view class="value">{{ qfw(((item.price * item.shuliang) / Number(item.ganggan_ratio)).toFixed(1)) }}</view>
                  </div>
                  <div class="flex">
                    <view class="label">{{ t('jiaoyi.sunyilv') }}</view>
                    <view class="value" :class="Number(item?.yingkui) > 0 ? 'txt-red' : 'txt-green'">{{ item?.yisun }}</view>
                  </div>
                </div>
                <view v-if="item.status !== '4'" class="button" @click.stop="openSell(item)">{{ t('jiaoyi.maichu') }}</view>
                <view v-if="item.status === '4'" class="button" @click.stop="openCancel(item)">{{ t('jiaoyi.chedan') }}</view>
              </div>
            </view>
          </view>

          <view v-show="pageType === 1">
            <NotData v-if="!yishixianList.length" />
            <view v-for="(item, index) in yishixianList" :key="index" class="gupiao1" @click="goPage(`/subPackages/jiaoyi/jiaoyiDetail/jiaoyiDetail?id=${item.id}&ismai=0`)">
              <div class="head">
                <view class="icon_green">{{ getStatus(item) }}</view>
                <view class="tag" :class="item.fangxiang_data === '1' ? 'red_tag' : 'green_tag'">{{ item.fangxiang_data === '1' ? t('jiaoyi.zhang') : t('jiaoyi.die') }}</view>
                <div class="icon_wrap">
                  <van-icon name="arrow" color="#afafaf"></van-icon>
                </div>
              </div>
              <div class="info">
                <div class="left">
                  <div class="title">{{ item?.product?.name }}</div>
                  <div class="daima">{{ item?.product?.shuzidaima }}</div>
                </div>
                <div class="right">
                  <div class="price">
                    <view class="label">{{ t('jiaoyi.xianzaijiage') }}：</view>
                    <view class="value" :class="{ red: item.yingkui > 0, green: item.yingkui <= 0 }">{{ qfw(item?.sellprice) }}{{ t('common.unit') }}</view>
                  </div>
                </div>
              </div>
              <div class="bottom">
                <div class="row">
                  <div class="flex">
                    <view class="label">{{ t('jiaoyi.chigushu') }}</view>
                    <view class="value">{{ item.shuliang }}</view>
                  </div>
                  <div class="flex">
                    <view class="label">{{ t('jiaoyi.xianzaizongjia') }}</view>
                    <view class="value">{{ qfw(item.shizhi) }}</view>
                  </div>
                </div>
                <div class="row">
                  <div class="flex">
                    <view class="label">{{ t('jiaoyi.goumaijiage') }}</view>
                    <view class="value">{{ qfw(item.price) }}{{ t('common.unit') }}</view>
                  </div>
                  <div class="flex">
                    <view class="label">{{ t('jiaoyi.yugusunyi2') }}</view>
                    <view class="value" :class="Number(item?.yingkui) > 0 ? 'txt-red' : 'txt-green'">{{ changeMoney(item?.yingkui) }}</view>
                  </div>
                </div>
                <div class="row">
                  <div class="flex">
                    <view class="label">{{ t('jiaoyi.goumaizongjia') }}</view>
                    <view class="value">{{ qfw(((item.price * item.shuliang) / Number(item.ganggan_ratio)).toFixed(1)) }}</view>
                  </div>
                  <div class="flex">
                    <view class="label">{{ t('jiaoyi.sunyilv') }}</view>
                    <view class="value" :class="Number(item?.yingkui) > 0 ? 'txt-red' : 'txt-green'">{{ item?.yisun }}</view>
                  </div>
                </div>
              </div>
            </view>
          </view>
          <view v-show="pageType === 2">
            <NotData v-if="!apply.length" />
            <view v-for="(item, index) in apply" :key="index" class="gupiao1 gupiao2">
              <div class="info" style="margin-top: 0">
                <div class="left">
                  <div class="title">{{ item?.product?.name }}</div>
                  <div class="daima">{{ item?.product?.shuzidaima }}</div>
                </div>
                <div class="right head">
                  <view class="icon_green2">{{ getText(item) }}</view>
                </div>
              </div>
              <div class="bottom">
                <div class="row">
                  <div class="flex">
                    <view class="label">{{ t('jiaoyi.jiage') }}</view>
                    <view class="value">{{ changeMoney(item.price) }}{{ t('common.unit') }}</view>
                  </div>
                  <div class="flex">
                    <view class="label">{{ t('jiaoyi.zhognqianshuliang') }}</view>
                    <view class="value">{{ item.zhongqianshu }}</view>
                  </div>
                </div>
                <div class="row">
                  <div class="flex">
                    <view class="label">{{ t('jiaoyi.shenqingliang') }}</view>
                    <view class="value">{{ item.shengoushuliang }}</view>
                  </div>
                  <div class="flex">
                    <view class="label">{{ t('jiaoyi.renjiaogushu') }}</view>
                    <view class="value">{{ item.renjiaonum || 0 }}</view>
                  </div>
                </div>
                <div class="row">
                  <div class="flex">
                    <view class="label">{{ t('jiaoyi.chouqianri') }}</view>
                    <view class="value">{{ item?.product?.chouqiandate }}</view>
                  </div>
                  <div class="flex">
                    <view class="label">{{ t('jiaoyi.txt1') }}</view>
                    <view class="value">{{ changeMoney(item.yingrenjiao) }}</view>
                  </div>
                </div>
                <div class="row">
                  <div class="flex">
                    <view class="label">{{ t('jiaoyi.faquanri') }}</view>
                    <view class="value">{{ item?.product?.faquan_date }}</view>
                  </div>
                  <div class="flex">
                    <view class="label">{{ t('jiaoyi.txt2') }}</view>
                    <view class="value">{{ changeMoney(item.yirenjiao) }}</view>
                  </div>
                </div>
              </div>
            </view>
          </view>
        </view>
      </view>
    </div>
  </div>
  <CustomTabbar :id="2" />
  <van-popup v-model:show="gupiaoWindowShow" class="buy_window" v-bind="windowOptions">
    <view class="title">{{ t('jiaoyi.tip6') }}</view>
    <view class="title2">{{ windowInfo }}</view>

    <div class="button_group">
      <view class="button cancel" @click="gupiaoWindowShow = false">{{ t('jiaoyi.tip8') }}</view>
      <div class="button" @click="windowConfirm">{{ t('jiaoyi.tip9') }}</div>
    </div>
    <image class="close" src="/static/close.png" @click="gupiaoWindowShow = false"></image>
  </van-popup>
</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, onMounted, ref } from 'vue'
import { showLoadingToast, showToast } from 'vant'
import { getUserMessageApi } from '@/api/message'
const { t } = useI18n()
// 页面基础配置
const store = useCounterStore()
console.log(store)

const gupiaoWindowShow = ref(false)
const windowOptions = {
  position: 'bottom',
  'close-on-click-overlay': true,
  'safe-area-inset-bottom': true,
  round: true
}

onLoad(async () => {
  await getJiaoyiList()

  InitChart()
})
const butth = ref('')
onMounted(() => {
  butth.value = getH('button_wrap')
})

const getH = (id) => {
  const el = document.getElementById(id)
  return getComputedStyle(el).height
}

const dot = ref(false)
// 获取消息
const getUserMessage = async () => {
  const res = await getUserMessageApi()

  if (res.code === 1) {
    dot.value = res.data.data[0]?.is_read === '0'
  }
}

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()
  getUserMessage()
  id = setInterval(() => {
    getJiaoyiList()
    getUserMessage()
  }, 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 windowType = ref('sell')
const windowInfo = ref('')
const windowId = ref('')
// 卖出
const openSell = (item) => {
  windowId.value = item.id
  windowType.value = 'sell'
  windowInfo.value = t('jiaoyi.tip7')
  gupiaoWindowShow.value = true
}
const openCancel = (item) => {
  windowId.value = item.id
  windowType.value = 'cancel'
  windowInfo.value = t('jiaoyi.tip10')
  gupiaoWindowShow.value = true
}
const windowConfirm = async () => {
  showLoadingToast({ forbidClick: true, duration: 0 })
  gupiaoWindowShow.value = false
  if (windowType.value === 'sell') {
    const res = await sellGupiaoApi({ id: windowId.value, type: '1' })
    getUserMoney()
    showToast({
      message: res.data.msg,
      duration: 2000
    })
    getJiaoyiList()
  }
  // 撤单
  else {
    const res = await cancelOrdeApi({ id: windowId.value, 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: $color-green !important;
}

.txt-red {
  color: $color-red !important;
}

.text-primary {
  color: #fff;
}
.xiaoxi {
  width: 1.13rem;
  // padding: 0.1rem;
}
.container {
  padding: 1rem 0.63rem 0;
}
.header {
  .card {
    height: 3.75rem;
    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 {
  height: 2.13rem;
  margin: 0 0.31rem 0.5rem;
  display: flex;
  justify-content: space-around;
  gap: 0.5rem;
  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.875rem;
    padding: 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    border: 0.05rem solid $color-primary;
    color: $color-black;
  }
  .active {
    background-color: $color-primary;
    color: #fff;
    font-weight: 500;
  }
}
.content {
  overflow-y: auto;
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;

  .gupiao_list {
    padding: 0 0.63rem 1rem;
    .icon {
      background: #0575e6;
      padding: 0.14rem 0.44rem;
      border-radius: 0.31rem;
      color: #fff;
      margin-left: 1rem;
      white-space: nowrap;
    }
    .icon_primary {
      background: $uni-color-primary;
      padding: 0.25rem 0.63rem;
      width: 6.25rem;
      font-size: $uni-font-size-lg;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      word-break: break-all;
      background: linear-gradient(90deg, #b1b5ba50 0%, rgba(177, 181, 186, 0) 100%);
      color: $color-red;
    }
    .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;
    }
    .gupiao1 {
      border-bottom: 0.05rem solid #ffffff50;
      padding: 0.94rem 0 0.38rem;
      background: #fafafa;
      box-shadow: 0rem 0.13rem 0.19rem 0rem rgba(0, 0, 0, 0.05);
      border-bottom: 0.06rem solid rgba(20, 20, 20, 0.14);
      margin-bottom: 0.31rem;
      border-radius: 0.63rem;
      .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1.25rem;
        .icon_green {
          background: linear-gradient(90deg, #b1b5ba50 0%, rgba(177, 181, 186, 0) 100%);
          width: 6.25rem;
          color: $color-green;
          padding: 0.25rem 0.63rem;
          font-size: $uni-font-size-lg;
        }
        .icon_green2 {
          background: $color-green;
          border-radius: 0.19rem;
          color: #fff;
          padding: 0.18rem 1rem;
          border-radius: 0.31rem;
          font-size: $uni-font-size-lg;
        }
        .icon_wrap {
          flex: 1;
          text-align: right;
        }
        .tag {
          height: 1.25rem;
          line-height: 1.25rem;
          border-radius: 0.19rem;
          text-align: center;

          background: #3b363f;
          font-size: 0.75rem;
          color: #fff;
          padding: 0 0.5rem;
        }
        .red_tag {
          background: $color-red;
          color: #fff;
        }
        .green_tag {
          background: $color-green;
          color: #fff;
        }
      }
      .info {
        margin: 0.88rem 0 0;
        padding: 0 0.75rem;
        display: flex;
        justify-content: space-between;
        .price {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          .label {
            color: $color-black;
            font-size: 0.75rem;
          }
          .value {
            font-size: 1.13rem;
          }
        }
        .title {
          font-size: 0.94rem;
          font-weight: 500;
          color: $color-black;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          width: 10rem;
        }
        .daima {
          font-size: 0.81rem;
          color: $color-gray;
        }
      }
      .bottom {
        padding: 0 0.75rem;
        .row {
          display: flex;
          justify-content: space-between;
          margin-top: 0.31rem;
          gap: 1rem;
          .flex {
            display: flex;
            justify-content: space-between;
          }
          .label {
            color: $color-gray;
            font-size: 0.75rem;
            width: 4rem;
          }
          .value {
            color: $color-black;
            font-size: 0.75rem;
            width: 5rem;
            text-align: right;
          }
        }
        .button {
          width: 19.38rem;
          height: 1.81rem;
          line-height: 1.81rem;
          border-radius: 0.5rem;
          text-align: center;
          font-size: 0.75rem;
          color: #fff;
          margin: 0.5rem auto 0;
          background: $color-primary;
          font-weight: 500;
        }
      }
    }
    .gupiao2 {
      .flex {
        flex: 1;
        justify-content: space-between !important;
        .label {
          // width: 5rem !important;
          width: auto !important;
        }
        .value {
          width: auto !important;
        }
      }
    }
  }
}
.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;
  }
  .title2 {
    text-align: center;
    padding: 0.8rem 0 0.5rem;
    font-size: 0.88rem;
    color: $color-gray;
  }
  .button_group {
    display: flex;
    gap: 1.56rem;
  }
  .button {
    height: 2.75rem;
    line-height: 2.75rem;
    width: 100%;
    text-align: center;
    background-color: $color-primary;
    color: $color-black;
    font-size: 0.88rem;
    margin-top: 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    color: #fff;
  }
  .cancel {
    background: #f76961;
  }
  .close {
    position: absolute;
    width: 2.75rem;
    height: 2.75rem;
    padding: 1rem;
    right: 0rem;
    top: 0rem;
  }
}
</style>
