<template>
    <div class="fixedPrice">
        <div class="btn">
            <el-button type="success" @click="addProgramme">新增商家分销定价方案</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%;" align="center" border row-key="id"
            :header-cell-style="{ background: '#EEF3FF', color: '#333333', textAlign: 'center' }"
            :tree-props="{ children: 'childs' }">
            <el-table-column align="center" prop="programmeName" label="方案名称" />
            <el-table-column align="center" prop="preferentialPrice" label="优惠价比例" />
            <el-table-column align="center" prop="marketPrice" label="市场价比例" />
            <el-table-column align="center" prop="supplyPrice" label="供货价比例" />
            <el-table-column align="center" prop="channelPrice" label="渠道价比例" />
            <el-table-column align="center" prop="createTime" label="创建时间" />
            <el-table-column align="center" prop="status" label="操作">
                <template slot-scope="scope">
                    <!-- <el-button type="text" @click.native.prevent="updateRow(scope.row)">编辑</el-button> -->
                    <el-button type="text" @click="updateRow(scope.row.priceId)">编辑</el-button>
                    <el-button type="text" @click="open(scope.row.priceId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagina">
            <el-pagination layout="prev, pager, next" :total="total" @current-change="change"></el-pagination>
        </div>
        <el-dialog width="800px" title="新增定价方案" :visible.sync="addFormDialog" center :close-on-click-modal="false"
            @close="closeDialog">
            <div class="title">
                <div class="name">
                    <h3>方案名称：</h3>
                    <el-input class="ipt" placeholder="请输入方案名称" v-model="addQuery.programmeName"></el-input>
                </div>
                <div class="select">
                    <span>增加定价方案的类型：</span>
                    <el-select v-model="addQuery.type" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="rule-list">
                <div class="rule-item">
                    <p>优惠比例：</p>
                    <el-input-number v-model="addQuery.preferentialPrice" :precision="2" :min="0"
                        :step="0.01"></el-input-number>
                </div>
                <div class="rule-item">
                    <p>市场价比例：</p>
                    <el-input-number v-model="addQuery.marketPrice" :precision="2" :min="0"
                        :step="0.01"></el-input-number>
                </div>
                <div class="rule-item">
                    <p>供货价比例：</p>
                    <el-input-number v-model="addQuery.supplyPrice" :precision="2" :min="0"
                        :step="0.01"></el-input-number>
                </div>
                <div class="rule-item">
                    <p>渠道比例：</p>
                    <el-input-number v-model="addQuery.channelPrice" :precision="2" :min="0"
                        :step="0.01"></el-input-number>
                </div>
            </div>
            <div class="btn-list">
                <el-button type="primary" @click="preserve">保存</el-button>
                <el-button type="info" plain @click="cancel">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { addFixed, getFixed, delFixed, getFixedOne, updateFixed } from "@/api/platformProduct"
export default {
    created() {
        this.getList()
    },
    data() {
        return {
            addFormDialog: false,
            tableData: [],
            //  新增方案的参数
            addQuery: {
                shopId: "186",
                preferentialPrice: "",
                programmeName: "",
                marketPrice: "",
                supplyPrice: "",
                channelPrice: "",
                startTime: "1",
                endTime: "1",
                type:0
            },
            //  分页获取列表
            searchList: {
                page: "1",
                pageSize: "10",
                shopId: 186
            },
            total: null,
            // 用于判断是编辑还是新增
            isEdit: false,
            //  增加的类型
            options: [
                {
                    value: 0,
                    label: '自己'
                },
                {
                    value: 1,
                    label: '团长'
                },
                {
                    value: 2,
                    label: '合伙人'
                },
                {
                    value: 3,
                    label: '加盟商'
                },
                {
                    value: 4,
                    label: '代理商'
                },
            ],
        }
    },
    methods: {
        //  新增商家分销方案
        addProgramme() {
            this.addFormDialog = true
        },
        //  弹窗关闭事件
        closeDialog() {
            this.isEdit = false
            this.addQuery = {
                shopId: "186",
                preferentialPrice: "",
                programmeName: "",
                marketPrice: "",
                supplyPrice: "",
                channelPrice: "",
                startTime: "1",
                endTime: "1",
                type:0
            }
        },
        //   获取方案列表
        async getList() {
            try {
                let res = await getFixed(this.searchList);
                if (res.code == "") {
                    this.tableData = res.data.list
                    this.total = res.data.total
                }
            } catch (error) {
                console.log(error);
            }
        },
        //  保存文件
        async preserve() {
            if (this.addQuery.programmeName == "") {
                this.$message({
                    message: '请输入方案名称',
                    type: 'error'
                });
                return false;
            }
            //  判断是保存还是修改
            if (!this.isEdit) {
                try {
                    let data = await addFixed(this.addQuery);
                    if (data.code == "") {
                        this.$message.success("新增成功");
                        this.addFormDialog = false
                        this.getList()
                    }
                } catch (error) {
                    console.log(error);
                }
            } else {
                try {
                    let res = await updateFixed(this.addQuery);
                    if (res.code == "") {
                        this.$message.success("修改成功");
                        this.addFormDialog = false
                        this.getList()
                    }
                } catch (error) {
                    console.log(error);
                }
            }
        },
        open(id) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // ids: [id]
                let res = await delFixed({ id: id })
                if (res.code == "") {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    });
                    this.getList()
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 编辑
        async updateRow(id) {
            this.isEdit = true
            try {
                let res = await getFixedOne(id)
                if (res.code == "") {
                    this.addQuery = {
                        ...this.addQuery,
                        ...res.data
                    }
                    // this.value = res.data.type
                    console.log(this.addQuery);
                    this.addFormDialog = true
                }
            } catch (error) {

            }
        },
        //  改变页数
        change(e) {
            this.searchList.page = e
            this.getList()
        },
        //  取消
        cancel() {
            this.addFormDialog = false
        }
    },
}
</script>

<style lang="scss" scoped>
.fixedPrice {
    padding: 50px;
    box-sizing: border-box;
    .btn {
        margin: 30px 0;
    }

    .title {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 30px;

        .name {
            display: flex;
            align-items: center;
            gap: 30px;
            h3 {
                width: 90px;
                font-size: 16px;
            }
            .ipt {
            width: 50%;
        }
        }
    }

    .rule-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;

        .rule-item {
            width: 50%;
            margin-top: 30px;
            display: flex;
            align-items: center;
            gap: 30px;

            p {
                width: 90px;
            }
        }
    }

    .pagina {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 40px 0;
    }

    .btn-list {
        margin: 0 auto;
        margin-top: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
}
</style>