<template>
  <div class="address-wrap">
    <van-cell-group inset class="mt12_i">
      <van-field required v-model="query.consignee" name="username" label="收货人" placeholder="请输入收货人" />
      <van-field required v-model="query.mobile" name="username" label="手机号码" placeholder="请输入手机号码" />
      <van-field required v-model="AreaVal" is-link readonly name="area" label="所在地区" placeholder="点击选择省市区" @click="showArea = true" />
      <van-field required v-model="query.address" name="username" label="详细地址" placeholder="请输入详细地址" />
      <van-field required name="switch" label="设为默认">
        <template #input>
          <van-switch :active-value="1" :inactive-value="0" v-model="query.isDefault" size="20px" />
        </template>
      </van-field>
    </van-cell-group>
    <div class="buy-btn-wrap">
      <el-button class="btn_main" @click="saveAddress">
        保存
      </el-button>
      <el-button class="btn_edge">
        删除
      </el-button>
    </div>
  </div>
  <van-popup v-model:show="showArea" destroy-on-close position="bottom">
    <van-area :area-list="areaList" :model-value="pickerValue" @confirm="onConfirm" @cancel="showArea = false" />
  </van-popup>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { showLoadingToast, closeToast } from "vant";
import { areaList } from "@vant/area-data";
import { useAll } from "~/api/pubAll/service";
const { updateUserAddress } = useAll();
let pageTitle: any = ref("HOTKING-个人中心-收货地址");
useHead(() => ({
  title: pageTitle.value,
}));
const route = useRoute();
const router = useRouter();
const user = useUserStore();
const checked = ref(false);
user.value.adminTitle = "收货地址";
const query: any = ref({});
const fieldValue = ref("");
const showArea = ref(false);
const AreaVal = ref("");
const pickerValue = ref<any[]>([]);
const onConfirm = ({ selectedValues, selectedOptions }: any) => {
  showArea.value = false;
  pickerValue.value = selectedValues;
  query.value.provinceCode = selectedValues[0];
  query.value.cityCode = selectedValues[1];
  query.value.districtCode = selectedValues[2];
  query.value.province = selectedOptions[0].text;
  query.value.city = selectedOptions[1].text;
  query.value.district = selectedOptions[2].text;
  AreaVal.value =
    selectedOptions[0].text + selectedOptions[1].text + selectedOptions[2].text;
};
onMounted(() => {
  if (route.query.item) {
    query.value = JSON.parse(route.query.item as any);
    AreaVal.value =
      query.value.province + query.value.city + query.value.district;
  } else {
    query.value = {
      consignee: "",
      email: "",
      label: "",
      province: "",
      city: "",
      district: "",
      address: "",
      zipcode: "",
      mobile: "",
      isDefault: 0,
    };
  }
});
async function saveAddress() {
  const toast = showLoadingToast({
    message: "",
    forbidClick: true,
    zIndex: 3000,
    className: "my-custom-toast",
    duration: 0,
  });
  let res: any = await updateUserAddress({ ...query.value });
  toast.close();
  if (res.httpCode == 200) {
    ElMessage.success("保存成功");
    router.go(-1);
  }
}
</script>
<style scoped lang="scss">
.address-wrap {
  min-height: calc(100vh - 44px);
  background: #f7f7f7;
  padding-top: 1px;
  .buy-btn-wrap {
    display: flex;
    width: 100%;
    height: 60px;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    left: 0;
    padding: 0 12px;
    z-index: 1;
    width: 100%;
    .el-button {
      width: 100%;
      border-radius: 25px !important;
      flex: 1;
      height: 42px !important;
      line-height: 42px !important;
      margin-top: 20px;
      & + .el-button {
        margin-left: 0;
        margin-top: 10px;
      }
      &.is-disabled {
        background: #e9e9e9;
        color: #fff;
      }
    }
  }
}
</style>