<template>
  <view class="flex flex-col w-full min-h-full" @tap="Lindex = -1">
    <loading-view v-if="isFirstLoading"></loading-view>
      <view class="pb-200rpx flex-1">
        <view @longpress="long_press(index)" @tap.stop="Select(item)" class="relative " v-for="(item,index) in list"
          :key="index">
          <view class="px-base ">
            <view class="flex Border py-base items-center justify-between  bg-white ">
              <view>
                <view class="flex items-center text-black">
                  <block v-if="item.is_default">
                    <image class="w-59rpx" src="/static/images/order/defalut-icon.png" mode="widthFix" />
                  </block>
                  <text class="text-txGray">{{item.zone}}</text>
                </view>
                <view class=" text-xl text-black my-14rpx"> {{item.address}} </view>
                <view class="text-lg text-txGray"> {{item.consignee}} {{item.telephone}} </view>
              </view>
              <view @tap.stop="editAddress(item)"  >
                <u-icon color="#808080" name="edit-pen" size="36"></u-icon>
              </view>
            </view>
          </view>
          <!-- 弹窗 -->
          <view v-if="Lindex==index"
            class="flex text-md text-white items-center justify-end absolute top-0 right-0 left-0 w-full h-full z-50  bg-txBase bg-opacity-70">
            <view @tap.stop="set_default(item)" class="btn flex items-center justify-center flex-col  bg-primary ">
              <view>设为</view>
              <view>默认</view>
            </view>
            <view @tap.stop="copy(item)" class="btn flex items-center justify-center flex-col text-txBase  bg-white ">
              <view>复制</view>
              <view>地址</view>
            </view>
            <view @tap.stop="Del(index)" class="btn flex items-center justify-center flex-col bg-hex-D43030 ">
              <view>删除</view>
              <view>地址</view>
            </view>
          </view>
        </view>
      </view>
     <view class="px-base pb-60rpx ">
        <view class="login-btn" @tap.stop="$u.route('/pageA/new_address/index')"> +新建收货地址 </view>
      </view>
    <!-- 删除确认 -->
      <cu-modal v-model="show" @cancel="Lindex = -1"  @confirm="confirm" confirm-color="#378264" show-cancel-button
        content="是否删除该地址"></cu-modal>
  </view>
</template>

<script>
  import uniCopy from '@/utils/uni-copy'
  export default {
    data() {
      return {
        isFirstLoading:true,
        list: [],
        Lindex: -1,
        isshow: false,
        type:0,
        show:false,
        Index:''
      };
    },
    onShow() {
      this.getDate()
    },
    onLoad({type}){
        if(type){
          this.type=type
        }
    },
    methods: {
      //跳转到地址编辑页面
      editAddress(item){
         this.$u.route('/pageA/new_address/index?info=' +JSON.stringify(item));
      },
      async getDate() {
        try{
          let res = await this.$api.get('/v1/shipping-addresses', {}, {
            custom: {
              loading: true
            },
          });
          this.list = res
        }catch(err){}finally{
          this.isFirstLoading=false
        }
      },
      //长按事件
      long_press(index) {
        this.Lindex = index
      },
      //设置为默认
      async set_default(item) {
        let obj = {
          zone_id: item.zone_id,
          consignee: item.name ? item.name : '11111',
          telephone: item.telephone,
          address: item.address,
          is_default: true
        }
        let res = await this.$api.put(`/v1/shipping-addresses/${item.id}`, obj, {
          custom: {
            loading: true
          },
        });
        this.Lindex = -1
        this.getDate()
      },
      //复制
      copy(item) {
          uniCopy({
            content:item.address ?? '',
            success:(res)=>{
               this.$u.toast(res)
            },
            error:(e)=>{
              this.$u.toast(e)
            }
        })
        this.Lindex = -1
      },
      //删除
      Del(index) {
      this.show=true
       this.Index=index
      },
     async confirm(){
        try{
          this.$api.delete(`/v1/shipping-addresses/${this.list[this.Index].id}`, {}, {
            custom: {
              loading: true
            },
          });
           this.list.splice(this.Index, 1)
        }catch(err){}
      },
      //选择地址
      Select(item) {
        if(this.type!=1){
          uni.$emit('address:select', item)
          uni.navigateBack()
        }
      }
    }
  }
</script>

<style>
  page {
    background: #FFFFFF;
    height: 100%;
  }
</style>
<style lang="scss">
  .Border{
    border-bottom: 1rpx solid #E5E5E5;
  }
  .btn {
    @apply mr-66rpx flex items-center justify-center w-98rpx h-98rpx rounded-full
  }
</style>
