<template>
  <view>
    <view class="chooseaddr">
      <view class="userinfo">
        <view class="info">
          <view>{{name}}</view>
          <view class="info1">
            <view class="tel">{{phone}}</view>
            <view class="mr" v-if="defined">默认</view>
          </view>
        </view>
        <view>{{address}}</view>
      </view>
      <view>
        <img src="../../static/img/edit.png" @click.stop="modify" alt class="edit" />
      </view>
      
    </view>
    <img src="../../static/img/border.png" alt class="line" />
  </view>
</template>
<script>
export default {
  name: "chooseaddrInfo",
  props:["name","phone","defined","address","aid"],
  methods:{
    modify(){
      console.log(this.aid)
      this.$emit("addid")
    }
  }
};
</script>
<style lang="scss">
.chooseaddr {
  height: 182upx;
  width: 100%;
  display: flex;
  justify-content: space-between;
  .userinfo {
    // width: 449upx;
    height: 97upx;
    font-size: 27upx;
    padding-left: 31upx;
    .info {
      width: 500upx;
      display: flex;
      //   justify-content: space-around;
      margin-top: 44upx;
      margin-bottom: 41upx;
      .info1 {
        display: flex;
        .tel {
          margin-right: 20upx;
          margin-left:107upx;
        }
        .mr {
          width: 84upx;
          height: 41upx;
          background: rgba(239, 98, 116, 1);
          border: 2upx solid rgba(223, 51, 72, 1);
          border-radius: 21upx;
          color: white;
          text-align: center;
          line-height: 41upx;
        }
      }
    }
  }
  .edit {
    width: 33upx;
    height: 34upx;
    margin-top: 47upx;
    margin-right: 25upx;
  }

}
  .line {
    height: 9upx;
    width: 100%;
  }
</style>