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"
                      color="linear-gradient(90deg, #FF8633 0%, #FFB047 100%)"
                      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>
        )}
      </>
    );
  }
});