import Vue from "vue";
import QRCode from "qrcode";
import { getAddressTxCount } from "@/service/api";
import Rpc from "@/utils/Rpc";
export default Vue.extend({
  data() {
    return {
      txCount: 0,
      receive: 0,
      send: 0,
      value: 0,
    };
  },
  mounted() {
    this.getAddrOverview();
    this.init();
    getAddressTxCount(this.$route.query.address as string).then((ret) => {
      if (ret.error === null) {
        this.txCount = ret.result;
      }
    });
  },
  computed: {
    tradeInTotalList(): any {
      return [
        {
          name: this.$t("lang.address.totalReception"),
          value: this.receive,
        },
        {
          name: this.$t("lang.address.totalSent"),
          value: this.send,
        },
        {
          name: this.$t("lang.address.totalValue"),
          value: this.value,
        },
        {
          name: this.$t("lang.block.txCount"),
          value: this.txCount,
        },
      ];
    },
  },
  methods: {
    getAddrOverview() {
      Rpc.getAddrOverview(this.$route.query.address as string).then((res) => {
        if (res.error === null) {
          const balance = res.result.balance;
          const receiver = res.result.reciver;
          this.receive = receiver;
          this.send = receiver - balance;

          fetch("/market")
            .then((ret) => ret.json())
            .then((ret) => {
              if (ret.msg === "succeed") {
                const data = ret.data.data.USDT.YCC;
                this.value = data.last * balance;
              }
            });
        }
      });
    },
    init() {
      QRCode.toCanvas(
        document.getElementById("qrcode"),
        this.$route.query.address as string,
        {
          color: {
            dark: "#1F3470",
            light: "#0000",
          },
          width: 130,
          margin: 0,
        },
        function(error) {
          if (error) console.error(error);
        }
      );
    },
  },
});
