<template>
    <div class="container">
      <van-pull-refresh v-model="loading" @refresh="onRefresh" style="height:100%">
      <div class="content">
        <!--  -->
        <div class="card-box">
          <div class="box-item m12">
            <div class="box-item-lf-text">{{ $t('transaction.Sell') }}</div>
            <div class="box-item-ri-text">
              <svg-icon style="width: 16px; height: 16px;margin-right: 2px;" name="qb" />
              <span>{{STTLIST.balance}}</span>
            </div>
          </div>
          <div class="box-item">
            <div class="unit">
              <van-image
                width="42px"
                height="42px"
                round
                :src="STTLIST.logo"
              />
              <div style="margin-left: 12px;">{{STTLIST.name}}</div>
            </div>
            <van-field v-model="sell" class="box-input" placeholder="0.00" input-align="right"/>
          </div>
        </div>
        <!--  -->
        <div class="arrow">
          <div class="line"></div>
          <div class="arrow-icon"><svg-icon style="width: 16px; height: 16px;" name="jt" /></div>
          <div class="line"></div>
        </div>
        <!--  -->
        <div class="card-box">
          <div class="box-item m12">
            <div class="box-item-lf-text">{{ $t('transaction.Buy') }}</div>
            <div class="box-item-ri-text">
              <svg-icon style="width: 16px; height: 16px;margin-right: 2px;" name="qb" />
              <span>{{ACCLIST.balance}}</span>
            </div>
          </div>
          <div class="box-item">
            <div class="unit">
              <van-image
                width="42px"
                height="42px"
                round
                :src="ACCLIST.logo"
              />
              <div style="margin-left: 12px;">{{ACCLIST.name}}</div>
            </div>
            <van-field v-model="buyIn" class="box-input" input-align="right" :disabled="true"/>
          </div>
        </div>
      </div>
      <div class="proportion">1 ACC= {{ACCLIST.rate}}  STT</div>
      <div class="btn-box">
        <van-button 
          class="btn" 
          :class="isSellValid ? 'active-btn' : ''" 
          :disabled="!isSellValid"  
          type="primary" size="large" @click="confirm">{{ $t('transaction.ConfirmTheExchange') }}
        </van-button>
      </div>
      <div class="information-box">
        <div class="information-item">
          <div class="label">Unit Price
            <svg-icon class="item-icon" name="jg" />
          </div>
          <div>{{gasPrice}} ACC</div>
        </div>
        <div class="information-item">
          <div class="label">Price lmpact<svg-icon class="item-icon" name="jg" /></div>
          <div>0.01%</div>
        </div>
        <div class="information-item">
          <div class="label">Route<svg-icon class="item-icon" name="jg" /></div>
          <div>STT → ACC</div>
        </div>
      </div>
      <div class="transaction">
        <div class="transaction-box" @click="goToPage">
          <van-image
            radius="4"
            width="42" 
            height="42" 
            src="https://wallet.accshare.io/storage/images/aaa.jpg"
          />
          <div style="margin-top: 4px;">ANGEL DEX</div>
        </div>
      </div>
      </van-pull-refresh>
    </div>
</template>

<script setup>
import Web3 from "web3";
import { useRouter } from 'vue-router'
import { useWalletStore } from "@/stores/modules/walletStore";
import { stt2acc } from '@/api/path/exchange.api'
import { AES_CBC_ENCRYPT,generateSign } from '@/utils/crypto';
import { showToast,showLoadingToast } from 'vant';
const router = useRouter();
const walletStore = useWalletStore();
const web3 = new Web3(walletStore.rpcUrl);
 
const sell = ref('');
let STTLIST = walletStore.tokenList[1];
let ACCLIST = walletStore.tokenList[0];
const loading = ref(false);
const gasPrice = ref('')

const buyIn = computed(() => {
  const n = parseFloat(sell.value);
  return isNaN(n) ? '0.00' : (n / ACCLIST.rate).toString();
});
// 校验 sell 是否有效：大于 0 且小于等于 51
const isSellValid = computed(() => {
  const n = parseFloat(sell.value);
  return !isNaN(n) && n > 0 && n <= STTLIST.balance;
});
// 确认兑换
const confirm = async () => {
  let {ciphertext, iv} = AES_CBC_ENCRYPT(walletStore.privateKey);
  let params = {
    address: walletStore.account,
    quantity:sell.value,
    key:ciphertext,
    _y:iv
  }
  showLoadingToast({
    message: $t('transaction.ExchangeInProgress'),
    forbidClick: true,
    duration: 0,
  });
  params = generateSign(params);
  const res = await stt2acc(params);
  if(res.ret){
    showToast($t('transaction.RedemptionSuccessful'));
    gethotTokens();
    sell.value = ''
  }
}
// 更新代币数据
const gethotTokens = async () => {
  await walletStore.updateTokenVal()  
}
// 获取单价
const getPrice = async () => {
  let weiAmount = await web3.eth.getGasPrice();
  gasPrice.value = web3.utils.fromWei(weiAmount,'ether')
  console.log(gasPrice.value)
}
const goToPage = () => {
  router.push('jysExchange')
}
const onRefresh = () => {
  setTimeout(() => {
    gethotTokens();
    loading.value = false;
  }, 1000);
};
onMounted(async ()=>{
  getPrice();
})
</script>

<style lang="less" scoped>
.container{
height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
  .content{
    background: #fff;
    border-radius: 8px;
    padding: 12px 16px 16px;
    .card-box{
      .box-item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        .box-item-lf-text{
          color: #000000;
        }
        .box-item-ri-text{
          color: #8D8D8D;
          display: flex;
          align-items: center;
        }
        .unit{
          display: flex;
          align-items: center;
          font-weight: 500;
          font-size: 17px;
          color: #000000;
        }
        .box-input{
          padding: 0 !important;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 17px !important;
          color: #000000 !important;
        }
      }
      .m12{
        margin: 12px 0 17px;
      }
    }
    .arrow{
      display: flex;
      align-items: center;
      .line{
        background: #F2F2F2;
        height: 1px;
        width: 135px;
      }
      .arrow-icon{
        width: 32px;
        height: 32px;
        border: 1px solid #F2F2F2;
        padding: 8px;
        box-sizing: border-box;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 10px;
      }
    }
  }
  .proportion{
    margin: 16px 0;
    text-align: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #4F4F4F;
  }
  .btn-box{
    .btn{
      background: #E9E9E9;
      height: 40px;
      line-height: 40px;
      border-radius: 50px;
      padding: 9px 0;
      box-sizing: border-box;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 15px;
      color: #8D8D8D;
      border: none !important;
    }
    .active-btn{
      background: @theme-color1;
      color: #FFFFFF;
    }
  }
  .information-box{
    background: #E9E9E9;
    border-radius: 8px;
    margin: 32px 0 24px;
    padding: 16px;
    .information-item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #4F4F4F;
      margin-bottom: 6px;
      .label{
        display: flex;
        align-items: center;
        height: 18px;
        line-height: 18px;
        box-sizing: border-box;
        .item-icon{
          width: 16px; height: 16px;margin-left: 2px;color: #8D8D8D;
        }
      }
    }
    .information-item:last-child{
      margin-bottom: 0;
    }
  }
  .transaction{
    display: flex;
    justify-content: flex-end;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 10px;
    color: #000000;
    .transaction-box{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  // :deep(.box-input input::placeholder) {
  //   color: #000;
  // }
}
</style>
