<template>
  <div class="addaddress">
    <view class="addAddress">
      <view class="pad30 mt-22">
        <view class="list borderRadius15">
          <view class="item acea-row row-between-wrapper">
            <view class="name">姓名</view>
            <input
              type="text"
              placeholder="请输入姓名"
              v-model="userAddress.name"
              class="inputa"
            />
          </view>
          <view class="item acea-row row-between-wrapper">
            <view class="name">联系电话</view>
            <input
              type="number"
              placeholder="请输入联系电话"
              v-model="userAddress.mobile"
              class="inputa"
            />
          </view>
          <view class="item acea-row row-between-wrapper">
            <view class="name">所在地区</view>
            <input
              type="text"
              placeholder="请填写具体地址"
              v-model="userAddress.region"
              @click="btnClick"
              disabled
              class="inputa"
            />
          </view>
          <view class="item acea-row row-between-wrapper">
            <view class="name">详细地址</view>
            <input
              type="text"
              placeholder="请填写具体地址"
              v-model="userAddress.address"
              class="inputa"
            />
          </view>
          <view class="item acea-row">
            <view class="name">默认地址</view>
            <uni-data-checkbox
              v-model="is_default"
              :localdata="range"
            ></uni-data-checkbox>
          </view>
        </view>
      </view>
      <button class="keepBnt bg-color" @click="formSubmit">立即保存</button>
    </view>
    <select-address
      :address.sync="address"
      ref="selectAddress"
      @change="changeAddress"
    />
  </div>
</template>

<script>
import { post } from "@/request/api.js";
import selectAddress from "@/components/lcw-select-address/lcw-select-address.vue";
let app = getApp();
var appEv = app.$vm.$options;
export default {
  name: "addaddress",
  props: {},
  components: {
    selectAddress,
  },
  data() {
    return {
      userAddress: {}, //地址详情
      is_default: 0, //是否设为默认地址
      range: [
        { value: 0, text: "否" },
        { value: 1, text: "是" },
      ],
      address: {
        province: "",
        city: "",
        area: "",
        street: "",
      },
    };
  },
  methods: {
    btnClick() {
      this.$refs.selectAddress.open();
    },
    changeAddress(address) {
      //选择成功回调
      this.address = address;
      this.userAddress.region = "";
      for (const i in address) {
        if (i != "regional_code") this.userAddress.region += address[i] + " ";
      }
    },
    formSubmit() {
      let url;
      let { address, mobile, name } = this.userAddress;
      let data = {
        ...this.address,
        address, mobile, name,
        is_default: this.is_default,
      };
      if (this.userAddress.id) {
        url = "v1/user/editAddress";
        data.id = this.userAddress.id;
      } else url = "v1/user/addAddress";
      post(url, data).then((res) => {
        if (res.code === 0) {
          appEv.errTips(res.msg);
          this.isadd = false;
          this.goto("/pagesB/address/list")
        }
      });
    },
  },
  onLoad(va) {
    if(va.isedit) {
        let da = uni.getStorageSync('address_form');
      let { id, name, mobile, address, province, city, area, street, status, regional_code } = da;
      this.userAddress = { id, name, mobile, address };
      this.address = { province, city, area, street, regional_code };
      this.userAddress.region = province + " " + city + " " + area + " " + street;
      this.is_default = status;
    }
  },
  onShow() {},
  mounted() {},
};
</script>

<style scoped lang='scss'>
.addAddress {
  width: 100%;

  .list {
    background-color: #fff;

    .item {
      padding: 30rpx;
      border-top: 1rpx solid #eee;

      // position: relative;
      .icon-dizhi {
        font-size: 36rpx !important;
      }

      .name {
        width: 180rpx;
        font-size: 30rpx;
        color: #333;
      }

      .address {
        flex: 1;
      }

      input {
        flex: 1;
        font-size: 0 30rpx;
      }
    }
  }

  .pad30 {
    padding: 0 30rpx;
  }

  .p_center {
    text-align: center;
  }

  .acea-row {
    display: flex;
  }

  .row-middle {
    align-items: center;
  }

  .row-between-wrapper {
    align-items: center;
    justify-content: space-between;
  }

  .borderRadius15 {
    border-radius: 15rpx !important;
  }
  // .default {
  //     padding: 30rpx;
  //     background-color: #fff;
  // }

  .keepBnt {
    width: 690rpx;
    height: 86rpx;
    border-radius: 50rpx;
    text-align: center;
    line-height: 86rpx;
    margin: 50rpx auto;
    font-size: 32rpx;
    color: #fff;
  }
    .bg-color {
        background-color: #2DB389;
    }
}
</style>