<style lang="scss" scoped>
.form-item {
  max-width: 320px;
  margin: 10px;
}
.content {
  width: 900px;
}
.tips {
  width: 100%;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 19px 35px;
  line-height: 22px;
}
::v-deep .q-field__control {
  height: 40px;
}
::v-deep .q-field--auto-height .q-field__control {
  min-height: 40px;
}
::v-deep .q-field__marginal {
  height: 40px;
}
::v-deep .q-field--auto-height .q-field__native {
  min-height: 40px;
}
.title {
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 10px;
}
.card {
  margin-top: 20px;
  height: 170px;
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 8px;
}
.card-pc {
  
  width: 413px;
}
.img-box {
  width: 50px;
  height: 50px;
  background: #f5f5f5;
  border-radius: 25px;
}
.img {
  width: 50px;
  height: 50px;
  display: block;
  padding: 11px;
}
.label {
  height: 47px;
  background: #f5f5f5;
  width: 100%;
  line-height: 47px;
  padding: 0 33px;
  box-sizing: border-box;
}
.address-item {
  margin: 10px 33px;
}
.dialog-box {
  width: 800px;
  padding: 15px;
}
</style>
<template>
  <div class="bg-white" :class="$q.platform.is.desktop ? 'q-ma-lg content': 'full-width'">
    <div class="q-ma-lg">
      <div class="tips">
        收貨地址 <span>您已创建 {{count}}个收货地址，最多可创建 10个</span>
      </div>
      <div class="flex flex-wrap justify-between">
        <div class="card" :class="$q.platform.is.desktop ? 'card-pc': 'full-width'" v-for="item in pageData" :key="item.Id">
          <div class="flex justify-between label">
            <div>
              {{ item.Name
              }}<span class="text-grey-6" v-if="item.IsDefault === 1"
                >(默認地址)</span
              >
            </div>
            <div>
              <span class="user-edit" @click="editUser(item)">编辑</span>
              <span class="text-grey-6 cursor-pointer" @click="deleteUser(item)"
                >删除</span
              >
            </div>
          </div>
          <div class="address-item q-pt-sm">
            所在地區：{{ item.CountryName }} {{ item.CityName }}
          </div>
          <div class="address-item">詳細地址：{{ item.Address }}</div>
          <div class="address-item">手機：{{ item.Mobile }}</div>
        </div>
        <!-- <div class="card flex flex-center" @click="showDialog"><span></span>添加郵寄地址</div> -->
        <q-btn v-if="count < 10"
         :class="$q.platform.is.desktop ? 'card-pc': 'full-width'"
          class="card flex flex-center"
          color="blue"
          unelevated
          outline
          @click="addAddress"
        ><img class="q-mr-sm" style="width: 28px;" src="../../assets/img/address-add.png" />添加郵寄地址</q-btn>
      </div>
    </div>
    <q-dialog v-model="isShowDialog">
      <div class="bg-white dialog-box" style="width: 800px; padding: 20px">
        <div class="f22 bold">{{form.Id ? '编辑': '添加'}}邮寄地址</div>
        <form @submit.prevent.stop="submit" class="q-gutter-md">
          <div>
            <div :class="$q.platform.is.desktop ? 'row': 'culmuns'">
              <div class="col">
                <div class="title">全名</div>
                <q-input
                  class="form-item"
                  v-model="form.Name"
                  outlined
                  placeholder="全名"
                  ref="Name"
                  :rules="[(val) => !!val || '请输入全名']"
                ></q-input>
              </div>
              <div class="col">
                <div class="title">國家/地區</div>
                <q-select
                  @input="changeCountry"
                emit-value
                map-options
                  ref="CountryId"
                  square
                  outlined
                  option-value="ID"
                  option-label="Name"
                  class="form-item"
                  v-model="form.CountryId"
                  :options="countList"
                  placeholder="Filled"
                  :rules="[(val) => Boolean(val) || '请选择國家/地區']"
                />
              </div>
            </div>
            <div :class="$q.platform.is.desktop ? 'row': 'culmuns'">
              <!-- <div class="col">
                <div class="title">選擇手機區號</div>
                <q-select
                  ref="AreaCode"
                emit-value
                map-options
                  square
                  outlined
                  option-value="ID"
                  option-label="PhoneCode"
                  class="form-item"
                  v-model="form.AreaCode"
                  :options="phoneCountList"
                  placeholder="選擇手機區號"
                  :rules="[(val) => Boolean(val) || '请選擇手機區號']"
                />
              </div> -->
              <div class="col">
                <div class="title">手機號碼</div>
                <q-input
                  ref="Mobile"
                  class="form-item"
                  placeholder="手機號碼"
                  v-model="form.Mobile"
                  outlined
                  :rules="[(val) => !!val || '请输入手機號碼']"
                >
                  <template v-slot:prepend>
                    <div class="text-subtitle2">
                      {{ form.PhoneCountryStr }}
                    </div>
                  </template></q-input>
              </div>
              <div class="col">
                <div class="title">城市</div>
                <q-input
                  ref="CityName"
                  class="form-item"
                  placeholder="城市"
                  v-model="form.CityName"
                  outlined
                  :rules="[(val) => !!val || '请输入電話（首次需驗證）']"
                ></q-input>
              </div>
            </div>
            <div :class="$q.platform.is.desktop ? 'row': 'culmuns'">
              <div class="col">
                <div class="title">詳細地址</div>
                <q-input
                  ref="Address"
                  class="form-item"
                  placeholder="詳細地址"
                  v-model="form.Address"
                  outlined
                  :rules="[(val) => !!val || '请输入詳細地址）']"
                ></q-input>
              </div>
              <div class="col">
                <div class="title">郵政編碼</div>
                <q-input
                  ref="PostalCode"
                  class="form-item"
                  placeholder="郵政編碼"
                  v-model="form.PostalCode"
                  outlined
                  :rules="[(val) => !!val || '请输入郵政編碼']"
                ></q-input>
              </div>
            </div>
            <div class="flex items-center q-my-sm">
            <BaseSwitch v-model="form.IsDefault"></BaseSwitch
            ><span class="q-ml-sm">保存為默認地址</span></div>
            <div>
              <q-btn color="primary" type="submit" unelevated label="保存" />
            </div>
          </div>
        </form>
      </div>
    </q-dialog>
  </div>
</template>

<script>
import BaseSwitch from "../../components/base-switch.vue";
export default {
  components: {
    BaseSwitch,
  },
  data() {
    return {
      isShowDialog: false,
      selectedKey: "全部",
      form: {
        Name: "",
        Mobile: "",
      },
      model: "",
      date: "",
      options: [],
      countList: [],
      phoneCountList: [],
      count: 0,
      pageData: [],
    };
  },
  mounted() {
    this.id = 0;
    this.getUsersList();
    this.getCountryInfo();
  },
  methods: {
    getCountryInfo() {
      this.apipost(
        "GetCountryInfo_post",
        {},
        (res) => {
          if (res.data.resultCode == 1) {
            const { phoneCountList, countList } = res.data.data;
            this.countList = countList;
            this.phoneCountList = phoneCountList;
            this.form.CountryId = this.countList[0].ID;
            this.changeCountry(this.form.CountryId);
            this.phoneCountList.forEach((x) => {
              let temp = this.countList.find((y) => y.ID == x.ID);
              x.EnName = `${temp.EnName}(${x.PhoneCode})`;
            });
            this.form.CountryId =
              this.form.CountryId == 0
                ? this.countList[0].ID
                : this.form.CountryId;
            this.changeCountry(this.form.CountryId);
          } else {
            // this.$notify(res.data.message);
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        null
      );
    },
    changeCountry(id) {
      this.form.AreaCode = this.phoneCountList.find(
        (x) => x.ID == id
      ).PhoneCode;
      this.form.PhoneCountryStr = "+" + this.form.AreaCode;
    },
    addAddress() {
      this.isShowDialog = true
      this.form = {
        Name: "",
        Mobile: "",}
    },
    changeCouponType(item) {
      this.selectedKey = item;
    },
    submit() {
      this.formHasError = false;
      const verifyArr = [
        "Name",
        "Mobile",
        "CountryId",
        "CityName",
        "Address",
        "PostalCode",
      ];
      verifyArr.forEach((item) => {
        this.$refs[item].validate();
      });
      verifyArr.forEach((item) => {
        if (this.$refs[item].hasError) {
          this.formHasError = true;
        }
      });
      if (this.formHasError) {
        return;
      }
      this.submitUserInfo();
    },
    getUsersList() {
      this.apipost(
        "b2c_post_GetMailingAddressPageListt",
        { pageIndex: 1, pageSize: 20 },
        (res) => {
          if (res.data.resultCode == 1) {
            const { count, pageData } = res.data.data;
            this.count = count;
            this.pageData = pageData;
          } else {
            // this.$notify(res.data.message);
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        null
      );
    },
    editUser(item) {
      this.form = {...item};
      this.form.AreaCode = Number(this.form.AreaCode)
      this.form.IsDefault = this.form.IsDefault === 1
      this.isShowDialog = true;
    },
    deleteUser(item) {
      this.apipost(
        "b2c_post_DelMailingAddressInfo",
        {
          AddressId: item.Id,
        },
        (res) => {
          if (res.data.resultCode == 1) {
            this.$q.notify({
              type: "positive",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
            this.getUsersList();
          } else {
            // this.$notify(res.data.message);
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        null
      );
    },
    submitUserInfo() {
      let params = { ...this.form };
      // params.AreaCode = params.AreaCode.ID;
      // params.CountryId = params.CountryId.ID;
      params.IsDefault = params.IsDefault ? 1 : 2;
      this.apipost(
        "b2c_post_SetMailingAddressInfo",
        params,
        (res) => {
          if (res.data.resultCode == 1) {
            this.$q.notify({
              type: "positive",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
            this.isShowDialog = false;
            this.getUsersList();
          } else {
            // this.$notify(res.data.message);
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        null
      );
    },
  },
};
</script>