<template>
  <ContainerTit>
    <div slot="headr">
      <el-button
        :loading="loading"
        @click="$router.push('/SystemSettings/jiaoyiset/Delivery')"
      >
        返回
      </el-button>
      <el-button type="primary" :loading="loading">提交保存</el-button>
    </div>
    <el-form
      ref="add_form"
      :rules="add_rules"
      :model="add_form"
      size="small"
      label-width="140px"
    >
      <div class="detail-tab-item">
        <p class="detail-tab-title">同城配送</p>
        <div class="detail-tab-main">
          <el-form-item label="配送方式：" prop="dispatch_type">
            <el-checkbox-group v-model="add_form.dispatch_type">
              <el-checkbox label="商家配送"></el-checkbox>
              <el-checkbox label="第三方配送"></el-checkbox>
            </el-checkbox-group>
            <p class="tip">开启后将由第三方平台为您配送。</p>
          </el-form-item>
          <div
            v-if="add_form.dispatch_type.find((item) => item === '第三方配送')"
            style="width: 40%"
          >
            <el-form-item label="app_key:" prop="app_key">
              <el-input v-model="add_form.app_key"></el-input>
            </el-form-item>
            <el-form-item label="app_secret:" prop="app_secret">
              <el-input v-model="add_form.app_secret"></el-input>
            </el-form-item>
            <el-form-item label="商户ID:" prop="merchants_id">
              <el-input v-model="add_form.merchants_id"></el-input>
            </el-form-item>
            <el-form-item label="门店编码:" prop="shop_code">
              <el-input v-model="add_form.shop_code"></el-input>
            </el-form-item>
            <el-form-item label="城市选择:" prop="city_select">
              <el-button v-model="add_form.city_select" size="small">
                城市选择
              </el-button>
            </el-form-item>
          </div>
          <el-form-item label="配送时间买家自选：">
            <el-radio-group v-model="add_form.dispatch_time">
              <el-radio :label="5">开启</el-radio>
              <el-radio :label="4">关闭</el-radio>
            </el-radio-group>
            <p class="tip">
              开启后，买家下单选择同城配送时，可选择配送时间，提交订单后，将在买家备注中显示。
            </p>
          </el-form-item>
          <div v-if="add_form.dispatch_time === 5">
            <el-form-item label="配送时段：">
              <el-radio-group v-model="add_form.dispatch_timeInterval">
                <el-radio :label="1">全天</el-radio>
                <el-radio :label="2">自定义</el-radio>
              </el-radio-group>
              <p class="tip">
                自定义时间段，请将小程序升级至2.1.0版本及以上才能生效。
              </p>
              <p class="tip">
                所设时间段为可配送时间段，手机端展示时间段会根据细分时段划分展示。
              </p>
              <div v-if="add_form.dispatch_timeInterval === 2">
                <el-checkbox-group v-model="add_form.dispatch_data">
                  <el-checkbox label="周日"></el-checkbox>
                  <el-checkbox label="周一"></el-checkbox>
                  <el-checkbox label="周二"></el-checkbox>
                  <el-checkbox label="周三"></el-checkbox>
                  <el-checkbox label="周四"></el-checkbox>
                  <el-checkbox label="周五"></el-checkbox>
                  <el-checkbox label="周六"></el-checkbox>
                </el-checkbox-group>
                <el-time-picker
                  v-model="add_form.dispatch_timeRange"
                  is-range
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                ></el-time-picker>
                <span style="font-size: 12px; margin-left: 10px">
                  <el-button size="mini" type="text">添加</el-button>
                </span>
              </div>
            </el-form-item>
            <el-form-item label="细分时段：">
              <el-radio-group v-model="add_form.timeInterval">
                <el-radio :label="1">天</el-radio>
                <el-radio :label="2">小时</el-radio>
                <el-radio :label="2">30分钟</el-radio>
                <el-radio :label="2">15分钟</el-radio>
              </el-radio-group>
              <p class="tip">
                手机端选择送达时间，按时间段细分
                <el-button size="mini" type="text">查看示例</el-button>
              </p>
            </el-form-item>
            <el-form-item label="预约下单：">
              <el-radio-group v-model="add_form.place_order">
                <el-radio :label="1">无需提前</el-radio>
                <el-radio :label="2">提前</el-radio>
              </el-radio-group>
              <el-input
                v-model="add_form.order_data_num"
                class="input-with-select"
                :disabled="add_form.place_order === 1"
                style="width: 20%; margin-left: 10px"
              >
                <el-select
                  slot="prepend"
                  v-model="add_form.order_data"
                  placeholder="天"
                >
                  <el-option label="天" :value="1"></el-option>
                  <el-option label="小时" :value="2"></el-option>
                  <el-option label="分钟" :value="3"></el-option>
                </el-select>
              </el-input>
              <p class="tip">
                按天时为自然天，不管当前几点，只能下明天以后的订单。
              </p>
            </el-form-item>
            <el-form-item label="最长预约：">
              <el-radio-group v-model="add_form.max_appointment">
                <el-radio :label="1">只能当天下单</el-radio>
                <el-radio :label="2">
                  可预约
                  <el-input
                    v-model="add_form.day_range"
                    :disabled="add_form.max_appointment === 1"
                    style="width: 20%"
                  ></el-input>
                  天内下单
                </el-radio>
              </el-radio-group>
              <p class="tip">
                如，可预约7天内订单，那么就是今天+未来6天内的送达时间可以让买家选择
              </p>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="detail-tab-item">
        <p class="detail-tab-title">配送区域设置</p>
        <div class="detail-tab-main">
          <el-form-item label="店铺地址：" prop="address">
            <el-input
              v-model="add_form.address"
              disabled
              style="width: 30%"
            ></el-input>
            <!--            <span>-->
            <!--              <el-button-->
            <!--                size="mini"-->
            <!--                type="text"-->
            <!--                style="margin-left: 10px"-->
            <!--                @click="$router.push('/SystemSettings/jiaoyiset/ShopAddress')"-->
            <!--              >-->
            <!--                修改-->
            <!--              </el-button>-->
            <!--            </span>-->
            <p class="tip">配送区域以此地址为起点进行距离计算</p>
          </el-form-item>
          <el-form-item label="配送区域：">
            <el-radio-group v-model="add_form.dispatch_origin">
              <el-radio :label="1">按不同区域</el-radio>
              <el-radio :label="2">按不同距离</el-radio>
              <el-radio :label="3">按行政区域</el-radio>
            </el-radio-group>
            <p class="tip">
              订单中商品在优惠前的价格（不包含运费）低于起送金额时，买家无法下单
            </p>
          </el-form-item>
          <el-form-item
            v-if="add_form.dispatch_origin === 3"
            label="可配送区域："
          >
            <el-select
              v-model="add_form.dispatch_originable"
              placeholder="请选择"
            >
              <el-option
                v-for="item in originable_list"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <p class="tip">
              订单中商品在优惠前的价格（不包含运费）低于起送金额时，买家无法下单
            </p>
          </el-form-item>
          <el-form-item
            v-if="
              add_form.dispatch_origin === 1 || add_form.dispatch_origin === 2
            "
            label="划分方式："
          >
            <el-radio-group v-model="add_form.origin_type">
              <el-radio :label="1">半径</el-radio>
              <el-radio :label="2">自定义</el-radio>
            </el-radio-group>
            <div v-if="add_form.dispatch_origin === 2">
              <div>
                <span>
                  距离
                  <el-input
                    v-model="add_form.distance"
                    placeholder="请输入内容"
                    style="width: 14%"
                  >
                    <template slot="append">km</template>
                  </el-input>
                  内,
                </span>
                <span>
                  重量
                  <el-input
                    v-model="add_form.weight"
                    placeholder="请输入内容"
                    style="width: 14%"
                  >
                    <template slot="append">kg</template>
                  </el-input>
                  内,
                </span>
                <span>
                  配送费用
                  <el-input
                    v-model="add_form.delivery_price"
                    placeholder="请输入内容"
                    style="width: 14%"
                  >
                    <template slot="append">元</template>
                  </el-input>
                  内
                </span>
              </div>
              <div style="margin-top: 10px">
                <span>
                  距离每增加
                  <el-input
                    v-model="add_form.distance_add"
                    placeholder="请输入内容"
                    style="width: 14%"
                  >
                    <template slot="append">km</template>
                  </el-input>
                  ,
                </span>
                <span>
                  运费将增加
                  <el-input
                    v-model="add_form.delivery_price_add"
                    placeholder="请输入内容"
                    style="width: 14%"
                  >
                    <template slot="append">元</template>
                  </el-input>
                </span>
              </div>
              <div style="margin-top: 10px">
                <span>
                  重量每增加
                  <el-input
                    v-model="add_form.weight_add"
                    placeholder="请输入内容"
                    style="width: 14%"
                  >
                    <template slot="append">kg</template>
                  </el-input>
                  ,
                </span>
                <span>
                  运费将增加
                  <el-input
                    v-model="add_form.delivery_price_weightAdd"
                    placeholder="请输入内容"
                    style="width: 14%"
                  >
                    <template slot="append">元</template>
                  </el-input>
                </span>
              </div>
            </div>
            <p class="tip">
              当配送区域交叉时，以最低费用计算费用。
              因考虑实际送货路况，配送费按汽车导航距离计算，非地图直线距离。
            </p>
            <el-row :gutter="20" style="margin-top: 10px">
              <el-col :span="6">
                <div class="dispatch">
                  <div class="dispatch_add">
                    <ul>
                      <li
                        v-for="(item, index) in dispatch_addList"
                        :key="index"
                      >
                        <div class="dispatch_card">
                          <span class="float_left">区域{{ index + 1 }}</span>
                          <span class="float_right">
                            <el-button
                              size="mini"
                              type="text"
                              @click="delDispatch(index)"
                            >
                              删除
                            </el-button>
                          </span>
                        </div>
                        <div class="dispatch_card_info">
                          <el-form-item
                            label="起送金额："
                            label-width="100px"
                            prop="start_price"
                          >
                            <el-input
                              v-model="item.start_price"
                              placeholder="请输入内容"
                            >
                              <template slot="append">元</template>
                            </el-input>
                          </el-form-item>
                          <el-form-item
                            label="配送费："
                            label-width="100px"
                            prop="delivery_fee"
                          >
                            <el-input
                              v-model="item.delivery_fee"
                              placeholder="请输入内容"
                            >
                              <template slot="append">元</template>
                            </el-input>
                          </el-form-item>
                          <el-form-item
                            label="运费减免："
                            label-width="100px"
                            prop="delivery_reduction"
                          >
                            <div class="dispatch_price">
                              <span style="margin-right: 4px">满</span>
                              <span>
                                <el-input
                                  v-model="item.delivery_reduction.full"
                                  placeholder="请输入内容"
                                >
                                  <template slot="append">元</template>
                                </el-input>
                              </span>
                            </div>
                            <div
                              class="dispatch_price"
                              style="margin-top: 10px"
                            >
                              <span style="margin-right: 4px">减</span>
                              <span>
                                <el-input
                                  v-model="item.delivery_reduction.reduce"
                                  placeholder="请输入内容"
                                >
                                  <template slot="append">元</template>
                                </el-input>
                              </span>
                            </div>
                          </el-form-item>
                        </div>
                      </li>
                    </ul>
                  </div>
                  <div class="dispatch_info" @click="addDispatch">
                    +添加配送区域 {{ dispatch_addList.length }}/10
                  </div>
                </div>
              </el-col>
              <el-col :span="18">
                <div class="dispatch">
                  <baidu-map
                    class="map"
                    :center="center"
                    :zoom="zoom"
                    :scroll-wheel-zoom="true"
                    :dragging="mapDragging"
                    @ready="handler"
                    @load="load"
                    @reload="reload"
                    @mousemove="moveEvent"
                  >
                    <bm-navigation
                      anchor="BMAP_ANCHOR_TOP_RIGHT"
                      type="NavigationControlType"
                    ></bm-navigation>
                    <bm-geolocation
                      anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
                      :show-address-bar="true"
                      :auto-location="true"
                    ></bm-geolocation>
                    <bm-circle
                      v-if="add_form.origin_type === 1"
                      :center="circlePath.center"
                      :radius="circlePath.radius"
                      stroke-color="blue"
                      :stroke-opacity="0.5"
                      :stroke-weight="2"
                      :editing="true"
                      @lineupdate="updateCirclePath"
                    ></bm-circle>
                    <bm-polygon
                      v-if="add_form.origin_type === 2"
                      :path="polygonPath"
                      :editing="true"
                      @mouseover="mapDragging = false"
                      @mouseout="mapDragging = true"
                      @mousedown="areaDragging = true"
                      @mouseup="areaDragging = false"
                    />
                  </baidu-map>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
        </div>
      </div>
      <div v-if="add_form.dispatch_origin === 3" class="detail-tab-item">
        <p class="detail-tab-title">配送价格</p>
        <div class="detail-tab-main">
          <el-form-item label="起送价格：">
            <el-input
              v-model="add_form.start_price"
              placeholder="请输入内容"
              style="width: 16%"
            >
              <template slot="append">元</template>
              <p class="tip">
                订单中商品在优惠券的价格（不包含运费）低于配送价时，买家无法下单
              </p>
            </el-input>
          </el-form-item>
          <el-form-item label="配送费：">
            <el-input
              v-model="add_form.delivery_fee"
              placeholder="请输入内容"
              style="width: 16%"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="运费减免：">
            <div class="dispatch_price">
              <span style="margin-right: 4px">满</span>
              <span>
                <el-input
                  v-model="add_form.delivery_reduction.full"
                  placeholder="请输入内容"
                >
                  <template slot="append">元</template>
                </el-input>
              </span>
            </div>
            <div class="dispatch_price" style="margin-top: 10px">
              <span style="margin-right: 4px">减</span>
              <span>
                <el-input
                  v-model="add_form.delivery_reduction.reduce"
                  placeholder="请输入内容"
                >
                  <template slot="append">元</template>
                </el-input>
              </span>
            </div>
            <p>运费最低减为0</p>
          </el-form-item>
          <el-form-item label="阶梯价格：">
            <el-switch v-model="add_form.ladder_price"></el-switch>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </ContainerTit>
</template>

<script>
  export default {
    name: "Dispatch",
    data() {
      return {
        center: { lng: 116.404, lat: 39.915 },
        zoom: 15,
        circlePath: {
          center: {
            lng: 116.404,
            lat: 39.915,
          },
          radius: 500,
        },
        mapDragging: true, //允许地图拖动
        areaDragging: false, //允许区域拖动
        polygonPath: [
          //多边形区域
          { lng: 116.412732, lat: 39.911707 },
          { lng: 116.39455, lat: 39.910932 },
          { lng: 116.403461, lat: 39.921336 },
        ],
        mouseLocation: { lng: 0, lat: 0 },
        loading: false,
        originable_list: [
          {
            value: 1,
            label: "未央区",
          },
          {
            value: 2,
            label: "莲湖区",
          },
        ],
        add_form: {
          dispatch_type: [],
          app_key: "",
          app_secret: "",
          merchants_id: "",
          shop_code: "",
          city_select: [],
          dispatch_time: 4,
          dispatch_timeInterval: 1,
          dispatch_data: [],
          dispatch_timeRange: "",
          timeInterval: 1,
          place_order: 1,
          order_data_num: 1,
          order_data: 1,
          day_range: 1,
          max_appointment: 1,
          address: "陕西省西安市未央区大明宫万达",
          dispatch_origin: 1,
          origin_type: 1,
          distance: 0,
          weight: 0,
          delivery_price: 0,
          distance_add: 0,
          delivery_price_add: 0,
          weight_add: 0,
          delivery_price_weightAdd: 0,
          dispatch_originable: 1,
          start_price: 0,
          delivery_fee: 0,
          delivery_reduction: {
            full: 0,
            reduce: 0,
          },
          ladder_price: true,
          dispatch_list: {
            start_price: 0,
            delivery_fee: 0,
            delivery_reduction: {
              full: 0,
              reduce: 0,
            },
          },
        },
        dispatch_addList: [],
        add_rules: {
          start_price: [
            { required: true, message: "请输入起送金额", trigger: "blur" },
          ],
          delivery_fee: [
            { required: true, message: "请输入配送费用", trigger: "blur" },
          ],
          delivery_reduction: [
            { required: true, message: "请输入满减金额", trigger: "blur" },
          ],
          address: [
            { required: true, message: "店铺地址不能为空", trigger: "blur" },
          ],
          app_key: [
            { required: true, message: "app_key不能为空", trigger: "blur" },
          ],
          app_secret: [
            { required: true, message: "app_secret不能为空", trigger: "blur" },
          ],
          merchants_id: [
            { required: true, message: "商户ID不能为空", trigger: "blur" },
          ],
          shop_code: [
            { required: true, message: "请输入门店编码", trigger: "blur" },
          ],
          city_select: [
            { required: true, message: "请选择城市", trigger: "change" },
          ],
          dispatch_type: [
            { required: true, message: "请选择配送方式", trigger: "change" },
          ],
        },
      };
    },
    methods: {
      addDispatch() {
        this.dispatch_addList.push(this.add_form.dispatch_list);
        this.circlePath.center = this.add_form.address;
        this.circlePath.radius = 1000;
      },
      delDispatch(index) {
        this.dispatch_addList.splice(index, 1);
      },
      updateCirclePath(e) {
        this.circlePath.center = e.target.getCenter();
        this.circlePath.radius = e.target.getRadius();
      },
      handler({ BMap, map }) {
        console.log(BMap, map);
        // this.center = this.add_form.address;
      },
      load() {
        this.top = this.getScrollTop();
        if (this.top) {
          this.setScrollTop(0);
        }
      },
      reload() {
        this.setScrollTop(this.top);
        this.top = 0;
      },
      getScrollTop() {
        let scrollTop = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
          scrollTop = document.documentElement.scrollTop;
        } else if (document.body) {
          scrollTop = document.body.scrollTop;
        }
        return scrollTop;
      },
      setScrollTop(top) {
        if (!isNaN(top)) {
          if (
            document.documentElement &&
            document.documentElement.scrollTop !== undefined
          ) {
            document.documentElement.scrollTop = top;
          } else if (document.body) {
            document.body.scrollTop = top;
          }
        }
      },
      moveEvent(e) {
        if (this.areaDragging) {
          if (this.mouseLocation.lng == 0 && this.mouseLocation.lat == 0) {
            this.mouseLocation.lng = e.point.lng;
            this.mouseLocation.lat = e.point.lat;
            return;
          }
          const newLng = e.point.lng,
            newLat = e.point.lat,
            lngDiff = newLng - this.mouseLocation.lng,
            latDiff = newLat - this.mouseLocation.lat;
          this.polygonPath.forEach((item) => {
            item.lng += lngDiff;
            item.lat += latDiff;
            item.lng = Math.floor(item.lng * 100000) / 100000;
            item.lat = Math.floor(item.lat * 100000) / 100000;
          });
          this.mouseLocation.lng = newLng;
          this.mouseLocation.lat = newLat;
          return;
        }
        if (this.mouseLocation.lng != 0 || this.mouseLocation.lat != 0) {
          this.mouseLocation.lng = 0;
          this.mouseLocation.lat = 0;
        }
      },
    },
  };
</script>
<style scoped>
  .dispatch {
    height: 500px;
    border: 1px solid #ededed;
  }
  .map {
    height: 500px;
    width: 100%;
  }
  .dispatch_add {
    height: 460px;
    border-bottom: 1px solid #ededed;
    overflow-y: auto;
  }
  .dispatch_info {
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
  }
  .dispatch_card {
    height: 48px;
    line-height: 48px;
    padding: 0 20px;
    border-bottom: 1px solid #ededed;
    background-color: #fafafa;
  }
  .dispatch_card_info {
    margin-top: 10px;
    padding: 0 10px;
    border-bottom: 1px solid #ededed;
  }
  .dispatch_price {
    display: flex;
    flex-direction: row;
  }
  .tip {
    font-size: 12px;
    color: #666666;
  }
  .el-select {
    width: 60px;
  }
</style>
