<template>
    <div class="app-container">
        <el-form-item>
            <el-button
                type="primary"
                :icon="Plus"
                @click="state.setDataState = true"
                >添加区间控盘</el-button
            >
        </el-form-item>

        <!-- 数据表格 -->
        <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="startTime"
                min-width="110"
                align="center"
            >
                <template #default="scope">
                    <span>{{ timestampToTime(scope.row.startTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="结束时间"
                prop="endTime"
                min-width="110"
                align="center"
            >
                <template #default="scope">
                    <span>{{ timestampToTime(scope.row.endTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="涨/跌"
                prop="id"
                min-width="110"
                align="center"
            >
                <template #default="scope">
                    <span
                        >{{
                            scope.row.type == 1
                                ? scope.row.amplitude
                                : -scope.row.amplitude
                        }}%</span
                    >
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                prop="endTime"
                min-width="110"
                align="center"
            >
                <template #default="scope">
                    <el-button type="danger" @click="delectPlan(scope.row.id)"
                        >删除</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.addFromData"
                style="max-width: 460px"
                ref="addFromDataRef"
            >
                <el-form-item label="区间选择">
                    <el-date-picker
                        v-model="state.datePickerValue"
                        type="datetimerange"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        @change="getStart"
                    />
                </el-form-item>
                <el-form-item label="幅度" prop="amplitude">
                    <el-input
                        v-model="state.addFromData.amplitude"
                        placeholder="单位%"
                    />
                </el-form-item>
                <el-form-item label="涨跌" prop="type">
                    <el-select
                        v-model="state.addFromData.type"
                        class="m-2"
                        placeholder="请选择涨跌"
                    >
                        <el-option
                            v-for="item in state.options"
                            :key="item.value"
                            :label="item.lable"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addPlanSave"
                        >确认</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, onUnmounted, reactive, ref } from "vue";
import { planList, planSave, planDelete } from "@/api/swap/index";
import { Plus } from "@element-plus/icons-vue";
import { timestampToTime } from "@/utils/filter";
import { ElForm, ElMessage } from "element-plus";
const addFromDataRef = ref(ElForm);
const state = reactive({
    fromData: {
        currentPage: 1,
        pageSize: 10,
    },
    setDataState: false,
    loading: true,
    planListData: [],
    addFromData: {
        startTime: "",
        endTime: "",
        type: "",
        amplitude: "",
    } as any,
    datePickerValue: "",
    options: [
        {
            lable: "涨",
            value: 1,
        },
        {
            lable: "跌",
            value: 2,
        },
    ],
});

const getPlanList = async () => {
    let { data } = await planList(state.fromData);
    state.planListData = data.records;
    state.loading = false;
};

const getStart = (e: any) => {
    state.addFromData.startTime = new Date(e[0]).getTime();
    state.addFromData.endTime = new Date(e[1]).getTime();
};
const addPlanSave = async () => {
    let data = await planSave(state.addFromData);
    if (data.code == 0) {
        getPlanList();
        ElMessage.success(data.msg);
        clear();
    }
};
const clear = () => {
    addFromDataRef.value.resetFields();
    state.datePickerValue = "";
    state.setDataState = false;
};
const delectPlan = async (id: number) => {
    let data = await planDelete([id]);
    if (data.code == 0) {
        getPlanList();
        ElMessage.success(data.msg);
    }
};
onMounted(() => {
    getPlanList();
});

onUnmounted(() => {});
</script>

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