<template>
    <div class="page">
        <div class="tit"
            style="width: 100%;display: flex;justify-content: space-between;padding-right: 30px;align-items: center;">{{
                title }} <el-button type="primary" @click="submitForm" size="medium"
                style="margin-left: auto;">保存</el-button></div>
        <div class="pagecont">
            <div class="left_box">
                <el-form ref="form" :model="form" :rules="rules" label-width="90px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="运营商" prop="deptId" v-if="userName == 'admin'" data-tip="这是运营商选择框">
                                <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true"
                                    placeholder="请选择运营商" />



                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="运营区" prop="areaName" data-tip="这是运营区输入框">
                                <el-input v-model="form.areaName" placeholder="请输入运营区" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="运营个性化图片" prop="picture" label-width="140" data-tip="这是运营个性化图片上传框">
                                <div style="display: flex;flex-wrap: wrap;">
                                    <image-upload :limit="1" :isShowTip="false" v-model="form.picture" />

                                </div>

                            </el-form-item>
                            <div class="tip">用户地图上显示的车辆图标样式</div>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="运营区域" data-tip="这是运营区域选择框">
                                <el-select v-model="form.province" clearable size="small" placeholder="请选择省"
                                    class="filter-item" style="width: 90px" @change="provinceChange($event)">
                                    <el-option v-for="item in form.provinceList" :key="item.name" :label="item.name"
                                        :value="item.name" />
                                </el-select>

                                <el-select v-model="form.city" clearable size="small" placeholder="请选择城市"
                                    class="filter-item" style="width: 100px" @change="cityChange($event)">
                                    <el-option v-for="item in form.cityList" :key="item.name" :label="item.name"
                                        :value="item.name" />
                                </el-select>

                                <el-select v-model="form.county" clearable size="small" placeholder="请选择区县"
                                    class="filter-item" style="width: 100px">
                                    <el-option v-for="item in form.countyList" :key="item.name" :label="item.name"
                                        :value="item.name" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="运营时间" prop="areaTime">
                        <div style="display: flex;flex-wrap: wrap;">
                            <el-select v-model="form.areaTime" placeholder="请选择运营时间" style="width: 100%;">
                                <el-option v-for="item in dictList" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                            <div class="tip">运营区外的时间用户无法解锁骑行</div>
                        </div>

                    </el-form-item>
                    <el-row v-if="form.areaTime == 2">
                        <el-col :span="18">
                            <el-form-item label="自定义运营时间" label-width="140px" data-tip="这是自定义运营时间选择框">
                                <el-time-picker v-model="form.areaTimeStart" value-format="HH:mm:ss" placeholder="开始时间">
                                </el-time-picker>
                                <el-time-picker arrow-control v-model="form.areaTimeEnd" value-format="HH:mm:ss"
                                    placeholder="结束时间">
                                </el-time-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="20">
                            <el-form-item label="自定义客服" prop="customService" label-width="120" class="switch-item">
                                <el-switch v-model="form.customService" class="drawer-switch" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div v-if="form.customService == '1'">
                        <el-row v-for="(service, index) in customServices" :key="index">
                            <el-col :span="7">
                                <el-form-item :label="'自定义客服名称' + (index + 1)" :prop="'serviceName' + index"
                                    label-width="80">
                                    <el-input v-model="service.name" placeholder="请输入自定义客服名称" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="7" style="margin-left: 20px;">
                                <el-form-item label="电话" :prop="'servicePhone' + index" label-width="80">
                                    <el-input v-model="service.phone" placeholder="请输入客服电话" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="4" style="margin-top: 5px;margin-left: 10px;">
                                <el-button type="primary" @click="addService"
                                    v-if="index === customServices.length - 1 && customServices.length < 3">添加</el-button>
                                <el-button type="danger" @click="removeService(index)" v-if="index > 0">删除</el-button>
                            </el-col>
                        </el-row>
                    </div>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="实名认证" label-width="120" class="switch-item">
                                <el-switch v-model="form.authentication" class="drawer-switch" />
                            </el-form-item>
                            <div class="tips">开启后用户骑行前必须先进行实名认证才可使用</div>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="是否开启押金抵扣" label-width="120" class="switch-item">
                                <el-switch v-model="form.isDepositDeduction" class="drawer-switch" />
                            </el-form-item>
                            <div class="tips">关闭:用户需对订单付费后方可退还押金，开启:押金可以直接抵扣订单金额付款</div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="还车是否拍照审核" label-width="120" class="switch-item">
                                <el-switch v-model="form.returnVerify" class="drawer-switch" />
                            </el-form-item>
                            <div class="tips">开启后则需用户拍摄视频后审核订单方可退还押金</div>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="短信通知服务" label-width="120" class="switch-item">
                                <el-switch v-model="form.msgSwitch" class="drawer-switch" />
                            </el-form-item>
                            <div class="tips">开启短信通知，短信费用0.1元/条，从余额中扣除</div>
                        </el-col>

                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="强制停车点还车" label-width="120" class="switch-item">
                                <el-switch v-model="form.parkingReturn" class="drawer-switch" />
                            </el-form-item>
                            <div class="tips">开启则必须在停车点才可还车，停车点存在误差</div>
                        </el-col>
                        <el-col :span="12" v-if="form.parkingReturn == false">
                            <el-form-item label="运营区外还车" label-width="120" class="switch-item">
                                <el-switch v-model="form.areaOutReturn" class="drawer-switch" />
                            </el-form-item>
                            <div class="tips">开启后可以在运营区范围外还车</div>
                        </el-col>
                    </el-row>

                    <el-row v-if="form.parkingReturn == false">
                        <el-col :span="12">
                            <el-form-item label="停车点外还车调度" label-width="120" class="switch-item">
                                <el-switch v-model="form.parkingOutDispatch" class="drawer-switch" />
                            </el-form-item>
                            <div class="tips">开启后在停车点外还车会收取调度费</div>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="运营区外还车调度" label-width="120" class="switch-item">
                                <el-switch v-model="form.areaOutDispatch" class="drawer-switch" />
                            </el-form-item>
                            <div class="tips">开启后在运营区外还车会收取调度费</div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="运营区外调度费" label-width="120" class="switch-item">
                                <el-input-number style="width: 100%" v-model="form.dispatchFee"
                                    placeholder="车辆超出运行区外的调度费用"></el-input-number>
                            </el-form-item>
                            <div class="tips">设置车辆超出运营区外产生的调度费用</div>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="停车点外调度费" label-width="120" class="switch-item">
                                <el-input-number style="width: 100%" v-model="form.vehicleManagementFee"
                                    placeholder="车辆在运营区内但没在停车区产生的调度费用"></el-input-number>
                            </el-form-item>
                            <div class="tips">设置车辆超出停车点外产生的调度费用</div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="还车误差（米）" label-width="120" class="switch-item">
                                <el-input-number v-model="form.error" placeholder="还车误差"></el-input-number>
                            </el-form-item>
                            <div class="tips">允许用户在规划的停车点外多少米还车</div>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="禁行区内断电" label-width="120" class="switch-item">
                                <el-switch v-model="form.noRidingOutage" class="drawer-switch" />
                            </el-form-item>
                            <div class="tips">开启后当进入禁行区内将进行断电</div>
                        </el-col>

                    </el-row>
                    <el-row>


                        <el-col :span="12">
                            <el-form-item label="运营区域外断电" label-width="120" class="switch-item">
                                <div style="display: flex;flex-wrap: wrap;">
                                    <el-switch v-model="form.areaOutOutage" class="drawer-switch" />

                                </div>

                            </el-form-item>
                            <div class="tips">开启后当进入运营区域外内将进行断电</div>
                        </el-col>
                         <el-col :span="12">
                            <el-form-item label="骑行押金" label-width="120" class="switch-item" prop="deposit">
                                <el-input-number style="width: 100%" v-model="form.deposit"
                                    placeholder="骑行前需要充值的押金"></el-input-number>
                            </el-form-item>
                            <div class="tips">设置骑行前需要缴纳的押金金额</div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="收费方式" label-width="120" class="switch-item"  prop="ruleIds">
                                <el-select v-model="form.ruleIds" multiple placeholder="请选择收费方式" >
                                    <el-option v-for="item in ruleOptions" :key="item.ruleId" :label="item.name"
                                        :value="item.ruleId"></el-option>
                                </el-select>
                            </el-form-item>
                            <div class="tips">选择在收费方式菜单当中设置好的收费套餐(可多选)</div>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="低于电量（%）不得骑行" label-width="120" class="switch-item">
                                <el-input-number style="width: 100%" v-model="form.undercharge"
                                    placeholder="低于电量（%）不得骑行"></el-input-number>
                            </el-form-item>
                            <div class="tips">当车辆电量低于多少时无法解锁用车</div>
                        </el-col>
                    </el-row>
                    <el-row>

                        <el-col :span="12">
                            <el-form-item label="最大预约时间(分)" label-width="120" class="switch-item">
                                <el-input-number style="width: 100%" v-model="form.timeoutMinutes"
                                    placeholder="车辆可最长预约多少分钟"></el-input-number>
                            </el-form-item>
                            <div class="tips">设置车辆的最大可以预约时间</div>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="预约服务费（元）" label-width="120" class="switch-item">
                                <el-input-number style="width: 100%" v-model="form.appointmentServiceFee"
                                    placeholder="预约时每十分钟的计费"></el-input-number>
                            </el-form-item>
                            <div class="tips">设置车辆预约时每十分钟产生的费用</div>
                        </el-col>
                    </el-row>


                    <el-row>
                        <el-col :span="15">
                            <el-form-item label="电量低于多少值自动生成换电订单" label-width="120" class="switch-item"
                                prop="autoReplacementOrder">
                                <el-input-number style="width: 50%" v-model="form.autoReplacementOrder"
                                    placeholder="电量低于多少值自动生成换电订单"></el-input-number>
                            </el-form-item>
                            <div class="tips">设置车辆电量低于多少时自动生成的换电维护工单</div>
                        </el-col>

                    </el-row>
                </el-form>
            </div>
            <div class="right_box">
                <div class="right_tit">弹窗公告</div>
                <editor v-model="form.agreement" :min-height="192" />
                <div class="right_tit">电子围栏设置</div>
                <area-map :key="key" v-model="form.boundaryStr" :dataId="form.areaId" :pathList="form.boundaryStr"
                    :lon="form.longitude" :lat="form.latitude" @center="center" @mapList="mapList" />
                <div class="right_tit">运营区经纬度</div>
                <el-row>
                    <el-col :span="11">
                        <el-input v-model="form.longitude" placeholder="请输入经度" disabled />
                    </el-col>
                    <el-col :span="11" style="margin-left: 20px;">
                        <el-input v-model="form.latitude" placeholder="请输入纬度" disabled />
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>


<script>
import { listArea, getArea, delArea, addArea, updateArea, updateArea2 } from "@/api/system/area";
import AreaMap from "@/components/AreaMap";
import { listFee } from "@/api/system/fee";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getDistrictList } from "@/api/common/common";
import { deptTreeSelect } from '@/api/system/user'


export default {
    components: { AreaMap, Treeselect },
    dicts: ['et_operating_area_status', 'et_operating_area_time', 'et_business_switch'],
    data() {
        return {
            dictList: null,
            loading: true,
            ids: [],
            single: true,
            multiple: true,
            showSearch: true,
            total: 0,
            dateRange: [],
            customService: false,
            ruleOptions: [],
            provinceList: [],
            cityList: [],
            countyList: [],
            CITY: [],
            XIAN: [],
            areaList: [],
            userName: null,
            deptOptions: undefined,
            title: "新增运营区",
            open: false,
            mapopen: false,
            key: 0,
            customServices: [
                { name: '', phone: '' }
            ],
            queryParams: {
                pageNum: 1,
                pageSize: 50,
                areaName: null,
            },
            form: {
                status: '1',
                province: '',
                city: '',
                county: '',
                provinceList: [],
                cityList: [],
                countyList: [],
            },
            rules: {
                areaName: [{ required: true, message: "运营区域不能为空", trigger: "blur" }],
                autoReplacementOrder: [{ required: true, message: "最低电量不能为空", trigger: "blur" }],
                deptId: [{ required: true, message: "运营商不能为空", trigger: "blur" }],
                 // ruleIds: [{ required: true, message: "收费方式不能为空", trigger: "blur" }],
                   deposit: [{ required: true, message: "骑行押金不能为空", trigger: "blur" }],

            },
        }
    },
    created() {
        const areaId = this.$route.params && this.$route.params.areaId;
        if (areaId) {
            this.getArea(areaId);
        }else{
            this.reset()
        }
        this.getCityList();
        this.userName = this.$store.state.user.name;
        this.getDeptTree();

        this.dictList = this.dict.type.et_operating_area_time
        console.log(this.dictList, 'dictdict');
    },
    methods: {
    reset() {
      this.form = {
        areaTime:'1',
        areaId: null,
        areaName: null,
        boundaryStr: null,
        longitude: null,
        latitude: null,
        // parkingPoint: null,
        agreement: '<p><strong style=\\"color: rgb(68, 68, 68);\\">亲爱的用户，为了确保您的骑行安全，</strong></p><p><strong style=\\"color: rgb(68, 68, 68);\\">请务必遵守以下骑行提示： </strong></p><p><span style=\\"color: rgb(136, 136, 136);\\">仅限16岁及以上用户使用。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">为确保安全，后座不允许载人。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">请务必佩戴安全头盔，保护自身安全。 </span></p><p><span style=\\"color: rgb(136, 136, 136);\\">注意道路状况，避开坑洼，小心骑行。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">﻿请在规定的地点还车，避免随意停放。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">不逆行、不闯红灯，遵守所有交通法规。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">骑行时不要使用手机，保持注意力集中。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">避免急刹车和急转弯，保持适当的车速。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">夜间骑行时，确保车灯和反光标识正常。</span></p><p><br></p><p><strong style=\\"color: rgb(68, 68, 68);\\">紧急情况处理：</strong></p><p><span style=\\"color: rgb(136, 136, 136);\\">如有紧急情况，请及时拨打客服电话。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">感谢您的理解与配合，祝您骑行愉快。</span></p>',
        createBy: null,
        createTime: null,
        status: '1',
        deptId: null,
        contact: null,
        phone: null,
        autoReplacementOrder: 10,
        remark: null,
        province: null,
        city: null,
        county: null,
        provinceList: [],
        cityList: [],
        countyList: [],
        ruleIds: [],
        areaOutOutage: true,
        parkingOutDispatch: true,
        areaOutDispatch: true,
        noRidingOutage: true,
        authentication: true,
        msgSwitch: false,
        parkingReturn: true,
        areaOutReturn: true,
        isDepositDeduction: true,
        returnVerify: false,
        deposit: 200,
        customService: true,
        undercharge: 10,
        dispatchFee:10,
        vehicleManagementFee:10,
        error:5,
        timeoutMinutes:30,
        appointmentServiceFee:2,





      };
      this.resetForm("form");
    },
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    const { cityList, countyList, provinceList, ...rest } = this.form;

                    // 将 rest 对象中的属性赋值给 data
                    let data = { ...rest };
                    console.log("this.form=================", data)
                    data.customService = data.customService ? "1" : "0";
                    data.areaOutOutage = data.areaOutOutage ? "1" : "0";
                    data.parkingOutDispatch = data.parkingOutDispatch ? "1" : "0";
                    data.areaOutDispatch = data.areaOutDispatch ? "1" : "0";
                    data.noRidingOutage = data.noRidingOutage ? "1" : "0";
                    data.authentication = data.authentication ? "1" : "0";
                    data.msgSwitch = data.msgSwitch ? "1" : "0";
                    data.parkingReturn = data.parkingReturn ? "1" : "0";
                    data.areaOutReturn = data.areaOutReturn ? "1" : "0";
                    data.isDepositDeduction = data.isDepositDeduction ? "1" : "0";
                    data.returnVerify = data.returnVerify ? "1" : "0";
                    if (data.isDepositDeduction === '1' && data.returnVerify === '1') {
                        this.$modal.msgError("押金抵扣和拍照审核不能同时开启");
                        return
                    }
                    this.customServices.forEach((service, index) => {
                        data[`serviceName${index + 1}`] = service.name;
                        data[`servicePhone${index + 1}`] = service.phone;
                    });
                    if (data.isDepositDeduction === '1' && data.returnVerify === '1') {
                        this.$modal.msgError("押金抵扣和拍照审核不能同时开启");
                        return
                    }
                    if(data.serviceName1==''&&data.servicePhone1==''){
                         this.$modal.msgError("最少添加一个客服电话");
                          return
                    }
                    if (this.form.areaId != null) {
                        updateArea2({ areaId: this.form.areaId, boundary: this.form.boundary, boundaryStr: this.form.boundaryStr }).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.mapopen = false
                            this.getList();
                        });
                    } else {
                        addArea(data).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;

                            this.getList();
                        });
                    }
                    // console.log(data, 'data without cityList, countyList, provinceList');
                    // console.log(this.form,'formformformformform');
                    if (this.form.areaId != null) {
                        updateArea(data).then(response => {

                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.mapopen = false
                            this.getList();
                        });
                    } else {
                        addArea(data).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;

                            this.getList();
                        });
                    }
                }
            });
        },
        submitForm2() {
            this.$refs["form"].validate(valid => {
                if (valid) {

                }
            });
        },
        addService() {
            if (this.customServices.length < 3) {
                this.customServices.push({ name: '', phone: '' });
            }
        },
        removeService(index) {

            if (index > 0 && this.customServices.length > 1) {
                this.$delete(this.customServices, index);
                this.$set(this.form, `serviceName${index + 1}`, '');
                this.$set(this.form, `servicePhone${index + 1}`, '');
            }
        },
        getArea(areaId) {
            getArea(areaId).then(response => {
                this.form = response.data;
                this.form.ruleIds = response.ruleIds;
                response.data.customService == "1" ? this.form.customService = true : this.form.customService = false;
                response.data.areaOutOutage == "1" ? this.form.areaOutOutage = true : this.form.areaOutOutage = false;
                response.data.parkingOutDispatch == "1" ? this.form.parkingOutDispatch = true : this.form.parkingOutDispatch = false;
                response.data.areaOutDispatch == "1" ? this.form.areaOutDispatch = true : this.form.areaOutDispatch = false;
                response.data.noRidingOutage == "1" ? this.form.noRidingOutage = true : this.form.noRidingOutage = false;
                response.data.authentication == "1" ? this.form.authentication = true : this.form.authentication = false;
                response.data.msgSwitch == "1" ? this.form.msgSwitch = true : this.form.msgSwitch = false;
                response.data.parkingReturn == "1" ? this.form.parkingReturn = true : this.form.parkingReturn = false;
                response.data.areaOutReturn == "1" ? this.form.areaOutReturn = true : this.form.areaOutReturn = false;
                response.data.isDepositDeduction == "1" ? this.form.isDepositDeduction = true : this.form.isDepositDeduction = false;
                response.data.returnVerify == "1" ? this.form.returnVerify = true : this.form.returnVerify = false;

                // 初始化 customServices 数组
                this.customServices = [];
                for (let i = 1; i <= 3; i++) {
                    if (response.data[`serviceName${i}`] || response.data[`servicePhone${i}`]) {
                        this.customServices.push({
                            name: response.data[`serviceName${i}`] || '',
                            phone: response.data[`servicePhone${i}`] || ''
                        });
                    }
                }

                // 如果 customServices 为空，添加一个默认的服务
                if (this.customServices.length === 0) {
                    this.customServices.push({ name: '', phone: '' });
                }

                this.title = "修改运营区";
                this.key++;


            });
        },
        cityChange(that) {
            let countyCode = 0
            let cityname = ''
            let newCountyArry = []
            this.form.cityList.forEach((item, index) => {
                if (item.name == that) {
                    countyCode = item.id
                    cityname = item.name
                }
            })
            if (countyCode) {
                this.form.countyList = []
                this.XIAN.forEach((item, index) => {
                    if (item.code == countyCode && item.cityCountyName == cityname) {
                        this.form.countyList.push(item)
                    }
                })
            }
        },
        provinceChange(that) {
            // 根据选中省，匹配市
            let cityCode = 0
            let newCityArry = []
            this.form.provinceList.forEach((item, index) => {
                if (item.name == that) {
                    cityCode = item.code
                }
            })
            // console.log(cityCode)
            if (cityCode) {
                this.form.cityList = []
                this.CITY.forEach((item, index) => {
                    if (item.code == cityCode) {
                        this.form.cityList.push(item)
                    }
                })  /* 市匹配成功*/
            }
        },
        getCityList() {
            listFee({ areaId: this.form.areaId }).then(response => {
                    this.ruleOptions = response.rows;

                });
            getDistrictList().then(res => {
                this.form.provinceList = JSON.parse(res.data)
                // console.log("provinceList======"+JSON.stringify(this.form.provinceList))
                // this.form.provinceList = res.data.districts[0].districts  /* 省*/
                /* 进行遍历赋值*/
                /* 市区和县区*/
                let newProvince = this.form.provinceList
                for (let i = 0; i < newProvince.length; i++) {              /* 省级*/
                    for (let j = 0; j < newProvince[i].districts.length; j++) {       /* 市级*/
                        let city = newProvince[i].districts[j].name
                        this.CITY.push({ id: j + 1, name: city, code: i + 1 })
                        for (let k = 0; k < newProvince[i].districts[j].districts.length; k++) {/* 县级*/
                            let xian = newProvince[i].districts[j].districts[k].name
                            this.XIAN.push({ id: k + 1, name: xian, code: j + 1, cityCountyName: city })
                        }
                    }
                }
                for (let m = 0; m < newProvince.length; m++) {
                    newProvince[m] = { ...newProvince[m], ...{ code: m + 1 } }
                }
                // console.log("newProvince======"+JSON.stringify(newProvince))
                this.form.provinceList = newProvince
                // this.loading = true
                console.log(console.log(this.form.provinceList, ' this.form.provinceList'))
            })
        },
        center(data) {
            this.form.longitude = data.lng;
            this.form.latitude = data.lat;
        },
        mapList(data) {
            let mapListJson = JSON.stringify(data);
            console.log("mapListJson:" + mapListJson);
            this.form.boundaryStr = mapListJson;
        },
        getDeptTree() {
            deptTreeSelect().then(response => {
                this.deptOptions = response.data;
            });
        },
    }
}
</script>

<style scoped lang="scss">
::v-deep .el-form-item__label {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    height: 36px;
}

::v-deep .el-form-item__content {
    display: flex;
    align-items: center;
}

::v-deep .el-input .el-input__inner {
    height: 36px !important;
    display: flex;
    align-items: center;
}

::v-deep .el-input-number {
    display: flex;
    align-items: center;
    height: 36px; // 这里设置为和其他输入框一致的高度
}

::v-deep .el-input-number__input {
    height: 36px !important;
    display: flex;
    align-items: center;
}

::v-deep .el-input-number__increase,
::v-deep .el-input-number__decrease {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px !important;
}

.tip {
    font-size: 14px;
    color: #888;
    margin-top: 5px;
}

.tips {
    font-size: 14px;
    color: #888;
    margin-top: -10px;
}

::v-deep .el-form-item__content::after {
    content: attr(data-tip);
    display: block;
    font-size: 14px;
    color: #888;
    margin-top: 5px;
}

.page {
    padding: 10px;

    .tit {
        font-size: 30px;
        font-weight: 700;
    }

    .pagecont {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;

        .left_box {
            padding: 10px;
            width: 53%;
            border: 1px solid #ccc;
            border-radius: 10px;
        }

        .right_box {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 10px;
            margin-left: 1%;
            width: 44%;

            .right_tit {
                margin-bottom: 20px;
                font-size: 24px;
                color: #000;
                margin-top: 20px;
            }

            // background: yellow;
        }
    }
}

.switch-item {
    margin-top: 20px;
    display: flex;
    align-items: center;



    /* 垂直居中 */
    // justify-content: flex-start;
    .el-switch {
        margin-left: 10px;
        /* 根据需要调整间距 */
    }
}
</style>
