<style lang="scss" scoped>
.form-item {
  max-width: 320px;
  height: 40px;
  margin: 10px;
}
.content {
  width: 900px;
}
.tips {
  width: 100%;
  height: 42px;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 0 35px;
  line-height: 42px;
}
::v-deep .q-field__control {
  height: 40px;
}
.title {
  margin-top: 20px;
  margin-bottom: 10px;
}
.card {
  margin-top: 20px;
  width: 433px;
  height: 170px;
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 8px;
}
.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="content q-ma-lg bg-white">
    <div class="q-ma-lg">
      <div class="tips">
        收貨地址 <span>您已创建 4个收货地址，最多可创建 10个</span>
      </div>
      <div class="card">
        <div class="flex justify-between label">
          <div>唐艷林<span class="text-grey-6">(默認地址)</span></div>
          <div><span>修改</span><span>删除</span></div>
        </div>
        <div class="address-item q-pt-sm">所在地區：四川成都市成華區跳蹬河街道</div>
        <div class="address-item">詳細地址：建設南路163號3棟</div>
        <div class="address-item">手機：180****1613</div>
      </div>
      <div class="card flex flex-center" @click="showDialog"><span></span>添加郵寄地址</div>
    </div>
    <q-dialog content-style="width: 900px" v-model="isShowDialog">
    <div class="bg-white dialog-box">
      <div>添加邮寄地址</div>
      <div class="dialog-box">
        <div class="row">
          <div class="col">
            <div class="title">姓</div>
            <q-input
              class="form-item"
              v-model="form.firstName"
              outlined
              placeholder="姓"
              ref="firstName"
              :rules="[(val) => val !== '' || '请输入姓氏']"
            ></q-input>
          </div>
          <div class="col">
            <div class="title">名</div>
            <q-input
              ref="lastName"
              class="form-item"
              placeholder="名"
              v-model="form.lastName"
              outlined
              :rules="[(val) => val !== '' || '请输入名字']"
            ></q-input>
          </div>
        </div>
        <div>
          <q-btn color="primary" unelevated label="保存" @click="submit" />
        </div>
      </div>
    </div>
    </q-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowDialog: false, 
      form: {
        lastName: "",
        firstName: "",
      },
      model: "",
      date: "",
      options: [],
    };
  },
  methods: {
    showDialog() {
      this.isShowDialog = true
    },
    submit() {
      const verifyArr = ["fastName", "lastName"];
      verifyArr.forEach((item) => {
        this.$refs[item].validate();
      });
      verifyArr.forEach((item) => {
        if (item.$refs[item].hasError) {
          this.formHasError = true;
        }
      });
      if ((this.formHasError = true)) {
        return;
      }
    },
  },
};
</script>