<template>
    <div class="nus_addressitem"
        @click="_onClick"
        @tap="_onTap">
        <div class="nu_btn-wrap">
            <div class="nu_default-btn"
                @click.stop="_setDefault">
                <nu-icon
                    class="nu_default-icon"
                    :class="isDefault && 'nu_active-icon'"
                    :icon="isDefault ? '\ue621' : '\ue60B'">
                </nu-icon><span class="nu_default-text">
                    {{ defaultBtn }}
                </span>
            </div>
            <div class="nu_btn-right">
                <div class="nu_edit-btn"
                    v-if="editBtn"
                    @click.stop="_onEdit">
                    {{ editBtn }}
                </div>
                <div class="nu_delete-btn"
                    v-if="deleteBtn"
                    @click.stop="_onDelete">
                    {{ deleteBtn }}
                </div>
            </div>
        </div>
        <div class="nu_address-content">
            <div class="nu_base-info">
                <nu-textt
                    class="nu_name-text"
                    v-if="consignees"
                    :nameText="consignees"
                    :row="1">
                </nu-textt>
                <div class="nu_phone-text"
                    v-if="phone">
                    {{ phone }}
                </div>
            </div>
            <div class="nu_subNameText"
                v-if="myAddress">
                {{ myAddress }}
            </div>
        </div>
    </div>
</template>

<script>
import BusinessTmp from '../../../_comm/BusinessTmp';
import NuTextt from '../../../../widget/text/textt';
import NuIcon from '../../../../widget/icon';
import { EVENT_TYPE } from '../../constants';
export default {
    extends: BusinessTmp,
    components: {
        NuTextt,
        NuIcon
    },
    props: {
        /**
         * 收货人
         */
        consignees: {
            type: String
        },
        /**
         * 省
         */
        province: {
            type: String
        },
        /**
         * 市
         */
        city: {
            type: String
        },
        /**
         * 区
         */
        county: {
            type: String
        },
        /**
         * 详细地址
         */
        address: {
            type: String
        },
        /**
         * 电话
         */
        phone: {
            type: [String, Number]
        },
        /**
         * 是否设置为默认
         */
        isDefault: {
            type: Boolean
        },

        /**
         * 设为默认按钮的文案
         */
        defaultBtn: {
            type: String,
            default: '设为默认'
        },
        /**
         * 编辑按钮文案
         */
        editBtn: {
            type: String,
            default: '编辑'
        },
        /**
         * 删除按钮文案
         */
        deleteBtn: {
            type: String,
            default: '删除'
        }
    },
    computed: {
        /**
         * 显示的详细地址
         * @returns {String} 返回详细地址
         */
        myAddress () {
            const _that = this;
            return [_that.province || '', _that.city || '', _that.county || '', _that.address || ''].join('');
        }
    },
    methods: {
        /**
         * 设置为默认地址
         * @param {Event} evt 事件对象
         */
        _setDefault (evt) {
            const _that = this;
            if (!_that.isDefault) {
                _that.$emit(EVENT_TYPE.SET_DEFAULT, evt);
            }
        },

        /**
         * 编辑
         * @param {Event} evt 事件对象
         */
        _onEdit (evt) {
            this.$emit(EVENT_TYPE.ADD_EDIT, evt);
        },
        /**
         * 删除
         * @param {Event} evt 事件对象
         */
        _onDelete (evt) {
            const _that = this;
            _that.$emit(EVENT_TYPE.DELETE, evt);
        }
    }
};
</script>

<style lang="scss">
@import '../../../../../_assets/style/_iconFont.scss';
@import '../../../../../_assets/style/_var.scss';
@import '../../../../../_assets/style/_mixin.scss';

.nus_addressitem {
    width: 100%;
    position: relative;
    background: $nuaddress-bg-color;
    min-height: 117px;
    user-select: none;
    cursor: pointer;
    .nu_address-content {
        min-height: 80px;
        padding: 15px 0 5px;
    }
    .nu_base-info {
        display: flex;
        align-items: center;
        font-size: $nuaddress-nameText-font-size;
        line-height: 1;
    }
    .nu_name-text {
        margin-right: 20px;
    }
    .nu_phone-text {
        margin-right: 10px;
    }
    .nu_subNameText {
        color: $nuaddress-address-color;
        font-size: $nuaddress-address-font-size;
        line-height: 19px;
        word-break: break-all;
        text-align: left;
        line-height: 1;
        margin-top: 9px;
    }
    .nu_btn-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 37px;
        color: $nuaddress-btn-color;
        font-size: $nuaddress-btn-font-size;
    }
    .nu_default-icon {
        color: $nuaddress-radio-color;
        font-size: 18px;
    }
    .nu_active-icon {
        color: $nuaddress-radio-active-color;
    }
    .nu_default-text {
        display: inline-block;
        padding-left: 8px;
        font-size: $nuaddress-default-radio-font-size;
    }
    .nu_btn-right {
        display: flex;
    }
    .nu_edit-btn {
        margin-right: 50px;
    }
}
</style>
