``
<template>
  <div class="container">
    <el-card class="box-card">
      <div class="title">
        <span class="titleText">{{ title }}</span>
        <el-button type="success" size="mini" @click="newAdress">{{
          $t("addressManager.newAddress")
        }}</el-button>
      </div>
      <div class="content">
        <!-- empty page -->
        <el-empty
          :description="$t('addressManager.noAddress')"
          v-if="addressDataList.length == 0 && pageTypes == 'view'"
        ></el-empty>
        <div class="session" v-else>
          <!-- address List -->
          <div class="addressList" v-if="pageTypes == 'view'">
            <div class="itemBox" v-for="item in addressDataList" :key="item.id">
              <div class="listItem">
                <div class="left">
                  <div class="address">
                    {{ item.address }}
                    <span class="default">{{
                      item.isDefault === 0
                        ? $t(" addressManager.defaultAddress")
                        : ""
                    }}</span>
                  </div>
                  <div class="nameInfo">
                    <span>{{ item.name }}</span>
                    <span class="mobile"
                      >+{{ item.areaCode }} {{ item.phone }}</span
                    >
                  </div>
                </div>
                <div class="right">
                  <el-button type="text" @click="handleSelect(item)">{{
                    $t("addressManager.choose")
                  }}</el-button>
                  <el-button type="text" @click="handleEdit(item)">{{
                    $t("addressManager.edit")
                  }}</el-button>
                  <el-button type="text" @click="handleDelDialog(item)">{{
                    $t("addressManager.del")
                  }}</el-button>
                </div>
              </div>
              <el-divider></el-divider>
            </div>
          </div>
          <!-- new/ edit Adress -->
          <div class="editBox" v-else>
            <el-form
              ref="addressForm"
              :rules="rules"
              :model="addressForm"
              label-width="80px"
            >
              <el-form-item :label="$t('addressManager.name')" prop="name">
                <el-input
                  v-model="addressForm.name"
                  :placeholder="$t('addressManager.namePlaceholder')"
                ></el-input>
              </el-form-item>
              <el-form-item :label="$t('addressManager.phone')" required>
                <el-row>
                  <el-col :span="5">
                    <el-form-item>
                      <el-select v-model="addressForm.areaCode">
                        <el-option
                          v-for="item in countryAreaCodeList"
                          :key="item.id"
                          :label="
                            '+' +
                            item.tel +
                            ` ${
                              language == 'zh_CN' ? item.nameZh : item.nameEn
                            }`
                          "
                          :value="item.tel"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="16">
                    <el-form-item prop="phone">
                      <el-input
                        ref="phone"
                        v-model="addressForm.phone"
                        :placeholder="$t('login.mobile')"
                        name="phone"
                        maxlength="11"
                        type="text"
                        tabindex="1"
                        autocomplete="on"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item
                :label="$t('addressManager.address')"
                prop="address"
              >
                <el-input
                  type="textarea"
                  v-model="addressForm.address"
                ></el-input>
              </el-form-item>
              <el-form-item :label="$t('addressManager.defaultAddress')">
                <el-switch
                  v-model="addressForm.isDefault"
                  :active-value="0"
                  inactive-value="1"
                ></el-switch>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">{{
                  $t("addressManager.saveAddress")
                }}</el-button>
                <el-button @click="resetForm">{{
                  $t("addressManager.cancel")
                }}</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getCountryList } from "@/api/user";
import {
  addressadd,
  addresslist,
  addressedit,
  addressdelete,
} from "@/api/address";
export default {
  name: "AddressManager",
  data() {
    return {
      countryAreaCodeList: [],
      addressDataList: [],
      pageTypes: "view",
      rules: {
        name: [
          {
            required: true,
            message: this.$t("addressManager.namePlaceholder"),
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: this.$t("addressManager.phonePlaceHolder"),
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: this.$t("addressManager.addessPlaceHolder"),
            trigger: "blur",
          },
        ],
      },
      addressForm: {
        name: "",
        areaCode: "86",
        isDefault: "",
        memberId: this.$store.getters.id,
        phone: "",
        address: "",
      },
    };
  },
  computed: {
    title() {
      switch (this.pageTypes) {
        case "view":
          return this.$t("addressManager.selectAddress");
        case "add":
          return this.$t("addressManager.addAddress");
        case "edit":
        default:
          return this.$t("addressManager.editAddress");
      }
    },
    language() {
      return this.$store.getters.language;
    },
  },
  watch: {
    selectedNodeId(val) {
      this.nodeId = val[val.length - 1];
      this.getIntegralList();
    },
  },
  created() {
    this.sycnInfo();
  },
  methods: {
    handleSelect(item) {
      this.$route.params.addressId = item.id;
      this.$router.back();
    },
    resetForm() {
      this.$refs["addressForm"].resetFields();
      this.addressForm = {
        name: "",
        areaCode: "86",
        isDefault: "",
        memberId: this.$store.getters.id,
        phone: "",
        address: "",
      };
      this.pageTypes = "view";
    },
    sycnInfo() {
      // areaCode List
      getCountryList().then((r) => {
        this.countryAreaCodeList = r.data;
      });
      // address List
      this.getAdressList();
    },
    getAdressList() {
      const id = this.$store.getters.id;
      addresslist({ id }).then((r) => {
        this.addressDataList = r.data;
      });
    },
    handleEdit(item) {
      this.pageTypes = "edit";
      this.addressForm = item;
    },
    newAdress() {
      this.pageTypes = "add";
    },
    onSubmit() {
      const params = { ...this.addressForm };
      this.$refs["addressForm"].validate((valid) => {
        if (valid) {
          if (this.pageTypes == "add") {
            this.newAddressSubmit(params);
          } else {
            this.saveAddressSubmit(params);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    saveAddressSubmit(params) {
      addressedit(params).then((res) => {
        this.$message({
          message: "success",
          type: "success",
        });
        this.pageTypes = "view";
        this.$refs["addressForm"].resetFields();
        this.getAdressList();
      });
    },
    newAddressSubmit(params) {
      addressadd(params).then((res) => {
        this.$message({
          message: "success",
          type: "success",
        });
        this.pageTypes = "view";
        this.$refs["addressForm"].resetFields();
        this.getAdressList();
      });
    },
    handleDelDialog(item) {
      this.$confirm(
        this.$t("addressManager.dialogTitle"),
        this.$t("addressManager.prompt"),
        {
          confirmButtonText: this.$t("addressManager.confirm"),
          cancelButtonText: this.$t("addressManager.cancel"),
          type: "warning",
        }
      )
        .then(() => {
          this.handleDel(item);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "cancel",
          });
        });
    },
    async handleDel(item) {
      try {
        const { code, data } = await addressdelete(item.id);
        if (code == 0) {
          this.$message({
            message: "success",
            type: "success",
          });
          this.pageTypes = "view";
          this.getAdressList();
        }
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>
<style scoped>
.address {
  font-size: 14px;
}
.default {
  font-size: 10px;
  color: #f35a38;
}
.session {
  padding-top: 20px;
}
.titleText {
  padding-right: 20px;
}
.editBox {
  padding: 50px 0;
}
.listItem {
  display: flex;
}
.nameInfo {
  font-size: 12px;
  padding-top: 6px;
  color: rgb(170, 170, 170);
}
.left {
  flex: 1;
}
</style>
