<template>
    <div class="app-container">
        <div class="add_button">
            <el-button type="primary" @click.stop="state.dialog = !state.dialog"
                >添加交易员等级</el-button
            >
        </div>
        <el-table :data="state.HierarchyList" border>
            <el-table-column label="id" prop="id" align="center" />

            <el-table-column label="中文" prop="name" align="center" />
            <el-table-column label="英文" prop="enName" align="center" />
            <el-table-column label="资产" prop="asset" align="center">
                <template #default="scope">
                    <span>{{
                        (Math.floor(scope.row.asset * 100) / 100).toFixed(2)
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column label="最大" prop="maxFollow" align="center" />
            <el-table-column
                label="分润比例"
                prop="dividendPercent"
                align="center"
            />
            <el-table-column label="操作" prop="maxFollow" align="center">
                <template #default="scope">
                    <el-button type="success" @click.stop="update(scope.row)"
                        >修改</el-button
                    >
                    <el-button type="danger" @click.stop="remove(scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="dialog" width="30%" align-center>
            <el-form
                ref="ruleFormRef"
                :model="state.traderLevelForm"
                label-width="120px"
                class="demo-ruleForm"
                status-icon
            >
                <el-form-item label="资产:" prop="region">
                    <el-input type="text" v-model="traderLevelForm.asset" />
                </el-form-item>
                <el-form-item label="等级英文:" prop="region">
                    <el-input type="text" v-model="traderLevelForm.enName" />
                </el-form-item>
                <el-form-item label="最大:" prop="region">
                    <el-input type="text" v-model="traderLevelForm.maxFollow" />
                </el-form-item>
                <el-form-item label="等级中文:" prop="region">
                    <el-input type="text" v-model="traderLevelForm.name" />
                </el-form-item>
                <el-form-item label="分润比例:" prop="region">
                    <el-input
                        type="text"
                        v-model="traderLevelForm.dividendPercent"
                    />
                </el-form-item>

                <el-form-item>
                    <el-button
                        type="success"
                        @click="submitForm(traderLevelForm)"
                    >
                        添加
                    </el-button>
                    <el-button @click="resetForm(traderLevelForm)" type="danger"
                        >取消</el-button
                    >
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialog1" width="30%" align-center>
            <el-form
                ref="ruleFormRef"
                :model="state.updateForm"
                label-width="120px"
                class="demo-ruleForm"
                status-icon
            >
                <el-form-item label="ID:" prop="region">
                    <el-input type="text" v-model="updateForm.id" disabled />
                </el-form-item>
                <el-form-item label="资产:" prop="region">
                    <el-input type="text" v-model="updateForm.asset" />
                </el-form-item>
                <el-form-item label="等级英文:" prop="region">
                    <el-input type="text" v-model="updateForm.enName" />
                </el-form-item>
                <el-form-item label="最大:" prop="region">
                    <el-input type="text" v-model="updateForm.maxFollow" />
                </el-form-item>
                <el-form-item label="等级中文:" prop="region">
                    <el-input type="text" v-model="updateForm.name" />
                </el-form-item>
                <el-form-item label="分润比例:" prop="region">
                    <el-input
                        type="text"
                        v-model="updateForm.dividendPercent"
                    />
                </el-form-item>

                <el-form-item>
                    <el-button type="success" @click="submitForm(updateForm)">
                        确认
                    </el-button>
                    <el-button @click="resetForm(updateForm)" type="danger"
                        >取消</el-button
                    >
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script lang="ts">
name: "dealerClass";
</script>
<script lang="ts" setup>
import {
    traderHierarchy,
    addTraderLevels,
    modifyTraderDetails,
    removeTraderRanks,
} from "@/api/documentary/index";
import {
    traderHierarchyItem,
    addTraderLevelsParam,
    updateParam,
} from "@/types/api/documentary/index";
import { reactive, toRefs, onMounted } from "vue";
import { ElMessage } from "element-plus";

const state = reactive({
    HierarchyList: [] as traderHierarchyItem[],
    dialog: false,
    dialog1: false,
    traderLevelForm: {
        asset: 0,
        enName: "",
        maxFollow: 0,
        name: "",
        dividendPercent: 0,
    } as addTraderLevelsParam,
    updateForm: {
        id: 0,
        asset: 0,
        enName: "",
        maxFollow: 0,
        name: "",
        dividendPercent: 0,
    } as updateParam,
});
const { HierarchyList, dialog, dialog1, traderLevelForm, updateForm } =
    toRefs(state);
const handleQuery = () => {
    //获取交易员等级列表
    traderHierarchy().then((res: any) => {
        if (res.code == 0) {
            state.HierarchyList = res.data;
        }
    });
};
// 提交
const submitForm = (formEl: any) => {
    if (Object.keys(formEl).length == 5) {
        state.dialog = false;
        addTraderLevels(formEl).then((res: any) => {
            if (res.code == 0) {
                ElMessage({
                    message: "添加成功",
                    type: "success",
                });
                handleQuery();
            }
        });
    } else {
        modifyTraderDetails(state.updateForm).then((res: any) => {
            if (res.code == 0) {
                ElMessage.success("修改成功");
                state.dialog1 = false;
                handleQuery();
            }
        });
    }
};
// 取消
const resetForm = (formEl: any) => {
    if (Object.keys(formEl).length == 5) {
        state.dialog = false;
        state.traderLevelForm.asset = 0;
        state.traderLevelForm.dividendPercent = 0;
        state.traderLevelForm.enName = "";
        state.traderLevelForm.maxFollow = 0;
        state.traderLevelForm.name = "";
    } else {
        state.dialog1 = false;
    }
};
// 修改交易员等级详细
const update = (row: any) => {
    state.dialog1 = true;
    state.updateForm.id = row.id;
    state.updateForm.asset = row.asset;
    state.updateForm.dividendPercent = row.dividendPercent;
    state.updateForm.enName = row.enName;
    state.updateForm.maxFollow = row.maxFollow;
    state.updateForm.name = row.name;
};

// 删除交易员等级
const remove = (row: any) => {
    removeTraderRanks(row.id).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success("删除成功");
            handleQuery();
        }
    });
};

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

<style lang="scss" scoped>
.add_button {
    margin-bottom: 10px;
}
</style>
