import { Cell, Icon } from 'vant'
import { defineComponent, computed, PropType } from 'vue'
import styles from './index.module.less'
import iconAddress from '@views/shop-mall/images/icon-address.png'
import { addressType } from '../../cart'
import { postMessage } from '@/helpers/native-message'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'cart-address',
  props: {
    item: {
      type: Object as PropType<addressType>,
      default: {}
    },
    isLink: {
      type: Boolean,
      default: true
    },
    setAddress: {
      type: Function,
      default: (n: any) => {}
    }
  },
  setup(props) {
    const router = useRouter()
    const addressInfo = computed(() => {
      return [
        props.item.province,
        props.item.city,
        props.item.region,
        props.item.detailAddress
      ].join('')
    })

    const selectAddress = () => {
      if (!props.isLink) return
      // postMessage({
      //   api: 'setAddress',
      //   content: {}
      // })
      router.push({
        path: '/address',
        query: {
          type: 'getAddress'
        }
      })
    }

    return () => (
      <>
        {props.item && props.item.phoneNumber ? (
          <Cell
            class={styles.cell}
            is-link={props.isLink}
            onClick={() => selectAddress()}
            v-slots={{
              icon: () => <Icon name={iconAddress} size={19} />,
              title: () => (
                <div>
                  <span class={styles.userName}>{props.item.name}</span>
                  <span class={styles.phone}>
                    {props.item &&
                      props.item.phoneNumber &&
                      props.item.phoneNumber.replace(
                        /^(\d{3})\d{4}(\d+)/,
                        '$1****$2'
                      )}
                  </span>
                </div>
              ),
              label: () => (
                <span class={styles.addressInfo}>{addressInfo.value}</span>
              )
            }}
          ></Cell>
        ) : (
          <Cell
            class={styles.cell}
            is-link={props.isLink}
            onClick={() => selectAddress()}
            v-slots={{
              icon: () => <Icon name={iconAddress} size={19} />,
              title: () => <div class={styles.emtry}>去填写收货地址</div>
            }}
          ></Cell>
        )}
      </>
    )
  }
})
