<template>
  <div class="ui-add-address">
    <div class="ui-mb-40">
      <div class="ui-address-box">
        <div class="ui-address-list">
          <div class="ui-address-name color3 font_28 bold">姓名</div>
          <van-field v-model="myAddress.name" class="ui-input f-fcc font_28 color3" placeholder="收货人姓名" />
        </div>
        <div class="ui-address-list">
          <div class="ui-address-name color3 font_28 bold">电话号码</div>
          <van-field v-model="myAddress.mobile" type="number" class="ui-input f-fcc font_28 color3" placeholder="收货人手机号" />
        </div>
        <div class="ui-address-list">
          <div class="ui-address-name color3 font_28 bold">所在地址</div>
          <van-field v-model="myAddress.more_address" readonly class="ui-input f-fcc font_28 color3" placeholder="请选择地址" @click="showAddress = true" />
        </div>
        <div class="ui-address-list ui-address-list-none">
          <div class="ui-address-name ui-address-nameV2 color3 font_28 bold">详情地址</div>
          <van-field v-model="myAddress.detail_address" type="textarea" rows="2" class="ui-input f-fcc font_28 color3" placeholder="街道门牌、楼层房间号等信息" />
        </div>
      </div>
    </div>
    <div class="ui-add-btn font_32 colorF text-center" @click="toAddAddress">保存</div>
    <van-popup v-model:show="showAddress" round position="bottom" :duration="0.5">
      <van-picker v-model="payValue" title="选择地址" :columns="options" @confirm="onConfirm" @cancel="showAddress = false" />
      <!--      <van-cascader-->
      <!--        v-model="cascaderValue"-->
      <!--        title="请选择所在地区"-->
      <!--        :options="options"-->
      <!--        @close="show = false"-->
      <!--        @finish="onFinish"-->
      <!--      />-->
    </van-popup>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { useCascaderAreaData } from '@vant/area-data';
  import { showToast } from 'vant';
  import requestGo from '@/utils/requestApp';
  import request from '@/utils/request';
  import router from '@/router';

  defineOptions({ name: 'AppMyAddress' });

  const id = ref<string>('');
  const throttle = ref(true);
  const myAddress = ref<any>({});
  const addressList = ref([]);
  const showAddress = ref(false);
  const payValue = ref<any[]>([]);
  const options = useCascaderAreaData();
  // 获取地址列表
  const getDetail = () => {
    requestGo({ url: `/app/user/address/get/detail/${id.value}`, method: 'get' })
      .then((res) => {
        let result = res.data;
        myAddress.value = result;
        if (myAddress.value.province) {
          myAddress.value.more_address = `${myAddress.value.province}/${myAddress.value.city}/${myAddress.value.county}`;
        }
        payValue.value = [`${myAddress.value.province_pid}`, `${myAddress.value.city_pid}`, `${myAddress.value.county_pid}`];
        console.log(payValue.value, ' payValue.value');
      })
      .catch((err) => {
        console.log(err);
      });
  };
  const toAddAddress = () => {
    let data = {
      name: myAddress.value.name,
      area_code: 86,
      mobile: myAddress.value.mobile,
      province: myAddress.value.province,
      city: myAddress.value.city,
      county: myAddress.value.county,
      province_pid: myAddress.value.province_pid - 0,
      city_pid: myAddress.value.city_pid - 0,
      county_pid: myAddress.value.county_pid - 0,
      detail_address: myAddress.value.detail_address,
    };
    if (id.value == '0') {
      data.is_default = 0;
      requestGo({ url: `/app/user/address/add`, data, method: 'post' })
        .then((res) => {
          showToast('添加成功');
          setTimeout(() => {
            router.go(-1);
          }, 1200);
        })
        .catch((err) => {
          console.log(err);
        });
    } else {
      data.is_default = myAddress.value.is_default;
      requestGo({ url: `/app/user/address/update/${id.value}`, data, method: 'put' })
        .then((res) => {
          showToast('修改成功');
          setTimeout(() => {
            router.go(-1);
          }, 1200);
        })
        .catch((err) => {
          console.log(err);
        });
    }
  };
  const getAddress = () => {
    request({ url: `get/china`, method: 'get' }).then((res) => {
      addressList.value = res.data.map((item) => {
        return {
          value: item.id,
          text: item.name,
          children: getChildren(item.city),
        };
      });
    });
  };
  const getChildren = (child) => {
    let children = child.map((item) => {
      return {
        value: item.id,
        text: item.name,
        children: getChildrenV2(item.county),
      };
    });
    return children;
  };
  const getChildrenV2 = (child) => {
    let children = child.map((item) => {
      return {
        value: item.id,
        text: item.name,
      };
    });
    return children;
  };
  // 选择支付方式
  const onConfirm = ({ selectedValues, selectedOptions }) => {
    console.log(selectedOptions, 'selectedValues');
    console.log(selectedValues, 'selectedValues');
    myAddress.value.province = selectedOptions[0].text;
    myAddress.value.province_pid = selectedOptions[0].value;
    myAddress.value.city = selectedOptions[1].text;
    myAddress.value.city_pid = selectedOptions[1].value;
    myAddress.value.county = selectedOptions[2].text;
    myAddress.value.county_pid = selectedOptions[2].value;
    myAddress.value.more_address = selectedOptions.map((option) => option.text).join('/');
    showAddress.value = false;
    // payType.value = selectedValues[0];
  };
  onMounted(() => {
    let route = router.currentRoute.value.query as any;
    id.value = route.id;
    if (id.value !== '0') {
      getDetail();
    }
    getAddress();
  });
</script>
<style scoped lang="scss">
  .ui-add-address {
    background: #f6f6f6;
    overflow-y: auto;
    height: 100vh;
  }
  .ui-address-box {
    margin: px2rem(16) px2rem(32);
    padding: 0 px2rem(24);
    width: px2rem(638);
    background: #ffffff;
    border-radius: px2rem(16);
    .ui-address-list {
      padding: px2rem(22) 0;
      display: flex;
      align-items: center;
      border-bottom: px2rem(2) solid #d8d8d8;
      width: 100%;
      .ui-address-name {
        //padding-top: px2rem(32);
        //padding-bottom: px2rem(32);
        width: px2rem(112);
        line-height: px2rem(28);
      }
      .ui-input {
        flex: 1;
        border-radius: px2rem(16);
        line-height: px2rem(28);
        //padding-top: px2rem(26);
        //padding-bottom: px2rem(26);
      }
    }
    .ui-address-list-none {
      border: none;
      align-items: flex-start;
      .ui-address-nameV2 {
        padding-top: px2rem(20);
      }
    }
  }
  .ui-add-btn {
    position: fixed;
    bottom: px2rem(84);
    left: 50%;
    transform: translateX(-50%);
    width: px2rem(686);
    height: px2rem(88);
    line-height: px2rem(88);
    background: linear-gradient(140deg, #18ca6e 0%, #0aa555 100%);
    border-radius: px2rem(340);
  }
</style>
