<style lang="scss" scoped>
.form-item {
  max-width: 320px;
}
.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 {
  padding: 10px;
  max-width: 400px;
}
.user-name {
  padding-top: 10px;
  border-left: 1px solid #eee;
  width: 120px;
}
.pay-info {
  padding-top: 10px;
  border-left: 1px solid #eee;
  width: 120px;
}
.order-info {
  padding-top: 10px;
  border-left: 1px solid #eee;
  width: 120px;
}
.order-action {
  padding-top: 10px;
  border-left: 1px solid #eee;
  width: 120px;
}
.nav-item {
  width: 25%;
  max-width: 100px;
  text-align: center;
}
.border-bottom {
  width: 20px;
  height: 4px;
  border-radius: 2px;
  background-color: $primary;
  margin: -8px auto 0 auto;
}
.product-img {
  width: 64px;
  height: 64px;
}
</style>
<template>
  <div class="bg-white" :class="$q.platform.is.desktop ? 'q-ma-lg content': 'full-width'">
    <div class="flex justify-between margin">
      <div :class="$q.platform.is.desktop ? 'form-item': 'full-width'">
        <q-input
          placeholder="輸入商品名稱/訂單號"
          v-model="GoodsName"
          clearable
          outlined
        ></q-input>
      </div>
    </div>
    <div class="tips flex">
      <div
        @click="changeOrderType(item)"
        class="nav-item cursor-pointer"
        v-for="item in orderEnums"
        :key="item.ID"
      >
        {{ item.Name }}
        <div :class="orderStatus === item.ID ? 'border-bottom' : ''"></div>
      </div>
    </div>
    <!-- pc -->
    <div v-if="$q.platform.is.desktop">
      <div class="card" v-for="item in orderList" :key="item.id">
        <div class="flex card-title justify-between">
          <div class="flex">
            <span><span class="text-grey-6">订单号:</span>{{ item.orderNo }}</span>
            <span class="phone text-grey-6">
              <i class="iconfont iconmessage"></i>
              联系客服
            </span>
          </div>
          <span class="text-grey-6">{{ item.createTimeStr }}</span>
        </div>
        <div class="flex justify-between">
          <div class="name flex no-wrap">
            <img class="product-img mr" :src="item.goodsPic" />
            <div style="max-width: 300px">
            <div class="ellipsis-2">{{ item.goodsName }}</div>
            <div>x1</div>
            </div>
          </div>
          <div class="flex">
            <div class="user-name text-center">
              <i class="iconfont iconpeople1"></i>{{ item.surName
              }} {{ item.name }}
            </div>
            <div class="pay-info text-center">
              <div class="  text-grey-6">CNY{{ item.totalPrice }}</div>
              <div>{{ item.payTypeStr }}</div>
            </div>
            <div class="order-info text-center">
              <div class="primary">{{item.orderStatusStr}}</div>
              <div class="q-mt-sm cursor-pointer">订单详情</div>
            </div>
            <div class="order-action text-center">
              <q-btn 
                color="primary"
                @click="cancalOrder(item)"
                unelevated
                outline
                size="sm"
                label="取消订单">
                </q-btn>
              <div>查看發票</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- mobile -->
    <div v-else>
      <div class="card" v-for="item in orderList" :key="item.id">
        <div class="flex card-title justify-between">
          <div class="flex">
            <span><span class="text-grey-6">订单号:</span>{{ item.orderNo }}</span>
          </div>
          <span class="text-grey-6">{{ item.orderStatusStr }}</span>
        </div>
        <div class="q-pa-md">
          <div class="flex no-wrap full-width">
            <img class="product-img mr flex-noShark" :src="item.goodsPic" />
            <div>
              <div class="ellipsis-2">{{ item.goodsName }}</div>
              <div>x1</div>
            </div>
          </div>
          <div>
            <!-- <div>
              <i class="iconfont iconpeople1"></i>{{ item.surName
              }} {{ item.name }}
            </div> -->
            <div>
              <div class="f18 text-right">CNY{{ item.totalPrice }}</div>
              <!-- <div>{{ item.payTypeStr }}</div> -->
            </div>
            <!-- <div>
              <div class="primary">{{item.orderStatusStr}}</div>
              <div class="q-mt-sm cursor-pointer">订单详情</div>
            </div> -->
            <div class="flex justify-end q-mt-sm">
              <q-btn 
                color="primary"
                @click="cancalOrder(item)"
                unelevated
                outline
                size="sm"
                label="取消订单">
                </q-btn>
            </div>
          </div>
        </div>
      </div>
    </div>
      <noneData v-show="!orderList.length"></noneData>
  </div>
</template>

<script>
import noneData from "../../components/noneData.vue";
export default {
  components: {
    noneData,
  },
  data() {
    return {
      orderEnums: [],
      GoodsName: '',
      orderList: [],
      current: 1,
      pageCount: 0,
      orderStatus: 0,
    };
  },
  mounted() {
    this.type = this.$route.query.type
    if(this.type) {
      this.orderStatus = Number(this.type)
    }
    this.getOrderEnums();
    this.getOrderList();
  },
  methods: {
    cancalOrder() {},
    pageChange(value) {
      this.current = value;
      this.getOrderList();
    },
    changeOrderType(item) {
      if (this.orderStatus === item.ID) {
        this.orderStatus = 0;
      } else {
        this.orderStatus = item.ID;
      }
      this.current = 1;
      this.pageCount = 0;
      this.orderList = [];
      this.getOrderList();
    },
    getOrderEnums() {
      this.apipost(
        "GetDirectOrderStatusEnum_post",
        {},
        (res) => {
          if (res.data.resultCode == 1) {
            this.orderEnums = res.data.data;
          } else {
            // this.$notify(res.data.message);
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        null
      );
    },
    getOrderList() {
      this.apipost(
        "GetMyDirectOrderPageList_post",
        {
          pageIndex: this.current,
          pageSize: 10,
          orderStatus: this.orderStatus,
          GoodsName: this.GoodsName,
        },
        (res) => {
          if (res.data.resultCode == 1) {
            const { count, pageData, pageCount } = res.data.data;
            this.count = count;
            this.pageCount = pageCount;
            this.orderList = pageData;
          } else {
            // this.$notify(res.data.message);
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        null
      );
    },
  },
};
</script>