import { defineComponent } from 'vue'
import styles from './index.module.less'
import iconEdit from './images/icon_edit.png'
import iconDel from './images/icon_del.png'
import { Button, Dialog, Icon, Toast } from 'vant'
import ColSticky from '@/components/col-sticky'
import request from '@/helpers/request'
import ColResult from '@/components/col-result'
import { addressInfo } from './address'

export default defineComponent({
  name: 'address-list',
  data() {
    return {
      dataShow: true, // 判断是否在数据
      list: []
    }
  },
  async mounted() {
    try {
      const { data } = await request.get('/api-mall-portal/member/address/list')
      this.list = data
      this.dataShow = this.list.length > 0 ? true : false
    } catch {
      //
    }
  },
  methods: {
    onEdit(e: any, address?: any) {
      e.stopPropagation()
      this.$router.push({
        path: '/editAddress',
        query: {
          id: address?.id
        }
      })
    },
    async onDelete(e: any, address: any) {
      e.stopPropagation()
      try {
        Dialog.confirm({
          title: '提示',
          message: '确认删除收货地址吗？',
          confirmButtonColor: 'var(--van-primary)'
        }).then(async () => {
          await request.post(
            `/api-mall-portal/member/address/delete/${address.id}`
          )
          setTimeout(() => {
            Toast('删除成功')

            const index = this.list.findIndex(
              (item: any) => item.id === address.id
            )
            this.list.splice(index || this.list.length - 1, 1)
            // 删除成功之后需要在次判断有没有数据
            this.dataShow = this.list.length > 0 ? true : false
          }, 100)
        })
      } catch {
        //
      }
    },
    onDetail(address: any) {
      const { type } = this.$route.query
      if (type === 'getAddress') {
        console.log(address, 'onDetail')
        addressInfo.id = address.id
        addressInfo.defaultStatus = address.defaultStatus ? 1 : 0
        addressInfo.province = address.province
        addressInfo.city = address.city
        addressInfo.region = address.region
        addressInfo.name = address.name
        addressInfo.phoneNumber = address.phoneNumber
        addressInfo.detailAddress = address.detailAddress
        addressInfo.memberId = address.memberId
        addressInfo.postCode = address.postCode

        this.$router.back()
      }
    }
  },
  render() {
    return (
      <div class={styles.addressList}>
        {this.list.map((address: any) => (
          <div class={styles.address} onClick={() => this.onDetail(address)}>
            <div class={styles.content}>
              <p>
                <span class={styles.name}>{address.name}</span>
                <span>
                  {address.phoneNumber &&
                    address.phoneNumber.replace(
                      /^(\d{3})\d{4}(\d+)/,
                      '$1****$2'
                    )}
                </span>
              </p>
              <p class={styles.addressContent}>
                {address.province}
                {address.city}
                {address.region}
                {address.detailAddress}
              </p>
            </div>
            <div class={styles.icon}>
              <Icon
                name={iconEdit}
                size={18}
                onClick={(e: any) => this.onEdit(e, address)}
              />
              <Icon
                name={iconDel}
                size={18}
                style={{ marginLeft: '16px' }}
                onClick={(e: any) => this.onDelete(e, address)}
              />
            </div>
          </div>
        ))}

        {!this.dataShow && (
          <ColResult tips="暂无数据" classImgSize="SMALL" btnStatus={false} />
        )}

        <ColSticky position="bottom" background="white">
          <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
            <Button block round type="primary" onClick={this.onEdit}>
              添加新地址
            </Button>
          </div>
        </ColSticky>
      </div>
    )
  }
})
