<template>
  <view class="content">
    <view class="address">
      <view class="address-list">
        <text style="width: 229rpx; font-size: 30rpx; color: #999999"
          >收件人姓名</text
        >
        <input
          v-model="info.linkName"
          placeholder="请输入收件人姓名"
          type="text"
        />
      </view>
      <view class="address-border"></view>
      <view class="address-list">
        <text style="width: 229rpx; font-size: 30rpx; color: #999999"
          >联系电话</text
        >
        <input
          v-model="info.linkTel"
          placeholder="请输入联系电话"
          type="number"
          @input="numberFixedDigit"
        />
      </view>
      <view class="address-border"></view>
      <view class="address-list">
        <text style="width: 229rpx; font-size: 30rpx; color: #999999"
          >所在地区</text
        >
        <address-picker
          class="planLocate"
          :style="planLocate == '点击选择所在区域' ? 'color:#747c88' : ''"
          @change="addressChange"
          >{{ planLocate + "" }}</address-picker
        >
      </view>
      <view class="address-border"></view>
      <view class="address-list">
        <text style="width: 229rpx; font-size: 30rpx; color: #999999"
          >详细地址</text
        >
        <input
          v-model="info.linkAddress"
          placeholder="请输入收件地址"
          type="text"
        />
      </view>
    </view>
    <view
      class="bottom"
      :style="
        'opacity:' +
        (info.linkAddress && info.linkName && info.linkTel ? '' : '0.4') +
        ';'
      "
      @tap="saveAddress"
      >保存</view
    >
  </view>
</template>

<script>
import api from "@/lib/api/api";
import addressPicker from "@/components/wangding-pickerAddress/wangding-pickerAddress";
export default {
  name: "PageAddressAdd",
  components: {
    "address-picker": addressPicker,
  },
  data() {
    return {
      userInfo: {},
      planLocate: "点击选择所在区域",
      info: {
        id: 0,
        linkName: "",
        linkTel: "",
        provinceName: "",
        cityName: "",
        countyName: "",
        linkAddress: "",
        nationalCode: "",
        defaulted: "0",
      },
      id: "",
    };
  },
  onLoad(data) {
    if (data.info) {
      const info = JSON.parse(decodeURI(data.info));
      this.planLocate = info.city;
      this.info.id = info.id;
      this.info.linkName = info.name;
      this.info.linkTel = info.phone;
      this.info.linkAddress = info.address;
      this.info.defaulted = "" + info.is_default;
    }
    //
    const uinfoStr = uni.getStorageSync("userinfo");
    if (uinfoStr) {
      this.userInfo = JSON.parse(uinfoStr);
      api
        .addressList(data.session)
        .then((data) => {
          if (data.data) {
            this.datas = data.data;
          }
        })
        .catch((e) => {
          console.error(e);
        });
    } else {
      this.loginsuc = false;
    }
  },
  methods: {
    addressChange: function (n) {
      this.planLocate = n.data[0] + n.data[1] + n.data[2];
      this.info.provinceName = n.data[0];
      this.info.cityName = n.data[1];
      this.info.countyName = n.data[2];
    },
    numberFixedDigit(e) {
      // 只能输入整数
      e.target.value = e.target.value.replace(/^0|[^\d]|[.]/g, "");
      this.$nextTick(() => {
        this.info.linkTel = e.target.value;
      });
    },
    saveAddress() {
      if (
        this.info.linkAddress == "" ||
        this.info.linkName == "" ||
        this.info.linkTel == ""
      ) {
        return;
      }
      const info = this.info,
        data = {
          session: this.userInfo.session,
          name: info.linkName,
          phone: info.linkTel,
          address: info.linkAddress,
          city: this.planLocate,
          is_default: info.defaulted,
        };
      // if (info.linkTel !== '') {
      //   var reg=/^1[3456789]\d{9}$/;
      //   if(!reg.test(info.linkTel)){
      // 		uni.showToast({
      // 			icon:"error",
      // 			title: "手机号不能为空"
      // 		});
      // 		return
      //   }
      // }

      if (info.id > 0) {
        data.id = "" + info.id;
        api
          .updateAddress(data)
          .then(() => {
            uni.redirectTo({
              url: "./address",
            });
          })
          .catch((e) => {
            uni.showToast({
              icon: "error",
              title: e.errmsg,
            });
          });
        return;
      }

      api
        .addAddress(data)
        .then(() => {
          uni.redirectTo({
            url: "./address",
          });
        })
        .catch((e) => {
          uni.showToast({
            icon: "error",
            title: e.errmsg,
          });
        });
    },
  },
};
</script>

<style>
image {
  height: inherit;
  width: inherit;
}

input {
  font-size: 30rpx;
}

.content {
  align-items: flex-start;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 750rpx;
}

.address {
  background-color: #fff;
  border-radius: 16rpx;
  color: #333;
  font-family: PingFangSC-Regular;
  font-size: 34rpx;
  height: 390rpx;
  margin-left: 24rpx;
  margin-top: 24rpx;
  width: 702rpx;
}

.address-list {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  /* float: left; */
  font-size: 36rpx;
  height: 96rpx;
  line-height: 96rpx;
  padding-left: 24rpx;
  width: 702rpx;
}

.address-border {
  background-color: #eee;
  float: left;
  height: 2rpx;
  margin-left: 24rpx;
  width: 678rpx;
}

.bottom {
  background: #08c2c3;
  border-radius: 4rpx;
  color: #292d3b;
  font-family: PingFangSC-Medium;
  font-size: 30rpx;
  height: 98rpx;
  line-height: 98rpx;
  margin-left: 24rpx;
  margin-top: 120rpx;
  text-align: center;
  width: 702rpx;
}

.planLocate {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  font-size: 30rpx;
  overflow: hidden;
  width: 400rpx;
}
</style>
