<template>
  <Drawer :title="form.id ? '编辑' : '新增'" :visible.sync="drawer" :showFooter="true" :skeleton="skeletonLoading"
    :wrapperClosable="true" :size="$drawerWidth(800)" :before-close="handleClose">
    <div style="padding: 10px 40px 20px 10px">
      <el-form ref="formRef" :model="form" :rules="rules" :size="ELsize" label-width="120px">
        <el-form-item label="自提点名称" prop="pointName">
          <el-input v-model="form.pointName" placeholder="请输入自提点名称" clearable maxlength="50"></el-input>
        </el-form-item>

        <el-form-item label="自提点负责人" prop="receiver">
          <el-input v-model="form.receiver" placeholder="请输入自提点负责人" clearable maxlength="30"></el-input>
        </el-form-item>

        <el-form-item label="负责人电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入负责人电话" clearable maxlength="11"></el-input>
        </el-form-item>

        <el-form-item label="邮编" prop="postalCode">
          <el-input v-model="form.postalCode" placeholder="请输入邮编" clearable></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: 100%"></el-cascader>
        </el-form-item>

        <el-form-item label="详细地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入详细地址" clearable></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-form-item>
      </el-form>
    </div>
    <template v-slot:footer>
      <el-button :size="ELsize" type="primary" @click="submitForm()">提交</el-button>
      <el-button :size="ELsize" @click="handleClose()">取消</el-button>
      <!-- <el-button :size="ELsize" @click.stop="DrawerVisible = false">取消</el-button> -->
    </template>
  </Drawer>
  <!-- <el-drawer :title="form.id ? '编辑' : '新增'" :visible.sync="drawer" :direction="direction" :before-close="handleClose"
    size="700px">

  </el-drawer> -->
</template>
<script>
import {
  businessSelfPickupAddressAdd,
  businessSelfPickupAddressEdit,
} from "@/api/pickupAddress";
import GDMap from "@/components/gdMap/index";

export default {
  components: { GDMap },
  props: {
    areaTrea: {
      type: Array,
      default: () => [],
    },
  },

  data() {
    return {
      skeletonLoading: false,
      loading: false,
      drawer: false,
      direction: "rtl",
      form: {},
      rules: {
        pointName: [
          { required: true, message: "请输入自提点名称", trigger: "blur" },
        ],
        receiver: [
          { required: true, message: "自提点负责人", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入负责人电话", trigger: "blur" },
          { max: 11, message: "长度不能超过11个字符", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "格式不正确",
            trigger: "blur",
          },
        ],
        provinces: [
          { required: true, message: "请选择所在城市", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
        longitudeLatitude: [
          { required: true, message: "请选择经纬度", trigger: "blur" },
        ],
        postalCode: [
          { required: true, message: "请输入邮编", trigger: "blur" },
        ],
      },
      // 地图回显
      defaultMarker: {
        location: {},
      },
    };
  },

  methods: {
    open(data = null) {
      if (data) {
        this.form = {
          ...data,
          provinces: [data.provinceCode, data.cityCode, data.areaCode],
          longitudeLatitude: data.longitude + "," + data.latitude,
        };
      }
      this.drawer = true;
      this.$nextTick(() => {
        this.$refs.gdMapRef?.initAMap();
      });
    },
    mapchange(e) {
      this.form = {
        ...this.form,
        longitude: e.location.lng,
        latitude: e.location.lat,
        longitudeLatitude: e.location.lng + "," + e.location.lat,
        address: e.address,
      };
    },
    handleClose() {
      this.drawer = false;
      this.form = {};
      this.$refs.formRef.resetFields();
    },
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          //   console.log("submit!", this.form);
          this.loading = true;
          if (this.form.id) {
            businessSelfPickupAddressEdit(this.form)
              .then((res) => {
                this.loading = false;
                if (res.code == 200) {
                  this.$message.success("编辑成功");
                  this.handleClose();
                  this.$emit("queryTable");
                }
              })
              .catch((err) => {
                this.loading = false;
              });
          } else {
            businessSelfPickupAddressAdd(this.form)
              .then((res) => {
                this.loading = false;
                if (res.code == 200) {
                  this.$message.success("新增成功");
                  this.handleClose();
                  this.$emit("queryTable");
                }
              })
              .catch((err) => {
                this.loading = false;
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 省市区选择
    handleChange(value) {
      if (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];
      } else {
        this.form.provinces = null;
      }
    },
  },
};
</script>
<style scoped lang="scss"></style>
