<script lang="ts">
export default {
  name: 'coinNetwork'
};
</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 {
  queryCoinNetwork,
  addCoinNetwork,
  updateCoinNetwork,
  deleteCoinNetwork
} from '@/api/system/coinNetwork';
import { CoinNetworkQueryParam, CoinNetworkItem, CoinNetworkFormData } from '@/types/api/system/coinNetwork';

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

const state = reactive({
  loading: true,
  queryParams: {
    pageNo: 1,
    pageSize: 15,
  } as CoinNetworkQueryParam,
  list: [] as CoinNetworkItem[],
  total: 0,
  isCreate: false,
  dialog: {
    title: '',
    visible: false,
    loading: false,
  },
  formData: {
    name: '',
    protocol: '',
    rpcUrl: '',
    status: 0,
    sort: 0,
    remark: ''
  } as CoinNetworkFormData,
  rules: {
    name: [{ required: true, message: '请输入主网名称', trigger: 'blur' }],
    rpcUrl: [{ required: true, message: '请输入 RPC 地址', trigger: 'blur' }]
  },
});

const { loading, queryParams, list, total, dialog, formData, rules } = toRefs(state);

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

function handleAdd() {
  state.dialog = { title: '添加主网', visible: true, loading: false };
  state.isCreate = true;
  state.formData.name = '';
  state.formData.protocol = '';
  state.formData.rpcUrl = '';
  state.formData.status = 0;
  state.formData.sort = 0;
  state.formData.remark = '';
}

function handleEdit(row: CoinNetworkItem) {
  state.dialog = { title: '修改主网', visible: true, loading: false };
  state.isCreate = false;
  state.formData.id = row.id;
  state.formData.name = row.name;
  state.formData.protocol = row.protocol;
  state.formData.rpcUrl = row.rpcUrl;
  state.formData.status = row.status;
  state.formData.sort = row.sort;
  state.formData.remark = row.remark;
}

function submitFormData() {
  dataFormRef.value.validate((valid: any) => {
    if (valid) {
      state.dialog.loading = true;
      if (state.isCreate) {
        addCoinNetwork(state.formData).then(() => {
          state.dialog.visible = false;
          state.dialog.loading = false;
          ElMessage.success('添加成功');
          handleQuery();
        }).catch(() => { state.dialog.loading = false; });
      } else {
        updateCoinNetwork(state.formData).then(() => {
          state.dialog.visible = false;
          state.dialog.loading = false;
          ElMessage.success('修改成功');
          handleQuery();
        }).catch(() => { state.dialog.loading = false; });
      }
    }
  });
}

function handleDelete(row: CoinNetworkItem) {
  ElMessageBox.confirm(`确认删除主网"${row.name}"吗？`, '提示', { type: 'warning' }).then(() => {
    deleteCoinNetwork(row.id).then(() => {
      ElMessage.success('删除成功');
      handleQuery();
    });
  }).catch(() => {});
}

function cancel() {
  state.dialog.visible = false;
  state.dialog.loading = false;
}

onMounted(() => {
  handleQuery();
});
</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 v-loading="loading" :data="list" highlight-current-row border height="460">
      <el-table-column label="ID" prop="id" min-width="60" align="center" />
      <el-table-column label="主网名称" prop="name" min-width="120" align="center" />
      <el-table-column label="协议链" prop="protocol" min-width="120" align="center" />
      <el-table-column label="RPC 地址" prop="rpcUrl" min-width="220" align="center" show-overflow-tooltip />
      <el-table-column label="状态" prop="status" min-width="90" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 0" type="success">正常</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="排序" prop="sort" min-width="70" align="center" />
      <el-table-column label="备注" prop="remark" min-width="160" align="center" />
      <el-table-column label="操作" align="center" width="160" fixed="right">
        <template #default="scope">
          <el-link size="default" @click.stop="handleEdit(scope.row)">修改</el-link>
          <el-link size="default" type="danger" style="margin-left:12px" @click.stop="handleDelete(scope.row)">删除</el-link>
        </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"
    />

    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" destroy-on-close>
      <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
        <el-form-item label="主网名称" prop="name">
          <el-input type="text" v-model="formData.name" placeholder="如 ERC20、TRC20" />
        </el-form-item>
        <el-form-item label="协议链" prop="protocol">
          <el-input type="text" v-model="formData.protocol" placeholder="如 Ethereum、TRON" />
        </el-form-item>
        <el-form-item label="RPC 地址" prop="rpcUrl">
          <el-input type="text" v-model="formData.rpcUrl" placeholder="如 https://bsc-dataseed.binance.org" />
        </el-form-item>
        <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-form-item label="排序" prop="sort">
          <el-input-number v-model="formData.sort" :min="0" style="width:100%" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
        </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; }
</style>
