<template>
  <ContainerTit>
    <div slot="headr">
      <el-button :loading="loading">返回</el-button>
      <el-button type="primary" :loading="loading">提交保存</el-button>
    </div>
    <div style="background-color: #fff; padding: 10px">
      <el-form
        ref="add_form"
        :rules="add_rules"
        :model="add_form"
        size="small"
        label-width="100px"
      >
        <el-form-item label="地图类型：">
          <el-checkbox v-model="add_form.map_type" disabled>
            发货地址
          </el-checkbox>
        </el-form-item>
        <el-form-item label="联系人:" prop="contacts">
          <el-input v-model="add_form.contacts"></el-input>
        </el-form-item>
        <el-form-item label="手机号码:" prop="mobile">
          <el-input v-model="add_form.mobile"></el-input>
        </el-form-item>
        <el-form-item label="电话:">
          <el-input v-model="add_form.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮编:" prop="postcode">
          <el-input v-model="add_form.postcode"></el-input>
        </el-form-item>
        <el-form-item label="地址：">
          <span>
            <RegionSelect
              v-model="add_form.region"
              size="medium"
              @change="regionChange"
            />
          </span>
          <br />
          <el-input
            v-model="add_form.keyword"
            placeholder="请输入内容"
            style="margin-top: 10px; width: 40%"
          >
            <template slot="append">搜索地图</template>
          </el-input>
        </el-form-item>
        <el-form-item label="地图定位：">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="dispatch">
                <div class="dispatch_add"></div>
                <div class="dispatch_info"></div>
              </div>
            </el-col>
            <el-col :span="17">
              <div class="dispatch">
                <baidu-map
                  class="map"
                  :center="center"
                  :zoom="zoom"
                  :scroll-wheel-zoom="true"
                >
                  <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>
                </baidu-map>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="状态：">
          <el-checkbox v-model="add_form.status">设为默认发货地址</el-checkbox>
        </el-form-item>
      </el-form>
    </div>
  </ContainerTit>
</template>

<script>
  import RegionSelect from "@/component/common/RegionSelectJSON";
  export default {
    name: "ShopAddress",
    components: {
      RegionSelect,
    },
    data() {
      return {
        center: { lng: 116.404, lat: 39.915 },
        zoom: 15,
        loading: false,
        status: true,
        add_form: {
          map_type: true,
          contacts: "",
          mobile: "",
          phone: "",
          postcode: "",
          region: [],
          keyword: "星巴克",
        },
        add_rules: {
          contacts: [
            { required: true, message: "请输入联系人", trigger: "blur" },
          ],
          mobile: [
            { required: true, message: "请输入手机号码", trigger: "blur" },
          ],
          postcode: [
            { required: true, message: "请输入邮编", trigger: "blur" },
          ],
        },
      };
    },
    methods: {
      regionChange(row) {
        this.add_form.region = row;
      },
    },
  };
</script>

<style scoped>
  .el-input {
    width: 24%;
  }
  .dispatch {
    height: 500px;
    border: 1px solid #ededed;
  }
  .map {
    height: 500px;
    width: 100%;
  }
  .dispatch_add {
    height: 470px;
    border-bottom: 1px solid #ededed;
    overflow-y: auto;
  }
  .dispatch_info {
    text-align: center;
    height: 30px;
    line-height: 30px;
    background-color: #e5ecf9;
  }
</style>
