<script lang="ts">
export default {
  name: 'coin'
};
</script>

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import router from '@/router';
import {
  querySysCoin,
  transferColdWallet,
  addSysCoin,
  updateSysCoin,
  createMemberWallet,
  getCoinExt,
  getTopCoinNames
} from '@/api/system/coin';
import {
  CoinQueryParam,
  CoinItem,
  FormData,
  CoinExtFormData,
  ColdWalletForm
} from '@/types/api/system/coin';

const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);

const state = reactive({
  loading: true,
  loading2: false,
  queryParams: {
    pageNo: 1,
    pageSize: 15,
  } as CoinQueryParam,
  list: [] as CoinItem[],
  total: 0,
  isCreate: false,
  activeTab: 0 as number,
  dialog: {
    title: '',
    visible: false,
    loading: false,
  },
  formData: {} as FormData,
  extFormData: {
    extNameCn: '',
    extNameEn: '',
    extIcon: '',
    extRank: null,
    extMarketCap: '',
    extCirculatingSupply: '',
    extIssuePrice: null,
    extAthPrice: null,
    extAthDate: '',
    extWhitepaper: ''
  } as CoinExtFormData,
  allCoinNames: [] as string[],
  rules: {
    name: [{ required: true, message: '请输入英文名称', trigger: 'blur' }]
  },
  coldWalletForm: {
    unit: '',
    amount: 0,
    code: ''
  } as ColdWalletForm,
});

const {
  loading,
  loading2,
  queryParams,
  list,
  total,
  isCreate,
  activeTab,
  dialog,
  formData,
  extFormData,
  rules,
  coldWalletForm,
  allCoinNames
} = toRefs(state);

function getTabCls(index: number): string {
  return state.activeTab === index ? 'custom-tab-item is-active' : 'custom-tab-item';
}
function setActiveTab(index: number) { state.activeTab = index; }

function handleQuery() {
  state.loading = true;
  querySysCoin(state.queryParams).then(({ data }) => {
    state.list = data.content;
    state.total = data.totalElements;
    state.loading = false;
  });
}

/**
 * 排序
 */
function handleSortChange(column: any) {
  var sortingType = column.order;
  state.queryParams.property = column.prop;
  if (sortingType === "ascending") {
    state.queryParams.direction = "1"
  } else if (sortingType === "descending") {
    state.queryParams.direction = "0"
  } else {
    state.queryParams.property = null
    state.queryParams.direction = null
  }
  handleQuery()
}

function handleAdd() {
  state.dialog = {
    title: '添加币种',
    visible: true,
    loading: false
  };
  state.isCreate = true;
  state.activeTab = 0;
  formData.value.nameCn = "";
  formData.value.name = "";
  formData.value.unit = "";
  formData.value.information = "";
  formData.value.infolink = "";
  formData.value.accountType = 0;
  formData.value.depositAddress = "";
  formData.value.canRecharge = 0;
  formData.value.enableRpc = 0;
  formData.value.canWithdraw = 0;
  formData.value.withdrawFeeType = 0;
  formData.value.withdrawFeeValue = 0;
  formData.value.minRechargeAmount = 0;
  formData.value.minTxFee = 0;
  formData.value.maxTxFee = 0;
  formData.value.minWithdrawAmount = 0;
  formData.value.maxWithdrawAmount = 0;
  formData.value.canAutoWithdraw = 0;
  formData.value.status = 0;
  formData.value.sort = 0;
  formData.value.cnyRate = 0;
  formData.value.usdRate = 0;
  formData.value.withdrawThreshold = null;
  formData.value.parentCoinName = "";
  resetExtFormData();
}

function submitFormData() {
  dataFormRef.value.validate((valid: any) => {
    if (valid) {
      dialog.value.loading = true;
      const payload = { ...state.formData, ...state.extFormData };
      if (state.isCreate) {
        addSysCoin(payload).then(() => {
          cancel();
          dialog.value.loading = false;
          ElMessage.success("添加成功");
          handleQuery();
        });
      } else {
        updateSysCoin(payload).then(() => {
          cancel();
          dialog.value.loading = false;
          ElMessage.success("修改成功");
          handleQuery();
        });
      }
    }
  });
}

/**
 * 取消
 */
function cancel() {
  dialog.value.visible = false;
  dialog.value.loading = false;
  state.activeTab = 0;
  formData.value.nameCn = "";
  formData.value.name = "";
  formData.value.unit = "";
  formData.value.information = "";
  formData.value.infolink = "";
  formData.value.accountType = 0;
  formData.value.depositAddress = "";
  formData.value.canRecharge = 0;
  formData.value.enableRpc = 0;
  formData.value.canWithdraw = 0;
  formData.value.withdrawFeeType = 0;
  formData.value.withdrawFeeValue = 0;
  formData.value.minRechargeAmount = 0;
  formData.value.minTxFee = 0;
  formData.value.maxTxFee = 0;
  formData.value.minWithdrawAmount = 0;
  formData.value.maxWithdrawAmount = 0;
  formData.value.canAutoWithdraw = 0;
  formData.value.status = 0;
  formData.value.sort = 0;
  formData.value.cnyRate = 0;
  formData.value.usdRate = 0;
  formData.value.withdrawThreshold = null;
  formData.value.parentCoinName = "";
  resetExtFormData();
  dataFormRef.value.resetFields();
  dataFormRef.value.clearValidate();
}

function resetExtFormData() {
  state.extFormData.extNameCn = '';
  state.extFormData.extNameEn = '';
  state.extFormData.extIcon = '';
  state.extFormData.extRank = null;
  state.extFormData.extMarketCap = '';
  state.extFormData.extCirculatingSupply = '';
  state.extFormData.extIssuePrice = null;
  state.extFormData.extAthPrice = null;
  state.extFormData.extAthDate = '';
  state.extFormData.extWhitepaper = '';
}

/**
 * 添加钱包
 * @param row 行数据信息
 */
const handleCmw = (row: any) => {
  state.loading2 = true;
  const coinName = row.name;
  createMemberWallet({ coinName }).then((res: any) => {
    if (res.code == 0) {
      ElMessage.success(res.message);
    } else {
      ElMessage.error(res.message);
    }
    state.loading2 = false;
  }).catch(() => {
    state.loading2 = false;
  });
}

/**
 * 币种信息修改
 * @param row 行数据信息
 */
const handleEdit = (row: any) => {
  state.dialog = {
    title: '币种信息修改',
    visible: true,
    loading: false
  };
  state.isCreate = false;
  state.activeTab = 0;
  formData.value.nameCn = row.nameCn;
  formData.value.name = row.name;
  formData.value.unit = row.unit;
  formData.value.information = row.information;
  formData.value.infolink = row.infolink;
  formData.value.accountType = row.accountType;
  formData.value.depositAddress = row.depositAddress;
  formData.value.canRecharge = row.canRecharge;
  formData.value.enableRpc = row.enableRpc;
  formData.value.canWithdraw = row.canWithdraw;
  formData.value.withdrawFeeType = row.withdrawFeeType;
  formData.value.withdrawFeeValue = row.withdrawFeeValue;
  formData.value.minRechargeAmount = row.minRechargeAmount;
  formData.value.minTxFee = row.minTxFee;
  formData.value.maxTxFee = row.maxTxFee;
  formData.value.minWithdrawAmount = row.minWithdrawAmount;
  formData.value.maxWithdrawAmount = row.maxWithdrawAmount;
  formData.value.canAutoWithdraw = row.canAutoWithdraw;
  formData.value.status = row.status;
  formData.value.sort = row.sort;
  formData.value.cnyRate = row.cnyRate;
  formData.value.usdRate = row.usdRate;
  formData.value.withdrawThreshold = row.withdrawThreshold;
  formData.value.parentCoinName = row.parentCoinName || "";
  resetExtFormData();
  getCoinExt(row.unit).then((res: any) => {
    if (res.code === 0 && res.data) {
      const ext = res.data;
      state.extFormData.extNameCn = ext.nameCn || '';
      state.extFormData.extNameEn = ext.nameEn || '';
      state.extFormData.extIcon = ext.icon || '';
      state.extFormData.extRank = ext.rank ?? null;
      state.extFormData.extMarketCap = ext.marketCap || '';
      state.extFormData.extCirculatingSupply = ext.circulatingSupply || '';
      state.extFormData.extIssuePrice = ext.issuePrice ?? null;
      state.extFormData.extAthPrice = ext.athPrice ?? null;
      state.extFormData.extAthDate = ext.athDate ? ext.athDate.substring(0, 10) : '';
      state.extFormData.extWhitepaper = ext.whitepaper || '';
    }
  });
}

/**
 * 详细信息
 * @param row 行数据
 */
const showDetail = (row: any) => {
  ElMessageBox.alert(
    '<p>最小交易手续费: ' + row.minTxFee + '</p>'
    + '<p>最大交易手续费: ' + row.maxTxFee + '</p>'
    + '<p>最小提币数量: ' + row.minWithdrawAmount + '</p>'
    + '<p>最大提币数量: ' + row.maxWithdrawAmount + '</p>'
    + '<p>最小充值数量: ' + row.minRechargeAmount + '</p>',
    '详细信息', {
      dangerouslyUseHTMLString: true,
      draggable: true,
    }
  ).then(() => {
    //console.log('OK')
  }).catch(() => {
    //console.log('Close')
  })
}

/**
 * 转入冷钱包
 */
const showColdWallet = (row: any) => {
  state.coldWalletForm.unit = row.unit;
  ElMessageBox.confirm(
    '<p>币种: ' + row.unit + '</p>',
    '转入冷钱包', {
      dangerouslyUseHTMLString: true,
      draggable: true,
      confirmButtonText: "转入冷钱包",
      cancelButtonText: "取消"
    }
  ).then(() => {
    if (state.coldWalletForm.amount == 0) {
      ElMessage.error("请完善信息")
    } else {
      transferColdWallet(state.coldWalletForm).then((res: any) => {
        if (res.code == 0) {
          ElMessage.success(res.message);
        } else {
          ElMessage.error(res.message);
        }
      })
    }
  }).catch(() => {
    //console.log('Close')
  })
}

const goTransferdetail = (row: any) => {
  router.push({ path: 'transferdetail', query: { unit: row.unit } });
}

function fetchAllCoinNames() {
  getTopCoinNames().then(({ data }) => {
    const list = data || [];
    state.allCoinNames = list.map((item: string | { name: string }) =>
      typeof item === 'string' ? item : item.name
    );
  });
}

onMounted(() => {
  handleQuery();
  fetchAllCoinNames();
});
</script>

<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
      <el-form-item>
        <el-button type="success" :icon="Plus" @click="handleAdd">添加币种</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <el-table
      ref="dataTableRef"
      v-loading="loading"
      :data="list"
      @sort-change="handleSortChange"
      highlight-current-row
      border
      height="460"
      >
      <el-table-column label="中文名" prop="nameCn" min-width="130" align="center" />
      <el-table-column label="名称(英文)" prop="name" min-width="130" align="center" />
      <el-table-column label="币种缩写" prop="unit" min-width="90" align="center" />
      <el-table-column label="账户类型" prop="accountType" min-width="100" align="center">
        <template #default="scope">
            <span v-if="scope.row.accountType==0">地址模式 ☐</span>
            <span v-else-if="scope.row.accountType==1">账户模式 ☑</span>
            <span v-else></span>
        </template>
      </el-table-column>
      <el-table-column label="手续费" prop="withdrawFeeType" min-width="100" align="center" sortable="custom">
        <template #default="scope">
            <div v-if="scope.row.withdrawFeeType==0">
                <div>固定值</div>
                <div>{{ scope.row.withdrawFeeValue }}</div>
            </div>
            <div v-else-if="scope.row.withdrawFeeType==1">
                <div>百分比</div>
                <div>{{ scope.row.withdrawFeeValue }} %</div>
            </div>
            <div v-else></div>
        </template>
      </el-table-column>
      <el-table-column label="RPC" prop="enableRpc" min-width="100" align="center">
        <template #default="scope">
            <el-tag v-if="scope.row.enableRpc==0" type="danger">禁用</el-tag>
            <el-tag v-else-if="scope.row.enableRpc==1" type="success">开放</el-tag>
            <span v-else></span>
        </template>
      </el-table-column>
      <el-table-column label="自动转账" prop="canAutoWithdraw" min-width="100" align="center">
        <template #default="scope">
            <el-tag v-if="scope.row.canAutoWithdraw==0" type="danger">关</el-tag>
            <el-tag v-else-if="scope.row.canAutoWithdraw==1" type="success">开</el-tag>
            <span v-else></span>
        </template>
      </el-table-column>
      <el-table-column label="提现" prop="canWithdraw" min-width="80" align="center" sortable="custom">
        <template #default="scope">
            <span v-if="scope.row.canWithdraw==0">否</span>
            <span v-else-if="scope.row.canWithdraw==1">是</span>
            <span v-else></span>
        </template>
      </el-table-column>
      <el-table-column label="充值" prop="canRecharge" min-width="80" align="center" sortable="custom">
        <template #default="scope">
            <span v-if="scope.row.canRecharge==0">否</span>
            <span v-else-if="scope.row.canRecharge==1">是</span>
            <span v-else></span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" min-width="100" align="center" sortable="custom">
        <template #default="scope">
            <el-tag v-if="scope.row.status==0" type="success">启用</el-tag>
            <el-tag v-else-if="scope.row.status==1" type="danger">禁用</el-tag>
            <span v-else></span>
        </template>
      </el-table-column>
      <el-table-column label="区块高度" prop="blockHeight" min-width="90" align="center" />
      <el-table-column label="会员总余额" prop="allBalance" min-width="160" align="center">
        <template #default="scope">
            <div v-if="scope.row.allBalance==null"></div>
            <div v-else>
                <div v-if="scope.row.allBalance < 1">
                    {{ scope.row.allBalance.toFixed(8) }}
                </div>
                <div v-else>
                    {{ scope.row.allBalance }}
                </div>
            </div>
        </template>
      </el-table-column>
      <el-table-column label="钱包余额" prop="hotAllBalance" min-width="160" align="center" sortable="custom" />
      <el-table-column label="冷钱包地址" prop="coldWalletAddress" min-width="160" align="center" />
      <el-table-column label="充值地址" prop="depositAddress" min-width="160" align="center">
        <template #default="scope">
            <span v-if="scope.row.accountType==1">
                {{ scope.row.depositAddress }}
            </span>
            <span v-else></span>
        </template>
      </el-table-column>
      <el-table-column label="添加钱包" min-width="130" align="center">
        <template #default="scope">
            <el-button type="primary" size="small" :loading="loading2" @click="handleCmw(scope.row)">添加</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="160" fixed="right">
        <template #default="scope">
          <el-link size="default" @click.stop="showDetail(scope.row)">详情</el-link>
          <el-dropdown>
            <span class="el-dropdown-link">
              <div class="dropdown-text">更多</div>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click.stop="handleEdit(scope.row)">修改</el-dropdown-item>
                <el-dropdown-item @click.stop="showColdWallet(scope.row)">转入冷钱包</el-dropdown-item>
                <el-dropdown-item @click.stop="goTransferdetail(scope.row)">转入明细</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页工具条 -->
    <pagination
      v-if="total > 0"
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="handleQuery"
    />
    <div style="font-size: 14px;">
      <div>【账户类型】分为【地址模式】和【账户模式】，前者以BTC为代表，充值时通过地址直接充值即可，而后者需要填写Memo备注，用于标记实际用户ID</div>
      <div>【添加地址】按钮暂且不会添加实际区块链地址，仅仅是为用户插入一条用户ID与币种ID的关联的钱包记录而已</div>
      <div>注意：新建币种时，请不要打开RPC，否则会连接区块网络，并为每一个用户创建钱包地址，可能会十分缓慢。</div>
      <div>注意：新建币种时，请可以切换一下地址模式，使得地址模式产生值</div>
      <div>注意：新建币种时，币种简介请保持在100字以下</div>
    </div>

    <!-- 表单弹窗 -->
    <el-dialog
      :title="dialog.title"
      v-model="dialog.visible"
      width="660px"
      destroy-on-close
    >
      <!-- 自定义 Tab 头 -->
      <div class="custom-tabs">
        <span :class="getTabCls(0)" @click="setActiveTab(0)">基础信息</span>
        <span :class="getTabCls(1)" @click="setActiveTab(1)">扩展信息</span>
      </div>

      <!-- 基础信息 -->
      <el-form
        ref="dataFormRef"
        :model="formData"
        :rules="rules"
        label-width="100px"
        v-show="activeTab === 0"
      >
        <el-form-item label="中文名称" prop="nameCn">
          <el-input type="text" v-model="formData.nameCn" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="英文名称" prop="name">
          <el-input type="text" v-model="formData.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="币种单位" prop="unit">
          <el-input type="text" v-model="formData.unit" placeholder="如BTC、ETH等。该字段很重要，设定后不能修改。" />
        </el-form-item>
        <el-form-item label="上级币种" prop="parentCoinName">
          <el-select v-model="formData.parentCoinName" placeholder="请选择上级币种（可选）" clearable filterable>
            <el-option
              v-for="name in allCoinNames.filter(n => n !== formData.name)"
              :key="name"
              :label="name"
              :value="name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="币种简介" prop="information">
          <el-input type="textarea" v-model="formData.information" placeholder="请输入币种简介" />
        </el-form-item>
        <el-form-item label="详情链接" prop="infolink">
          <el-input type="text" v-model="formData.infolink" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="账户类型" prop="accountType">
          <el-radio-group v-model="formData.accountType">
            <el-radio :label="0">地址模式(如：BTC)</el-radio>
            <el-radio :label="1">账户模式(如：EOS)</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="充值地址" prop="depositAddress" v-show="formData.accountType==1">
          <el-input type="text" v-model="formData.depositAddress" placeholder="请输入" />
        </el-form-item>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="充值" prop="canRecharge" class="row-col-three">
              <el-switch
                v-model="formData.canRecharge"
                inline-prompt
                active-text="开放"
                inactive-text="禁止"
                :active-value="1"
                :inactive-value="0"
                size="large"
                />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="RPC" prop="enableRpc" class="row-col-three">
              <el-switch
                v-model="formData.enableRpc"
                inline-prompt
                active-text="开放"
                inactive-text="禁止"
                :active-value="1"
                :inactive-value="0"
                size="large"
                />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="提现" prop="canWithdraw" class="row-col-three">
              <el-switch
                v-model="formData.canWithdraw"
                inline-prompt
                active-text="启用"
                inactive-text="禁用"
                :active-value="1"
                :inactive-value="0"
                size="large"
                />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" style="margin-bottom: 18px;">
          <el-col :span="4"></el-col>
          <el-col :span="20">
            <el-alert type="warning" show-icon :closable="false">
              <p style="color:#FF0000;">注意：新建币种时，不要开启【RPC】，否则生成"用户-钱包"记录时，会通过RPC获取钱包实际地址，耗时会很久</p>
            </el-alert>
          </el-col>
        </el-row>
        <el-form-item label="手续费类型" prop="withdrawFeeType">
          <el-radio-group v-model="formData.withdrawFeeType">
            <el-radio :label="0">固定值</el-radio>
            <el-radio :label="1">百分比</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手续费值" prop="withdrawFeeValue">
          <el-input type="number" v-model="formData.withdrawFeeValue" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="最小充值数" prop="minRechargeAmount">
          <el-input type="number" v-model="formData.minRechargeAmount" placeholder="请输入" />
        </el-form-item>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="最小手续费" prop="minTxFee">
              <el-input-number v-model="formData.minTxFee" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大手续费" prop="maxTxFee">
              <el-input-number v-model="formData.maxTxFee" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="最小提币量" prop="minWithdrawAmount">
              <el-input-number v-model="formData.minWithdrawAmount" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大提币量" prop="maxWithdrawAmount">
              <el-input-number v-model="formData.maxWithdrawAmount" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="自动转账" prop="canAutoWithdraw">
              <el-switch
                v-model="formData.canAutoWithdraw"
                inline-prompt
                active-text="启用"
                inactive-text="禁用"
                :active-value="1"
                :inactive-value="0"
                size="large"
                />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-switch
                v-model="formData.status"
                inline-prompt
                active-text="启用"
                inactive-text="禁用"
                :active-value="0"
                :inactive-value="1"
                size="large"
                />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="阀值" prop="withdrawThreshold">
              <el-input type="number" v-model="formData.withdrawThreshold" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="sort">
              <el-input type="number" v-model="formData.sort" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="人民币汇率" prop="cnyRate">
              <el-input type="number" v-model="formData.cnyRate" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="美元汇率" prop="usdRate">
              <el-input type="number" v-model="formData.usdRate" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 扩展信息 -->
      <el-form label-width="120px" v-show="activeTab === 1">
        <el-form-item label="中文名称">
          <el-input v-model="extFormData.extNameCn" placeholder="请输入中文名称" />
        </el-form-item>
        <el-form-item label="英文名称">
          <el-input v-model="extFormData.extNameEn" placeholder="请输入英文名称" />
        </el-form-item>
        <el-form-item label="图标地址">
          <el-input v-model="extFormData.extIcon" placeholder="请输入图标URL" />
        </el-form-item>
        <el-form-item label="排名">
          <el-input-number v-model="extFormData.extRank" :min="1" style="width:100%" />
        </el-form-item>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="市值">
              <el-input v-model="extFormData.extMarketCap" placeholder="如：1,200,000,000" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流通供应量">
              <el-input v-model="extFormData.extCirculatingSupply" placeholder="如：19,000,000" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="发行价(USD)">
              <el-input type="number" v-model="extFormData.extIssuePrice" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="历史最高价(USD)">
              <el-input type="number" v-model="extFormData.extAthPrice" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="历史最高价日期">
          <el-date-picker
            v-model="extFormData.extAthDate"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择日期"
            style="width:100%"
          />
        </el-form-item>
        <el-form-item label="白皮书地址">
          <el-input v-model="extFormData.extWhitepaper" placeholder="请输入白皮书URL" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" :loading="dialog.loading" @click="submitFormData">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
  a {
    color: #2d8cf0;
  }
  a:hover {
    color: #0C25F1;
  }
  .dropdown-text {
    margin-left: 12px;
    height: 26px;
    line-height: 26px;
    font-size: 13px;
  }
  .row-col-three {
    margin-bottom: 0;
  }
  .custom-tabs {
    display: flex;
    border-bottom: 2px solid #e4e7ed;
    margin-bottom: 16px;
  }
  .custom-tab-item {
    padding: 8px 20px;
    cursor: pointer;
    font-size: 14px;
    color: #606266;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    &:hover {
      color: #409eff;
    }
    &.is-active {
      color: #409eff;
      border-bottom-color: #409eff;
      font-weight: 500;
    }
  }
</style>
