<template>
  <xd-layout
    title="地址管理"
    background="#f8f8f8"
    :show-bar="true"
    :show-footer="false"
    @back="back"
  >
    <view class="app-body">
      <view class="app-body__list">
        <view class="app-body__list-item" v-for="(item,index) in list" :key="item.id">
          <view class="app-body__list-item-select">
            <xd-font-icon icon="iconduigou" size="30" :color="item.check ? $mainColor: ''"></xd-font-icon>
          </view>
          <view class="app-body__list-item-left">
            <view>
              <view>{{item.name}}</view>
              <view>{{item.phone}}</view>
            </view>
            <view>
              <text :style="{background: $mainColor}">默认</text>
              <text :style="{background: $mainColor}">家庭</text>
              <view>{{item|getAddress}}</view>
            </view>
          </view>
          <view class="app-body__list-item-operation">
            <view>
              <xd-font-icon icon="iconshanchu2" size="40"></xd-font-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="app-body__btn">
        <xd-button type="primary" @click="xdDowncDrawer=!xdDowncDrawer" radius="10rpx">+新增收货地址</xd-button>
      </view>
    </view>
    <xd-down-drawer
      v-if="xdDowncDrawer"
      :show.sync="xdDowncDrawer"
      :z-index="2500"
      :is-body-close="false"
      :is-close="false"
      :fullscreen="true"
    >
      <xd-address @getCity="handleGetCity" @save="handleSave"></xd-address>
    </xd-down-drawer>
  </xd-layout>
</template>

<script>
  import {mapActions} from 'vuex';
  import XdLayout from "@/components/XdLayout/XdLayout";
  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
  import XdButton from "@/components/XdButton/XdButton";
  import XdDownDrawer from "@/components/XdDownDrawer/XdDownDrawer";
  import XdAddress from "@/dome/components/XdAddress/XdAddress";

  export default {
    name: "AppAddress",
    components:{
      XdLayout,
      XdFontIcon,
      XdButton,
      XdDownDrawer,
      XdAddress
    },
    data(){
      return {
        xdDowncDrawer: false,

        list: [
          {
            "check": true,
            "id": 23843,
            "name": "\u9ad8\u4e16\u52c7",
            "province_code": "21",
            "city_code": "1861",
            "area_code": "1866",
            "street_code": "27221",
            "province_name": "\u6c5f\u897f",
            "city_name": "\u4e0a\u9976\u5e02",
            "area_name": "\u5a7a\u6e90\u53bf",
            "street_name": "\u7d2b\u9633\u9547",
            "address_detail": "aaaaa",
            "phone": "15110208397",
            "is_default": 1,
            "tag": 1,
            "tag_name": "\u5bb6\u5ead",
            "dangaoss_addr_id": "1168352"
          }, {
            "id": 40817,
            "check": false,
            "name": "\u9ad8\u4e16\u52c7",
            "province_code": "1",
            "city_code": "jfb1",
            "area_code": "2802",
            "street_code": "54741",
            "province_name": "\u5317\u4eac",
            "city_name": "\u5317\u4eac",
            "area_name": "\u4e1c\u57ce\u533a",
            "street_name": "\u4e1c\u534e\u95e8\u8857\u9053",
            "address_detail": "xx\u5c0f\u533a",
            "phone": "15112080364",
            "is_default": 0,
            "tag": 1,
            "tag_name": "\u5bb6\u5ead",
            "dangaoss_addr_id": "1168347"
          }
        ],
      }
    },
    filters:{
      getAddress(item){
        return `${item.province_name}${item.city_name}${item.area_name}${item.street_name}${item.address_detail}`
      }
    },
    methods:{

      ...mapActions([
        'getCityList'
      ]),


      /**x新增用户地址功能*********/
      /**
       * @description 获取城下的下级城市
       * @param parentId
       * @param level
       * @param resolve
       */
      handleGetCity({parentId, level}, resolve) {
        this.getCityList(parentId)
          .then(res => {
            console.log('handleGetCity',parentId, level, res);
            let temp = [];
            res.map((item)=>{
              temp.push({...item, label: item['name'], value: item['city_code']})
            });
            resolve(temp);
          })
          .catch()
      },

      /**
       * @description 保存事件
       * @param address
       */
      handleSave(address) {
        console.log('address', address);
        this.xdDowncDrawer = false;
      },
      /**新增用户地址功能 结束*********/

      back() {
        this.$xdUniHelper.navigateBack()
      },

      doneInput() {
        uni.hideKeyboard()
      },
    }
  }
</script>

<style scoped lang="less">
  .app-body {
    &__list {
      padding-top: unit(20,rpx);
      padding-bottom: unit(140,rpx);

      &-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        margin-bottom: unit(20,rpx);
        padding: unit(20,rpx) unit(5,rpx);

        &:last-child {
          margin-bottom: 0;
          padding-bottom: 0;
        }

        &-select,&-operation {
          flex-shrink: 0;
          padding: 0 unit(10,rpx);
          margin-right: unit(10,rpx);

          display: flex;
          justify-content: flex-end;
          align-items: center;

          & > view {
            padding: 0 unit(10,rpx);
          }
        }

        &-left {
          flex: 1;
          width: 0;

          & >view:first-child {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: @xd-font-size-lg;
            padding-bottom: unit(10,rpx);

            & > view:last-child {
              margin-left: unit(10,rpx);
              font-size: @xd-font-size-base;
            }
          }

          & > view:last-child {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            font-size: @xd-font-size-sm;

            & > text {
              padding: 0 unit(10,rpx);
              border-radius: unit(6,rpx);
              transform: scale(.9);
              color: #fff;
              flex-shrink: 0;
            }

            & > view {
              margin-left: unit(20,rpx);
              flex: 1;
              width: 0;
            }
          }
        }

      }
    }

    &__btn {
      position: fixed;
      left: unit(0,rpx);
      right: unit(0, rpx);
      bottom: 0;
      height: unit(100,rpx);
      background: #fff;
      padding: unit(20,rpx);
      .safe-area();
    }
  }
</style>
