const { createApp } = Vue;
const API_BASE = "https://xwork.kingsome.cn";
const API_BASE_LOCAL = "http://localhost:3002";
const TASK_INFO_URL = "/workflow/task";

const DEFAULT_CHAIN_DATA = {
  name: "Matic Testnet RPC",
  type: "Testnet",
  rpc: "https://rpc-mumbai.maticvigil.com",
  id: 80001,
  symbol: "MATIC",
  explorerurl: "https://mumbai.polygonscan.com/",
};
const loader = document.getElementById("loader");
// 显示加载动画
function showLoading() {
  // add style display: block
  loader.style.display = "block";
}
// 隐藏加载动画
function hideLoading() {
  // add style display: none
  loader.style.display = "none";
}
async function loadJson(url) {
  return fetch(url).then((response) => response.json());
}

function toHexChainId(chainId) {
  return "0x" + chainId.toString(16);
}

async function connectMetaMask() {
  let provider = null;
  if (typeof window.ethereum !== "undefined") {
    provider = window.ethereum;
    try {
      await provider.request({ method: "eth_requestAccounts" });
    } catch (error) {
      if (error.code === -32002) {
        throw new Error("MeatMask not login, Open MeatMask and login first");
      } else {
        throw new Error("User Rejected");
      }
    }
  } else if (window.web3) {
    provider = window.web3.currentProvider;
  } else if (window.celo) {
    provider = window.celo;
  } else {
    throw new Error("No Web3 Provider found");
  }
  return provider;
}

const fetchTaskInfo = function (taskId) {
  const host = location.host === "localhost" ? API_BASE_LOCAL : API_BASE;
  const url = `${host}${TASK_INFO_URL}/${taskId}`;
  return fetch(url)
    .then((response) => {
      if (!response.ok) {
        throw new Error("Failed to fetch task info");
      }
      return response.json();
    })
    .then((data) => {
      if (data.errcode) {
        throw new Error(data.errmsg);
      }
      return data.data;
    });
};

createApp({
  data() {
    return {
      id: "",
      task: {},
      subTasks: [],
      address: "",
      types: {},
      walletConnect: false,
      contract: null,
      wallet: null,
      disabled: false,
      chainId: 0,
    };
  },
  async created() {
    let params = getAllParameter();
    this.id = params.id;
    console.log("taskid: ", this.id);
    let result = await fetchTaskInfo(this.id);
    this.task = result.chainTask;
    this.subTasks = result.requestTasks;
    this.address = result.address;
    this.types = result.types;
    console.log(result);
    await this.initWallet();
  },
  methods: {
    showType(type) {
      return this.types[type];
    },
    async initInstance(user, address, jsonUrl) {
      let json = await loadJson(jsonUrl);
      return new this.web3.eth.Contract(json.abi, address, { from: user });
    },
    async initWallet() {
      let provider = await connectMetaMask();
      this.web3 = new Web3(provider);
      let accounts = await this.web3.eth.getAccounts();
      if (accounts.length > 0) {
        this.account = accounts[0];
      }
      this.contract = await this.initInstance(
        this.account,
        this.address,
        "assets/abis/BEMultiSigWallet.json"
      );
      this.chainId = await this.web3.eth.getChainId();
      this.walletConnect = true;
      console.log(this.chainId, this.account);
      console.log(this.contract);
    },
    async confirmTask() {
      let ids = this.subTasks.map((o) => o.scheduleId);
      console.log("confirm task", ids);
      showLoading();
      try {
        let gas = await this.contract.methods
          .confirmTransaction(ids)
          .estimateGas();
        gas = gas | 0;
        await this.contract.methods.confirmTransaction(ids).send({ gas });
      } catch (err) {
        console.log("error confirm task", err);
      }
      hideLoading();
    },
    async rejectTask() {
      console.log("reject task");
      let ids = this.subTasks.map((o) => o.scheduleId);
      showLoading();
      try {
        let gas = await this.contract.methods
          .revokeConfirmation(ids)
          .estimateGas();
        gas = gas | 0;
        await this.contract.methods.revokeConfirmation(ids).send({ gas });
      } catch (err) {
        console.log("error confirm task", err);
      }
      hideLoading();
    },
    async querySchedule(id) {
      let instance = wallet.contract;
      return makeBatchRequest([
        instance.methods.isOperation(id).call,
        instance.methods.isOperationPending(id).call,
        instance.methods.isOperationReady(id).call,
        instance.methods.isOperationDone(id).call,
        instance.methods.isConfirmed(id).call,
        instance.methods.getTimestamp(id).call,
      ]);
    },
  },
}).mount("#app");