<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 class="flex justify-between">
      <div>
        <q-input
          ref="lastName"
          class="form-item"
          placeholder="名字（需與旅遊證件一致）"
          v-model="form.lastName"
          outlined
          :rules="[(val) => val !== '' || '请输入名字']"
        ></q-input>
      </div>
      <div>
        <q-select
          square
          outlined
          class="form-item"
          v-model="model"
          :options="options"
          placeholder="Filled"
        ></q-select>
      </div>
    </div>
      <div class="tips flex">
        <div
          @click="changeCouponType(item)"
          class="nav-item cursor-pointer"
          v-for="item in ['全部', '待付款', '待出行', '已完成', '已取消']"
          :key="item"
        >
          {{ item }}
          <div :class="selectedKey === item ? 'border-bottom' : ''"></div>
        </div>
      </div>
    <div>
      <div class="card">
        <div class="flex card-title justify-between">
          <div class="flex">
            <span>订单号</span>
            <span class="phone">联系客服</span>
          </div>
          <span>2023-02-23 14:31:52</span>
        </div>
        <div class="flex q-py-sm">
          <img src="../../assets/img/avatar.png" />
          <div class="name">
            <div>
              【限量300张·售完即止】2023客路春季踏青
              卡（春季特惠不约可退+广东省内周边9大路
            </div>
            <div>xl</div>
          </div>
          <div class="user-name">王然</div>
          <div class="pay-info">
            <div>CNY1188.00</div>
            <div>在線支付</div>
          </div>
          <div class="order-info">
            <div>等待收貨</div>
            <div>订单详情</div>
          </div>
          <div class="order-action">
            <div>确认收货</div>
            <div>取消订单</div>
            <div>查看發票</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedKey: "全部",
      form: {
        lastName: "",
        firstName: "",
      },
      model: "",
      date: "",
      options: [],
    };
  },
  methods: {
    changeCouponType(item) {
      this.selectedKey = item;
    },
    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>