<template>
    <div class="app-container">
        <el-button type="primary" @click="unfold()" style="margin-bottom: 20px"
            >修改</el-button
        >
        <el-table
            :data="state.earningsList"
            highlight-current-row
            border
            v-loading="state.loading"
        >
            <el-table-column
                prop="id"
                label="id"
                align="center"
            ></el-table-column>

            <el-table-column prop="balance" label="余额" align="center"
                ><template #default="scope">
                    {{ truncation(scope.row.balance) }}
                </template></el-table-column
            >
            <el-table-column prop="createdTime" label="创建时间" align="center"
                ><template #default="scope">
                    {{ timestampToTime(scope.row.createdTime) }}
                </template></el-table-column
            >
            <el-table-column prop="createdTime" label="更新时间" align="center"
                ><template #default="scope">
                    {{ timestampToTime(scope.row.dateTime) }}
                </template></el-table-column
            >
            <el-table-column prop="dayYield14" label="收益率" align="center">
                <template #default="scope">
                    {{ truncation(scope.row.dayYield14) + "%" }}
                </template></el-table-column
            >
            <el-table-column prop="earnings" label="收益" align="center">
                <template #default="scope">
                    {{ truncation(scope.row.earnings) }}
                </template></el-table-column
            >
            <el-table-column
                prop="openPosition"
                label="开仓数量"
                align="center"
            >
                <template #default="scope">
                    {{
                        typeof scope.row.openPosition == "object"
                            ? 0
                            : scope.row.openPosition
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="principalAmount" label="本金" align="center">
                <template #default="scope">
                    {{ truncation(scope.row.principalAmount) }}
                </template></el-table-column
            >
            <el-table-column
                prop="profitOrderCount"
                label="订单数量"
                align="center"
            >
                <template #default="scope">
                    {{
                        typeof scope.row.profitOrderCount == "object"
                            ? 0
                            : scope.row.profitOrderCount
                    }}
                </template></el-table-column
            >
        </el-table>
        <el-dialog
            v-model="state.centerDialogVisible"
            title="Warning"
            width="30%"
            align-center
        >
            <el-form :model="state.statisticsDataForms" label-width="120px">
                <el-form-item
                    :label="item.id"
                    v-for="(item, index) in state.statisticsDataForms"
                    :key="item.id"
                >
                    <el-input v-model="statisticsDataForms[index].dayYield14" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="submit()">
                        确认
                    </el-button>
                    <el-button @click="cancel()">取消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
export default {
    name: "dailyStatistics",
};
</script>
<script lang="ts" setup>
import { useRoute } from "vue-router";
import { onMounted, reactive, ref, toRefs } from "vue";
import { dailyStats, modifyingDailyData } from "@/api/documentary/index";
import { truncation, timestampToTime } from "@/utils/filter";
import { ElMessage } from "element-plus";

const state = reactive({
    traderId: 0 as any,
    earningsList: [] as any,
    loading: true,
    centerDialogVisible: false,
    statisticsDataForms: [] as any,
});

const { statisticsDataForms } = toRefs(state);

const handleQuery = () => {
    dailyStats(state.traderId).then((res) => {
        state.earningsList = res.data;
        state.loading = false;
    });
};

//展开对话框

const unfold = () => {
    state.centerDialogVisible = !state.centerDialogVisible;
    state.earningsList.map((item: any, index: number) => {
        state.statisticsDataForms.push({
            dayYield14: item.dayYield14,
            id: "" + item.id,
        });
    });
};

// 提交

const submit = () => {
    if (state.statisticsDataForms.length !== 14) {
        ElMessage.warning("交易员每日统计数据必须为14个");
    } else {
        modifyingDailyData(state.statisticsDataForms).then((res: any) => {
            if (res.code == 0) {
                handleQuery();
                state.centerDialogVisible = false;
                state.statisticsDataForms = [];
                ElMessage.success("修改成功");
            }
        });
    }
};

// 取消提交

const cancel = () => {
    state.statisticsDataForms = [];
    state.centerDialogVisible = !state.centerDialogVisible;
};
onMounted(() => {
    const route = useRoute();
    state.traderId = route.query.traderId;
    handleQuery();
});
</script>

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