<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="600px"
    @close="close"
  >
    <el-form ref="formRef" label-width="80px" :model="form" :rules="rules" inline label-position="top">
      <el-form-item label="网络名称" prop="network">
        <el-input v-model="form.network"/>
      </el-form-item>
      <el-form-item label="链ID" prop="chainId">
        <el-input v-model="form.chainId"/>
      </el-form-item>
      <el-form-item label="RPC URL" prop="rpcUrl" @input="getTokenInfo">
        <el-input v-model="form.rpcUrl"/>
      </el-form-item>
      <el-form-item
        label="代币合约地址（放空则查找主代币）"
        prop="contract"
        @input="getTokenInfo"
      >
        <el-input v-model="form.contract"/>
      </el-form-item>
      <el-form-item label="代币符号" prop="symbol">
        <el-input v-model="form.symbol"/>
      </el-form-item>
      <el-form-item label="精度" prop="decimals">
        <el-input v-model="form.decimals"/>
      </el-form-item>
      <el-form-item label="区块浏览器" prop="browser">
        <el-input v-model="form.browser"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import {defineComponent, getCurrentInstance, reactive, toRefs} from 'vue'
import {makeAddress} from '@/apis/address'
import md5 from 'js-md5/build/md5.min'
import {
  getTokenInfo,
  getWeb3TokenInfo,
  setTokenWeb3Rpc,
} from '@/apis/wallet/web3'

export default defineComponent({
  name: 'EthTokenEdit',
  emits: ['fetch-data'],
  setup(props, {emit}) {
    const {proxy} = getCurrentInstance()

    const state = reactive({
      formRef: null,
      form: {
        network: '',
        chainId: '',
        symbol: '',
        rpcUrl: '',
        decimals: 0,
        browser: '',
        contract: '',
      },
      rules: {
        network: [
          {required: true, trigger: 'blur', message: '请输入链名称'},
        ],
        chainId: [{required: true, trigger: 'blur', message: '请输入链ID'}],
        accuracy: [
          {required: true, trigger: 'blur', message: '请输入精度'},
        ],
        rpcUrl: [
          {required: true, trigger: 'blur', message: '请输入RPC URL'},
        ],
        decimals: [
          {required: true, trigger: 'blur', message: '请输入代币精度'},
        ],
        symbol: [
          {required: true, trigger: 'blur', message: '请输入代币符号'},
        ],
      },
      title: '',
      dialogFormVisible: false,
    })

    const showEdit = (row) => {
      if (!row) {
        state.title = '添加'
      } else {
        state.title = '编辑'
        state.form = Object.assign({}, row)
      }
      state.dialogFormVisible = true
    }
    const close = () => {
      state['formRef'].resetFields()
      state.form = {
        network: '',
        chainId: '',
        symbol: '',
        rpcUrl: '',
        decimals: 0,
        browser: '',
        contract: '',
      }
      state.dialogFormVisible = false
    }
    const save = () => {
      state['formRef'].validate(async (valid) => {
        if (valid) {
          emit('add-data', state.form)
        }
      })
    }
    const getTokenInfo = async () => {
      if (!state.form.rpcUrl || !state.form.contract) {
        return
      }
      try {
        setTokenWeb3Rpc(state.form.rpcUrl)
        const {symbol, decimals} = await getWeb3TokenInfo(
          state.form.contract
        )
        state.form.symbol = symbol
        state.form.decimals = decimals
      } catch (e) {
        console.log(e)
      }
    }
    return {
      ...toRefs(state),
      getTokenInfo,
      showEdit,
      close,
      save,
    }
  },
})
</script>
