<style lang="scss" scoped>
.form-item {
  max-width: 320px;
  height: 40px;
  margin: 10px;
}
.content {
  width: 900px;
}
.title {
  margin-top: 20px;
  margin-bottom: 10px;
}
.card {
  margin: 10px;
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 8px;
}
.card-title {
  height: 37px;
  height: 37px;
  padding: 0 20px;
  line-height: 37px;
  background: #f5f5f5;
  border-radius: 8px 8px 0px 0px;
}
.tips {
  height: 42px;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 0 35px;
  line-height: 42px;
}
::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;
}
.title {
  margin-top: 20px;
  margin-bottom: 10px;
}
.phone {
  margin-left: 100px;
}
.name {
  width: 300px;
}
.user-name {
  width: 120px;
}
.pay-info {
  width: 120px;
}
.order-info {
  width: 120px;
}
.order-action {
  width: 120px;
}
.nav-item {
  width: 100px;
  margin: 0 10px;
  text-align: center;
}
.border-bottom {
  width: 20px;
  height: 4px;
  border-radius: 2px;
  background-color: $primary;
  margin: -8px auto 0 auto;
}
</style>
<template>
  <div class="content q-ma-lg bg-white">
    <div>
      <div class="card" v-for="item in pageData" :key="item.id">
        <div class="flex card-title justify-between">
          <div class="flex">
            <span>{{item.Name}}</span>
            <span class="phone">手機號：{{item.Mobile}}</span>
          </div>
          <span>
            <span class="user-edit" @click="editUser(item)">编辑</span>
            <span class="text-grey-6 cursor-pointer" @click="deleteUser(item)">删除</span>
          </span>
        </div>
        <div class="flex q-py-sm">
          <div class="row q-pa-lg" v-for="(item, index) in item.CardList" :key="index">
            <div class="col">中國內地身份證：510181********0920</div>
            <div class="col">中國內地身份證：510181********0920</div>
          </div>
        </div>
      </div>
    </div>
    <q-btn
      color="primary"
      unelevated
      outline
      @click="isShowDialog = true"
      label="添加出行人"
    ></q-btn>

    <q-dialog content-style="width: 900px" v-model="isShowDialog">
      <div class="bg-white dialog-box" style="width: 800px; padding: 20px">
        <div>添加邮寄地址</div>
        <form @submit.prevent.stop="submit" class="q-gutter-md">
          <div>
            <div class="row">
              <div class="col">
                <div class="title">姓</div>
                <q-input
                  class="form-item"
                  v-model="form.SurName"
                  outlined
                  placeholder="姓"
                  ref="SurName"
                  :rules="[(val) => !!val || '请输入姓氏']"
                ></q-input>
              </div>
              <div class="col">
                <div class="title">名</div>
                <q-input
                  ref="Name"
                  class="form-item"
                  placeholder="名"
                  v-model="form.Name"
                  outlined
                  :rules="[(val) => !!val || '请输入名字']"
                ></q-input>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <div class="title">姓氏（需與旅遊證件一致）</div>
                <q-input
                  class="form-item"
                  v-model="form.EnName"
                  outlined
                  placeholder="姓氏（需與旅遊證件一致）"
                  ref="EnName"
                  :rules="[(val) => !!val || '请输入姓氏（需與旅遊證件一致）']"
                ></q-input>
              </div>
              <div class="col">
                <div class="title">名字（需與旅遊證件一致）</div>
                <q-input
                  ref="EnSurName"
                  class="form-item"
                  placeholder="名字（需與旅遊證件一致）"
                  v-model="form.EnSurName"
                  outlined
                  :rules="[(val) => !!val || '请输入名字（需與旅遊證件一致）']"
                ></q-input>
              </div>
            </div>

            <div class="row">
              <div class="col">
                <div class="title">國家/地區代碼</div>
                <q-select
                  ref="PhoneCountry"
                  square
                  outlined
                  option-value="ID"
                  option-label="PhoneCode"
                  class="form-item"
                  v-model="form.PhoneCountry"
                  :options="phoneCountList"
                  placeholder="Filled"
                  :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 || '请输入電話（首次需驗證）']"
                ></q-input>
              </div>
            </div>

            <div
              v-for="(item, index) in form.CardList"
              :key="item.id"
              class="row"
            >
              <div class="col">
                <div class="title">证件类型</div>
                <q-select
                  ref="card"
                  square
                  outlined
                  option-value="ID"
                  option-label="Name"
                  class="form-item"
                  v-model="item.Type"
                  :options="cardList"
                  placeholder="Filled"
                  :rules="[(val) => Boolean(val) || '请选择國家/地區代碼']"
                />
              </div>
              <div class="col">
                <div class="title flex justify-between items-center">
                  <div>证件号码</div>
                  <div v-if="index > 0" @click="deleteCardItem(item)">删除</div>
                </div>
                <q-input
                  class="form-item"
                  placeholder="電話（首次需驗證）"
                  v-model="item.CardNo"
                  outlined
                  :rules="[(val) => !!val || '请输入電話（首次需驗證）']"
                ></q-input>
              </div>
            </div>
            <q-btn
              color="primary"
              @click="addCard"
              unelevated
              outline
              label="新增证件"
            />
            <div>
              <q-btn color="primary" type="submit" unelevated label="保存" />
            </div>
          </div>
        </form>
      </div>
    </q-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowDialog: false,
      selectedKey: "全部",
      form: {
        SurName: "",
        Name: "",
        EnName: "",
        EnSurName: "",
        Mobile: "",
        CardList: [],
      },
      model: "",
      date: "",
      options: [],
      cardList: [],
      phoneCountList: [],
      count: 0,
      pageData: [],
    };
  },
  mounted() {
    this.id = 0;
    this.addCard();
    this.getUsersList();
    this.getCountryInfo();
    this.getCardTypeList();
  },
  methods: {
    getCardTypeList() {
      this.apipost(
        "b2c_post_GetTripCardEnumList",
        {},
        (res) => {
          if (res.data.resultCode == 1) {
            this.cardList = res.data.data;
          } else {
            // this.$notify(res.data.message);
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        null
      );
    },
    getCountryInfo() {
      this.apipost(
        "GetCountryInfo_post",
        {},
        (res) => {
          if (res.data.resultCode == 1) {
            const { phoneCountList, countList } = res.data.data;
            this.countList = countList;
            this.phoneCountList = phoneCountList;
          } else {
            // this.$notify(res.data.message);
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        null
      );
    },
    changeCouponType(item) {
      this.selectedKey = item;
    },
    addCard() {
      this.id++;
      this.form.CardList.push({
        id: this.id,
      });
    },
    deleteCardItem(card) {
      const index = this.form.CardList.findIndex(item => item.id === card.id)
      this.form.CardList.splice(index, 1)
    },
    submit() {
      this.formHasError = false;
      const verifyArr = [
        "SurName",
        "Name",
        "EnName",
        "EnSurName",
        "Mobile",
      ];
      verifyArr.forEach((item) => {
        console.log("this.$refs[item]", this, item, this.$refs[item]);
        this.$refs[item].validate();
      });
      verifyArr.forEach((item) => {
        console.log("item", item);
        if (this.$refs[item].hasError) {
          console.log("item", item);
          this.formHasError = true;
        }
      });
      console.log("this.formHasError", this.formHasError, this.form);
      if (this.formHasError) {
        return;
      }
      this.submitUserInfo();
    },
    getUsersList() {
      this.apipost(
        "b2c_post_GetTripGuestPageList",
        {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) {
      console.log('editUser', item)
      this.form = item
      this.isShowDialog = true
    },
    deleteUser(item) {
      this.apipost(
        "b2c_post_DelTripGuestInfo",
        {
          TripGuestId: 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.PhoneCountry = params.PhoneCountry.ID;
      params.CardList.forEach(item => {
        item.Type = item.Type.Id
      })
      this.apipost(
        "b2c_post_SetTripGuestInfo",
        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>