<style lang="scss" scoped>
.form-item {
  max-width: 320px;
  margin: 10px;
}
.content {
  width: 900px;
}
.title {
  margin: 0 10px 10px 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;
}
::v-deep .q-field--auto-height .q-field__native {
  min-height: 40px;
}
.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: var(--q-color-primary);
  margin: -8px auto 0 auto;
}
.card-info {
  height: 20px;
  padding: 0 4px;
  margin: 0 0 20px 0;
  background: #dddddd;
  border-radius: 8px;
}
</style>
<template>
  <div  class="bg-white" :class="$q.platform.is.desktop ? 'q-ma-lg content': 'full-width'">
    <div>
      <div class="card" v-for="item in pageData" :key="item.id">
        <div class="flex card-title justify-between">
          <div class="flex">
            <span>{{item.SurName}} {{ item.Name }}</span>
            <span v-if="$q.platform.is.desktop" class="phone">手機號：+{{ item.AreaCode }} {{ 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="q-pa-sm q-ml-sm">
            <span v-if="$q.platform.is.mobile">手機號：{{ item.Mobile }}</span>
            <div :class="$q.platform.is.desktop ? 'row': 'culmuns'">

          <div class="col-6 q-py-sm"
            :class="{ 'border-b': index < item.CardList.length - 1 }"
            v-for="(el, index) in item.CardList"
            :key="index"
          >
              <div>{{ el.TypeName }}:{{ el.CardNo }}</div>
          </div>
            </div>
        </div>
      </div>
    </div>
    <div class="q-pa-sm full-width">
      <q-btn
        class="full-width"
        color="primary"
        unelevated
        outline
        @click="addUser"
        >
              <i class="iconfont iconplus q-mr-sm"></i>添加出行人</q-btn
      >
    </div>
    <div class="mt flex justify-end" v-if="pageCount">
      <q-pagination
        v-model="current"
        :max="pageCount"
        direction-links
        color="primary"
        active-color="primary"
        :max-pages="5"
        @input="pageChange"
      />
    </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 class="q-pt-md">
            <div :class="$q.platform.is.desktop ? 'row': 'culmuns'">
              <div class="col">
                <div class="title">姓</div>
                <q-input
                  class="form-item"
                  v-model="form.SurName"
                  outlined
                  ref="SurName"
                  :rules="[(val) => !!val || '请输入姓氏']"
                ></q-input>
              </div>
              <div class="col">
                <div class="title">名</div>
                <q-input
                  ref="Name"
                  class="form-item"
                  v-model="form.Name"
                  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
                  class="form-item"
                  v-model="form.EnName"
                  outlined
                  ref="EnName"
                  :rules="[(val) => (!!val && /^[A-Za-z]+$/.test(val)) || '请输入姓氏（请输入英文字母）']"
                ></q-input>
              </div>
              <div class="col">
                <div class="title">名字（请输入英文字母）</div>
                <q-input
                  ref="EnSurName"
                  class="form-item"
                  v-model="form.EnSurName"
                  outlined
                  :rules="[(val) => (!!val && /^[A-Za-z]+$/.test(val)) || '请输入名字（请输入英文字母）']"
                ></q-input>
              </div>
            </div>

            <div :class="$q.platform.is.desktop ? 'row': 'culmuns'">
              <div class="col">
                <div class="title">國家/地區代碼</div>
                <q-select
                options-dense
                  emit-value
                  map-options
                  ref="AreaCode"
                  square
                  outlined
                  option-value="ID"
                  option-label="PhoneCode"
                  class="form-item"
                  v-model="form.AreaCode"
                  :options="phoneCountList"
                  :rules="[(val) => Boolean(val) || '请选择國家/地區代碼']"
                />
              </div>
              <div class="col">
                <div class="title">手機號</div>
                <q-input
                  ref="Mobile"
                  class="form-item"
                  v-model="form.Mobile"
                  outlined
                  :rules="[(val) => !!val || '请输入手機號']"
                ></q-input>
              </div>
            </div>
            <div v-for="(item, index) in form.CardList" :key="item.id">
              <div
                class="flex justify-between ml mr q-mt-lg"
                style="margin-bottom: -10px"
              >
                <span class="card-info">证件信息#{{ index + 1 }}</span>
                <div v-if="index > 0" @click="deleteCardItem(item)">
                  <!-- <i class="iconfont iconline"></i>
                    <i class="iconfont icondelete"></i> -->
                  <img style="width: 15px" src="../../assets/img/delete.png" />
                </div>
              </div>
              <div :class="$q.platform.is.desktop ? 'row': 'culmuns'">
                <div class="col">
                  <div class="title">证件类型</div>
                  <q-select
                    emit-value
                    map-options
                options-dense
                    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>
                  <q-input
                    class="form-item"
                    placeholder="证件号码"
                    v-model="item.CardNo"
                    outlined
                    :rules="[(val) => !!val || '请输入证件号码']"
                  ></q-input>
                </div>
              </div>
            </div>
            <q-btn
              class="ml"
              color="primary"
              @click="addCard"
              unelevated
              outline
              >
              <i class="iconfont iconplus q-mr-sm"></i>
              新增证件
              </q-btn
            >
            <div class="mt flex flex-center">
              <q-btn color="primary" type="submit" unelevated label="保存" />
            </div>
          </div>
        </form>
      </div>
    </q-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: 1,
      pageCount: 0,
      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: {
    pageChange(value) {
      console.log("pageChange", value);
      this.current = value;
      this.getUsersList();
    },
    addUser() {
      this.isShowDialog = true;
      this.form = {
        SurName: "",
        Name: "",
        EnName: "",
        EnSurName: "",
        Mobile: "",
        CardList: [],
      };
      this.addCard();
    },
    getCardTypeList() {
      this.apipost(
        "b2c_post_GetTripCardEnumList",
        {},
        (res) => {
          if (res.data.resultCode == 1) {
            this.cardList = res.data.data;
            this.cardList.forEach((item) => (item.Id = Number(item.Id)));
            console.log("this.cardList", this.cardList);
          } 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,
        Type: "",
      });
    },
    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",
        "AreaCode",
      ];
      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;
      }

      for (let i = 0; i < this.form.CardList.length; i++) {
        let item = this.form.CardList[i];
        if (!item.Type || !item.CardNo) {
          // this.$notify(res.data.message);
          this.$q.notify({
            type: "negative",
            message: "证件信息不完善,请补充",
            position: "top",
            timeout: 2000, // 以毫秒为单位; 0意味着没有超时
          });
          return;
        }
      }
      this.submitUserInfo();
    },
    getUsersList() {
      this.apipost(
        "b2c_post_GetTripGuestPageList",
        { pageIndex: this.current, pageSize: 10 },
        (res) => {
          if (res.data.resultCode == 1) {
            const { count, pageData, pageCount } = res.data.data;
            this.count = count;
            this.pageCount = pageCount;
            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.form.AreaCode = Number(this.form.AreaCode);
      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.current = 1;
            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.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>