<template>
    <div class="app-container">
        <!-- 数据表格 -->
        <el-table
            ref="dataTableRef"
            v-loading="state.loading"
            :data="state.planListData"
            highlight-current-row
            border
        >
            <el-table-column
                label="id"
                prop="id"
                min-width="110"
                align="center"
            >
            </el-table-column>
            <el-table-column
                label="最小数量"
                prop="minAmount"
                min-width="110"
                align="center"
            >
                <template #default="scope">
                    <span>{{ scope.row.minAmount }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="最大数量"
                prop="maxAmount"
                min-width="110"
                align="center"
            >
                <template #default="scope">
                    <span>{{ scope.row.maxAmount }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="价格固定偏移量"
                prop="id"
                min-width="110"
                align="center"
            >
                <template #default="scope">
                    <span>{{ scope.row.fixedOffset }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="价格随机偏移量"
                prop="randomOffset"
                min-width="110"
                align="center"
            >
                <template #default="scope">
                    <span>{{ scope.row.randomOffset }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="大盘比例"
                prop="proportion"
                min-width="110"
                align="center"
            >
                <template #default="scope">
                    <span>{{ scope.row.proportion }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                prop="endTime"
                min-width="110"
                align="center"
            >
                <template #default="scope">
                    <el-button type="danger" @click="updateConf(scope.row)"
                        >修改</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            v-model="state.setDataState"
            title="修改K线趋势"
            width="30%"
            center
        >
            <el-form
                label-position="right"
                label-width="100px"
                :model="state.updateFromData"
                style="max-width: 460px"
                ref="addFromDataRef"
            >
                <el-form-item label="价格固定偏移量" prop="fixedOffset">
                    <el-input
                        v-model="state.updateFromData.fixedOffset"
                        placeholder="价格固定偏移量"
                    />
                </el-form-item>
                <el-form-item label="最大数量" prop="maxAmount">
                    <el-input
                        v-model="state.updateFromData.maxAmount"
                        placeholder="最大数量"
                    />
                </el-form-item>
                <el-form-item label="最小数量" prop="minAmount">
                    <el-input
                        v-model="state.updateFromData.minAmount"
                        placeholder="最小数量"
                    />
                </el-form-item>
                <el-form-item label="价格随机偏移量" prop="randomOffset">
                    <el-input
                        v-model="state.updateFromData.randomOffset"
                        placeholder="价格随机偏移量"
                    />
                </el-form-item>
                <el-form-item label="大盘比例" prop="proportion">
                    <el-input
                        v-model="state.updateFromData.proportion"
                        placeholder="大盘比例:0.0001btc"
                    />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="confSave">确认</el-button>
                    <el-button type="danger" @click="clear">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { confList, matchConfSave } from "../../../api/swap/index";
import { ElForm, ElMessage } from "element-plus";

const addFromDataRef = ref(ElForm);
const state = reactive({
    params: {
        currentPage: 1,
        pageSize: 10,
    },
    planListData: [],
    loading: true,
    setDataState: false,
    updateFromData: {
        fixedOffset: 0,
        id: 0,
        maxAmount: 0,
        minAmount: 0,
        proportion: 0,
        randomOffset: 0,
    },
});

const handleQuery = async () => {
    let { data } = await confList(state.params);
    state.planListData = data.records;
    state.loading = false;
};

const updateConf = (row: any) => {
    state.setDataState = true;
    state.updateFromData = row;
};

const confSave = async () => {
    let data = await matchConfSave(state.updateFromData);
    if (data.code == 0) {
        ElMessage.success(data.msg);
        handleQuery();
        clear();
    }
};
const clear = () => {
    addFromDataRef.value.resetFields();
    state.setDataState = false;
};
onMounted(() => {
    handleQuery();
});
</script>

<style lang="less" scoped></style>
