<template>
  <view class="AddaddressStyle" :style="{ height: contentHeight }">
    <view class="addcenter">
      <view class="addcenter_item2">
        <view><text style="color: #f56c6c; margin-right: 4rpx;font-size:24rpx">*</text>收货人</view>
        <input class="uni-input inputM" v-model="modifyMsg.Name" />
      </view>
      <view style="width: 100%; height: 1px; background: #f5f5f5" />

      <view class="addcenter_item2">
        <view><text style="color: #f56c6c; margin-right: 4rpx;font-size:24rpx">*</text>联系电话</view>
        <input class="uni-input inputM" v-model="modifyMsg.Mobile" />
      </view>
      <view style="width: 100%; height: 1px; background: #f5f5f5" />
      <!-- TODO 动态获取地址数据 -->
      <view class="addcenter_item">
        <view><text style="color: #f56c6c; margin-right: 4rpx;font-size:24rpx">*</text>所在地区</view>
        <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>
        <input
          class="inputM"
          v-model="modifyMsg.Address"
        />
      </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.Remarks"
        />
      </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: "",
      address: "",
      addressShow: false,
      modifyMsg: {
        ID: 0,
        Name: "",
        Mobile: "",
        Address: "",
        Remarks: "",
        ProvinceId: 0,
        CityId: 0,
        DistrictId: 0,
      },
    };
  },
  created() {
    this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
    this.mainColor = this.$uiConfig.mainColor;
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
  },
  onLoad(option) {
    if (option.Id) {
      this.modifyMsg.ID = option.Id;
      this.getData(option.Id);
    }
  },
  methods: {
    preserve() {
      if(!this.modifyMsg.Name){
        uni.showToast({
          title: '请输入姓名',
          icon:'none'
        });
        return
      }
       if(!this.modifyMsg.Mobile){
        uni.showToast({
          title: '请输入电话',
          icon:'none'
        });
        return
      }
      if(this.modifyMsg.ProvinceId===0){
        uni.showToast({
          title: '请选择所在地区',
          icon:'none'
        });
        return
      }
      let pages = getCurrentPages(); // 当前页面
      let beforePage = pages[pages.length - 2]; // 前一个页面
      uni.showNavigationBarLoading();
      this.requestAdmin(
        "/api/MallBase/AddOrUpdateLogisticsDelivery",
        this.modifyMsg,
        (res) => {
          uni.showToast({
            title: "操作成功",
            icon: "success",
          });
          setTimeout(() => {
            uni.navigateBack({
              success: function () {
                beforePage.onLoad(); // 执行前一个页面的created方法
              },
            });
          }, 1000);
          uni.hideNavigationBarLoading();
        }
      );
    },

    addresspick(obj) {
      this.modifyMsg.ProvinceId = obj.province.ID;
      this.modifyMsg.CityId = obj.city.ID;
      if (obj.area != undefined) {
        this.modifyMsg.DistrictId = obj.area.ID;
        this.address =
          obj.province.Name + "," + obj.city.Name + "," + obj.area.Name;
      } else {
        this.modifyMsg.DistrictId = "";
        this.address = obj.province.Name + "," + obj.city.Name;
      }
      console.log(128, this.modifyMsg)
    },
    getData(ID) {
      this.requestAdmin(
        "/api/MallBase/GetLogisticsDelivery",
        { ID: ID },
        (res) => {
          this.modifyMsg.Name = res.data.Name;
          this.modifyMsg.Mobile = res.data.Mobile;
          this.modifyMsg.Address = res.data.Address;
          this.modifyMsg.ProvinceId = res.data.ProvinceId;
          this.modifyMsg.CityId = res.data.CityId;
          this.modifyMsg.DistrictId = res.data.DistrictId;
          this.address=res.data.ProvinceName+','+res.data.CityName+','+res.data.DistrictName;
        }
      );
    },
  },
};
</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>