<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>
              <!-- <div class="text" style="color:red;">该代理商没设置收费方式，将无法保存数据，请返回运营管理设置收费方式</div> -->
            </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: 20,
        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" },
        ],
      },
    };
  },
  watch: {
    'form.deptId'(newValue, oldValue) {
      console.log('代理商ID变化了:', newValue);
      // this.changedept()
      // 在这里执行值变化后的逻辑
    }
  },

  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: {
    // changedept() {
    //   console.log("111");
    //   listFee({ deptId: this.form.deptId }).then((response) => {
    //     this.ruleOptions = response.rows;
    //   });
    // },
    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++;
        //  listFee({ areaId: this.form.areaId }).then(response => {
        //   this.ruleOptions = response.rows;
        //   this.open = true;
        //   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() {
      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>
