<template>
    <div class="custom_page">
        <div class="content">
            <el-button type="primary" class="add" @click="addManage">新增手续费管理</el-button>
            <!--  表格 -->
            <div class="content_table">
                <div class="table">
                    <el-table :data="tableData" border :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
                        style="width: 100%">
                        >
                        <el-table-column prop="withdrawalConfigId" label="编号"></el-table-column>
                        <el-table-column label="手续费分配方式">
                            <template slot-scope="scope">
                                <span v-if="scope.row.proportionalType == 1">比例</span>
                                <span v-if="scope.row.proportionalType == 2">金额</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="costMoney" label="手续费用" />
                        <el-table-column prop="costProportion" label="手续费用比例" />
                        <el-table-column label="配置类型">
                            <template slot-scope="scope">
                                <span v-if="scope.row.withdrawalConfigType == 1">用户提现</span>
                                <span v-if="scope.row.withdrawalConfigType == 2">商家提现</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <div class="btnList">
                                    <el-button type="text" @click="editMore(scope.row)">编辑</el-button>
                                    <el-button type="text" @click="deleteCom(scope.row)">删除</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <!-- *****************弹框开始***************** -->
        <!-- 详情弹框 -->
        <el-dialog :visible.sync="dioObj.show" :title="dioObj.title" width="40%" center :close-on-click-modal="false"
            @close="closeDialog">
            <div class="box">
                <div class="main">
                    <ul>
                        <li>
                            <span>手续费分配方式</span>
                            <el-radio v-model="detailData.proportionalType" :label="1">比例</el-radio>
                            <el-radio v-model="detailData.proportionalType" :label="2">金额</el-radio>
                        </li>
                        <li>
                            <template v-if="detailData.proportionalType == 1">
                                <span>手续费用比例(%)</span>
                                <el-input-number v-model="detailData.costProportion" :min="0" :max="10"></el-input-number>
                            </template>
                            <template v-if="detailData.proportionalType == 2">
                                <span>手续费用金额</span>
                                <el-input v-model="detailData.costMoney" placeholder="请输入手续费的金额"></el-input>
                            </template>
                        </li>
                        <li>
                            <span>配置类型</span>
                            <el-radio v-model="detailData.withdrawalConfigType" :label="1">用户提现</el-radio>
                            <el-radio v-model="detailData.withdrawalConfigType" :label="2">商家提现</el-radio>
                        </li>
                    </ul>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" v-if="dioObj.title == '新增手续费管理'" @click="addedCom">新增</el-button>
                <el-button type="primary"  v-if="dioObj.title == '编辑手续费管理'" @click="edidCom">保存</el-button>
                <el-button @click="dioObj.show = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
// import { getShopId } from '@/utils/auth'
import { hidden } from '@/utils/index'
import { commissionGetAll,addCommission,deleteCommission,edidCommission } from '@/api/application'
export default {
    data() {
        return {
            //  查询提现手续费管理
            formInline: {
                page: 1,
                pageSize: 10,
            },
            currentPage: 1,
            tableData: [],
            total: 1,
            //  控制弹框的标题和显示
            dioObj: {
                title: "编辑手续费管理",
                show: false,
            },
            //  存储详情的数据
            detailData: {
                withdrawalConfigId: null,
                proportionalType: 1,
                costMoney: "",
                costProportion: "",
                withdrawalConfigType: null
            }
        }
    },
    created() {
        this.getAllData()
    },
    methods: {
        //  初始化查询所有数据
        async getAllData() {
            let res = await commissionGetAll(this.formInline);
            const { data } = res;
            this.tableData = data.records
        },
        //  新增手续费管理
        addManage() {
            //  删除字段
            delete this.detailData.withdrawalConfigId
            this.dioObj.title = "新增手续费管理"
            this.dioObj.show = true
        },
        //  新增提现手续费管理
        async addedCom(){
            let money = this.detailData.costMoney
            if(this.detailData.proportionalType == 2 &&  money == ''){
                this.$message.error('提现手续费的金额不能为空，可以为0!!!');
                return
            }else if(this.detailData.proportionalType == 2 && isNaN(money - 0)){
                this.$message.error('提现手续费的金额必须为数字');
                return
            }else if(this.detailData.withdrawalConfigType == null){
                this.$message.error('请选择配置类型');
                return
            }
            if(this.detailData.proportionalType == 2){
                this.detailData.costProportion = ""
            }
            if(this.detailData.proportionalType == 1){
                this.detailData.costMoney = ""
            }
            let res = await addCommission(this.detailData)
            if(res.code == ""){
                this.$message.success('新增手续费配置成功');
                this.dioObj.show = false
            }
            this.getAllData()
        },
        //  删除手续费管理
        async deleteCom({withdrawalConfigId}){
            let res = await deleteCommission({withdrawalConfigId})
            if(res.code == ""){
                this.$message.success('手续费配置删除成功');
            }
            this.getAllData()
        },
        //  修改手续费管理
        async edidCom(){
            let money = this.detailData.costMoney
            if(this.detailData.proportionalType == 2 &&  money == ''){
                this.$message.error('提现手续费的金额不能为空，可以为0!!!');
                return
            }else if(this.detailData.proportionalType == 2 && isNaN(money - 0)){
                this.$message.error('提现手续费的金额必须为数字');
                return
            }else if(this.detailData.withdrawalConfigType == null){
                this.$message.error('请选择配置类型');
                return
            }
            if(this.detailData.proportionalType == 1){
                this.detailData.costMoney = ""
            }else if(this.detailData.proportionalType == 2){
                this.detailData.costProportion = ""
            }
            let res = await edidCommission(this.detailData);
            if(res.code == ""){
                this.$message.success('修改手续费配置成功');
                this.dioObj.show = false
            }
            this.getAllData()
        },
        // 查询详情
        editMore(row) {
            this.dioObj.show = true
            this.dioObj.title = "编辑手续费管理"
            this.detailData = row
        },
        //  弹窗关闭时间
        closeDialog() {
            this.detailData = {
                withdrawalConfigId: null,
                proportionalType: 1,
                costMoney: "",
                costProportion: "",
                withdrawalConfigType: null
            }
            console.log(this.dioObj.show);
        }
    },
}
</script>
  
<style lang='scss' scoped>
@import url("../../../styles/elDialog.scss");

.custom_page {
    padding: 20px;

    .add {
        margin: 20px;
    }
}

.box {
    .main {
        ul {
            display: flex;
            flex-direction: column;
            gap: 20px;

            li {
                display: flex;
                align-items: center;

                span {
                    width: 135px;
                }
            }
        }
    }

    .botTitle {
        color: red;
        text-align: center;
    }
}

::v-deep .el-input {
    width: auto;
}
</style>
  
  