<template>
  <van-popup v-model="showPopup" position="bottom" round>
    <div class="addr-select-popup">
      <div class="header flex-default">
        <div class="cancel" @click="handleCancel">取消</div>
        <div class="title">选择快递地址</div>
        <div class="confirm" @click="handleConfirm">确定</div>
      </div>
      <div class="content">
        <div class="list">
          <div
            class="item flex-default"
            v-for="(item, index) of list"
            :key="`addr-item-${index}`"
          >
            <m-icon
              :icon="currentIndex == index ? 'icon-radio-check' : 'icon-radio'"
              :size="20"
              className="radio"
              @click="handleSelect(index)"
            />
            <div class="addr" @click="handleSelect(index)">
              <div class="link flex-default">
                <div class="name">{{ item.name }}</div>
                <div class="phone">{{ item.phone }}</div>
                <div class="default" v-show="item.defaultAddr == 1">默认</div>
              </div>
              <div class="detail">
                {{ item.addrLabel }}
              </div>
            </div>
            <div class="edit" @click="handleUpdate(item)">
              <m-icon icon="icon-edit" :size="14" />
            </div>
          </div>
        </div>
        <div class="bottom">
          <van-button
            type="primary"
            class="add-btn"
            @click="handleAdd"
            round
            block
          >
            添加快递地址
          </van-button>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    defaultSelect: {
      type: Number,
      default: null,
    },
    requiresAuth: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      showPopup: false,
      currentIndex: 0,
      selectIndex: 0,
      list: [],
    };
  },
  watch: {
    value(val) {
      this.showPopup = val;
      if (!val && this.currentIndex != this.selectIndex) {
        this.currentIndex = this.selectIndex;
      }
    },
    showPopup(val) {
      this.$emit("input", val);
    },
  },
  methods: {
    requestData() {
      if (!this.hasLogin) {
        return;
      }
      this.$api({
        apiName: "getAddrList",
        requiresAuth: this.requiresAuth,
        success: (res) => {
          this.list = res;
          let defaultIndex = 0;
          if (this.defaultSelect != null) {
            defaultIndex = this.defaultSelect;
          }

          this.list.forEach((item, index) => {
            if (this.defaultSelect == null && item.defaultAddr == 1) {
              defaultIndex = index;
              this.$emit("confirm", index, { ...item });
            }
            item.addrLabel = `${item.province}${item.city}${item.county || ""}
            ${item.street || ""} ${item.detailAddr}`;
          });

          this.currentIndex = defaultIndex;
          this.selectIndex = defaultIndex;
        },
      });
    },
    handleSelect(index) {
      this.currentIndex = index;
    },
    handleConfirm() {
      this.showPopup = false;
      if (this.list.length == 0) {
        this.$emit("confirm", null, null);
        return;
      }
      this.selectIndex = this.currentIndex;
      this.$emit("confirm", this.selectIndex, {
        ...this.list[this.selectIndex],
      });
    },
    handleCancel() {
      this.showPopup = false;
    },
    handleAdd() {
      this.$router.push({ name: "add-express-addr" });
    },
    handleUpdate(data) {
      let query = data;
      this.$router.push({ name: "add-express-addr", query });
    },
  },
  mounted() {
    this.requestData();
  },
};
</script>

<style lang="less">
.addr-select-popup {
  background: #ffffff;
  border-radius: 21px 21px 0 0;
  > .header {
    padding: 20px 17px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(221, 222, 227, 1);

    .cancel {
      font-size: 14px;
      color: #aeaeae;
    }
    .title {
      font-size: 14px;
      font-weight: bold;
      color: #140603;
    }
    .confirm {
      font-size: 14px;
      color: #140603;
    }
  }
  > .content {
    padding: 0 13px 0 13px;

    .list {
      height: 334px;
      overflow-y: auto;
    }

    .list .item {
      align-items: center;
      padding: 11px 0;
      border-bottom: 1px solid rgba(241, 241, 241, 1);

      .radio {
        margin-right: 15px;
      }
      .addr {
        flex: 1;
        margin-right: 11px;
        color: #140603;
      }
      .addr .link {
        align-items: center;
        margin-bottom: 6px;
      }
      .addr .link .name {
        font-size: 13px;
        margin-right: 20px;
      }
      .addr .link .phone {
        font-size: 13px;
        margin-right: 4px;
      }
      .addr .link .default {
        font-size: 10px;
        background: linear-gradient(295deg, #f07c5b 0%, #dd2e41 100%);
        border-radius: 4px;
        color: #ffffff;
        line-height: 14px;
        padding: 0 5px;
      }
      .addr .detail {
        font-size: 13px;
        line-height: 18px;
      }
      .edit {
        padding: 10px 0 10px 15px;
        border-left: 1px solid rgba(241, 241, 241, 1);
      }
    }

    .bottom {
      padding: 9px 85px;
    }

    .bottom .add-btn {
      height: 36px;
    }
  }
}
</style>