<template>
  <LayoutApp title="选择地址" :show-back="true">
    <CubeScroll class="main-container" ref="scroll" :options="scrollOpts">
      <div class="user-list">
        <div
          v-for="(item, index) in addressList"
          :key="index"
          class="item"
          @click="toOrderPage(item)"
        >
          <slot name="item" :data="item">
            <div class="user-item">
              <div
                :class="{
                  'uncheck-item': item.address_id !== selectedAddressId,
                  'check-item': item.address_id === selectedAddressId
                }"
              ></div>
              <div class="user-info">
                <div class="extra">
                  <p class="name">{{ item.consignee }}</p>
                  <p class="mobile">{{ item.mobile }}</p>
                  <div v-if="item.is_default === 'Y'" class="tag-btn">默认</div>
                  <div v-if="item.tag_code" class="tag-btn">{{ item.tag }}</div>
                  <div
                    class="option-btn"
                    :data-item="JSON.stringify(item)"
                    :data-add="0"
                    @click="toEditorPage"
                  >编辑</div>
                </div>
                <p class="address">{{ item.area }}{{ item.address }}</p>
              </div>
            </div>
          </slot>
          <div class="border-line"></div>
        </div>
      </div>
      <div class="add-btn" :data-add="1" @click="toEditorPage">新增地址</div>
    </CubeScroll>
  </LayoutApp>
</template>

<script>
import Layout from "../../../components/layout/layout-app";
import { get } from "lodash";
import { Scroll, Loading } from "cube-ui";
import {
  SET_USER_ADDRESS_INFO,
  STORE_UPDATE_ADDRESS_INFO
} from "store/address/address/types";

import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
  "address/address"
);

export default {
  name: "addressManager",
  components: {
    LayoutApp: Layout,
    CubeScroll: Scroll
  },
  data() {
    return {
      scrollOpts: {
        bounce: false
      },
      pageName: "",
      selectedAddressId: "",
      query: {}
    };
  },
  computed: {
    ...mapState(["addressList"])
  },
  methods: {
    ...mapMutations(["SET_USER_ADDRESS_INFO", "STORE_UPDATE_ADDRESS_INFO"]),
    ...mapActions(["fetchUserAddressList"]),
    toOrderPage(item) {
      this.SET_USER_ADDRESS_INFO(item);
      this.$router.push({
        name: this.pageName,
        query: this.query
      });
    },

    toEditorPage(event) {
      event.stopPropagation();
      let isAdd = !!parseInt(event.currentTarget.dataset.add);
      let item = event.currentTarget.dataset.item || {};

      if (isAdd) {
        if (this.addressList.length >= 5) {
          this.toast = this.$createToast({
            type: "error",
            txt: "地址不能超过5个",
            mask: true
          }).show();

          return;
        }
      }

      //编辑地址时保存item
      if (!isAdd) {
        let addressInfo = JSON.parse(item || "{}");
        Object.assign(addressInfo, { isUpdate: !isAdd, orderCode: "" });

        this.STORE_UPDATE_ADDRESS_INFO(addressInfo);
      } else {
        this.STORE_UPDATE_ADDRESS_INFO({});
      }

      this.$router.push({
        name: "addressEdit"
      });
    }
  },
  activated() {
    this.selectedAddressId = this.$route.query.address_id;
    this.fetchUserAddressList();
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 通过 `vm` 访问组件实例
      if (from.name !== "addressEdit") {
        vm.query = from.query;
        vm.pageName = from.name;
      }
    });
  }
};
</script>

<style lang="scss" scoped>
/deep/ {
  .cube-scroll-content {
    min-height: 100%;
  }

  .cube-scroll-list-wrapper {
    overflow: auto;
  }

  .cube-loading-spinners {
    margin: auto;
  }
}

.user-list {
  background-color: white;

  .border-line {
    width: 100%;
    height: 1px;
    background-color: #eee;
  }
}

.user-item {
  display: flex;
  padding-top: 40px;
  padding-bottom: 40px;
  align-items: center;

  .check-item {
    margin-left: 28px;
    width: 40px;
    height: 40px;
    background: url(~statics/image/address/selected.png) no-repeat;
    background-size: cover;
  }
  .uncheck-item {
    margin-left: 28px;
    width: 40px;
    height: 40px;
    background: url(~statics/image/address/unselected.png) no-repeat;
    background-size: cover;
  }

  .user-info {
    overflow: hidden;
    margin-left: 32px;
    width: calc(100% - 140px);

    .extra {
      display: flex;
      flex-direction: row;

      .name {
        font-size: 32px;
        font-weight: bold;
        color: #000000;
        line-height: 44px;
      }

      .mobile {
        display: block;
        margin-left: 20px;
        font-size: 32px;
        font-weight: bold;
        color: #000000;
        line-height: 44px;
      }

      .tag-btn {
        width: 80px;
        line-height: 44px;
        font-size: 22px;
        text-align: center;
        background-color: #002b47;
        margin-left: 18px;
        color: white;
        border-radius: 4px;
      }

      .option-btn {
        display: block;
        width: 65px;
        line-height: 44px;
        letter-spacing: -0.29px;
        color: black;
        font-size: 24px;
        position: absolute;
        right: 40px;
        text-align: right;
      }
    }

    .address {
      font-size: 28px;
      line-height: 40px;
      margin-top: 20px;
      color: #999;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
}

.add-btn {
  height: 88px;
  line-height: 88px;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  color: #252525;
  background-color: #fff;
  border-radius: 44px;
  border-style: solid;
  border-width: 1px;
  border-color: #e0e0e0;

  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 40px;
}
</style>