<template>
  <div class="edit-self-pick-up-site-container">
    <div class="block">
      <div class="head">自提点基本信息</div>
      <div class="content">
        <div class="left">
          <el-form ref="form" :model="form" label-width="180px" :rules="rules">
            <el-form-item label="自提点类型" prop="type">
              <el-radio-group v-model="form.type" @change="handleRadioType">
                <el-radio :label="0">使用已有门店</el-radio>
                <el-radio :label="1">自定义自提点</el-radio>
              </el-radio-group>
            </el-form-item>
            <div v-if="form.type == 0">
              <el-form-item label="门店名称" prop="name">
                <el-select
                  v-model="form.name"
                  placeholder="请选择门店"
                  class="input-address"
                >
                  <el-option
                    v-for="(item, index) of nameOpction"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="门店详细地址" prop="address">
                <el-input
                  disabled
                  class="input-address"
                  v-model="form.address"
                  placeholder="门店详细地址"
                ></el-input>
              </el-form-item>
              <el-form-item label="门店营业时间" required>
                <div class="time-block">
                  <el-time-picker
                    class="input-time"
                    type="date"
                    placeholder="开始时间"
                    v-model="form.time1"
                    style="width: 100%"
                  ></el-time-picker>
                  <span class="line">-</span>
                  <el-time-picker
                    class="input-time"
                    placeholder="结束时间"
                    v-model="form.time2"
                    style="width: 100%"
                  ></el-time-picker>
                </div>
              </el-form-item>
            </div>
            <div v-if="form.type == 1">
              <el-form-item label="自提点名称" prop="pickName">
                <el-input
                  class="input-address"
                  v-model="form.pickName"
                  placeholder="请输入自提点名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="自提点所在地" prop="queryArea.city.name">
                <Area v-model="queryArea" width="400" />
              </el-form-item>
              <el-form-item label="自提点详细地址" prop="pickAddress">
                <keyword
                  :keyword="form.pickAddress"
                  :location="queryArea.city.name"
                  :style="{ width: '400px' }"
                  @getAddress="getAddress"
                />
              </el-form-item>
              <el-form-item label="门店营业时间" required>
                <div class="time-block">
                  <el-form-item prop="pickTime1">
                    <el-time-picker
                      class="input-time"
                      type="date"
                      placeholder="开始时间"
                      v-model="form.pickTime1"
                      style="width: 100%"
                    ></el-time-picker>
                  </el-form-item>
                  <span class="line">-</span>
                  <el-form-item prop="pickTime2">
                    <el-time-picker
                      class="input-time"
                      placeholder="结束时间"
                      v-model="form.pickTime2"
                      style="width: 100%"
                    ></el-time-picker>
                  </el-form-item>
                </div>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="right">
          <baidu-map class="map" :center="center" :zoom="15">
            <!-- <bm-overlay
              pane="labelPane"
              :class="{ sample: true }"
              v-if="showOverlay"
              @draw="draw"
            >
              <div>{{ form.pickName }}</div>
            </bm-overlay> -->
            <bm-marker v-if="showOverlay" :position="center" :dragging="true">
              <bm-label
                class="bm-lable"
                v-if="showOverlay"
                :content="form.pickName"
                :labelStyle="{
                  fontSize: '12px',
                  display: showOverlay ? 'table' : 'inline',
                }"
                :offset="{ width: -35, height: 35 }"
              />
            </bm-marker>
          </baidu-map>
        </div>
      </div>
    </div>
    <div class="block">
      <div class="head">自提点联系管理</div>
      <el-form
        class="bottom-form"
        ref="form"
        :model="form"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item class="item-block">
          <el-form-item label="联系人" prop="contacts">
            <el-input
              class="input-address"
              v-model="form.contacts"
              placeholder="请输入联系人"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="联系电话"
            style="margin-left: 50px"
            prop="mobile"
          >
            <el-input
              class="input-address"
              v-model="form.mobile"
              placeholder="请输入自提点电话"
            ></el-input>
          </el-form-item>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <el-button class="btn" size="medium" @click="handerGoTo">取消</el-button>
      <el-button class="btn" size="medium" type="primary" @click="handerSubmit">
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
// 校验手机
const validateMobile = function (rule, value, callback) {
  const phoneRegex = /^1[3-9]\d{9}$/
  if (!value) {
    return callback(new Error('手机号码不能为空'))
  }
  if (!phoneRegex.test(value)) {
    return callback(new Error('请输入正确的手机号码'))
  }
  callback()
}

import Area from '@/components/VabArea/area'
import keyword from '@/components/baiduMap/keyword'
export default {
  components: { Area, keyword },
  data() {
    return {
      showOverlay: false,
      center: {
        lng: 0,
        lat: 0,
      },
      form: {
        type: 0,
        name: null,
        address: '',
        time1: '',
        time2: '',
        pickName: '',
        pickAddress: '',
        pickTime1: '',
        pickTime2: '',
        lng: 0,
        lat: 0,
        contacts: '',
        mobile: null,
      },
      queryArea: {
        province: { code: '', name: '' },
        city: { code: '', name: '' },
        district: { code: '', name: '' },
      },
      rules: {
        type: [
          { required: true, message: '请选择自提点类型', trigger: 'change' },
        ],
        name: [{ required: true, message: '请选择门店', trigger: 'change' }],
        address: [
          { required: true, message: '请输入门店详细地址', trigger: 'blur' },
        ],
        pickName: [
          { required: true, message: '请输入自提点名称', trigger: 'blur' },
        ],
        time1: [
          {
            type: 'date',
            required: true,
            message: '请选择开始时间',
            trigger: 'change',
          },
        ],
        time2: [
          {
            type: 'date',
            required: true,
            message: '请选择结束时间',
            trigger: 'change',
          },
        ],
        'queryArea.city.name': [
          { required: true, message: '请选择自提点所在地', trigger: 'change' },
        ],
        pickAddress: [
          { required: true, message: '请输入自提点详细地址', trigger: 'blur' },
        ],
        pickTime1: [
          {
            type: 'date',
            required: true,
            message: '请选择开始时间',
            trigger: 'change',
          },
        ],
        pickTime2: [
          {
            type: 'date',
            required: true,
            message: '请选择结束时间',
            trigger: 'change',
          },
        ],
        contacts: [
          { required: true, message: '请输入联系人', trigger: 'blur' },
        ],
        mobile: [
          { required: true, message: '请输入自提点电话', trigger: 'blur' },
          { validator: validateMobile.bind(this), trigger: 'blur' },
        ],
      },

      nameOpction: [
        {
          value: 0,
          label: '岛内价',
        },
        {
          value: 1,
          label: '哒哒',
        },
      ],
    }
  },
  created() {},
  methods: {
    handerGoTo() {
      this.$router.push({
        path: '/selfPickUpSite',
      })
    },
    validateMobile() {},
    getAddress(address) {
      this.form.pickAddress = address.value
      this.form.lng = address.lng
      this.form.lat = address.lat
      this.center.lng = address.lng
      this.center.lat = address.lat
      this.showOverlay = true
    },
    draw({ el, BMap, map }) {
      const pixel = map.pointToOverlayPixel(
        new BMap.Point(this.center.lng, this.center.lat)
      )
      console.log(el)
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    },
    handleRadioType(e) {
      if (e == 0) {
        this.showOverlay = false
      }
    },
    checkPickNameLength(text) {
      switch (text.length) {
        case 5:
          return -10

        default:
          return0
      }
    },
    handerSubmit() {},
  },
}
</script>

<style lang="scss">
.edit-self-pick-up-site-container {
  padding: 10px !important;
  .block {
    .head {
      padding: 10px 20px 20px 20px;
      font-size: 16px;
      font-weight: bold;
      color: #333;
      box-shadow: inset 0 -1px 0 #efefef;
    }
    .content {
      padding: 60px 0;
      display: flex;

      .right {
        flex: 1;
        margin-left: 100px;

        .map {
          width: 100%;
          height: 420px;

          .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;
          }

          .BMapLabel {
            background: #000 !important;
            border: none !important;
            padding: 5px 10px !important;
            background: #0a87ff !important;
            font-weight: 500;
            border-radius: 3px;
            outline: none;
            color: #fff;
            box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.7);
          }
        }
      }

      .el-form-item {
        margin-bottom: 40px;
      }

      .line {
        padding: 0 10px;
      }
    }
  }

  .bottom-form {
    padding: 50px 0;

    .item-block {
      .el-form-item__content {
        display: flex;
      }
    }
  }

  .el-input__inner {
    height: 38px;
    line-height: 38px;
    font-size: 14px;
  }

  .input-address {
    .el-input__inner {
      width: 400px;
    }
  }

  .time-block {
    display: flex;
  }

  .input-time {
    width: 127px !important;

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

  .el-form-item__label {
    padding-right: 30px !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;
    }
  }

  .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;
    }
  }
}
</style>