<template>
    <div class="app-container">
        <el-form
            label-width="100px"
            :model="state.submittingContent"
            style="max-width: 460px"
            :rules="state.rules"
        >
            <el-form-item label="交易对">
                <el-select
                    v-model="state.submittingContent.symbol"
                    class="m-2"
                    placeholder="请选择交易对"
                    size="small"
                >
                    <el-option
                        v-for="item in state.list"
                        :key="item.id"
                        :label="item.symbol"
                        :value="item.symbol"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="指定价格" prop="price">
                <el-input
                    style="width: 175px"
                    v-model="state.submittingContent.price"
                    placeholder="请输入价格"
                />
            </el-form-item>

            <el-form-item>
                <el-button
                    type="primary"
                    @click.stop="submitting(state.submittingContent)"
                    >提交</el-button
                >
                <el-button @click.stop="clearContents()">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts">
export default {
    name: "contractAccount",
};
</script>
<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import { queryContractCoinList } from "@/api/system/dashboard";
import { Content } from "@/types/api/system/dashboard";
import { publishPrice } from "@/api/swap/index";
import { ElMessage } from "element-plus";
const state = reactive({
    queryParams: {
        pageNo: 1,
        pageSize: 50,
    },
    list: [] as Content[],
    submittingContent: {
        symbol: "",
        price: "",
    },
    rules: {
        price: [
            {
                required: true,
                message: "不能为空",
                trigger: "blur",
            },
        ],
    },
});
// 获取交易对
function handleQuery() {
    queryContractCoinList(state.queryParams).then(({ data }) => {
        state.list = data.content;
    });
}

// 提交测试价格
const submitting = (row: any) => {
    publishPrice(row).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success(res.message);
            clearContents();
        } else {
            ElMessage.error(res.message);
            // clearContents();
        }
    });
};
// 取消提交
const clearContents = () => {
    (state.submittingContent.symbol = ""), (state.submittingContent.price = "");
};

// 请求交易对
onMounted(() => {
    handleQuery();
});
</script>

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