<template>
  <div class="add-express-addr-con">
    <m-form-item label="收货人">
      <input
        placeholder="请填写收货人姓名"
        class="form-input"
        v-model="form.name"
      />
    </m-form-item>
    <m-form-item label="手机号码">
      <input
        placeholder="请填写收货人手机号"
        class="form-input"
        v-model="form.phone"
      />
    </m-form-item>
    <m-form-item label="所在地区" @click="showArea = true">
      <div :class="area ? 'area-val' : 'area-placeholder'">
        {{ areaLabel }}
      </div>
    </m-form-item>
    <m-form-item label="详细地址">
      <input
        placeholder="请填写详细地址"
        class="form-input"
        v-model="form.detailAddr"
      />
    </m-form-item>

    <div class="default flex-default">
      <div class="label">设为默认地址</div>
      <van-switch
        v-model="form.defaultAddr"
        active-color="#DD2E41"
        class="switch"
        :size="24"
      />
    </div>

    <div class="bottom">
      <van-button @click="handleSubmit" block type="primary" round>
        保 存
      </van-button>
    </div>

    <area-select-popup v-model="showArea" @confirm="handleConfirm" />
  </div>
</template>

<script>
import AreaSelectPopup from "@/components/area-select-popup.vue";
import { mapMutations } from "vuex";
export default {
  components: {
    AreaSelectPopup,
  },
  computed: {
    areaLabel() {
      if (this.area && this.area.length !== 0) {
        return this.area.map((item) => item.name).join("");
      } else {
        return "省市区县、乡镇等";
      }
    },
  },
  data() {
    return {
      showArea: false,
      area: null,
      form: {
        id: "",
        provinceCode: "",
        cityCode: "",
        countyCode: "",
        streetCode: "",
        defaultAddr: false,
        detailAddr: "",
        phone: "",
        name: "",
      },
    };
  },
  methods: {
    ...mapMutations(["setTitle"]),

    initData() {
      let detail = this.$route.query;
      this.area = [];
      if (detail.provinceCode && detail.province) {
        this.area.push({
          code: detail.provinceCode,
          name: detail.province,
        });
        if (detail.cityCode && detail.city) {
          this.area.push({
            code: detail.cityCode,
            name: detail.city,
          });
          if (detail.countyCode && detail.county) {
            this.area.push({
              code: detail.countyCode,
              name: detail.county,
            });
            if (detail.streetCode && detail.street) {
              this.area.push({
                code: detail.streetCode,
                name: detail.street,
              });
            }
          }
        }
      }
      detail.defaultAddr = detail.defaultAddr == 1;
      this.form = detail;
    },
    handleConfirm(area) {
      this.area = area;
      this.form.provinceCode = area[0] && area[0].code;
      this.form.cityCode = area[1] && area[1].code;
      this.form.countyCode = area[2] && area[2].code;
      this.form.streetCode = area[3] && area[3].code;
    },
    handleSubmit() {
      this.$showLoading();
      this.$api({
        apiName: "addAddr",
        postData: { ...this.form, defaultAddr: this.form.defaultAddr ? 1 : 2 },
        success: () => {
          //   uni.$emit("updateAddr");
          setTimeout(() => {
            this.goBack();
          }, 500);
        },
      });
    },
  },
  mounted() {
    if (this.$route.query.id) {
      this.setTitle("编辑快递地址");
      this.initData();
    }
  },
};
</script>

<style lang="less">
.add-express-addr-con {
  min-height: 100%;
  background: #f5f7fb;
  .m-form-item-con:nth-of-type(1) {
    .m-form-item {
      border-top: none;
    }
  }

  .area-placeholder {
    font-size: 14px;
    line-height: 20px;
    color: #aeaeae;
  }
  .area-val {
    font-size: 14px;
    line-height: 20px;
    color: #140603;
  }

  .form-input {
    font-size: 14px;
    color: #140603;
    &::-webkit-input-placeholder {
      color: #aeaeae;
    }
  }

  > .default {
    margin-top: 10px;
    padding: 20px 13px;
    background: #ffffff;
    align-items: center;
    justify-content: space-between;
    .label {
      font-size: 14px;
      color: #140603;
      font-weight: bold;
    }
  }

  > .bottom {
    position: fixed;
    padding: 12px 24px;
    bottom: 0;
    left: 0;
    width: 100%;
    > button {
      height: 36px;
    }
  }
}
</style>