<template>
  <view class="AddaddressStyle" :style="{ height: contentHeight }">
    <view class="addcenter">
      <view class="addcenter_item2">
        <Text>收货人</Text>
        <input class="uni-input inputM" v-model="modifyMsg.Consignee" />
      </view>
      <view style="width: 100%; height: 1px; background: #f5f5f5" />

      <view class="addcenter_item2">
        <Text>联系电话</Text>
        <input class="uni-input inputM" v-model="modifyMsg.Mobile" />
      </view>
      <view style="width: 100%; height: 1px; background: #f5f5f5" />
      <!-- TODO 动态获取地址数据 -->
      <view class="addcenter_item">
        <Text>所在地区</Text>
        <view
          style="display: flex; flex-direction: row; align-items: center"
          @click="addressShow = true"
        >
          <Text :style="{ color: address != '' ? '#303133' : '#9D9C9B' }">{{
            address != "" ? address : "请选择"
          }}</Text>
          <u-icon name="arrow" color="#B2B2B2" size="30"></u-icon>
          <pickerAddress v-model="addressShow" @confirm="addresspick" />
        </view>
      </view>
      <view style="width: 100%; height: 1px; background: #f5f5f5" />
      <view class="addcenter_item2" style="align-items: flex-start">
        <Text>详细地址</Text>
        <textarea
          style="height: 50px"
          class="inputM"
          v-model="modifyMsg.ShoppingAddress"
        />
      </view>
    </view>
    <view class="btn" @click="preserve" :style="{ background: mainColor }">
      <Text>保存地址</Text>
    </view>
  </view>
</template>

<script>
import pickerAddress from "./components/liudx-pickerAddress/index.vue";
export default {
  components: {
    pickerAddress,
  },
  data() {
    return {
      pageTitle: "修改地址",
      contentHeight: 0,
      mainColor: "",
      msg: {
        Id: 0,
        Name: "",
        Mobile: "",
        Province: "",
        City: "",
        District: "",
        Address: "",
      },
      address: "",
      Pickershwo: false,
      addressShow: false,
      modifyMsg: {
        OrderId: 0,
        Consignee: "",
        Mobile: "",
        Province: "",
        City: "",
        District: "",
        ShoppingAddress: "",
      },
    };
  },
  created() {
    this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
    this.mainColor = this.$uiConfig.mainColor;
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
  },
  onLoad(option) {
    //option为object类型，会序列化上个页面传递的参数
    if (option.AddressId) {
      this.getAddressInfo(option.AddressId);
    }
    if (option.OrderId) {
      this.modifyMsg.OrderId = option.OrderId;
      this.getData();
    }
  },
  methods: {
    preserve() {
      let pages = getCurrentPages(); // 当前页面
      let beforePage = pages[pages.length - 2]; // 前一个页面
      uni.showNavigationBarLoading();
      this.requestAdmin(
        "/api/order/SetOrderShopingAddress",
        this.modifyMsg,
        (res) => {
          console.log(110, res);
          uni.showToast({
            title: "操作成功",
            icon: "success",
          });
          setTimeout(() => {
            uni.navigateBack({
              success: function () {
                beforePage.onLoad(); // 执行前一个页面的created方法
              },
            });
          }, 1000);
          uni.hideNavigationBarLoading();
        }
      );
    },

    addresspick(obj) {
      this.modifyMsg.Province = obj.province.ID;
      this.modifyMsg.City = obj.city.ID;
      if (obj.area != undefined) {
        this.modifyMsg.District = obj.area.ID;
        this.address =
          obj.province.Name + "," + obj.city.Name + "," + obj.area.Name;
      } else {
        this.modifyMsg.District = "";
        this.address = obj.province.Name + "," + obj.city.Name;
      }
    },
    getData() {
      this.requestAdmin(
        "/api/order/GetGoodsOrderInfo",
        {
          OrderId: this.modifyMsg.OrderId,
        },
        (res) => {
          let OrderInfo = res.data.OrderInfo;
          this.address = OrderInfo.DistrictAddress.split(" ").join(",");
          this.modifyMsg.Consignee = OrderInfo.Consignee;
          this.modifyMsg.Mobile = OrderInfo.Mobile;
          this.modifyMsg.ShoppingAddress = OrderInfo.ShoppingAddress;
          this.modifyMsg.Province = OrderInfo.Province;
          this.modifyMsg.City = OrderInfo.City;
          this.modifyMsg.District = OrderInfo.District;
          console.log(OrderInfo);
        }
      );
    },
  },
};
</script>

<style>
.AddaddressStyle {
  background: #f3f4f6;
}
.AddaddressStyle .top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background: #fff;
}
.AddaddressStyle .addcenter {
  background: #ffffff;
}
.AddaddressStyle .addcenter_item {
  width: 100%;
  padding: 20rpx 28rpx;
  color: #303133;
  font-size: 28rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.AddaddressStyle .addcenter_item2 {
  width: 100%;
  padding: 20rpx 28rpx;
  color: #303133;
  font-size: 28rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.AddaddressStyle .btn {
  width: 94%;
  height: 80rpx;

  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-left: 3%;
  margin-top: 46rpx;
  border-radius: 40rpx;
}
.AddaddressStyle .btn_smart {
  width: 60px;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-top: 10rpx;
  border-radius: 25rpx;
}
.AddaddressStyle .inputM {
  margin-left: 20rpx;
  width: 70%;
  text-align: right;
}
</style>