import { Cell, Icon, Tag } from 'vant'
import { defineComponent, computed, PropType, reactive, onMounted } from 'vue'
import styles from './address.module.less'
import iconAddress from '@common/images/icon-address.png'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'cart-address',
  props: {
    item: {
      type: Object as PropType<any>,
      default: () => ({})
    },
    isLink: {
      type: Boolean,
      default: true
    },
    setAddress: {
      type: Function,
      default: (n: any) => {}
    }
  },
  setup(props) {
    const router = useRouter()

    const addressInfo = computed(() => {
      return [
        props.item.provinceName,
        props.item.cityName,
        props.item.regionName,
        props.item.detailAddress
      ].join('')
    })

    const selectAddress = () => {
      if (!props.isLink) return
      router.push('/shopAddress')
    }

    return () => (
      <>
        {props.item && props.item.phoneNumber ? (
          <Cell
            class={styles.cell}
            is-link={props.isLink}
            onClick={() => selectAddress()}
            titleStyle={{ marginLeft: '0' }}
            v-slots={{
              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>
                  {props.item.defaultStatus && (
                    <Tag
                      type="primary"
                      round
                      style={{
                        'vertical-align': 'text-top',
                        marginLeft: '10px',
                        padding: '1px 8px'
                      }}
                    >
                      默认
                    </Tag>
                  )}
                </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={28} />,
              title: () => <div class={styles.emtry}>去填写收货地址</div>
            }}
          ></Cell>
        )}
      </>
    )
  }
})