<template>
  <div class="localDelivery-container">
    <div class="item-block">
      <div class="title">同城配送</div>
      <div class="block">
        <el-form
          ref="formDistribution"
          :model="form"
          label-width="160px"
          :rules="rules"
        >
          <el-form-item label="配送方式" prop="distributionType">
            <el-checkbox-group v-model="form.distributionType">
              <el-checkbox
                v-for="(item, index) of checkList"
                :key="item.label + index"
                :label="item.label"
                size="medium"
              >
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
            <div class="tips">开启后将由第三方平台为您配送。</div>
          </el-form-item>
          <div v-if="form.distributionType.includes(2)">
            <el-form-item prop="no3DistributionType">
              <el-checkbox-group
                v-model="form.no3DistributionType"
                class="distribution-group"
              >
                <div
                  :class="['distribution-box', { active: active == index }]"
                  v-for="(item, index) of distributionList"
                  :key="item.label + index"
                  @click.stop.prevent="handleClickImg($event, index)"
                >
                  <el-checkbox
                    :label="item.label"
                    @click.native="stopEvenPropagation($event)"
                    size="medium"
                  >
                    <img
                      class="img"
                      width="89"
                      height="23"
                      :src="item.imgUrl"
                      @click.stop.prevent="handleClickImg($event, index)"
                    />
                  </el-checkbox>
                </div>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item
              label="app_key"
              prop="dadaData.appKey"
              v-if="active == 0"
            >
              <el-input v-model="form.dadaData.appKey"></el-input>
            </el-form-item>
            <el-form-item
              label="app_secret"
              prop="dadaData.appSecret"
              v-if="active == 0"
            >
              <el-input v-model="form.dadaData.appSecret"></el-input>
            </el-form-item>
            <el-form-item
              label="商户ID"
              prop="dadaData.storeId"
              v-if="active == 0"
            >
              <el-input v-model="form.dadaData.storeId"></el-input>
            </el-form-item>
            <el-form-item
              label="门店编码"
              prop="dadaData.shopCode"
              v-if="active == 0"
            >
              <el-input v-model="form.dadaData.shopCode"></el-input>
            </el-form-item>
            <el-form-item label="城市选择" prop="" v-if="active == 0">
              <el-button type="primary" @click="getCity()">获取城市</el-button>
            </el-form-item>
            <el-form-item
              label="配送服务"
              prop="meituanData.distributionOpction"
              v-if="active == 1"
            >
              <el-select
                v-model="form.meituanData.distributionOpction"
                placeholder="请选择配送服务"
              >
                <el-option
                  v-for="(item, index) of distributionOpction"
                  :key="index + item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="AppKey"
              prop="meituanData.appKey"
              v-if="active == 1"
            >
              <el-input v-model="form.meituanData.appKey"></el-input>
            </el-form-item>
            <el-form-item
              label="AppSecret"
              prop="meituanData.appSecret"
              v-if="active == 1"
            >
              <el-input v-model="form.meituanData.appSecret"></el-input>
            </el-form-item>
            <el-form-item
              label="门店ID"
              prop="meituanData.storeId"
              v-if="active == 1"
            >
              <el-input v-model="form.meituanData.storeId"></el-input>
            </el-form-item>
            <el-form-item
              label="支付方式"
              prop="meituanData.storeId"
              v-if="active == 1"
            >
              <el-radio-group v-model="form.meituanData.payType">
                <el-radio :label="0">账期支付</el-radio>
                <el-radio :label="1">余额支付</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="开发者账号（dev_id）"
              prop="sfData.developerAccount"
              v-if="active == 2"
            >
              <el-input
                disabled
                v-model="form.sfData.developerAccount"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="开发者秘钥（dev_key）"
              prop="sfData.devKey"
              v-if="active == 2"
            >
              <el-input disabled v-model="form.sfData.devKey"></el-input>
            </el-form-item>
            <el-form-item
              label="店铺id"
              prop="sfData.storeId"
              v-if="active == 2"
            >
              <el-input v-model="form.sfData.storeId"></el-input>
            </el-form-item>
            <el-form-item
              label="物品类型"
              prop="sfData.goodsType"
              v-if="active == 2"
            >
              <el-select
                v-model="form.sfData.goodsType"
                placeholder="请选择物品类型"
              >
                <el-option
                  v-for="(item, index) of goodsTypeList"
                  :key="index + item.value"
                  :label="item.value"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="商户ID"
              prop="ssData.shopId"
              v-if="active == 3"
            >
              <el-input v-model="form.ssData.storeId"></el-input>
            </el-form-item>
            <el-form-item
              label="App_key（Client_ID）"
              prop="ssData.appKey"
              v-if="active == 3"
            >
              <el-input v-model="form.ssData.appKey"></el-input>
            </el-form-item>
            <el-form-item
              label="App_secret"
              prop="ssData.appSecret"
              v-if="active == 3"
            >
              <el-input v-model="form.ssData.appSecret"></el-input>
            </el-form-item>
            <el-form-item
              label="门店ID"
              prop="ssData.storeId"
              v-if="active == 3"
            >
              <el-input v-model="form.ssData.shopId"></el-input>
            </el-form-item>
            <el-form-item label="appid" prop="uuData.appId" v-if="active == 4">
              <el-input v-model="form.ssData.storeId"></el-input>
            </el-form-item>
            <el-form-item
              label="appkey"
              prop="uuData.appKey"
              v-if="active == 4"
            >
              <el-input v-model="form.ssData.appKey"></el-input>
            </el-form-item>
            <el-form-item
              label="openid"
              prop="uuData.openId"
              v-if="active == 4"
            >
              <el-input v-model="form.ssData.appSecret"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="配送时间买家自选" prop="">
            <el-radio-group v-model="form.isDistribution">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group>
            <div class="tips">
              开启后，买家下单选择同城配送时，可选择配送时间，提交订单后，将在买家备注中显示。
            </div>
          </el-form-item>
          <el-form-item label="自动发货" prop="">
            <el-radio-group
              v-model="form.isAutomaticDelivery"
              class="automatic-delivery-radio"
            >
              <el-radio :label="0">不启用</el-radio>
              <el-radio :label="1">下单后，在营业时间内，自动发货</el-radio>
              <el-radio :label="2" disabled>
                下单后，在自定义时间内，自动发货
              </el-radio>
              <el-radio :label="3">
                下单后，抵达订单配送时间时，自动发货
              </el-radio>
            </el-radio-group>
            <div class="in-advance-block" v-if="form.isAutomaticDelivery == 3">
              <div class="title-block">提前</div>
              <el-input
                class="time-input-block"
                v-model="form.inAdvanceTime"
                placeholder=""
              >
                <label slot="append">分钟</label>
              </el-input>
              <div style="margin-left: 10px">
                进行发货（若默认配送方式为第三方配送，则此时将订单推送至第三方平台）
              </div>
            </div>
            <div class="tips" style="color: #1890ff">
              在自动发货时间内生成的订单自动发货，启用自动发货后，需要在配送管理列表同城配送处设置默认发货方式。
            </div>
            <div
              v-for="(group, groupIndex) of form.weekConfig"
              :key="groupIndex"
            >
              <el-checkbox-group
                v-model="group.weekList"
                v-if="form.isAutomaticDelivery == 2"
              >
                <el-checkbox
                  v-for="(item, index) of group.weekListConfig"
                  :key="item.label + index"
                  :label="item.label"
                  :disabled="item.disabled"
                  @change="handleWeekList"
                >
                  {{ item.name }}
                </el-checkbox>
                <label
                  class="el-checkbox is-checked delect-week"
                  v-if="groupIndex >= 1"
                  @click="delectWeek(groupIndex)"
                >
                  删除
                </label>
              </el-checkbox-group>
              <div
                class="time-list"
                v-for="(item2, index2) of group.timeList"
                :key="index2"
              >
                <div v-if="form.isAutomaticDelivery == 2">
                  <el-time-select
                    v-model="item2.startTime"
                    :picker-options="group.pickerOptions"
                    placeholder="开始时间"
                    :class="group.isError ? 'error' : ''"
                    @change="checkTimeSelect(item2.startTime)"
                  ></el-time-select>
                  <span class="division">-</span>
                  <el-time-select
                    v-model="item2.endTime"
                    :picker-options="group.pickerOptions"
                    placeholder="结束时间"
                    :class="group.isError ? 'error' : ''"
                    @change="checkTimeSelect(item2.endTime)"
                  ></el-time-select>
                  <span
                    class="add"
                    v-show="showAdd(group.timeList.length, index2)"
                    @click="handleAddTime(groupIndex)"
                  >
                    添加
                  </span>
                  <span
                    class="add"
                    v-show="showDelect(group.timeList.length, index2)"
                    @click="handleDelectTime(groupIndex, index2)"
                  >
                    删除
                  </span>
                </div>
              </div>
              <div class="error-msg" v-if="group.errorMsg">
                {{ group.errorMsg }}
              </div>
            </div>
            <div
              class="btn-week"
              v-show="form.isAutomaticDelivery == 2"
              @click="addWeekItem()"
            >
              +添加星期
            </div>
          </el-form-item>
          <div v-if="form.isDistribution == 1">
            <el-form-item label="配送时段" prop="">
              <el-radio-group v-model="form.deliveryPeriod">
                <el-radio :label="0">全天</el-radio>
                <el-radio :label="1" disabled>自定义</el-radio>
              </el-radio-group>
              <div class="tips">
                自定义时间段，请将小程序升级至2.1.0版本及以上才能生效。
                <br />
                所设时间段为可配送时间段，手机端展示时间段会根据细分时段划分展示。
              </div>
            </el-form-item>
            <el-form-item label="细分时段" prop="">
              <el-radio-group v-model="form.subdivisionPeriod">
                <el-radio :label="1">天</el-radio>
                <el-radio :label="60">小时</el-radio>
                <el-radio :label="30">30分钟</el-radio>
                <el-radio :label="15">15分钟</el-radio>
              </el-radio-group>
              <div class="tips">
                手机端选择送达时间，按时间段细分
                <span class="example">
                  查看示例
                  <div class="example-img-box">
                    <img
                      class="example-img"
                      :src="require('@/assets/time-selector.jpg')"
                    />
                  </div>
                </span>
              </div>
            </el-form-item>
            <el-form-item label="预约下单" prop="">
              <el-radio-group v-model="form.orderAppointment.inAdvance">
                <el-radio :label="0">无需提前</el-radio>
                <el-radio :label="1">提前</el-radio>
              </el-radio-group>
              <el-input
                class="orderAppointment-time-input"
                v-model="form.orderAppointment.orderAppointmentTimeTime"
                placeholder="请输入内容"
                :disabled="form.orderAppointment.inAdvance == 0"
              ></el-input>
              <el-select
                class="orderAppointment-time-select"
                v-model="form.orderAppointment.orderAppointmentTimeType"
                placeholder="请选择"
                :disabled="form.orderAppointment.inAdvance == 0"
              >
                <el-option
                  v-for="item in periodOpction"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <div class="tips">
                按天时为自然天，不管当前几点，只能下明天以后的订单。
              </div>
            </el-form-item>
            <el-form-item label="最长预约" prop="">
              <el-radio-group v-model="form.maxAppointment.maxAppointmentType">
                <el-radio :label="0">只能当天下单</el-radio>
                <el-radio :label="1">可预约</el-radio>
              </el-radio-group>
              <el-input
                class="maxAppointment-input"
                v-model="form.maxAppointment.maxAppointmentSky"
                placeholder="请输入内容"
                :disabled="form.maxAppointment.maxAppointmentType == 0"
              ></el-input>
              天内下单
              <div class="tips">
                如，可预约7天内订单，那么就是今天+未来6天内的送达时间可以让买家选择
              </div>
            </el-form-item>
            <el-form-item label="下单时默认选择" prop="">
              <el-radio-group v-model="form.orderDefault">
                <el-radio :label="0">默认不选中</el-radio>
                <el-radio :label="1">当前时间最近可用时间段</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div class="item-block">
      <div class="title">配送区域设置</div>
      <div class="block">
        <el-form ref="form" :model="form" label-width="160px" :rules="rules">
          <el-form-item label="店铺地址" prop="shopAddress">
            <el-input
              class="shop-address"
              v-model="form.shopAddress"
              disabled
            ></el-input>
            <label class="btn-amend" @click="handleSkip()">修改</label>
            <div class="">配送区域以此地址为起点进行距离计算</div>
          </el-form-item>
          <el-form-item label="配送区域" prop="">
            <el-radio-group v-model="form.dispensingArea">
              <el-radio :label="0" disabled>按不同区域</el-radio>
              <el-radio :label="1">按不同距离</el-radio>
              <el-radio :label="2" disabled>按行政区域</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="可配送区域"
            prop=""
            class="distribution-area"
            v-if="form.dispensingArea == 2"
          >
            <el-select
              v-model="form.cityList"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择文章标签"
            >
              <el-option
                v-for="item in cityListOpction"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-checkbox
              style="margin-left: 10px"
              v-model="form.isNoLimit"
              :true-label="1"
              :false-label="0"
            >
              不限制
            </el-checkbox>
          </el-form-item>
          <el-form-item
            label="划分方式"
            prop=""
            v-if="form.dispensingArea != 2"
          >
            <el-radio-group v-model="form.divideType">
              <el-radio :label="1">半径</el-radio>
              <el-radio :label="2" disabled>自定义</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label-width="210px"
            label="距离"
            v-if="form.dispensingArea == 1"
          >
            <el-input
              class="distance-input"
              v-model="form.distance.distanceNum"
            >
              <label slot="append">km</label>
            </el-input>
            <label class="distance-lable">内，重量</label>
            <el-input class="distance-input" v-model="form.distance.weightNum">
              <label slot="append">kg</label>
            </el-input>
            <label class="distance-lable">内，配送费用</label>
            <el-input
              class="distance-input"
              v-model="form.distance.distributionFreightNum"
            >
              <label slot="append">元</label>
            </el-input>
          </el-form-item>
          <el-form-item
            label-width="210px"
            label="距离每增加"
            v-if="form.dispensingArea == 1"
          >
            <el-input
              class="distance-input"
              v-model="form.distanceAdd.distanceNum"
            >
              <label slot="append">km</label>
            </el-input>
            <label class="distance-lable">，运费将增加</label>
            <el-input
              class="distance-input"
              v-model="form.distanceAdd.FreightAddNum"
            >
              <label slot="append">元</label>
            </el-input>
          </el-form-item>
          <el-form-item
            label-width="210px"
            label="重量每增加"
            v-if="form.dispensingArea == 1"
          >
            <el-input
              class="distance-input"
              v-model="form.weightAdd.weightAddNum"
            >
              <label slot="append">kg</label>
            </el-input>
            <label class="distance-lable">，运费将增加</label>
            <el-input
              class="distance-input"
              v-model="form.weightAdd.FreightAddNum"
            >
              <label slot="append">元</label>
            </el-input>
          </el-form-item>
          <el-form-item v-if="form.dispensingArea != 2">
            <div class="">
              当配送区域交叉时，以最低费用计算费用。
              因考虑实际送货路况，配送费计算按骑行距离，非地图直线距离。
            </div>
          </el-form-item>
          <el-form-item v-if="form.dispensingArea != 2">
            <div class="map-box">
              <div class="areas-block">
                <div class="areas-conetn">
                  <div v-if="form.divideType == 1">
                    <div
                      :class="[
                        'areas-item',
                        { acitve: mapForm.radiusActive == index },
                      ]"
                      v-for="(item, index) of mapForm.radiusList"
                      :key="index"
                      @click="handleRadiusActive('', index)"
                    >
                      <div class="areas-head-block">
                        <div class="areas-title">
                          <i class="title-circle">
                            <i class="content"></i>
                          </i>
                          区域{{ item.areaNum }}
                        </div>
                        <div
                          class="btn-delect"
                          @click="delectRadiusItem(index, item)"
                        >
                          删除
                        </div>
                      </div>
                      <div class="areas-item-block">
                        <el-form
                          ref="form"
                          :model="mapForm.radiusList[index]"
                          :rules="mapRules"
                          label-width="90px"
                          :show-message="false"
                        >
                          <el-form-item label="起送金额" prop="minPriceType">
                            <div>
                              按
                              <el-select
                                class="min-price-type-opction"
                                v-model="mapForm.radiusList[index].minPriceType"
                                placeholder="请选择"
                              >
                                <el-option
                                  v-for="(
                                    opction, index2
                                  ) of mapMinPriceTypeOpciotn"
                                  :key="index2 + opction.value"
                                  :label="opction.label"
                                  :value="opction.value"
                                ></el-option>
                              </el-select>
                            </div>
                          </el-form-item>
                          <el-form-item label="" prop="minPrice">
                            <div class="">
                              满
                              <el-input
                                class="min-price-input"
                                v-model="mapForm.radiusList[index].minPrice"
                              >
                                <label slot="append">元</label>
                              </el-input>
                              <label>起送</label>
                            </div>
                          </el-form-item>
                          <el-form-item
                            label="配送费"
                            prop="deliveryCostAmount"
                            v-if="form.dispensingArea != 1"
                          >
                            <el-input
                              class="delivery-cost-amout-input"
                              v-model="
                                mapForm.radiusList[index].deliveryCostAmount
                              "
                            >
                              <label slot="append">元</label>
                            </el-input>
                          </el-form-item>
                          <el-form-item
                            label="运费减免"
                            prop="freightReliefType"
                          >
                            <div>
                              按
                              <el-select
                                class="min-price-type-opction"
                                v-model="
                                  mapForm.radiusList[index].freightReliefType
                                "
                                placeholder="请选择"
                              >
                                <el-option
                                  v-for="(
                                    opction, index2
                                  ) of freightReliefTypeOpction"
                                  :key="index2 + opction.value"
                                  :label="opction.label"
                                  :value="opction.value"
                                ></el-option>
                              </el-select>
                            </div>
                          </el-form-item>
                          <el-form-item label="" prop="freightReliefAmout">
                            <div class="">
                              满
                              <el-input
                                class="min-price-input"
                                v-model="
                                  mapForm.radiusList[index].freightReliefAmout
                                "
                              >
                                <label slot="append">元</label>
                              </el-input>
                              <label>起送</label>
                            </div>
                          </el-form-item>
                          <el-form-item label="" prop="derateAmout">
                            <div class="">
                              减免
                              <el-input
                                class="min-price-input"
                                v-model="mapForm.radiusList[index].derateAmout"
                              >
                                <label slot="append">元</label>
                              </el-input>
                            </div>
                          </el-form-item>
                          <el-form-item label="半径" prop="radiusNum">
                            <el-input
                              type="number"
                              class="delivery-cost-amout-input"
                              v-model="
                                mapForm.radiusList[index].circlePath.radius
                              "
                              @input="handleRaduiInput($event, index)"
                            >
                              <label slot="append">米</label>
                            </el-input>
                          </el-form-item>
                        </el-form>
                      </div>
                    </div>
                  </div>
                  <div v-if="form.divideType == 2">
                    <div
                      :class="[
                        'areas-item',
                        { acitve: mapForm.customActive == index },
                      ]"
                      v-for="(item, index) of mapForm.customList"
                      :key="index"
                      @click="handlePolygonAcitve('', index)"
                    >
                      <div class="areas-head-block">
                        <div class="areas-title">
                          <i class="title-circle">
                            <i class="content"></i>
                          </i>
                          区域{{ item.areaNum }}
                        </div>
                        <div
                          class="btn-delect"
                          @click="delectRadiusItem(index)"
                        >
                          删除
                        </div>
                      </div>
                      <div class="areas-item-block">
                        <el-form
                          ref="form"
                          :model="mapForm.radiusList[index]"
                          :rules="mapRules"
                          label-width="90px"
                          :show-message="false"
                        >
                          <el-form-item label="起送金额" prop="minPriceType">
                            <div>
                              按
                              <el-select
                                class="min-price-type-opction"
                                v-model="mapForm.customList[index].minPriceType"
                                placeholder="请选择"
                              >
                                <el-option
                                  v-for="(
                                    opction, index2
                                  ) of mapMinPriceTypeOpciotn"
                                  :key="index2 + opction.value"
                                  :label="opction.label"
                                  :value="opction.value"
                                ></el-option>
                              </el-select>
                            </div>
                          </el-form-item>
                          <el-form-item label="" prop="minPrice">
                            <div class="">
                              满
                              <el-input
                                class="min-price-input"
                                v-model="mapForm.customList[index].minPrice"
                              >
                                <label slot="append">元</label>
                              </el-input>
                              <label>起送</label>
                            </div>
                          </el-form-item>
                          <el-form-item
                            label="配送费"
                            prop="deliveryCostAmount"
                            v-if="form.dispensingArea != 1"
                          >
                            <el-input
                              class="delivery-cost-amout-input"
                              v-model="
                                mapForm.customList[index].deliveryCostAmount
                              "
                            >
                              <label slot="append">元</label>
                            </el-input>
                          </el-form-item>
                          <el-form-item
                            label="运费减免"
                            prop="freightReliefType"
                          >
                            <div>
                              按
                              <el-select
                                class="min-price-type-opction"
                                v-model="
                                  mapForm.customList[index].freightReliefType
                                "
                                placeholder="请选择"
                              >
                                <el-option
                                  v-for="(
                                    opction, index2
                                  ) of freightReliefTypeOpction"
                                  :key="index2 + opction.value"
                                  :label="opction.label"
                                  :value="opction.value"
                                ></el-option>
                              </el-select>
                            </div>
                          </el-form-item>
                          <el-form-item label="" prop="freightReliefAmout">
                            <div class="">
                              满
                              <el-input
                                class="min-price-input"
                                v-model="
                                  mapForm.customList[index].freightReliefAmout
                                "
                              >
                                <label slot="append">元</label>
                              </el-input>
                              <label>起送</label>
                            </div>
                          </el-form-item>
                          <el-form-item label="" prop="derateAmout">
                            <div class="">
                              减免
                              <el-input
                                class="min-price-input"
                                v-model="mapForm.customList[index].derateAmout"
                              >
                                <label slot="append">元</label>
                              </el-input>
                            </div>
                          </el-form-item>
                        </el-form>
                      </div>
                    </div>
                  </div>
                  <div class="areas-conetn-footer" @click="addRadiusItem()">
                    +添加配送区域{{
                      form.divideType == 1
                        ? mapForm.radiusList.length
                        : mapForm.customList.length
                    }}/10
                  </div>
                </div>
              </div>
              <div class="map-block">
                <baidu-map
                  class="map"
                  style="display: flex; flex-direction: column"
                  :center="center"
                  :zoom="zoom"
                  :mapClick="false"
                  :scroll-wheel-zoom="true"
                  @ready="handlerBaiduMap"
                >
                  <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
                  <div class="radius-block" v-if="form.divideType == 1">
                    <template v-for="(item, index) of this.mapForm.radiusList">
                      <bm-circle
                        v-if="mapReady && form.divideType == 1"
                        :key="'circle-' + index"
                        :center="item.circlePath.center"
                        :radius="item.circlePath.radius"
                        stroke-color="#6fee0c"
                        :stroke-opacity="1"
                        :stroke-weight="3"
                        :massClear="false"
                        fillColor="#d1f5ad"
                        :editing="
                          mapForm.showCircleEditing &&
                          mapForm.radiusActive == index
                        "
                        @click="handleRadiusActive($event, index)"
                        @lineupdate="updateCirclePath($event, index)"
                      ></bm-circle>
                      <bm-marker
                        v-if="
                          mapForm.showRadiusCenter &&
                          mapForm.radiusActive == index
                        "
                        :key="'marker-' + index"
                        :position="item.circlePath.center"
                        :dragging="false"
                        @click="onClickMarker"
                        :icon="{
                          url: require('@/assets/dd-via.png'),
                          size: { width: 11, height: 11 },
                        }"
                        @dragging="handleDragging($event, index)"
                        @mouseover="handleMarkerMouseovert()"
                      >
                        <bm-overlay
                          v-if="
                            mapForm.showRadiusCenter &&
                            mapForm.radiusActive == index
                          "
                          pane="labelPane"
                          :class="{ sample: true }"
                          @initialize="initialize($event)"
                          @draw="handleOverlayDraw"
                        >
                          <div>
                            半径：{{
                              mapForm.radiusList[mapForm.radiusActive]
                                .circlePath.radius
                            }}米
                          </div>
                        </bm-overlay>
                      </bm-marker>
                    </template>
                  </div>
                  <div class="custom-block" v-if="form.divideType == 2">
                    <template v-for="(item, index) of this.mapForm.customList">
                      <bm-polygon
                        :key="'polygon-' + index"
                        :path="item.polygonPath"
                        stroke-color="#ff3cfd"
                        :stroke-opacity="1"
                        :stroke-weight="4"
                        fillColor="#ff3cfd"
                        :fillOpacity="0.4"
                        :editing="
                          mapForm.showCustomEditing &&
                          mapForm.customActive == index
                        "
                        @click="handlePolygonAcitve($event, index)"
                        @lineupdate="updatePolygonPath"
                      />
                      <bm-marker
                        :key="'marker-' + index"
                        v-if="
                          mapForm.showCustomDragging &&
                          mapForm.customActive == index
                        "
                        :position="item.oldCenter"
                        :dragging="mapForm.showCustomDragging"
                        @click="onClickMarker"
                        :icon="{
                          url: require('@/assets/dd-via.png'),
                          size: { width: 11, height: 11 },
                        }"
                        @dragging="handleDragging($event, index)"
                        @mouseover="handleMarkerMouseovert()"
                      ></bm-marker>
                    </template>
                  </div>
                </baidu-map>
                <!-- <el-amap
                  v-if="mapReady"
                  :center="center"
                  :zoom="zoom"
                  @init="init"
                >
                  <template v-for="(item, index) of mapForm.radiusList">
                    <el-amap-circle
                      :key="'circle-' + index"
                      strokeColor="#6fee0c"
                      fillColor="#d1f5ad"
                      :center="item.circlePath.center"
                      :radius="item.circlePath.radius"
                      :visible="true"
                      :editable="
                        mapForm.showCircleEditing &&
                        mapForm.radiusActive == index
                      "
                      :draggable="false"
                      @click="handleRadiusActive($event, index)"
                      @mouseover="updateCirclePath"
                      @mouseover
                    />
                  </template>
                </el-amap> -->
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="item-block distribution-amount" v-if="form.dispensingArea == 2">
      <div class="title">配送价格</div>
      <div class="block">
        <el-form
          ref="form"
          :model="distributionForm"
          label-width="160px"
          :rules="distributionRules"
          :show-message="false"
        >
          <el-form-item label="起送金额" prop="deliveryAmount">
            <label class="distribution-block-lable">按</label>
            <el-select
              class="distribution-select"
              v-model="distributionForm.priceType"
              placeholder="请选择"
            >
              <el-option
                v-for="(opction, index2) of mapMinPriceTypeOpciotn"
                :key="index2 + opction.value"
                :label="opction.label"
                :value="opction.value"
              ></el-option>
            </el-select>
            <label class="distribution-block-lable">满</label>
            <el-input
              class="distribution-input"
              v-model="distributionForm.deliveryAmount"
            >
              <label slot="append">元</label>
            </el-input>
            <label class="distribution-block-lable">起送</label>
            <div class="distribution-tips">
              订单价格不满足时，买家无法下单
              <br />
              商品折后价：按商品参加所有生效优惠活动后的金额计算，不包含积分抵扣和优惠券优惠金额。
              <br />
              订单实付价：按订单最终的实际付款金额计算。
            </div>
          </el-form-item>
          <el-form-item label="配送费" prop="distributionAmout">
            <el-input
              class="distribution-input"
              v-model="distributionForm.distributionAmout"
            >
              <label slot="append">元</label>
            </el-input>
          </el-form-item>
          <el-form-item label="运费减免" prop="freightFullAmout">
            <label class="distribution-block-lable">按</label>
            <el-select
              class="distribution-select"
              v-model="distributionForm.freightType"
              placeholder="请选择"
            >
              <el-option
                v-for="(opction, index2) of mapMinPriceTypeOpciotn"
                :key="index2 + opction.value"
                :label="opction.label"
                :value="opction.value"
              ></el-option>
            </el-select>
            <label class="distribution-block-lable">满</label>
            <el-input
              class="distribution-input"
              v-model="distributionForm.freightFullAmout"
            >
              <label slot="append">元</label>
            </el-input>
            <label class="distribution-block-lable">减免</label>
            <el-input
              class="distribution-input"
              v-model="distributionForm.freightAmout"
            >
              <label slot="append">元</label>
            </el-input>
            <div class="tips">运费最低减为0</div>
          </el-form-item>
          <el-form-item label="配送费" prop="isStairSwitch">
            <el-switch
              v-model="distributionForm.isStairSwitch"
              :active-text="switchText"
              @change="handleSwitchText"
            ></el-switch>
          </el-form-item>
          <el-form-item
            label=""
            prop=""
            v-if="distributionForm.isStairSwitch == 1"
          >
            <label class="distribution-block-lable">半径</label>
            <el-input
              class="distribution-input"
              v-model="distributionForm.radiusNum"
            >
              <label slot="append">km</label>
            </el-input>
            <label class="distribution-block-lable">内，重量</label>
            <el-input
              class="distribution-input"
              v-model="distributionForm.radiusWeithNum"
            >
              <label slot="append">kg</label>
            </el-input>
            <label class="distribution-block-lable">内，配送费用</label>
            <el-input
              class="distribution-input"
              v-model="distributionForm.radiusDistributionAmout"
            >
              <label slot="append">元</label>
            </el-input>
          </el-form-item>
          <el-form-item
            label=""
            prop=""
            v-if="distributionForm.isStairSwitch == 1"
          >
            <label class="distribution-block-lable">起送距离每增加</label>
            <el-input
              class="distribution-input"
              v-model="distributionForm.freightDistanceNum"
            >
              <label slot="append">km</label>
            </el-input>
            <label class="distribution-block-lable">内，运费增加</label>
            <el-input
              class="distribution-input"
              v-model="distributionForm.freightDistanceAmout"
            >
              <label slot="append">元</label>
            </el-input>
          </el-form-item>
          <el-form-item
            label=""
            prop=""
            v-if="distributionForm.isStairSwitch == 1"
          >
            <label class="distribution-block-lable">起送重量每增加</label>
            <el-input
              class="distribution-input"
              v-model="distributionForm.freightWeigthNum"
            >
              <label slot="append">km</label>
            </el-input>
            <label class="distribution-block-lable">内，运费增加</label>
            <el-input
              class="distribution-input"
              v-model="distributionForm.freightWeigthAmount"
            >
              <label slot="append">元</label>
            </el-input>
            <div class="tips">
              不超过起送半径和重量时，按基础运费计算
              <br />
              实际配送距离大于起送半径，不满增加公里数，运费按增加计算；实际配送重量大于起送重量，不满增加重量，
              <br />
              运费按增加计算，依次类推
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="footer">
      <el-button class="btn" size="medium">取消</el-button>
      <el-button class="btn" size="medium" type="primary" @click="handerSubmit">
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
import { get } from '@/api/store/base'
import {
  getSameCityTransport,
  saveSameCityTransport,
  delectArea,
  getSFTypeList,
} from '@/api/sameCityTransport/sameCityTransport'
import { ChineseDistricts } from '@/components/VabArea/city-picker.data'
import {
  distributionOpction,
  checkList,
  distributionList,
  goodsTypeData,
  mapMinPriceTypeOpciotn,
  freightReliefTypeOpction,
  weekListConfig,
  periodOpction,
} from './distributionSetupConfig/config.js'
export default {
  name: 'localDelivery',
  data() {
    return {
      ChineseDistricts: {},
      active: 2,
      weekListConfig: weekListConfig,
      distributionOpction: distributionOpction,
      checkList: checkList,
      distributionList: distributionList,
      goodsTypeData: goodsTypeData,
      mapMinPriceTypeOpciotn: mapMinPriceTypeOpciotn,
      freightReliefTypeOpction: freightReliefTypeOpction,
      periodOpction: periodOpction,
      shopInfoData: {},
      goodsTypeList: [],
      rules: {
        distributionType: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一种配送方式',
            trigger: 'change',
          },
        ],
        no3DistributionType: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个平台配送服务',
            trigger: 'change',
          },
        ],
        dadaData: {
          appKey: [
            { required: true, message: '请输入app_key', trigger: 'blur' },
          ],
          appSecret: [
            { required: true, message: '请输入app_secret', trigger: 'blur' },
          ],
          storeId: [
            { required: true, message: '请输入商户ID', trigger: 'blur' },
          ],
          shopCode: [
            { required: true, message: '请输入门店编码', trigger: 'blur' },
          ],
        },
        meituanData: {
          distributionOpction: [
            { required: true, message: '请选择配送服务', trigger: 'change' },
          ],
          appKey: [
            { required: true, message: '请输入AppKey', trigger: 'blur' },
          ],
          appSecret: [
            { required: true, message: '请输入AppSecret', trigger: 'blur' },
          ],
          storeId: [
            { required: true, message: '请输入商户ID', trigger: 'blur' },
          ],
        },
        sfData: {
          // developerAccount: [
          //   {
          //     required: true,
          //     message: '请输入开发者账号（dev_id）',
          //     trigger: 'blur',
          //   },
          // ],
          // devKey: [
          //   {
          //     required: true,
          //     message: '请输入开发者秘钥（dev_key）',
          //     trigger: 'blur',
          //   },
          // ],
          storeId: [
            { required: true, message: '请输入店铺id', trigger: 'blur' },
          ],
          goodsType: [
            { required: true, message: '请选择物品类型', trigger: 'change' },
          ],
        },
        ssData: {
          shopId: [
            { required: true, message: '请输入门店编码', trigger: 'blur' },
          ],
          appKey: [
            { required: true, message: '请输入app_key', trigger: 'blur' },
          ],
          appSecret: [
            { required: true, message: '请输入app_secret', trigger: 'blur' },
          ],
          storeId: [
            { required: true, message: '请输入商户ID', trigger: 'blur' },
          ],
        },
        uuData: {
          appId: [{ required: true, message: '请输入appId', trigger: 'blur' }],
          appKey: [
            { required: true, message: '请输入appKey', trigger: 'blur' },
          ],
          openId: [
            { required: true, message: '请输入openId', trigger: 'blur' },
          ],
        },
        // weekList:[
        //     { type: 'array', required: true, message: '请至少选择一个星期', trigger: 'change' }
        // ],
        shopAddress: [
          { required: true, message: '地址获取失败', trigger: 'blur' },
        ],
      },
      mapRules: {
        minPriceType: [{ required: true, message: '', trigger: 'change' }],
        minPrice: [{ required: true, message: '', trigger: 'blur' }],
        deliveryCostAmount: [{ required: true, message: '', trigger: 'blur' }],
        freightReliefType: [{ required: true, message: '', trigger: 'change' }],
        freightReliefAmout: [{ required: true, message: '', trigger: 'blur' }],
        derateAmout: [{ required: true, message: '', trigger: 'blur' }],
        radiusNum: [{ required: true, message: '', trigger: 'blur' }],
      },
      form: {
        distributionType: [0, 2],
        no3DistributionType: [3],
        dadaData: {
          appKey: 'dada8e0c052d94e8a09',
          appSecret: 'a5350665c9200871e5671440437b7f1b',
          storeId: '928007283',
          shopCode: '76c8cbd2e5464d5c',
        },
        meituanData: {
          distributionOpction: 0,
          appKey: '',
          appSecret: '',
          storeId: '',
          payType: 0,
        },
        sfData: {
          developerAccount: '************',
          devKey: '************',
          appSecret: '',
          storeId: '',
          goodsType: null,
        },
        ssData: {
          storeId: '',
          appKey: '',
          appSecret: '',
          shopId: '',
        },
        uuData: {
          appId: '',
          appKey: '',
          openId: '',
        },
        isDistribution: 0,
        isAutomaticDelivery: 0,
        weekConfig: [
          {
            weekListConfig: JSON.parse(JSON.stringify(weekListConfig)),
            weekList: [7, 1, 2, 3, 4, 5, 6],
            pickerOptions: {
              start: '00:00',
              step: '00:30',
              end: '23:30',
            },
            timeList: [
              {
                startTime: null,
                endTime: null,
              },
            ],
            isError: false,
            errorMsg: '',
          },
        ],
        inAdvanceTime: 0,
        shopAddress: '',
        dispensingArea: 1,
        divideType: 1,
        distance: {
          distanceNum: null,
          weightNum: null,
          distributionFreightNum: null,
        },
        distanceAdd: {
          distanceNum: null,
          FreightAddNum: null,
        },
        weightAdd: {
          weightAddNum: null,
          FreightAddNum: null,
        },
        cityList: [],
        isNoLimit: 0,
        deliveryPeriod: 0,
        subdivisionPeriod: 1,
        orderAppointment: {
          inAdvance: 0,
          orderAppointmentTimeTime: 2,
          orderAppointmentTimeType: 0,
        },
        maxAppointment: {
          maxAppointmentType: 0,
          maxAppointmentSky: 2,
        },
        orderDefault: 0,
      },
      mapForm: {
        radiusActive: 0,
        showRadiusCenter: false,
        showRadiusDragging: false,
        showCircleEditing: false,
        customActive: 0,
        showCustomEditing: false,
        showCustomDragging: false,
        radiusList: [],
        customList: [],
      },
      BMap: null,
      center: { lng: 0, lat: 0 },
      zoom: 16,
      mapInstance: null,
      BMapInstance: null,
      mapReady: false,
      // center: [0, 0],
      map: null,
      distributionForm: {
        priceType: 0,
        deliveryAmount: 0,
        distributionAmout: 0,
        freightType: 0,
        freightFullAmout: 0,
        freightAmout: 0,
        isStairSwitch: 0,
        radiusNum: null,
        radiusWeithNum: null,
        radiusDistributionAmout: null,
        freightDistanceNum: null,
        freightDistanceAmout: null,
        freightWeigthNum: null,
        freightWeigthAmount: null,
      },
      distributionRules: {
        deliveryAmount: [{ required: true, message: '', trigger: 'blur' }],
        distributionAmout: [{ required: true, message: '', trigger: 'blur' }],
        freightFullAmout: [{ required: true, message: '', trigger: 'blur' }],
      },
      switchText: '关闭',
      cityListOpction: [],
    }
  },
  created() {
    this.ChineseDistricts = ChineseDistricts
    this.getSameCityTransport()
    this.getCompanyInfo()

    this.getSFTypeList()
  },
  beforeDestroy() {},
  methods: {
    async getSFTypeList() {
      let res = await getSFTypeList()
      if (res && res.status == 200) {
        this.goodsTypeList = res.data
      } else {
        this.goodsTypeList = Object.keys(this.goodsTypeData).map((key) => ({
          value: this.goodsTypeData[key],
          key: Number(key),
        }))
      }
    },
    async getSameCityTransport() {
      let res = await getSameCityTransport()
      if (res && res.status == 200) {
        let transportBase = res.data.transportBase
        let transportList = res.data.transportList
        this.form.dispensingArea = transportBase.area_type

        this.form.distance.distanceNum = transportBase.distance_base
        this.form.distance.weightNum = transportBase.weight_base
        this.form.distance.distributionFreightNum =
          transportBase.delivery_base_fee

        this.form.distanceAdd.distanceNum = transportBase.distance_increase_km
        this.form.distanceAdd.FreightAddNum =
          transportBase.distance_increase_fee

        this.form.weightAdd.weightAddNum = transportBase.weight_increase_kg
        this.form.weightAdd.FreightAddNum = transportBase.weight_increase_fee

        if (this.active == 2) {
          this.form.sfData.storeId = transportBase.shop_id
          this.form.sfData.goodsType = transportBase.business_type
        }

        let arr = transportList.map((item, index) => {
          let obj = {
            areaNum: index + 1,
            transport_id: item.transport_id,
            circlePath: {
              radius: item.max_delivery_radius,
              center: this.center,
            },
            minPriceType: item.min_delivery_amount_type - 1,
            minPrice: item.min_delivery_amount,
            freightReliefType: item.delivery_discount_type - 1,
            freightReliefAmout: item.min_delivery_discount_amount,
            derateAmout: item.delivery_discount,
          }
          return obj
        })
        this.mapForm.radiusList = arr
      }
    },
    handleSkip() {
      this.$router.push({ path: '/setupshop' })
    },
    // 点击第三方图片
    handleClickImg(e, index) {
      e.stopPropagation()
      this.active = index
    },
    stopEvenPropagation(e) {
      e.stopPropagation()
    },
    // 增加时段
    handleAddTime(index) {
      this.checkTimeAll()
      this.form.weekConfig[index].timeList.push({
        startTime: null,
        endTime: null,
      })
    },
    // 删除时段
    handleDelectTime(groupIndex, index) {
      this.form.weekConfig[groupIndex].timeList.splice(index, 1)
      this.checkTimeAll()
    },
    // 显示添加
    showAdd(num, index2) {
      if (num == 1 && index2 == 0) {
        return true
      }

      if (num == 2 && index2 == 1) {
        return true
      }

      if (num == 3 && index2 == 2) {
        return false
      }

      return false
    },
    // 显示删除
    showDelect(num, index2) {
      if (num == 2 && index2 == 1) {
        return true
      }

      if (num == 3 && index2 == 1) {
        return true
      }

      if (num == 3 && index2 == 2) {
        return true
      }

      return false
    },
    // 保留
    handleWeekList() {},
    // 添加星期
    addWeekItem() {
      this.checkTimeAll()
      let obj = {
        weekListConfig: JSON.parse(JSON.stringify(weekListConfig)),
        weekList: [7, 1, 2, 3, 4, 5, 6],
        pickerOptions: {
          start: '00:00',
          step: '00:30',
          end: '23:30',
        },
        timeList: [
          {
            startTime: null,
            endTime: null,
          },
        ],
        isError: false,
        errorMsg: '',
      }

      this.form.weekConfig.push(obj)
    },
    // 删除星期
    delectWeek(index) {
      this.form.weekConfig.splice(index, 1)
    },
    timeToMinutes(timeStr) {
      if (!timeStr) return
      const [hours, minutes] = timeStr.split(':').map(Number)
      return hours * 60 + minutes
    },
    checkTimeSelect(item) {
      if (item == null) return

      let { isInvalid, isRepetition } = this.checkTime()

      if (isInvalid) {
        this.$baseMessage('结束时间要大于开始时间', 'error')
      }

      if (isRepetition) {
        this.$baseMessage('不能有重复时间段', 'error')
        return
      }
    },
    checkTimeOverlap(periods) {
      // 对时间段进行排序，以确保我们可以简单地比较相邻的时间段
      periods.sort((a, b) => {
        if (a.startTime !== b.startTime) {
          return a.startTime - b.startTime
        }
        return a.endTime - b.endTime
      })

      // 遍历排序后的时间段数组，检查相邻的时间段是否有重叠
      for (let i = 1; i < periods.length; i++) {
        // 如果前一个时间段的结束时间大于或等于当前时间段的开始时间，则存在重叠

        if (periods[i - 1].endTime > periods[i].startTime) {
          return true // 找到重叠，返回true
        }
      }

      return false // 没有找到重叠，返回false
    },
    checkInvalidTimes(periods) {
      for (let period of periods) {
        if (period.startTime >= period.endTime) {
          return true // 找到无效的时间段，返回true
        }
      }
      return false // 没有找到无效的时间段，返回false
    },
    checkTime() {
      var periods = this.form.weekConfig
      var isInvalid, isRepetition

      periods.forEach((item, index) => {
        let list = []
        list = item.timeList
          .map((item) => {
            return {
              startTime: this.timeToMinutes(item.startTime),
              endTime: this.timeToMinutes(item.endTime),
            }
          })
          .filter((item) => item.startTime != null || item.endTime != null)

        isInvalid = this.checkInvalidTimes(list)
        isRepetition = this.checkTimeOverlap(list)
      })

      return { isInvalid: isInvalid, isRepetition: isRepetition }
    },
    checkTimeAll() {
      var periods = this.form.weekConfig

      periods.forEach((item, index) => {
        let list = []

        list = item.timeList
          .map((item) => {
            return {
              startTime: this.timeToMinutes(item.startTime),
              endTime: this.timeToMinutes(item.endTime),
            }
          })
          .filter((item) => item.startTime != null || item.endTime != null)

        var isInvalid = this.checkInvalidTimes(list)
        var isRepetition = this.checkTimeOverlap(list)

        if (isInvalid) {
          this.form.weekConfig[index].isError = true
          this.form.weekConfig[index].errorMsg = '结束时间要大于开始时间'
          return
        } else {
          this.form.weekConfig[index].isError = false
          this.form.weekConfig[index].errorMsg = ''
        }

        if (isRepetition) {
          this.form.weekConfig[index].isError = true
          this.form.weekConfig[index].errorMsg = '不能有重复时间段'
        } else {
          this.form.weekConfig[index].isError = false
          this.form.weekConfig[index].errorMsg = ''
        }
      })
    },
    addRadiusItem() {
      if (this.form.divideType == 1) {
        if (this.mapForm.radiusList.length >= 10) return

        let areaNum = this.mapForm.radiusList.length + 1
        // let arrLength = this.mapForm.radiusList.length;

        let obj = {
          // id:arrLength == 0 ? 0 : arrLength,
          areaNum: areaNum,
          minPriceType: 0,
          minPrice: null,
          deliveryCostAmount: null,
          freightReliefType: 0,
          freightReliefAmout: null,
          derateAmout: null,
          circlePath: {
            center: this.center,
            radius: 300,
          },
        }

        this.mapForm.radiusList.push(obj)
      } else {
        if (this.mapForm.customList.length >= 10) return

        let areaNum = this.mapForm.customList.length + 1

        let { lng, lat } = this.center
        // 正方形的边长（米）
        var side_length = 300

        // 每度纬度的距离（米）
        var lat_distance_per_degree = 111000

        var deltaLat = side_length / lat_distance_per_degree

        var deltaLng = deltaLat

        let polygonPath = [
          { lng: lng + deltaLng, lat: lat + deltaLat },
          { lng: lng + deltaLng, lat: lat - deltaLat },
          { lng: lng - deltaLng, lat: lat - deltaLat },
          { lng: lng - deltaLng, lat: lat + deltaLat },
        ]

        let obj = {
          transport_id: 0,
          areaNum: areaNum,
          polygonPath: polygonPath,
          minPriceType: 0,
          minPrice: null,
          deliveryCostAmount: null,
          freightReliefType: 0,
          freightReliefAmout: null,
          derateAmout: null,
          oldCenter: this.center,
        }

        this.mapForm.customList.push(obj)
      }

      // this.creatCircle(obj)
    },
    async delectRadiusItem(index, item) {
      let res = await delectArea({ transport_id: item.transport_id })
      if (res && res.status == 200) {
        this.$baseMessage('删除成功', 'success')
      }
      if (this.form.divideType == 1) {
        if (this.mapForm.radiusList.length == 0) return

        this.mapForm.radiusList.splice(index, 1)
        // this.map.remove(this.mapForm.circleList[index].circle)
        // this.mapForm.circleList[index].editor.close();
        // this.mapForm.circleList.splice(index,1);

        if (this.mapForm.radiusList.length == 0) {
          this.mapForm.radiusActive = 0
          this.mapForm.showRadiusCenter = false
          this.mapForm.showRadiusDragging = false
          this.mapForm.showCircleEditing = false
        }
      } else {
        this.mapForm.customList.splice(index, 1)
        if (this.mapForm.customList.length == 0) {
          this.mapForm.customActive = 0
          this.mapForm.showCustomEditing = false
          this.mapForm.showCustomDragging = false
        }
      }
    },
    async getCompanyInfo() {
      const { data } = await get()
      if (data) {
        let str = data.store_area + data.store_address
        this.form.shopAddress = str.replace(/\//g, '')

        let cityListCode = data.store_district_id.split('/')

        let cityList = this.ChineseDistricts

        if (cityList[cityListCode[1]]) {
          let obj = cityList[cityListCode[1]]

          this.cityListOpction = Object.keys(obj).map((key) => ({
            value: parseInt(key, 10),
            label: obj[key],
          }))
        }

        this.shopInfoData = data
        // this.center[0] = Number(this.shopInfoData.store_longitude);
        // this.center[1] = Number(this.shopInfoData.store_latitude);
        // this.mapForm.radiusList[0].circlePath.center[0] = Number(this.shopInfoData.store_longitude);
        // this.mapForm.radiusList[0].circlePath.center[1] = Number(this.shopInfoData.store_latitude);

        this.center.lng = Number(this.shopInfoData.store_longitude)
        this.center.lat = Number(this.shopInfoData.store_latitude)

        if (this.mapForm.radiusList.length == 0) {
          let obj = {
            areaNum: 1,
            minPriceType: 0,
            minPrice: null,
            deliveryCostAmount: null,
            freightReliefType: 0,
            freightReliefAmout: null,
            derateAmout: null,
            circlePath: {
              center: {
                lng: 0,
                lat: 0,
              },
              // center:[],
              radius: 300,
            },
          }

          this.mapForm.radiusList.push(obj)

          this.mapForm.radiusList[0].circlePath.center.lng = Number(
            this.shopInfoData.store_longitude
          )
          this.mapForm.radiusList[0].circlePath.center.lat = Number(
            this.shopInfoData.store_latitude
          )
        }

        if (this.mapForm.customList.length == 0) {
          let areaNum = this.mapForm.radiusList.length + 1

          let obj = {
            transport_id: 0,
            areaNum: areaNum,
            polygonPath: [],
            minPriceType: 0,
            minPrice: null,
            deliveryCostAmount: null,
            freightReliefType: 0,
            freightReliefAmout: null,
            derateAmout: null,
            oldCenter: this.center,
          }

          this.mapForm.customList.push(obj)

          let { lng, lat } = this.center
          // 正方形的边长（米）
          var side_length = 300

          // 每度纬度的距离（米）
          var lat_distance_per_degree = 111000

          var deltaLat = side_length / lat_distance_per_degree

          var deltaLng = deltaLat

          this.mapForm.customList[0].polygonPath = [
            { lng: lng + deltaLng, lat: lat + deltaLat },
            { lng: lng + deltaLng, lat: lat - deltaLat },
            { lng: lng - deltaLng, lat: lat - deltaLat },
            { lng: lng - deltaLng, lat: lat + deltaLat },
          ]
        }
        this.mapReady = true
      }
    },
    async handlerBaiduMap({ BMap, map }) {
      this.mapInstance = map
      this.BMapInstance = BMap
    },
    handleRaduiInput(number, index) {
      if (number == null || number == 0 || number == '') {
        this.mapForm.showRadiusCenter = false
        return
      }

      this.mapForm.radiusList[index].circlePath.radius = Number(number)

      if (this.mapForm.radiusList[index].radiusInfo != undefined) {
        this.mapForm.showRadiusCenter = true
        let item = this.mapForm.radiusList[index].radiusInfo

        setTimeout(() => {
          this.$nextTick(() => {
            var divs = document.querySelectorAll('.BMap_vectex_node')
            let left = parseInt(divs[1].style.left) + 20 + 'px'
            let top = parseInt(divs[1].style.top) + 'px'
            item.el.style.left = left
            item.el.style.top = top
            console.log('div', left, top)

            console.log(item.el.style.left, (item.el.style.top = top))
          })
        }, 0)
      }
    },
    updateCirclePath(e, index, type, number) {
      this.mapForm.radiusList[index].circlePath.center = e.target.getCenter()
      this.mapForm.radiusList[index].circlePath.radius = Math.round(
        e.target.getRadius()
      )
      var divs = document.querySelectorAll('.BMap_vectex_node')
      if (divs && divs.length >= 2) {
        if (this.mapForm.radiusList[index].radiusInfo != undefined) {
          let item = this.mapForm.radiusList[index].radiusInfo
          let left = parseInt(divs[1].style.left) + 20 + 'px'
          let top = parseInt(divs[1].style.top) + 'px'
          item.el.style.left = left
          item.el.style.top = top
        }
      }
    },
    handleRadiusActive(e, index) {
      this.mapForm.radiusActive = index
      this.center = this.mapForm.radiusList[index].circlePath.center
      let radius = this.mapForm.radiusList[index].circlePath.radius
      if (radius == 0 || radius == '') {
        this.mapForm.showRadiusCenter = false
        return
      }
      this.mapForm.showRadiusCenter = true
      this.mapForm.showCircleEditing = false
      this.mapForm.showCircleEditing = true
    },
    onClickMarker() {
      if (this.form.divideType == 1) {
        this.mapForm.showRadiusDragging = true
      } else {
        this.mapForm.showCustomDragging = true
      }
    },
    handleDragging(e, index) {
      if (this.form.divideType == 1) {
        this.mapForm.radiusList[index].circlePath.center = e.point

        let divs = document.querySelectorAll('.BMap_vectex_node')
        if (divs && divs.length >= 2) {
          let item = this.mapForm.radiusList[index].radiusInfo
          let left = parseInt(divs[1].style.left) + 20 + 'px'
          let top = parseInt(divs[1].style.top) + 'px'
          item.el.style.left = left
          item.el.style.top = top
        }
      } else {
        const oldCenter = JSON.parse(
          JSON.stringify(
            this.mapForm.customList[this.mapForm.customActive].oldCenter
          )
        )

        const newCenter = e.point

        const deltaLng = newCenter.lng - oldCenter.lng
        const deltaLat = newCenter.lat - oldCenter.lat

        const newVertices = this.mapForm.customList[
          this.mapForm.customActive
        ].polygonPath.map((vertex) => ({
          lng: vertex.lng + deltaLng,
          lat: vertex.lat + deltaLat,
        }))

        this.mapForm.customList[this.mapForm.customActive].oldCenter = e.point

        this.mapForm.customList[this.mapForm.customActive].polygonPath =
          newVertices
      }
    },
    handleMarkerMouseovert() {
      if (this.form.divideType == 1) {
        this.mapForm.showRadiusDragging = true
      } else {
        this.mapForm.showCustomDragging = true
      }
    },
    initialize({ el, BMap, map, overlay }) {
      var index = this.mapForm.radiusActive
      var item = this.mapForm.radiusList[index]

      setTimeout(() => {
        let divs = document.querySelectorAll('.BMap_vectex_node')

        if (divs && divs.length >= 2) {
          let left = parseInt(divs[1].style.left) + 20 + 'px'
          let top = parseInt(divs[1].style.top) + 'px'
          el.style.left = left
          el.style.top = top
          item.radiusInfo = { el, BMap, map }
        }
      }, 1)
    },
    handleOverlayDraw({ el, BMap, map, overlay }) {
      let divs = document.querySelectorAll('.BMap_vectex_node')

      if (divs && divs.length >= 2) {
        let left = parseInt(divs[1].style.left) + 20 + 'px'
        let top = parseInt(divs[1].style.top) + 'px'
        el.style.left = left
        el.style.top = top
      }
    },
    updatePolygonPath(e) {
      if (this.mapForm.customList.length <= 0) return
      this.mapForm.customList[this.mapForm.customActive].polygonPath =
        e.target.getPath()
    },
    handlePolygonAcitve({ type, target, point, pixel }, index) {
      this.mapForm.customActive = index
      this.mapForm.showCustomDragging = true
      this.mapForm.showCustomEditing = true
    },
    handleSwitchText(isSwitch) {
      if (isSwitch) {
        this.switchText = '开启'
      } else {
        this.switchText = '关闭'
      }
    },
    // 高德地图
    // init(map) {
    //     this.map = map;
    //     this.initCircle();
    // },
    // initCircle(){

    //     this.mapForm.radiusList.forEach((item,index)=>{
    //         this.creatCircle(item);
    //     })
    // },
    // editCircle(selectedCircle, selectedEditor){

    //     this.mapForm.circleList.forEach(({circle, editor})=>{
    //         if(circle != selectedCircle){
    //             editor.close();
    //         }else{
    //             selectedEditor.open();
    //         }
    //     })
    // },
    // creatCircle(item){

    //     var circle = new AMap.Circle({
    //         center: item.circlePath.center,
    //         radius: item.circlePath.radius, //半径
    //         borderWeight: 3,
    //         strokeColor: "#6fee0c",
    //         strokeOpacity: 1,
    //         strokeWeight: 3,
    //         fillOpacity: 0.4,
    //         strokeDasharray: [10, 10],
    //         // 线样式还支持 'dashed'
    //         fillColor: '#d1f5ad',
    //         zIndex: 50,
    //     })

    //     this.map.add(circle)

    //     this.map.setFitView([ circle ])

    //     var circleEditor = new AMap.CircleEditor(this.map, circle,{
    //         editOptions:{
    //             strokeColor: "#6fee0c",
    //             fillColor: '#d1f5ad'
    //         }
    //     })

    //     this.mapForm.circleList.push({circle:circle,editor: circleEditor})

    //     let _this = this;

    //     circle.on('click', function() {
    //         _this.editCircle(this, circleEditor); // 当圆形被点击时调用editCircle函数
    //         _this.mapForm.radiusActive = item.id;
    //     });

    //     circleEditor.on('adjust', function(e) {
    //         var adjustedCircle = e.target;
    //         var adjustedRadius = adjustedCircle.getRadius();
    //         console.log('调整后的半径:', adjustedRadius);

    //         let {lat,lng} = e.lnglat;
    //         item.circlePath.center = Object.values({lat,lng});
    //         _this.mapForm.radiusList[_this.mapForm.radiusActive].circlePath.radius = e.radius;

    //     })

    // },
    async handerSubmit() {
      debugger

      console.log(this.form)
      if (
        this.form.distance.distanceNum == null ||
        this.form.distance.distanceNum === '' ||
        this.form.distance.weightNum == null ||
        this.form.distance.weightNum === '' ||
        this.form.distance.distributionFreightNum == null ||
        this.form.distance.distributionFreightNum === '' ||
        this.form.distanceAdd.distanceNum == null ||
        this.form.distanceAdd.distanceNum === '' ||
        this.form.distanceAdd.FreightAddNum == null ||
        this.form.distanceAdd.FreightAddNum === '' ||
        this.form.weightAdd.weightAddNum == null ||
        this.form.weightAdd.weightAddNum === '' ||
        this.form.weightAdd.FreightAddNum == null ||
        this.form.weightAdd.FreightAddNum === ''
      ) {
        console.log(
          this.form.distance.distanceNum,
          this.form.distance.weightNum,
          this.form.distance.distributionFreightNum,
          this.form.distanceAdd.distanceNum,
          this.form.distanceAdd.FreightAddNum,
          this.form.weightAdd.weightAddNum,
          this.form.weightAdd.FreightAddNum
        )
        this.$baseMessage('请填写完整的信息', 'error')
        return
      }

      let list =
        this.mapForm.radiusList.map((item) => {
          let obj = {
            transport_id: item.transport_id || null,
            area_type: this.form.divideType,
            max_delivery_radius: item.circlePath.radius,
            min_delivery_amount_type: item.minPriceType + 1,
            min_delivery_amount: item.minPrice,
            delivery_discount_type: item.freightReliefType + 1,
            min_delivery_discount_amount: item.freightReliefAmout,
            delivery_discount: item.derateAmout,
          }

          return obj
        }) || []

      let params = {
        transportBase: {
          transport_base_id: null,
          area_type: this.form.dispensingArea,
          basis: 1,
          distance_base: this.form.distance.distanceNum || 0,
          weight_base: this.form.distance.weightNum || 0,
          delivery_base_fee: this.form.distance.distributionFreightNum || 0,
          distance_increase_km: this.form.distanceAdd.distanceNum || 0,
          distance_increase_fee: this.form.distanceAdd.FreightAddNum || 0,
          weight_increase_kg: this.form.weightAdd.weightAddNum || 0,
          weight_increase_fee: this.form.weightAdd.FreightAddNum || 0,
        },
        transportList: list,
      }
      let isValid = true
      if (this.active == 2) {
        this.$refs['formDistribution'].validate((valid) => {
          isValid = valid
          if (valid) {
            params.transportBase.shop_id = this.form.sfData.storeId
            params.transportBase.business_type = this.form.sfData.goodsType
          }
        })
      }

      if (!isValid) return

      let res = await saveSameCityTransport(params)
      if (res && res.status == 200) {
        this.$baseMessage('保存成功', 'success')
      } else {
        this.$baseMessage(res.msg, 'error')
      }
    },
  },
}
</script>

<style lang="scss">
.localDelivery-container {
  background: #f6f8f9 !important;
  padding: 6px !important;

  .BMap_vectex_node,
  .BMap_vectex_nodeT {
    background-image: url(./../../../../assets/dd-via.png);
  }

  .item-block {
    background: #fff;
    margin-bottom: 24px;

    .title {
      height: 46px;
      padding: 0 20px;
      border-bottom: 1px solid #f2f2f2;
      line-height: 46px;
      color: #333;
      font-weight: 700;
    }

    .block {
      padding: 20px;

      .distribution-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        .distribution-box {
          margin-right: 20px !important;
          margin-bottom: 20px;
          margin-left: 0;
          padding: 0 15px !important;
          width: 154px;
          height: 50px;
          line-height: 50px;
          border: 1px solid #dcdfe6;
          cursor: pointer;

          &:hover {
            border-color: #1890ff;
          }

          &:focus {
            outline: none;
          }
        }

        .img {
          margin-bottom: 10px;
        }

        .active {
          border-color: #1890ff;
          cursor: default;
        }
      }

      .orderAppointment-time-input {
        margin-left: 10px;
        width: 100px !important;

        .el-input__inner {
          border-right: none;
        }
      }

      .orderAppointment-time-select {
        .el-input {
          width: 60px;

          .el-input__inner {
            background: #f5f6fa;
            border-left: none;
          }
        }
      }

      .maxAppointment-input {
        width: 80px !important;
        margin: 0 6px;
      }

      .automatic-delivery-radio {
        display: flex;
        flex-flow: column;

        .el-radio {
          margin: 10px 0;
        }
      }

      .division {
        padding: 0 10px;
      }

      .error {
        .el-input__inner {
          border: 1px solid #f1495c !important;
        }
      }

      .error-msg {
        color: #f1495c;
      }

      .delect-week {
        color: #f1495c;
      }

      .time-list {
        margin-bottom: 6px;

        .el-date-editor {
          width: 138px !important;
        }

        .add {
          margin: 0 0 0 20px;
          color: #1890ff;
          cursor: pointer;
        }
      }

      .btn-week {
        color: #1890ff;
        cursor: pointer;
      }

      .btn-amend {
        color: #f1495c;
        margin-left: 16px;
        cursor: pointer;
      }

      .map-box {
        display: flex;

        .areas-conetn {
          height: 494px;
          overflow-y: auto;
        }

        .areas-block {
          position: relative;
          flex: 0 0 300px;
          height: 540px;
          border: 1px solid #ededed;
          margin-right: 20px;
          border-radius: 4px;
          overflow-y: hidden;
          padding-bottom: 45px;

          .areas-item {
            &:hover {
              background: #fff7f5;
            }

            background: #fff;

            .el-form-item {
              margin-bottom: 10px !important;

              .el-form-item__content {
                line-height: 38px !important;
              }
            }

            .areas-head-block {
              display: flex;
              justify-content: space-between;
              padding: 0 20px;
              height: 45px;
              line-height: 45px;
              background-color: #fafafa;
              color: #666;

              .title-circle {
                display: inline-block;
                width: 12px;
                height: 12px;
                border: 1px solid;
                border-radius: 50%;
                margin-right: 10px;
                transform: translateY(1px);
                overflow: hidden;
                line-height: 12px;
                border-color: rgb(111, 238, 12);

                .content {
                  opacity: 0.3;
                  display: inline-block;
                  width: 12px;
                  height: 12px;
                }
              }

              .btn-delect {
                color: #fb6638;
                cursor: pointer;
              }
            }

            .areas-item-block {
              padding: 20px 18px;

              .el-form-item__label {
                text-align: left;
              }

              .min-price-type-opction {
                margin-left: 6px;

                .el-input {
                  width: 135px;
                  height: 38px;
                }
              }

              .min-price-input {
                margin: 0 6px;
                width: 109px;
                height: 38px;

                .el-input__inner {
                  width: 70px;
                }
              }

              .el-input-group__append {
                padding: 4px 12px !important;
              }

              .delivery-cost-amout-input {
                width: 135px;
                height: 38px;
              }
            }
          }

          .acitve {
            background: #fff7f5;
          }

          .areas-conetn-footer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 45px;
            text-align: center;
            border-top: 1px solid #ededed;
            color: #fb6638;
            line-height: 45px;
            cursor: pointer;
            z-index: 1;
          }
        }

        .map-block {
          flex: 1 1 auto;
          border: 1px solid #ededed;
          border-radius: 4px;

          .map {
            width: 100%;
            height: 540px;
          }

          .sample {
            position: absolute;
            z-index: 2;
            border: 1px solid blue;
            background-color: white;
            white-space: nowrap;
            cursor: default;
            padding: 3px;
            font-size: 12px;
            line-height: 14px;
          }
        }
      }

      .week-checkbox-group {
        .el-checkbox__label {
          color: #666 !important;
        }
      }

      .in-advance-block {
        display: flex;
        align-items: center;

        .title-block {
          margin: 0 10px;
        }

        .time-input-block {
          width: 135px;
          height: 38px;
        }
      }

      .distance-input {
        width: 135px;

        .el-input-group__append {
          padding: 4px 12px !important;
        }
      }

      .distance-lable {
        margin: 0 10px;
      }

      .shop-address {
        width: 270px;
      }

      .distribution-area {
        .el-input__inner {
          line-height: initial !important;
        }
      }

      .el-form-item {
        margin-bottom: 30px !important;
      }

      .el-input {
        width: 270px;
        font-size: 14px;
      }

      .el-form-item__label {
        padding-right: 20px !important;
      }

      .el-input__inner {
        min-height: 38px !important;
        line-height: 38px !important;
      }

      .el-input .el-input__count {
        font-size: 14px !important;
      }

      .el-radio__input {
        transform: scale(130%);
      }

      .el-radio__inner {
        background: #fff !important;
      }

      .el-radio__input.is-checked .el-radio__inner::after {
        transform: translate(-50%, -50%) scale(1.2) !important;
        background-color: #1890ff !important;
        width: 5px !important;
        height: 5px !important;
      }

      .el-checkbox__inner {
        height: 18px;
        width: 18px;

        &::after {
          box-sizing: content-box;
          content: '';
          border: 2px solid #fff;
          border-left: 0;
          border-top: 0;
          height: 8px;
          width: 4px;
          left: 5px;
          top: 1px;
          position: absolute;
          transition: transform 0.15s ease-in 0.05s;
          transform-origin: center;
        }
      }
    }
  }

  .tips {
    position: relative;

    .example {
      color: #fb6638;
      cursor: pointer;

      &:hover {
        .example-img-box {
          opacity: 1;
          visibility: visible;
        }
      }

      .example-img-box {
        padding: 8px 16px;
        background-color: #fff;
        background-clip: padding-box;
        border-radius: 4px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
        position: absolute;
        will-change: top, left;
        top: -174px;
        left: 29%;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease-out;
        z-index: 1;

        &::after {
          content: '';
          width: 0px;
          height: 0px;
          display: block;
          border: 5px solid transparent;
          border-right: 5px solid white;
          position: relative;
          top: -222px;
          left: -26px;
        }

        .example-img {
          width: 200px;
          height: 400px;
        }
      }
    }
  }

  .distribution-amount {
    .distribution-select {
      .el-input {
        width: 135px;
      }
    }

    .distribution-input {
      width: 135px !important;

      .el-input__inner {
        width: 96px !important;
      }

      .el-input-group__append {
        padding: 4px 12px !important;
      }
    }

    .distribution-block-lable {
      margin: 0 10px;
    }

    .distribution-tips {
      margin: 10px;
    }
  }

  .footer {
    position: fixed; /* 使用fixed定位 */
    left: 0;
    bottom: 0;
    width: 100%;
    height: 58px;
    background: #fff;
    color: white;
    text-align: center;
    z-index: 1;

    display: flex;
    justify-content: center;
    padding: 10px 0;

    .btn {
      margin: 0 5px;
    }
  }

  .BMap_vectex_node:first-child {
    display: none;
  }
}
</style>