<template>
  <div class="drawer-container">
    <el-form ref="form" :model="form" label-width="170px" :rules="rules">
      <el-form-item label="收货人" prop="receiver">
        <el-input
          v-model="form.receiver"
          placeholder="请输入收货人"
          clearable
          style="width: 600px"
          @keyup.enter.native="onSubmit"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input
          v-model="form.phone"
          placeholder="请输入手机号码"
          clearable
          maxlength="11"
          style="width: 600px"
          @keyup.enter.native="onSubmit"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮编" prop="postalCode">
        <el-input
          v-model="form.postalCode"
          placeholder="请输入邮编"
          clearable
          style="width: 600px"
          @keyup.enter.native="onSubmit"
        ></el-input>
      </el-form-item>
      <el-form-item label="所在城市" prop="provinces">
        <el-cascader
          ref="refSubCat"
          size="small"
          v-model="form.provinces"
          placeholder="请选择所在城市"
          :options="areaTrea"
          :props="{ expandTrigger: 'hover' }"
          @change="handleChange"
          style="width: 600px"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input
          v-model="form.address"
          placeholder="请输入详细地址"
          clearable
          style="width: 600px"
          @keyup.enter.native="onSubmit"
        ></el-input>
      </el-form-item>

      <el-form-item label="经纬度" prop="longitudeLatitude">
        <el-input
          v-model="form.longitudeLatitude"
          disabled
          placeholder="请输入经纬度"
          clearable
        />
      </el-form-item>
      <!-- <div id="container1" class="map-box"></div> -->
      <GDMap
        ref="gdMapRef"
        :defaultMarker="defaultMarker"
        @change="mapchange"
      />

      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认</el-button>
        <el-button @click="handleClose">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  businessReturnAddressAdd,
  businessUpdateRecordInfo,
} from "@/api/receivingAddress.js";
import { cnAreaTree } from "@/api/shop.js";
import GDMap from "@/components/gdMap/index";

export default {
  components: {
    GDMap,
  },
  data() {
    return {
      form: {},
      areaTrea: [],
      rules: {
        receiver: [
          { required: true, message: "请输入收货人", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        postalCode: [
          { required: true, message: "请输入邮编", trigger: "blur" },
        ],
        provinces: [
          { required: true, message: "请选择所在城市", trigger: "change" },
        ],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
        longitudeLatitude: [
          { required: true, message: "请选择经纬度", trigger: "blur" },
        ],
      },
      // 地图回显
      defaultMarker: {
        location: {},
      },
    };
  },
  created() {
    this.getInfo();
    this.getCnAreaTree();
  },
  methods: {
    getCnAreaTree() {
      cnAreaTree().then((res) => {
        this.areaTrea = res.data?.children;
      });
    },
    // 省市区选择
    handleChange(value) {
      this.form.provinces = value;
      this.form.provinceCode = value[0];
      this.form.provinceName =
        this.$refs["refSubCat"].getCheckedNodes()[0].pathLabels[0];
      this.form.cityCode = value[1];
      this.form.cityName =
        this.$refs["refSubCat"].getCheckedNodes()[0].pathLabels[1];
      this.form.areaCode = value[2];
      this.form.areaName =
        this.$refs["refSubCat"].getCheckedNodes()[0].pathLabels[2];
    },
    mapchange(e) {
      this.form = {
        ...this.form,
        longitude: e.location.lng,
        latitude: e.location.lat,
        longitudeLatitude: e.location.lng + "," + e.location.lat,
        address: e.address,
      };
    },
    getInfo() {
      businessUpdateRecordInfo().then((res) => {
        if (res.code === 200 && res.data) {
          res.data.provinces = [
            res.data.provinceCode,
            res.data.cityCode,
            res.data.areaCode,
          ];
          res.data.longitudeLatitude =
            res.data.longitude + "," + res.data.latitude;
          this.form = res.data;

          if (res.data.longitude && res.data.latitude) {
            this.defaultMarker = {
              location: {
                lng: res.data.longitude,
                lat: res.data.latitude,
              },
              address: res.data.address,
            };
          }
        }
        this.$refs.gdMapRef.initAMap();
      });
    },
    handleClose() {
      this.form = {};
      this.$refs.form.resetFields();
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        // console.log(valid);
        if (valid) {
          const params = { ...this.form };
          businessReturnAddressAdd(params).then((res) => {
            if (res.code === 200) {
              this.$message.success("保存成功");
            }
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.drawer-container {
  padding: 20px 40px 20px 20px;
  .ml-10 {
    margin-left: 10px;
    color: #666666;
  }
}
</style>
