<!--
 * @Descripttion: 设置代理价
 * @version: 1.0
 * @Author: zzx
 * @Date: 2024-11-27 16:08:16
 * @LastEditors: zzx tigerzouzx@foxmail.com
 * @LastEditTime: 2024-12-02 18:00
-->
<template>
    <div class="app-container">
        <el-card class="operate-container" shadow="hover">
            <div style="
          display: flex;
          align-items: center;
          justify-content: space-between;
        ">
                <div style="display: flex; align-items: center">
                    <div>
                        <i class="el-icon-tickets"></i>
                        <span>数据列表</span>
                    </div>
                    <div style="margin-left: 20px">
                        <el-descriptions class="margin-top" :column="3" size="medium" border>
                            <el-descriptions-item label="电站">{{ name }}</el-descriptions-item>
                        </el-descriptions>
                    </div>
                </div>
                <div>
                    <back-button></back-button>
                </div>
            </div>
        </el-card>
        <div class="table-container">
            <el-table ref="adminTable" :data="dialogList" style="width: 100%" v-loading="dialogListLoading" border>
                <el-table-column label="时间段" align="center" prop="time"></el-table-column>
                <el-table-column label="电费(元/度)" align="center" prop="electrovalence"></el-table-column>
                <el-table-column label="结算服务费(元)" align="center" prop="servicePrice"></el-table-column>
                <el-table-column label="结算费合计(元)" align="center" prop="eprice"></el-table-column>
                <el-table-column label="运营服务费(元)" align="center" prop="addServicePrice"></el-table-column>
                <el-table-column label="销售合计价(元)" align="center" prop="platformPrice"></el-table-column>
                <el-table-column label="一级代理价(元)" align="center" prop="">
                    <template slot-scope="scope">
                        <el-tooltip class="item" v-if="scope.row.isEdit === false" effect="dark" content="单击编辑" placement="left">
                            <span class="edit" @click="toggleEdit(scope.row)">{{
                            scope.row.firstLevelPrice }}</span>
                        </el-tooltip>
                        <el-input v-else v-model="editInput" size="small" oninput="value=value.replace(/[^\d.]/g,'')" style="width: 200px;"
                            @blur="saveEdit(scope.row)">
                            <i slot="suffix" size="small" class="el-icon-check" @click="confrimEdit(scope.row)"></i>
                            <i slot="suffix" size="small" class="el-icon-close" @click="cancelEdit(scope.row)"></i>
                        </el-input>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-divider></el-divider>
        <el-card class="operate-container" shadow="hover">
            <div style="text-align: center;">
                <el-button type="primary" size="small" @click="confirmForbidden">提交</el-button>
                <el-button type="info" size="small" @click="cancelForbidden">恢复默认</el-button>
            </div>
        </el-card>
    </div>
</template>
<script>
import { priceList, settingsPrice } from "@/api/distribution";
import Big from 'big.js';
const defaultListQuery = {
    adminUserId: null,
    stationId: null,
};
export default {
    name: "settingsPrice",
    data() {
        return {
            isDisabled: true,
            name: null,
            listQuery: Object.assign({}, defaultListQuery),
            forbiddenForm: {},
            dialogList: null,
            dialogListLoading: false,
            total: null,
            editInput: null,
            currentEditingRow: null, //用于记录当前正在编辑的行
            confirmLoading: false
        };
    },
    watch: {},
    created() {
        this.name = this.$route.query.name;
        this.listQuery.adminUserId = this.$route.query.adminUserId;
        this.listQuery.stationId = this.$route.query.stationId;
        this.getList();
    },
    methods: {
        toggleEdit(row) {
            if (this.currentEditingRow) {
                this.currentEditingRow.isEdit = false;
            }
            row.isEdit = !row.isEdit;
            this.editInput = row.firstLevelPrice;
            if (row.isEdit) {
                this.currentEditingRow = row;
                
            } else {
                this.currentEditingRow = null;
            }
        },
        confrimEdit(row) {
            if (this.editInput >= row.platformPrice) {
                return this.$message.error('价格必须小于平台价格');
            }
            if(this.editInput<=row.platformPrice-row.addServicePrice){
              return this.$message.error('一级代理价不合理，不在底价和销售价区间');
            }
            if (this.editInput <= 0) {
                return this.$message.error('价格不能小于0');
            }
            row.firstLevelPrice = this.editInput;
            row.isEdit = false
            //置空当前编辑行记录
            this.currentEditingRow = null;
        },
        cancelEdit(row) {
            this.editInput =0;
            row.isEdit = false
            //置空当前编辑行记录
            this.currentEditingRow = null;
        },
        saveEdit(row) {
            // if (row.firstLevelPrice >= row.platformPrice) {
            //     row.firstLevelPrice = 0
            //     return this.$message.error('分销价格必须小于平台价格');
            // }
            // row.isEdit=false
        },
        confirmForbidden() {
            const newArray = this.dialogList.map(item => ({
                adminUserId: this.listQuery.adminUserId,
                firstLevelPrice: item.firstLevelPrice,
                id: item.id,
                platformPrice: item.platformPrice,
                secondLevelPrice: item.secondLevelPrice,
                servicePrice: new Big(item.platformPrice).minus(new Big(item.firstLevelPrice)).toNumber(),
                stationId: this.listQuery.stationId,
                time: item.time
            }))
            this.confirmLoading = true;
            settingsPrice(newArray).then((res) => {
                this.confirmLoading = false;
                if (res.code == 200) {
                    this.$message.success('设置成功');
                    this.getList();
                }
            })
        },
        cancelForbidden() {
            this.getList();
        },
        getList() {
            this.dialogListLoading = true;
            priceList(this.listQuery).then((response) => {
                this.dialogListLoading = false;
                this.dialogList = response.data;
                this.dialogList.map(item => {
                    this.$set(item, 'isEdit', false); //初始化为false
                })
            });
        },
    },
};
</script>
<style scoped>
.edit {
    color: #409EFF;
    cursor: pointer;
}

.el-icon-check {
    font-size: 22px;
    font-weight: 1000;
    color: rgb(103, 194, 58);
}

.el-icon-close {
    font-size: 22px;
    font-weight: 1000;
    color: rgba(240, 10, 10, 0.6);
}
</style>
