<template>
  <div class="page-box">
  <moduleView :propConfig="config" ref="view" v-loading="load" @pagination="pagination" @onRefresh="getList" @resert="queryList" @search="queryList" />
</div>
</template>

<script setup>
import { computed,getCurrentInstance,ref, shallowRef  } from "vue";
const { proxy } = getCurrentInstance();
import {list} from '@/api/base/orderManage'

const config = ref({
  attr:{
    calculateH:true
  },
  search:{
    attr:{
      size:'mini'
    },
    columns:[
      [{
        span:8,
        // label:'设备名称',
        labelWidth:1,
        prop:'text',
        component:'by-input',
        compConfig:{ 
          attr:{
            placeholder:'请输入商品名称',
            prefixIcon:'vxe-icon-search'
          }
        }
      },
      {
        span:8,
        // labelWidth:16,
        label:'下单时间',
        prop:'time',
        component:'by-date',
        compConfig:{
          attr:{
            startPlaceholder:'开始时间',
            endPlaceholder:'结束时间',
            // format:'yyyy-MM-dd',
            type:'datetimerange'
          }
        }
      }]
    ]
  },
  tool:{
    tools:{
      // export:true,
      // add:true,
      search:true,
      refresh:true
    },
    customTools:[{
      name: '导出', 
      icon: 'bottom',
      event:{
        click:() =>{
          loadDown()
        }
      }
    }]
  },
  table:{
    attr:{
      size:'mini',
      seq:true,
      align:'center',
      // checkbox:true
    },
    columns:[{
      title:'订单编码',
      field:'orderId',
    },
    {
      title:'商品名称',
      field:'goodsName',
    },
    {
      title:'规格',
      field:'specs',
      width:100
    },
    {
      title:'单价',
      field:'goodsPrice',
      width:100
    },
    {
      title:'订单总额',
      field:'totalPrice',
      width:100
    },
    {
      title:'交易状态',
      field:'state',
      width:120
    },
    {
      title:'买家',
      field:'userName'
    },
    {
      title:'卖家',
      field:'vendorName'
    },
    {
      title:'下单时间',
      field:'createTime'
    }]
  }
})
const load = ref(false)
const isSearch = ref(false)
const timeNum = ref(0);

//导出
const loadDown = () => {
    let data = proxy.$refs.view.getQuery();
    data.pageNum = data.pageNo;
    delete data.pageNo;
    if(data.time && data.time.length > 0) {
      data.startTime = data.time[0]
      data.endTime = data.time[1]
    }
    delete data.time;
    proxy.downloadBy('/order/export',data,`订单管理_${new Date().getTime()}.xlsx`)
  }

const pagination = () => {
  if(isSearch.value){
    queryList();
  }else{
    getList()
  }
}
//列表请求（包含分页和搜素条件）
const queryList = () => {
  isSearch.value = true;
  let data = proxy.$refs.view.getQuery();
  requestList(data);
}
const getList = () => {
  if(!proxy.$refs.view){
    if(timeNum.value > 5){
      return
    }
    setTimeout(()=>{
      getList()
    },500) 
    timeNum.value ++;
    return
  }
  timeNum.value = 0;
  isSearch.value = false;
  let data = proxy.$refs.view.getPage();
  requestList(data);
}
const requestList = data => {
  load.value = true;
  data.pageNum = data.pageNo;
  delete data.pageNo;
  if(data.time && data.time.length > 0) {
    data.startTime = data.time[0]
    data.endTime = data.time[1]
  }
  delete data.time;
  list(data).then(res => {
    load.value = false;
    proxy.$refs.view.setTableValue(res.data.records);
    let page = {
      pageNo: res.data.current, //当前页
      pageSize: 20, //每页条数
      total: res.data.total //总条数
    };
    proxy.$refs.view.setPage(page)

  }).catch(()=>{
    load.value = false;
  })
}
nextTick(()=>{
  getList()
})
</script>

<style lang="scss" scoped>

</style>