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

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


  const config = ref({
    attr:{
      calculateH:true
    },
    search:{
      attr:{
        size:'mini',
        rules:{
          name:[{
            required: true, message: '请输入名称', trigger: 'blur'
          }]
        }
      },
      columns:[
        [{
          span:8,
          // label:'设备名称',
          labelWidth:1,
          prop:'text',
          component:'by-input',
          compConfig:{ 
            attr:{
              placeholder:'请输入设备名称',
              prefixIcon:'vxe-icon-search'
            }
          }
        },
        {
          span:8,
          labelWidth:120,
          label:'最后同步时间',
          prop:'time',
          component:'by-date',
          compConfig:{
            attr:{
              startPlaceholder:'开始时间',
              endPlaceholder:'结束时间',
              // format:'yyyy-MM-dd',
              type:'datetimerange'
            }
          }
        }]
      ]
    },
    tool:{
      tools:{
        // export:true,
        search:true,
        refresh:true
      },
      customTools:[{
        name: '导出', 
        icon: 'bottom',
        event:{
          click:() =>{
            loadDown()
          }
        }
      }]
    },
    table:{
      attr:{
        size:'mini',
        seq:true,
        align:'center',
        // checkbox:true
      },
      columns:[
      //   {
      //   title:'设备ID',
      //   field:'equipmentId',
      // },
      {
        title:'设备名称',
        field:'equipmentName',
      },
      {
        title:'轮播量',
        field:'carouselCount'
      },
      {
        title:'扫码量',
        field:'scanCodeCount'
      },
      {
        title:'转化率',
        field:'ratio'
      },
      {
        title:'累计用户',
        field:'totalUserCount'
      },
      {
        title:'累计收入',
        field:'totalPrice'
      },
      {
        title:'最后同步时间',
        field:'lasterTime'
      }]
    }
  })
  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('/plan/statistics/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: data.pageSize, //每页条数
        total: res.data.total //总条数
      };
      proxy.$refs.view.setPage(page)

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

<style lang="scss" scoped>

</style>