@extends('layouts.base')
@section('title', '基础设置')
@section('content')
    <link rel="stylesheet" href="{{resource_get('plugins/phone-bill-pro/views/backend/index.css')}}">
    <style>
        .panel {
            margin-bottom: 10px !important;
            padding-left: 20px;
            border-radius: 10px;
        }

        .panel .active a {
            background-color: #29ba9c !important;
            border-radius: 18px !important;
            color: #fff;
        }

        .panel a {
            border: none !important;
            background-color: #fff !important;
        }

        .content {
            background: #eff3f6;
            padding: 10px !important;
        }

        .con {
            padding-bottom: 20px;
            position: relative;
            border-radius: 8px;
            min-height: 100vh;
            background-color: #fff;
        }

        .con .setting .block {
            padding: 10px;
            background-color: #fff;
            border-radius: 8px;
        }

        .con .setting .block .title {
            font-size: 18px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .confirm-btn {
            width: calc(100% - 266px);
            position: fixed;
            bottom: 0;
            right: 0;
            margin-right: 10px;
            line-height: 63px;
            background-color: #ffffff;
            box-shadow: 0px 8px 23px 1px rgba(51, 51, 51, 0.3);
            background-color: #fff;
            text-align: center;
        }

        b {
            font-size: 14px;
        }
    </style>
    <div id='app'>
        <div class="con">
            <div class="setting">
                <el-form ref="form" :model="form" label-width="15%">
                    <div class="block">
                        <div class="title"><span
                                    style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span><b>基础设置</b>
                        </div>
                        <el-card shadow="always"
                                 style="border:1px solid #b3d8ff;color:#333;background:#ecf5ff;line-height:28px;font-weight:600;margin-bottom:50px;">
                            <span style="font-size: 18px;">重要提示：</span><br>
                            <span style="color: red">
                                1、后台系统-系统工具-HTTPS设置中的域名必须设置，未设置会导致退款失败等问题<br>
                                2、该功能使用第三方话费慢充接口，第三方收费标准、服务政策、业务流程等由第三方对接<br>
                                3、我司不承诺该接口可以长期使用，因接口和第三方公司原因导致的任何问题，我司不承担任何责任！<br>
                                4、请不要随意改成appKey和appSecret，可能会导致充值中的订单充值失败
                                </span>
                        </el-card>
                        <el-form-item label="话费充值">
                            <template>
                                <el-switch v-model="form.is_open" :active-value="1" :inactive-value="0">
                                </el-switch>
                            </template>
                        </el-form-item>
<!-- 
                        <el-form-item label="话费充值">
                            <template>
                            <el-radio-group v-model="radio">
                                <el-radio :label="3">36鲸</el-radio>
                                <el-radio v-for="(item,index) in form.channel_list" :label="item.id">[[item.name]]</el-radio>
                            </el-radio-group>


                                <el-tabs v-model="activeName" type="card">
                                    <el-tab-pane label="36鲸" name="first">
                                        <el-form label-width="80px">
                                            <el-form-item label="优先级别">
                                                <template>
                                                    <el-input-number v-model="form.priority" controls-position="right" :min="1"></el-input-number>
                                                </template>
                                            </el-form-item>
                                            <el-form-item label="appKey">
                                                <template>
                                                    <el-input v-model="form.app_key" placeholder="请输入第三方接口提供的appKey"></el-input>
                                                </template>
                                            </el-form-item>
                                            <el-form-item label="appSecret">
                                                <template>
                                                    <el-input v-model="form.app_secret" placeholder="请输入第三方接口提供的appSecret"></el-input>
                                                </template>
                                            </el-form-item>
                                        </el-form>
                                    </el-tab-pane>
                                    <el-tab-pane v-for="(item,index) in form.channel_list" :label="item.name">
                                        <el-form label-width="80px">
                                            <el-form-item label="优先级别">
                                                <template>
                                                    <el-input-number v-model="item.priority" controls-position="right" :min="1"></el-input-number>
                                                </template>
                                            </el-form-item>
                                            <el-form-item v-if="item.show_open" label="是否启用">
                                                <template>
                                                    <el-switch v-model="item.is_open" :active-value="1" :inactive-value="0">
                                                    </el-switch>
                                                </template>
                                            </el-form-item>
                                            <template v-if="index=='anda-energy'">
                                                <div class="tip">安达新能源：①只支持快充，每个手机号码每天限充1单</div>
                                                <div class="tip">②每个手机号码每天限充200元，每月限充500元</div>
                                                <div class="tip">③暂不支持新号段、虚拟号段、携号转网号段充值</div>
                                            </template>
                                        </el-form>
                                    </el-tab-pane>
                                </el-tabs>
                            </template>
                        </el-form-item> -->

                        <el-form-item label="话费充值" v-if="form.channel_list">
                            <el-radio-group v-model="channel_type" @change="changeChannel">
                                <el-radio v-for="(item,index) in form.channel_list" :label="index">[[item.name]]</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <template v-if="channel_type == 'first_36J'">
                            <el-form-item label="appKey">
                                <el-input v-model="form.app_key" placeholder="请输入第三方接口提供的appKey"></el-input>
                            </el-form-item>
                            <el-form-item label="appSecret">
                                <el-input v-model="form.app_secret" placeholder="请输入第三方接口提供的appSecret"></el-input>
                            </el-form-item>
                        </template>

                        

                        <!-- <el-form-item label="通道策略">
                            <template>
                                <el-switch v-model="form.is_strategy" :active-value="1" :inactive-value="0">
                                </el-switch>
                                <br>
                                <span>开启后，用户充值话费按照通道优先级别提交，前面通道充值失败后自动提交下一通道，如果都失败，再关闭订单、自动退款</span>
                            </template>
                        </el-form-item> -->

                        <el-form-item label="充值失败不退款">
                            <template>
                                <el-switch v-model="form.is_no_refund" :active-value="1" :inactive-value="0">
                                </el-switch>
                            </template>
                        </el-form-item>

                        <el-form-item label="默认下单地址">
                            <template>
                                <el-switch
                                        v-model="form.is_default_address"
                                        :active-value="1"
                                        :inactive-value="0"
                                >
                                </el-switch>
                            </template>
                        </el-form-item>

                        <el-form-item label="">
                            <el-input v-model="form.username" placeholder="默认下单用户姓名" style="width:70%;"></el-input>
                        </el-form-item>

                        <el-form-item label="">
                            <el-input v-model="form.mobile" placeholder="默认下单用户手机号" style="width:70%;"></el-input>
                        </el-form-item>

                        <el-form-item label="">
                            <el-select v-model="form.province_id" placeholder="省" clearable @change="changeProvince"
                                       style="width:15%">
                                <el-option v-for="item in province_list" :key="item.id" :label="item.areaname"
                                           :value="item.id"></el-option>
                            </el-select>
                            <el-select v-model="form.city_id" placeholder="市" clearable @change="changeCity"
                                       style="width:15%">
                                <el-option v-for="item in city_list" :key="item.id" :label="item.areaname"
                                           :value="item.id"></el-option>
                            </el-select>
                            <el-select v-model="form.district_id" placeholder="区" clearable @change="changeDistrict"
                                       style="width:15%">
                                <el-option v-for="item in district_list" :key="item.id" :label="item.areaname"
                                           :value="item.id"></el-option>
                            </el-select>
                            <el-select v-model="form.street_id" placeholder="街道" clearable style="width:15%">
                                <el-option v-for="item in street_list" :key="item.id" :label="item.areaname"
                                           :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="">
                            <el-input v-model="form.address" placeholder="详细地址" style="width:70%;"></el-input>
                        </el-form-item>

                        <div class="confirm-btn">
                            <el-button type="primary" @click="submitForm('form')">提交</el-button>
                        </div>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return {
                    form: {
                        is_open: 0,
                        is_no_refund:0,
                        province_id: '',
                        city_id: '',
                        district_id: '',
                        street_id: '',
                        priority: 1,
                        is_strategy: 0,
                        channel_list: {},
                    },
                    submit_url: '',
                    channel_type: '',
                    showVisible: false,
                    loading: false,
                    province_list: [],
                    city_list: [],
                    district_list: [],
                    street_list: [],
                    rules: {},
                    activeName:'first',
                }
            },
            created() {

            },
            mounted() {
                this.initProvince();
                this.getData();
            },
            methods: {
                getData() {
                    let loading = this.$loading({
                        target: document.querySelector(".content"),
                        background: 'rgba(0, 0, 0, 0)'
                    });
                    this.$http.post('{!! yzWebFullUrl('plugin.phone-bill-pro.backend.set.basic-info') !!}').then(function (response) {
                        if (response.data.result) {
                            this.form = response.data.data.set;
                            this.form.province_id = this.form.province_id ? this.form.province_id : '';
                            this.form.city_id = this.form.city_id ? this.form.city_id : '';
                            this.form.district_id = this.form.district_id ? this.form.district_id : '';
                            this.form.street_id = this.form.street_id ? this.form.street_id : '';
                            if (this.form.province_id > 0) {
                                this.initCity(this.form.province_id);
                            }
                            if (this.form.city_id > 0) {
                                this.initDistrict(this.form.city_id);
                            }
                            if (this.form.district_id > 0) {
                                this.initStreet(this.form.district_id);
                            }
                            if (this.form.channel_list) {
                                let channelList = this.form.channel_list;
                                let check = Object.keys(channelList).find(item => channelList[item].is_open == 1);
                                this.channel_type = check;
                            }
                            loading.close();
                        } else {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                        }
                        loading.close();
                    }, function (response) {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                        loading.close();
                    });
                },
                submitForm(formName) {
                    let that = this;
                    let json = this.form;
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let loading = this.$loading({
                                target: document.querySelector(".content"),
                                background: 'rgba(0, 0, 0, 0)'
                            });
                            this.$http.post('{!! yzWebFullUrl('plugin.phone-bill-pro.backend.set.basic-save') !!}', {set: json}).then(response => {
                                if (response.data.result) {
                                    this.$message({message: response.data.msg, type: 'success'});
                                } else {
                                    this.$message({message: response.data.msg, type: 'error'});
                                }
                                loading.close();
                            }, response => {
                                loading.close();
                            });
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                goBack() {
                    history.go(-1)
                },
                changeChannel(checkName) {
                    let channelList = this.form.channel_list
                    Object.keys(channelList).forEach(item => {
                        channelList[item].is_open = (item == checkName) ? 1 : 0;
                    });
                },
                initProvince(val) {
                    this.areaLoading = true;
                    this.$http.get("{!! yzWebUrl('area.list.init', ['area_ids'=>'']) !!}" + val).then(response => {
                        this.province_list = response.data.data;
                        this.areaLoading = false;
                    }, response => {
                        this.areaLoading = false;
                    });
                },
                initCity(val) {
                    console.log(val);
                    this.areaLoading = true;
                    this.$http.get("{!! yzWebUrl('area.list', ['parent_id'=>'']) !!}" + val).then(response => {
                        this.city_list = response.data.data;
                        this.areaLoading = false;
                    }, response => {
                        this.areaLoading = false;
                    });
                },
                initDistrict(val) {
                    console.log(val);
                    this.areaLoading = true;
                    this.$http.get("{!! yzWebUrl('area.list', ['parent_id'=>'']) !!}" + val).then(response => {
                        this.district_list = response.data.data;
                        this.areaLoading = false;
                    }, response => {
                        this.areaLoading = false;
                    });
                },
                initStreet(val) {
                    console.log(val);
                    this.areaLoading = true;
                    this.$http.get("{!! yzWebUrl('area.list', ['parent_id'=>'']) !!}" + val).then(response => {
                        this.street_list = response.data.data;
                        this.areaLoading = false;
                    }, response => {
                        this.areaLoading = false;
                    });
                },
                changeProvince(val) {
                    this.city_list = [];
                    this.district_list = [];
                    this.street_list = [];
                    this.form.city_id = "";
                    this.form.district_id = "";
                    this.form.street_id = "";
                    this.areaLoading = true;
                    let url = "<?php echo yzWebUrl('area.list', ['parent_id' => '']); ?>" + val;
                    this.$http.get(url).then(response => {
                        if (response.data.data.length) {
                            this.city_list = response.data.data;
                        } else {
                            this.city_list = null;
                        }
                        this.areaLoading = false;
                    }, response => {
                        this.areaLoading = false;
                    });
                },
                // 市改变
                changeCity(val) {
                    this.district_list = [];
                    this.street_list = [];
                    this.form.district_id = "";
                    this.form.street_id = "";
                    this.areaLoading = true;
                    let url = "<?php echo yzWebUrl('area.list', ['parent_id' => '']); ?>" + val;
                    this.$http.get(url).then(response => {
                        if (response.data.data.length) {
                            this.district_list = response.data.data;
                        } else {
                            this.district_list = null;
                        }
                        this.areaLoading = false;
                    }, response => {
                        this.areaLoading = false;
                    });
                },
                // 区改变
                changeDistrict(val) {
                    console.log(val)
                    this.street_list = [];
                    this.form.street_id = "";
                    this.areaLoading = true;
                    let url = "<?php echo yzWebUrl('area.list', ['parent_id' => '']); ?>" + val;
                    this.$http.get(url).then(response => {
                        if (response.data.data.length) {
                            this.street_list = response.data.data;
                        } else {
                            this.street_list = null;
                        }
                        this.areaLoading = false;
                    }, response => {
                        this.areaLoading = false;
                    });
                },
            },
        })

    </script>
@endsection