<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="https://www.thymeleaf.org ">
<head>
    <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
    <template th:replace="components/head-link"></template>
    <link th:href="@{/css/user-center/address/list.css(v=${version})}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 引用头部 -->
<template th:replace="components/header"></template>
<!-- 我的地址 -->
<div id="orderPage" v-cloak>
    <div class="navLayout" th:object="${pageInfo}">
        <div class="crumbs">
            <span>我的交易</span>
            <span>&gt;</span>
            <span>收货地址管理</span>
        </div>
        <div class="wrap clear mf">
            <!--左侧面包屑-->
            <template th:replace="user-center/components/tableft"></template>
            <div class="right">
                <div class="order-header">
                    <div class="header-bt">
                        <p>已保存<span>{{addressLength}}</span>条地址,还能保存 <span>{{20-addressLength}}</span>条地址</p>
                    </div>
                    <div class="header-button">
                        <a class="btn-server" href="javascript: void(0);" @click="ShowAddAddressFn">新增地址</a>
                    </div>
                </div>
                <!--loading-->
                <div v-if="isRequset" class="loading">
                    <img src="/img/base/loading.gif">
                </div>
                <div class="container clear" v-else>
                    <div class="section address-none" v-if="isShwoAddModel">
                        <div class="address-main clear">
                            <div class="formLine">
                                <div class="label"><p><em>*</em>联系地址：</p></div>
                                <div class="form-input">
                                    <select name="provinceID" id="cProvince" @change="ChangeProvince" v-model="addressFrom.province">
                                        <option value="" >请选择</option>
                                        <option v-for="(item ,index) in ProvinceList" :key="index" :value='item.provinceID'>{{item.name}}</option>
                                    </select>
                                    <select name="cityID" id="cCity" @change="ChangeGetcity($event)" v-model="addressFrom.city">
                                        <option value="" >请选择</option>
                                        <option v-for="(item ,index) in cityArray" :key="index" :value="item.cityID">{{item.name}}</option>
                                    </select>
                                    <select name="townID" id="cTown" @change="ChangeGetcTown($event)" v-model="addressFrom.town">
                                        <option value="" >请选择</option>
                                        <option v-for="(item ,index) in townArray" :key="index" :value="item.townID">{{item.name}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="formLine">
                                <div class="label tex"></div>
                                <div class="form-input">
                                    <textarea placeholder="建议您如实填写详细地址，例如：街道名称，门牌号码，楼层和房间号等信息"  v-model="addAddressData.address"></textarea>
                                </div>
                            </div>
                            <div class="formLine">
                                <div class="label"><p><em>*</em>收货人：</p></div>
                                <div class="form-input">
                                    <input type="text" v-model.trim="addAddressData.shouHuoRen" placeholder="请输入收货人姓名" maxlength="10" >
                                </div>
                            </div>
                            <div class="formLine">
                                <div class="label"><p><em>*</em>联系方式：</p></div>
                                <div class="form-input">
                                    <input type="text" v-model.trim="addAddressData.mobile" placeholder="请输入联系方式" maxlength="11" >
                                </div>
                            </div>
                        </div>
                        <div class="address-sub">
                            <div class="checked" @click="settingDefaultFlag">
                                <i class="icon mIcon" :class="isDefaultFlag?'icon-gouxuan':'icon-weigouxuan'"></i>
                                <span>设为默认地址</span>
                            </div>
                            <div class="button">
                                <a href="javascript:void(0);" class="btn btn-confirm" @click="ConfirmAddressFn">保存</a>
                                <a href="javascript:void(0);" class="btn btn-cancel" @click="CancelAddressFn">取消</a>
                            </div>
                        </div>
                    </div>
                    <div class="section" v-if="addressList.length > 0">
                        <div class="list" v-for="(item, index) in addressList" :key="index">
                            <div class="list-left">
                                <p><span class="label">收货人:</span>{{item.shouHuoRen}}</p>
                                <p><span class="label">联系方式:</span>{{item.mobile}}</p>
                                <p><span class="label">收货地址:</span><span class="prov">{{item.province}}</span>{{item.city}}{{item.town}}{{item.address}}</p>
                            </div>
                            <div class="list-right">
                                <div class="list-defalut" v-if="item.defaultFlag == 1">
                                    <i class="icon mIcon"></i>
                                    <span class="span-s">默认地址</span>
                                </div>
                                <div class="list-button">
                                    <a class="list-btn ico" href="javascript:void(0)" @click.stop="deleteAddress(item.addressID)">
                                        <i class="icon mIcon">
                                            <span>删除</span>
                                        </i>
                                    </a>
                                    <a class="list-btn" href="javascript:void(0)" @click.stop="editAddress(item)">修改</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--数据为空-->
                    <div v-else class="empty">
                        <img src="/img/common/empty.png">
                        <div class="msg"><p>暂无数据</p></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 引入底部 -->
<template th:replace="components/footer"></template>
<template th:replace="components/foot-link"></template>
<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/order.service.js(v=${version})}"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/address/list.js(v=${version})}"></script>
</body>
</html>
