@extends('layouts.base')
@section('title', '禁运地区')
@section('content')
    <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='re_content'>
        @include('layouts.newTabs')
        <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-form-item label="不配送区域">
                            <div style="font-size:12px;font-weight:600;line-height:18px;margin-right: 15px">
                                [[areas]]
                            </div>
                            <el-button size="small" @click="openVisible()">选择区域</el-button>
                            <div style="color:#737373;font-size:12px;">只针对平台自营商品订单，不包括供应商、门店、聚合供应链、供应链中台等</div>
                            <div style="color:#737373;font-size:12px;">酒店地址若选择在禁运区域内，会给予该区域暂不提供服务</div>
                        </el-form-item>
                        <div class="confirm-btn">
                            <el-button type="primary" @click="submit">提交</el-button>
                        </div>
                    </div>
                </el-form>
            </div>
        </div>
        <el-dialog title="请选择地区" :visible.sync="centerDialogVisible" center v-if="showVisible"
                   :before-close="beforeClose">
            <el-tree
                    v-loading="loading"
                    :props="props"
                    node-key="id"
                    :default-checked-keys="area_ids"
                    :default-expanded-keys="province_ids"
                    show-checkbox
                    lazy
                    @check-change="checkAreas"
                    ref="addressTree"
                    :data="treeData"
                    :load="loadNode"
                    style="height:500px;overflow:auto"
            >
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="beforeClose">取 消</el-button>
                <el-button type="primary" @click="saveAreas">确 定</el-button>
            </span>
        </el-dialog>
    </div>
    <script>
        var vm = new Vue({
            el: "#re_content",
            delimiters: ['[[', ']]'],
            data() {
                return {
                    activeName: 'one',
                    form: {},
                    area_ids: [],
                    province_ids: [],
                    areas: '',
                    areaIds: '',
                    provinceIds: '',
                    chooseAreas: [],
                    chooseAreaIds: [],
                    chooseProvinceIds: [],
                    centerDialogVisible: false,
                    showVisible: false,
                    loading: false,
                    treeData: [],
                    props: {
                        label: 'areaname',
                        children: 'children',
                        isLeaf: 'isLeaf'
                    },
                }
            },
            mounted() {
                this.getData()
            },
            methods: {
                getData() {
                    this.$http.post('{!! yzWebFullUrl('plugin.embargoed-area.admin.embargoed-area.get-info') !!}').then(function (response) {
                        if (response.data.result) {
                            if (response.data.data.set) {
                                this.area_ids = response.data.data.set.area_ids;
                                this.province_ids = response.data.data.set.province_ids;
                                this.areas = response.data.data.set.areas;
                            }
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                        }
                    }, function (response) {
                        this.$message({message: response.data.msg, type: 'error'});
                    })
                },
                submit() {
                    let loading = this.$loading({
                        target: document.querySelector(".content"),
                        background: 'rgba(0, 0, 0, 0)'
                    });
                    this.form.area_ids = this.area_ids;
                    this.form.province_ids = this.province_ids;
                    this.form.areas = this.areas;
                    this.$http.post('{!! yzWebFullUrl('plugin.embargoed-area.admin.embargoed-area.edit') !!}', {'express_info': this.form}).then(function (response) {
                        if (response.data.result) {
                            this.$message({message: response.data.msg, type: 'success'});
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                        }
                        loading.close();
                        location.reload();
                    }, function (response) {
                        this.$message({message: response.data.msg, type: 'error'});
                    })
                },
                openVisible() {
                    this.centerDialogVisible = true;
                    this.showVisible = true;
                    this.area_ids.forEach((item, index) => {
                        this.area_ids[index] = Number(item)
                    });
                },
                loadNode(node, resolve) {
                    this.loading = true;
                    if (!node.data.id) {
                        //省份
                        node.data.id = 0;
                        this.$http.get("{!! yzWebUrl('area.list', ['parent_id'=> 0]) !!}").then(response => {
                            response.data.data.forEach(function (province) {
                                province.isLeaf = false;
                            });
                            resolve(response.data.data);

                            this.loading = false;
                        }, response => {
                            console.log(response);
                        });
                    } else {
                        //城市
                        this.$http.get("{!! yzWebUrl('area.list', ['parent_id'=> '']) !!}" + node.data.id).then(response => {
                            //城市没有子节点
                            response.data.data.forEach(function (city) {
                                city.isLeaf = true;
                            })
                            resolve(response.data.data);
                            // 载入数据后,刷新已选中
                            this.loading = false;
                        }, response => {
                            console.log(response);
                        });
                    }
                },
                checkAreas(node, checked, children) {
                    if (node.isLeaf) {
                        return;
                    }
                    if (checked) {
                        if (!this.province_ids) {
                            this.province_ids = [];
                        }
                        this.province_ids.push(node.id)
                    }
                },
                saveAreas() {
                    let areas = [];
                    let area_ids = [];
                    let province_ids = [];
                    this.$refs.addressTree.getCheckedNodes().forEach(function (node) {
                        if (node.level == 1) {
                            province_ids.push(node.id);
                        } else if (node.level == 2) {
                            area_ids.push(node.id);
                            areas.push(node.areaname)
                        }
                    });
                    this.$refs.addressTree.getHalfCheckedNodes().forEach(function (node) {
                        if (node.level == 1) {
                            province_ids.push(node.id);
                        }
                    });
                    this.province_ids = province_ids;
                    this.area_ids = area_ids;
                    this.areas = areas.join(";");
                    this.areaIds = area_ids.join(";");
                    this.provinceIds = province_ids.join(";");
                    this.centerDialogVisible = false
                    this.showVisible = false;
                },
                beforeClose() {
                    this.centerDialogVisible = false;
                    this.showVisible = false;
                },
                handleClose(area) {
                    this.form.areas.splice(this.form.areas.indexOf(area), 1);
                },
            },
        });
    </script>
@endsection