<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import {
  opurchaseOrderApi,
  orderStatusApi,
  orderLadingApi,
  cartListApi,
  saleOrderListApi,
  createOrderApi
} from "@/api/store.js";
import { useUserStore } from "@/store/user.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import mitt from "@/utils/mitt.js";
import moment from "moment";

const userStore = useUserStore();
const props = defineProps({
  isSystem: {
    type: Boolean,
    default: false,
  },
  source: {
    type: Number,
    default: 0,
  },
});

const lists = ref([]);

const tabPosition = ref(1); // 1-全部, 2-未支付
const changeTabPosition = (e) => {
  where.value.page_no = 1;
  loadEnd.value = false;
  loading.value = false;
  orderList.value = [];
  getOrderList(true);
};

const payRef = ref(null);

const date = ref("");
const changeDate = () => {
  where.value.start_time = date.value[0] + ' 00:00:00';
  where.value.end_time = date.value[1] + ' 23:59:59';
  getOrderList(true);
};

const disabledDate = (time)=>{
  return time.getTime() > Date.now();
}

const where = ref({
  page_no: 1,
  page_size: 20,
  number: "",
  start_time: "",
  end_time: "",
});

const loading = ref(false);
const total = ref(0);
const activeStore = ref(0);

const loadEnd = ref(false);
const orderList = ref([]);
const getOrderList = (reload = false) => {
  if (reload) where.value.page_no = 1;
  else if (loadEnd.value || loading.value) return;
  loading.value = true;
  if (tabPosition.value == 1) where.value.paid = null;
  if (tabPosition.value == 2) where.value.paid = 0;
  opurchaseOrderApi(where.value)
    .then((res) => {
      if (reload) orderList.value = res.data.lists;
      else orderList.value = [...orderList.value, ...res.data.lists];
      if (res.data.lists.length < where.value.page_size) loadEnd.value = true;
      else where.value.page_no++;
      activeStore.value = 0;
      mitt.emit("set-c-order-detail", orderList.value[0]);
      total.value = res.data.count;
      loading.value = false;
    })
    .catch((err) => {
      loadEnd.value = true;
      loading.value = false;
    });
};

const submitOrder = ()=>{
  createOrderApi().then(res=>{
    console.log(res);
  })
}

const setForm = (item, index) => {
  activeStore.value = index;
  mitt.emit("set-c-order-detail", item);
};

defineExpose({
  getOrderList
})

const emit = defineEmits(['addAddress'])
const addAddress = (item)=>{
  emit('addAddress',item)
}

onMounted(() => {
  mitt.on("update-c-order-detail", (item) => {
    orderList.value[activeStore.value].paid = 1;
  });
});
onUnmounted(()=>{
  mitt.off("update-c-order-detail");
})
</script>

<template>
  <div class="my-order">
    <div class="header-nav">
      <div class="nav-item">
        {{ "采购订单" }}
      </div>
      <div class="nav-item-btn">
        <el-date-picker
          v-model="date"
          type="daterange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          size="small"
          value-format="YYYY-MM-DD"
          :disabled-date="disabledDate"
          @change="changeDate"
          :clearable="false"
        />
      </div>
    </div>
    <div class="header-input">
      <el-input
        v-model="where.number"
        placeholder="请输入订单编号"
        @keydown.enter="getOrderList(true)"
        @clear="getOrderList(true)"
        clearable
      >
        <template #append>
          <el-button
            type="primary"
            style="
              background-color: #1890ff;
              color: #fff;
              border-radius: 0 0.315rem 0.315rem 0;
            "
            @click="getOrderList(true)"
            >搜索</el-button
          >
        </template>
      </el-input>
    </div>
    <div
      class="order-lists"
      v-loading="loading"
      v-infinite-scroll="getOrderList"
      :infinite-scroll-distance="300"
      :infinite-scroll-delay="500"
      style="overflow: auto"
    >
      <div
        class="item"
        :class="{ 'item-active': activeStore == index }"
        v-for="(item, index) in orderList"
        :key="index"
        @click="setForm(item, index)"
      >
        <div class="top">
          <div class="sn">单号: {{ item.number }}</div>
          <div class="create-time">{{ item.create_time }}</div>
        </div>
        <div class="shop">
          <div class="left">
            <div>订单数量 x {{item.order_count}}</div>
          </div>
          <div class="right">
            <div class="money">¥{{ item.total }}</div>
          </div>
        </div>
        <div class="bottom">

        </div>
      </div>
      <div v-if="loadEnd" class="load-end">没有更多了</div>
      <div v-if="loading" class="load-end">加载中...</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.my-order {
  border-radius: 1.2rem;
  height: 100%;
  background-color: #fff;
  width: 30rem;
  position: relative;
  overflow: hidden;

  .header-nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    height: 3.5rem;

    span {
      color: #ff4a00;
    }
    .nav-item {
      font-weight: bold;
    }
    .nav-item-btn {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .header-input {
    padding: 1rem;
    padding-top: 0;
    height: 2.5rem;
    border-bottom: 1px solid #eee;
  }
  .order-lists {
    height: calc(100vh - 100px - 10.2rem);
    overflow-y: auto;
    .item {
      padding: 1rem;
      border-bottom: 1px solid #eee;
      .top {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        .sn {
          font-weight: bold;
          font-size: 0.9rem;
        }
        .cahier {
          &::before {
            content: "收银";
            font-weight: 400;
            font-size: 0.7rem;
            padding: 0.1rem 0.1rem;
            margin-right: 0.2rem;
            border: 1px solid #2ec479;
            color: #2ec479;
            border-radius: 0.187rem;
          }
        }
        .cahier2 {
          &::before {
            content: "平台";
            font-weight: 400;
            font-size: 0.7rem;
            padding: 0.1rem 0.1rem;
            margin-right: 0.2rem;
            border: 1px solid #ff4a00;
            color: #ff4a00;
            border-radius: 0.187rem;
          }
        }
        .create-time {
          font-size: 0.8rem;
        }
      }
      .shop {
        display: flex;
        justify-content: space-between;
        .right {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .money {
            font-size: 1rem;
            color: #ff4a00;
            font-weight: bold;
          }
          .count {
            font-size: 0.7rem;
            color: #999;
          }
        }
        .left {
          /* height: 4.5rem; */
          display: flex;
          align-items: center;
          font-size: 0.8rem;
        }
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        font-size: 0.9rem;
        color: #777;
        .manage-btn {
          color: #fff;
          background-color: #e6a23c;
          border-radius: 0.2rem;
          padding: 0 0.2rem;
          margin-left: 0.5rem;
        }
      }
    }
    .item-active {
      background-color: #efefef;
    }
  }
  .load-end {
    text-align: center;
    padding: 1rem;
    color: #333;
    font-size: 0.8rem;
  }
  .bottom-btn-fiexd {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #eee;
    background-color: #fff;
    z-index: 100;
    height: 5.2rem;
    padding: 1rem 1.5rem;
    .btn {
      width: 100%;
      height: 100%;
      font-size: 1.2rem;
      border-radius: 3rem;
    }
  }
}
</style>
