<template>
  <div class="sell-order-address-wrapper">
    <!-- 鉴定平台地址 -->
    <div v-if="appraiseAddress && !isOnlyShowBack">
      <div class="address-wrapper">
        <i class="address-icon"></i>
        <div>
          <p class="consignee">
            收货人地址:&nbsp;{{ appraiseAddress.addressName }}
          </p>
          <p class="area">{{ appraiseAddress.address }}</p>
          <p class="mobile">
            {{ appraiseAddress.mobile }}<i ref="copy" class="copy"></i>
          </p>
        </div>
      </div>
      <router-link
        :to="{ name: 'deliverBackAddress', params: $route.params }"
        class="to-back-address"
      >
        <div class="back-address">
          <span>商品回寄地址</span>
          <i class="right-icon"></i>
        </div>
      </router-link>
    </div>
    <div class="address-wrapper" v-else>
      <i class="address-icon back-address-icon"></i>
      <div>
        <p class="consignee">
          {{ `回寄地址: ${userAddress.consignee || ""}` }}
        </p>
        <p class="area">
          {{ userAddress.area }}{{ userAddress.address || "" }}
        </p>
        <p class="mobile">{{ userAddress.mobile }}</p>
        <div v-if="userAddress.canModify" class="edit-address" @click="jumpToAddressModify">
          <span class="mobile">编辑地址</span>
          <i class="cubeic-arrow" ></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import Clipboard from "clipboard";
import { STORE_UPDATE_ADDRESS_INFO } from 'store/address/address/types';
const { mapGetters } = createNamespacedHelpers("order/orderDetail");
const { mapMutations: addressMutations } = createNamespacedHelpers(
  'address/address',
);

export default {
  props: {
    isOnlyShowBack: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapGetters(["userAddress", "appraiseAddress", "orderCode"])
  },
  methods: {
    ...addressMutations(['STORE_UPDATE_ADDRESS_INFO']),
    jumpToAddressModify() {
      const orderCode = this.orderCode;
      // 保存地址到store
      let info = JSON.stringify(this.userAddress || {});
      let updateInfo = JSON.parse(info || '{}');

      Object.assign(updateInfo, { orderCode: orderCode });
      this.STORE_UPDATE_ADDRESS_INFO(updateInfo);
      this.$router.push({
        name: 'addressModify',
        query: {
          fromPage: 'SellerOrder',
        },
      });
    }
  },
  activated() {
    this.$nextTick(() => {
      if (!this.$refs.copy) {
        return;
      }
      this.copyBtn = new Clipboard(this.$refs.copy, {
        text: () => {
          const { addressName, address, mobile } = this.appraiseAddress;
          return `${addressName} ${address} ${mobile}`;
        }
      });
      this.copyBtn.on("success", () => {
        this.$createToast({
          txt: "复制成功",
          type: "txt"
        }).show();
      });
    });
  }
};
</script>

<style lang="scss" scoped>
.sell-order-address-wrapper {
  .to-back-address {
    display: block;
  }

  .back-address {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28px;
    padding-top: 40px;
    border-top: 1px solid #eee;
    margin-top: 40px;

    .right-icon {
      width: 48px;
      height: 48px;
      display: block;
      background-size: contain;
      background-repeat: no-repeat;
      background-image: url("~statics/image/order/right-arrow-icon@3x.png");
    }
  }

  .edit-address {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    right: 40px;
    z-index: 99;
  }

  .address-wrapper {
    display: flex;
    align-items: center;
    position: relative;

    &:before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 1;
    }

    .consignee {
      font-size: 32px;
      font-weight: bold;
    }

    .area {
      color: #999;
      margin: 12px 0;
    }

    .mobile {
      font-size: 28px;
      font-weight: bold;
    }

    .copy {
      width: 50px;
      height: 25px;
      display: inline-block;
      background: url("~statics/image/order/copy@3x.png") no-repeat;
      background-size: contain;
      background-position: center;
    }

    .address-icon {
      width: 48px;
      height: 48px;
      display: block;
      background-repeat: no-repeat;
      background-size: contain;
      margin-right: 40px;
      background-image: url("~statics/image/order/addr-icon@3x.png");
    }

    .back-address-icon {
      background-image: url("~statics/image/order/blackAddress@3x.png");
    }
  }
}
</style>