<template>
  <view class="content">
    <scroll-view class="scroll-Y" :scroll-top="scrollTop" scroll-y="true">
      <view v-if="datas.length == 0">
        <view class="logo">
          <image mode src="@/assets/icon_v1/wszdz@3x.png"></image>
        </view>
        <view class="text">尚未设置收货地址</view>
        <view class="text1">请新增收货地址，以便正常收货</view>
        <view>
          <view class="bottom" @tap="address">新增地址</view>
          <view class="bottom" style="margin-left: 24rpx" @tap="importAddress"
            >导入微信地址</view
          >
        </view>
      </view>
      <view
        v-if="datas.length !== 0"
        style="float: left; margin-bottom: 190rpx"
      >
        <view v-for="(item, key) in datas" :key="key" class="address">
          <view class="address-text" @tap="selectAddr(item)"
            >{{ item.name + " " + item.phone + "" }}
            <text v-if="item.is_default == '1'" class="default">默认</text>
          </view>
          <view class="address-text1" @tap="selectAddr(item)">{{
            item.city + item.address
          }}</view>
          <view class="address-border"></view>
          <view class="address-operation">
            <checkbox-group @change="setDefaulted(item)">
              <label style="display: flex; align-items: center">
                <checkbox
                  :checked="item.is_default == '1' ? true : false"
                  color="orange"
                  style="transform: scale(0.7)"
                />
                <text class="content-title">设为默认</text>
              </label>
            </checkbox-group>
            <image
              mode
              class="address-operation_img1"
              src="@/assets/icon_v1/bj.png"
              @tap="editAddress(item)"
            ></image>
            <text @tap="editAddress(item)">编辑</text>
            <!-- <image
              mode
              @tap="confirmDel(item.id)"
              class="address-operation_img2"
              src="@/assets/icon_v1/sc@3x.png"
            ></image> -->
            <text @tap="confirmDel(item.id)">删除</text>
          </view>
        </view>
      </view>
      <view
        v-if="datas.length !== 0"
        style="
          position: fixed;
          bottom: 0;
          width: 750rpx;
          height: 166rpx;
          background-color: #ffffff;
        "
      >
        <view class="new-bottom1" @tap="address">新增地址</view>
        <view class="bottom1" @tap="importAddress">导入微信地址</view>
      </view>
    </scroll-view>
    <uni-popup ref="popup" type="center">
      <view class="popup-overtime">
        <!-- <view class="popup-overtime_img">
          <image mode src="@/assets/icon_v1/sc@3x.png"></image>
        </view> -->
        <view class="popup-overtime_text">确定删除此地址吗？</view>
        <view class="popup-overtime_left" @tap="cancel">取消</view>
        <view class="popup-overtime_right" @tap="del">确定</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import api from "@/lib/api/api";
export default {
  name: "PageAddress",
  data() {
    return {
      userInfo: {},
      datas: [],
      id: "",
      action: false,
    };
  },
  onLoad(data) {
    this.action = data.action;
  },
  onShow() {
    const uinfoStr = uni.getStorageSync("userinfo");
    if (uinfoStr) {
      this.userInfo = JSON.parse(uinfoStr);
      this.refresh();
    } else {
      this.loginsuc = false;
      this.userInfo = {};
    }
  },
  methods: {
    selectAddr(e) {
      if (this.action == "choose") {
        const n = getCurrentPages();
        n[n.length - 2].setData({
          address: e,
        });
        uni.navigateBack();
      }
    },
    refresh() {
      api
        .addressList(this.userInfo.session)
        .then((data) => {
          if (data.data) {
            this.datas = data.data;
          }
        })
        .catch((e) => {
          console.error(e);
        });
    },

    setDefaulted(info) {
      if (info.is_default) {
        info.is_default = "0";
      } else {
        info.is_default = "1";
      }
      info.id = "" + info.id;
      info.session = this.userInfo.session;
      api
        .updateAddress(info)
        .then(() => {
          this.refresh();
        })
        .catch((e) => {
          uni.showToast({
            icon: "error",
            title: "保存失败，请稍后重试: " + e.errmsg,
          });
        });
    },

    editAddress(info) {
      uni.navigateTo({
        url: "./add?info=" + encodeURI(JSON.stringify(info)),
      });
    },

    confirmDel(id) {
      this.$refs.popup.open();
      this.id = id;
    },

    cancel() {
      this.$refs.popup.close();
    },

    del() {
      this.cancel();
      api
        .delAddress({
          id: ["" + this.id],
          session: this.userInfo.session,
        })
        .then(() => {
          this.refresh();
        })
        .catch((e) => {
          console.error(e);
        });
    },

    address() {
      uni.navigateTo({
        url: "./add",
      });
    },

    importAddress() {
      uni.chooseAddress({
        success: (data) => {
          const info = {
            session: this.userInfo.session,
            name: data.userName,
            phone: data.telNumber,
            city: `${data.provinceName}${data.cityName}${data.countyName}`,
            address: data.detailInfo,
            defaulted: "1",
          };
          api
            .addAddress(info)
            .then(() => {
              this.refresh();
            })
            .catch((e) => {
              uni.showToast({
                icon: "error",
                title: "保存失败，请稍后重试: " + e.errmsg,
              });
            });
        },
      });
    },
  },
};
</script>

<style>
/* #ifdef APP-PLUS ||MP-WEIXIN */
checkbox .wx-checkbox-input {
  /* margin-top: 30rpx; */
  border-radius: 50% !important;
  color: #ffffff !important;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  color: #fff;
  background: #08c2c3;
}
/* #endif */
image {
  height: inherit;
  width: inherit;
}

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

.logo {
  float: left;
  height: 120rpx;
  margin-left: 315rpx;
  margin-top: 280rpx;
  width: 120rpx;
}

.text {
  color: #333;
  float: left;
  font-family: PingFangSC-Medium;
  font-size: 36rpx;
  height: 55rpx;
  line-height: 55rpx;
  margin-bottom: 8rpx;
  margin-top: 32rpx;
  text-align: center;
  width: 750rpx;
}

.text1 {
  color: #99999;
  float: left;
  font-family: PingFangSC-Regular;
  font-size: 30rpx;
  height: 42rpx;
  line-height: 42rpx;
  text-align: center;
  width: 750rpx;
}

.bottom {
  border-radius: 4rpx;
  height: 80rpx;
  line-height: 80rpx;
  margin-left: 95rpx;
  margin-top: 72rpx;
  width: 268rpx;
}

.bottom1,
.bottom {
  background: #08c2c3;
  color: #292d3b;
  float: left;
  font-family: PingFangSC-Medium;
  text-align: center;
}
.new-bottom1 {
  border-radius: 4rpx;
  font-size: 32rpx;
  height: 96rpx;
  line-height: 96rpx;
  margin-left: 24rpx;
  margin-top: 24rpx;
  width: 339rpx;
  background: #08c2c3;
  color: #292d3b;
  float: left;
  text-align: center;
}
.bottom1 {
  background: #08c2c3;
  border-radius: 4rpx;
  font-size: 32rpx;
  height: 96rpx;
  line-height: 96rpx;
  margin-left: 24rpx;
  margin-top: 24rpx;
  width: 339rpx;
  color: #292d3b;
}

.address {
  background: #fff;
  border-radius: 24rpx;
  float: left;
  margin-left: 24rpx;
  margin-top: 24rpx;
  width: 702rpx;
}

.address-text {
  align-items: center;
  color: #333;
  display: flex;
  flex-wrap: wrap;
  float: left;
  font-family: PingFangSC-Regular;
  font-size: 34rpx;
  margin-bottom: 16rpx;
  margin-left: 24rpx;
  margin-top: 24rpx;
  width: 653rpx;
}

.address-text1 {
  font-size: 30rpx;
}

.address-operation,
.address-text1 {
  color: #999;
  float: left;
  font-family: PingFangSC-Regular;
  margin-bottom: 24rpx;
  margin-left: 24rpx;
  width: 653rpx;
}

.address-operation {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 26rpx;
  height: 36rpx;
  margin-top: 24rpx;
}

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

.address-operation_img {
  height: 36rpx;
  margin-right: 8rpx;
  width: 36rpx;
}

.address-operation_img1 {
  height: 32rpx;
  margin-left: 255rpx;
  margin-right: 10rpx;
  width: 31rpx;
}

.address-operation_img2 {
  height: 32rpx;
  margin-left: 42rpx;
  margin-right: 10rpx;
  width: 32rpx;
}

.popup-overtime {
  background-color: #fff;
  border-radius: 32rpx;
  height: 503rpx;
  width: 600rpx;
}

.popup-overtime_img {
  float: left;
  height: 120rpx;
  margin-left: 240rpx;
  margin-top: 72rpx;
  width: 120rpx;
}

.popup-overtime_text {
  color: #333;
  float: left;
  font-family: PingFangSC-Regular;
  font-size: 36rpx;
  height: 55rpx;
  line-height: 55rpx;
  margin-top: 32rpx;
  text-align: center;
  width: 600rpx;
}

.popup-overtime_left {
  border: 2rpx solid #e5e5e5;
  margin-left: 44rpx;
}

.popup-overtime_left,
.popup-overtime_right {
  border-radius: 40rpx;
  color: #333;
  float: left;
  font-family: PingFangSC-Regular;
  font-size: 34rpx;
  height: 80rpx;
  line-height: 80rpx;
  margin-top: 72rpx;
  text-align: center;
  width: 244rpx;
}

.popup-overtime_right {
  background: #08c2c3;
  margin-left: 24rpx;
}

.default {
  background: #08c2c3;
  height: 28rpx;
  font-size: 20rpx;
  font-weight: 400;
  color: #292d3b;
  line-height: 28rpx;
  margin-left: 8rpx;
  text-align: center;
  width: 64rpx;
}
</style>
