<template>
  <div class="order-addr-con">
    <div class="if-immedidate flex-default">
      <div class="text">是否立即提货</div>
      <van-switch v-model="inside_delivery" active-color="#140603" :size="20" />
    </div>
    <transition name="van-fade">
      <div class="addr-con" @click="$emit('select')" v-show="inside_delivery">
        <div class="addr flex-default">
          <div class="default" v-show="addrIsDefault">默认</div>
          <div class="text">{{ addrLabel }}</div>
          <m-icon icon="more-light" className="more" :size="10" />
        </div>
        <div class="text" v-if="data.selectAddr">
          {{ data.selectAddr.detailAddr }}
        </div>
        <div class="text" v-if="data.selectAddr">
          {{ data.selectAddr.name }}
          &nbsp;&nbsp;&nbsp;&nbsp;
          {{ data.selectAddr.phone }}
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: ["data", "delivery"],
  data() {
    return {
      inside_delivery: false,
    };
  },
  watch: {
    inside_delivery(val) {
      this.$emit("update:delivery", val);
    },
  },
  computed: {
    addrIsDefault() {
      return this.data.selectAddr && this.data.selectAddr.defaultAddr == 1;
    },
    addrLabel() {
      if (this.data.selectAddr) {
        let { province, city, county, street } = this.data.selectAddr;
        return `${province}${city}${county || ""}${street || ""}`;
      } else {
        return "请选择收货地址";
      }
    },
  },
  mounted() {
    this.inside_delivery = this.delivery;
  },
};
</script>

<style lang="less">
.order-addr-con {
  .if-immedidate {
    padding: 15px 16px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f1f1f1;
    box-shadow: 0px 0px 0px 0px #f1f1f1;
    background: #ffffff;

    .text {
      color: #140603;
      font-size: 15px;
      font-weight: bold;
    }
  }

  .addr-con {
    background: #ffffff;
    padding: 15px 19px;
    border-radius: 0px 0px 10px 10px;
    color: #140603;

    > .addr {
      align-items: center;
      margin-bottom: 7px;
    }

    > .addr .default {
      background: linear-gradient(295deg, #f07c5b 0%, #dd2e41 100%);
      border-radius: 4px;
      color: #ffffff;
      font-size: 12px;
      line-height: 17px;
      margin-right: 8px;
      padding: 0 3px;
    }

    > .addr .text {
      font-size: 13px;
      flex: 1;
      line-height: 18px;
    }

    > .text {
      font-size: 13px;
    }
  }
}
</style>


