<template>
    <div class="base">
        <div class="base-bg">
            <div class="title">
                <span style="margin-right: 10px">区域设置</span>
                <el-select v-model="rideId" placeholder="选择区域" size="small" @change="rideChange">
                    <el-option v-for="item in $root.regionOptions" :key="item.id" :label="item.name" :value="item.id" v-if="item.id"/>
                </el-select>
                <div class="item">
                    <div class="item-title">骑行支付设置</div>
                    <p class="text">
                        共享电单车在骑行中，每
                        <span v-show="!editRide">{{ ridePay.chargingPointTime }}</span>
                        <el-input v-model="ridePay.chargingPointTime" size="small" v-show="editRide"></el-input>分钟收取
                        <span v-show="!editRide">{{ ridePay.chargingPointFee }}</span>
                        <el-input v-model="ridePay.chargingPointFee" size="small" v-show="editRide"></el-input>
                        元费用，当用户在指定区域还车时，另收
                        <span v-show="!editRide">{{ ridePay.dispatchFee }}</span>
                        <el-input v-model="ridePay.dispatchFee" size="small" v-show="editRide"></el-input>
                        元调度费
                    </p>
                    <p class="text">
                        最高封顶
                        <span v-show="!editRide">{{ ridePay.highestTotalPay }}</span>
                        <el-input v-model="ridePay.highestTotalPay" size="small" v-show="editRide"></el-input>
                        元，电量低于
                        <span v-show="!editRide">{{ ridePay.lowestRideBatteryPower }}</span>
                        <el-input v-model="ridePay.lowestRideBatteryPower" size="small" v-show="editRide"></el-input>
                        %以下禁止骑行
                        <br />
                        <span class="desc">注意：最高封顶为0元时，表示无封顶</span>
                    </p>
                    <p class="text">
                        是否只能在还车点内还车：
                        <span v-show="!editRide" class="mr200">{{ ridePay.mustReturnInFence ? '是' : '否' }}</span>
                        <el-radio-group v-model="mustReturn" v-show="editRide" class="mr200">
                            <el-radio label='是'>是</el-radio>
                            <el-radio label='否'>否</el-radio>
                        </el-radio-group>

                        是否需要提前充值：
                        <span v-show="!editRide">{{ ridePay.ifMustWalletMoneyGTZero ? '是' : '否' }}</span>
                        <el-radio-group v-model="mustMoneyZero" v-show="editRide">
                            <el-radio label='是'>是</el-radio>
                            <el-radio label='否'>否</el-radio>
                        </el-radio-group>
                    </p>
                    <el-button size="mini" @click="saveRide">{{ editRide ? '保存' : '修改' }}</el-button>
                    <el-button size="mini" @click="editRide=false" v-show="editRide">取消</el-button>
                </div>
            </div>
        </div>
        <div class="base-bg">
            <div class="title">
                <span>全局设置</span>
            </div>
            <div class="item" style="padding: 10px 50px">
                <p class="text">
                    品牌名称：<span v-show="!editLogo">{{ logo.logoName }}</span>
                    <el-input v-model="logo.logoName" size="small" v-show="editLogo" style="width: 200px;"></el-input>
                    <el-button size="mini" @click="saveLogo" style="margin-left: 10px;">{{ editLogo ? '保存' : '修改' }}</el-button>
                    <el-button size="mini" @click="editLogo=false" v-show="editLogo">取消</el-button>
                </p>
                <p class="text">
                    分成比例：<span>{{ profitSharePercentage }}</span> %
                </p>
            </div>
            <div class="item">
                <div class="item-title">押金配置</div>
                <p class="text">
                    押金金额：<span v-show="!editDeposit">{{ deposit.payDepositMoney }}</span>
                    <el-input v-model="deposit.payDepositMoney" size="small" v-show="editDeposit"></el-input>
                    元（金额为0，表示免押金）
                </p>
                <p class="text">
                    自动退款：
                    <span v-show="!editDeposit">{{ deposit.ifAutoRefundDepositMoney ? '是' : '否' }}</span>
                    <el-radio-group v-model="autoRefund" v-show="editDeposit">
                        <el-radio label='是'>是</el-radio>
                        <el-radio label='否'>否</el-radio>
                    </el-radio-group>
                </p>
                <el-button size="mini" @click="saveDeposit">{{ editDeposit ? '保存' : '修改' }}</el-button>
                <el-button size="mini" @click="editDeposit=false" v-show="editDeposit">取消</el-button>
            </div>
            <div class="item">
                <div class="item-title" style="margin-left: 0">
                    客服配置
                    <el-button size="mini" @click="dialogVisible = true">添加</el-button>
                </div>
                <el-table
                        v-loading="listLoading"
                        :data="servicePhones"
                        element-loading-text="Loading"
                        border
                        style="margin-top: 10px">
                    <el-table-column label="名称" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.manageAreaName }}
                        </template>
                    </el-table-column>
                    <el-table-column label="手机号码" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.servicePhone  }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="200">
                        <template slot-scope="scope">
                            <el-button type="text" size="mini" @click="delService(scope.row, scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <el-dialog title="添加客服" :visible.sync="dialogVisible" width="400px">
            <div class="info-wrp">
                <el-form ref="form" :model="serviceData" label-width="120px">
                    <el-form-item label="名称：">
                        <el-select v-model="serviceData.manageAreaId" placeholder="选择区域" size="small">
                            <el-option v-for="item in $root.regionOptions" :key="item.id" :label="item.name" :value="item.id" v-if="item.id"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="手机号码：">
                        <el-input v-model="serviceData.phone" style="width: 200px" />
                    </el-form-item>
                    <el-form-item>
                        <el-row>
                            <el-button size=small @click="dialogVisible = false">取消</el-button>
                            <el-button size=small type="primary" @click="addService">确定</el-button>
                        </el-row>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import api from '@/api/parameter'
    export default {
        name: "base-comp",
        data() {
            return {
                region: '',
                listLoading: false,
                editRide: false,
                rideId: '',
                ridePay: {
                    chargingPointFee: 2,
                    chargingPointTime: 30,
                    dispatchFee: 100,
                    highestTotalPay: 60,
                    lowestRideBatteryPower: 20,
                    manageAreaId: '',
                    manageAreaName: '',
                    mustReturnInFence: true,
                    ifMustWalletMoneyGTZero: 0
                },
                mustReturn: '是',
                mustMoneyZero: '否',
                ridePayConfigs: [],
                profitSharePercentage: '',
                editDeposit: false,
                deposit: {
                    ifAutoRefundDepositMoney: true,
                    payDepositMoney: 0
                },
                autoRefund: '是',
                editLogo: false,
                logo: {
                    logoName: ''
                },
                servicePhones: [],
                dialogVisible: false,
                serviceData: {
                    manageAreaId: '',
                    phone: ''
                }
            }
        },
        created() {
            this.getBase()
        },
        methods: {
            getBase() {
                api.getBase().then((res) => {
                    console.log('base：', res)
                    this.logo = res.results.logo
                    this.ridePayConfigs = res.results.ridePayConfigs
                    this.servicePhones = res.results.servicePhones
                    this.deposit = res.results.deposit
                    this.autoRefund = this.deposit.ifAutoRefundDepositMoney ? '是' : '否'

                    // console.log(this.ridePayConfigs[0])
                    this.rideId = this.ridePayConfigs[0].manageAreaId
                    this.ridePay = this.ridePayConfigs[0]
                    this.mustReturn = this.ridePayConfigs[0].mustReturnInFence ? '是' : '否'
                    this.mustMoneyZero = this.ridePayConfigs[0].ifMustWalletMoneyGTZero ? '是' : '否'

                    this.profitSharePercentage = res.results.profitSharePercentage
                }).catch((error) => {
                    console.log(error)
                })
            },
            rideChange(val) {
                this.ridePay = this.ridePayConfigs.filter((item) => item.manageAreaId == val)[0]
            },
            success() {
                this.$message({
                    type: 'success',
                    message: '修改成功'
                })
            },
            saveRide() {
                if(this.editRide) {
                    if(this.ridePay.manageAreaId) {
                        this.ridePay.mustReturnInFence =
                            this.mustReturn=='是' ? this.ridePay.mustReturnInFence=1 : this.ridePay.mustReturnInFence=0
                        this.ridePay.ifMustWalletMoneyGTZero =
                            this.mustMoneyZero=='是' ? this.ridePay.ifMustWalletMoneyGTZero=1 : this.ridePay.ifMustWalletMoneyGTZero=0
                        api.updateRide(this.ridePay).then(res => { this.success() })
                    } else {
                        this.$message({
                            type: 'info',
                            message: '请选择区域'
                        })
                    }
                }
                this.editRide = !this.editRide
            },
            saveDeposit() {
                if(this.editDeposit) {
                    this.deposit.ifAutoRefundDepositMoney =
                        this.autoRefund=='是' ? this.deposit.ifAutoRefundDepositMoney=1 : this.deposit.ifAutoRefundDepositMoney=0
                    api.updateDeposit(this.deposit).then(res => { this.success() })
                }
                this.editDeposit = !this.editDeposit
            },
            saveLogo() {
                if(this.editLogo) {
                    api.updateLogo(this.logo).then(res => { this.success() })
                }
                this.editLogo = !this.editLogo
            },
            addService() {
                api.addPhone(this.serviceData).then(res => {
                    this.$message({ type: 'success', message: '添加成功'})
                })
            },
            delService(data, index) {
                this.servicePhones.splice(index, 1)
                api.delPhone(data).then(res => {
                    this.$message({ type: 'success', message: '删除成功'})
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .base {
        &-bg {
            width: 100%;
            background-color: #fff;
            padding: 20px 25px;
            margin-top: 20px;
            &:first-child {
                margin-top: 0;
            }
            .item {
                background-color: #eeeeee;
                padding: 20px 50px;
                margin-top: 20px;
                &-title {
                    margin-left: -20px;
                }
                .text {
                    line-height: 1;
                    font-size: .95rem;
                    .el-input {
                        width: 60px;
                    }
                    span {
                        color: #f4516c;
                    }
                    .mr200 {
                        margin-right: 200px;
                    }
                    .desc {
                        color: #3e9;
                        font-size: .9rem;
                        padding-top: 2px;
                    }
                }
            }
        }
    }
</style>
