<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
        <el-form-item>
          <el-date-picker
            v-model="ruleForm.searchDate"
            class="filter-item"
            type="daterange"
            range-separator="至" 
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="filter-item"
            @click="btn_search"
          >
            查询
          </el-button>
          <el-button
            type="primary"
            class="filter-item"
            icon="el-icon-download"
            @click="btn_export"
          >
            导出
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tabcontent">
      <el-table :data="dataLists" border style="width: 100%" >
        <el-table-column align="center" :label="item.name" v-for="item in columnData" :prop="item.field">
          <template v-if="item.list">
            <el-table-column align="center" :label="childitem.name" v-for="childitem in item.list" :prop="childitem.field"></el-table-column>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      style=" margin-top: 15px;"
      v-show="pageParams.total > 0"
      :total="pageParams.total"
      v-model:page="pageParams.pageindex"
      v-model:limit="pageParams.pagesize"
      @change="changePageHandle"
    />
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { getPageListData } from '@/api/main/system/system';
  import moment from 'moment';
  const { proxy } = getCurrentInstance();
  const ruleForm = ref({
    searchDate:[]
  })
  const keyNum = ref(0)
  const dataLists = ref([])
  const columnData = ref([])
  const pageParams = ref({
      pageindex: 1, // 当前第几页
      pagesize: 10, // 每页几条数据
      total: 0 // 总共多少数据
  })
  onMounted(() => {
    getqcheadresultlist() //  表头数据
    getqcresultlist() //  列表数据
  });
  function btn_search() {
    getqcresultlist()
  }
  function btn_export() {
    console.log('导出');
    const params = {
      createTime:ruleForm.value.searchDate.length ? moment(ruleForm.value.searchDate[0]).format('YYYY-MM-DD HH:mm:ss'):'' ,
      endTime:ruleForm.value.searchDate.length ? moment(ruleForm.value.searchDate[1]).format('YYYY-MM-DD HH:mm:ss'):'',

    }
    const fileName = `${'质检报表'}-${new Date().getTime()}.xlsx`;
    proxy.download('/quality/indexresult/exportExcel', params || {}, fileName);
  }
  
  function changePageHandle(data) {
    pageParams.value.pageindex = data
    getnoqc()
  }
  // 表头数据
  function getqcheadresultlist() {
    
    const params = {
      createTime:ruleForm.value.searchDate.length ? moment(ruleForm.value.searchDate[0]).format('YYYY-MM-DD HH:mm:ss'):'' ,
      endTime:ruleForm.value.searchDate.length ? moment(ruleForm.value.searchDate[1]).format('YYYY-MM-DD HH:mm:ss'):'',
      pageNum: pageParams.value.pageindex,
      pageSize: pageParams.value.pagesize
    }
    getPageListData("/quality/indexresult/getqcheadresultlist", params).then((res) => {
      if (res.data.length>0) {
        // columnData.value = filterColumnList(res.data,0) 
        columnData.value = res.data
        console.log(columnData.value)

      }else{
        columnData.value = []
      }
    })
  }
  // 列表数据
  function getqcresultlist() {
    
    const params = {
      createTime:ruleForm.value.searchDate.length ? moment(ruleForm.value.searchDate[0]).format('YYYY-MM-DD HH:mm:ss'):'' ,
      endTime:ruleForm.value.searchDate.length ? moment(ruleForm.value.searchDate[1]).format('YYYY-MM-DD HH:mm:ss'):'',
      pageindex: pageParams.value.pageindex,
      pagesize: pageParams.value.pagesize
    }
    getPageListData("/quality/indexresult/getqcresultlist", params).then((res) => {
      if (res.data.length>0) {
        dataLists.value = res.data
        console.log(dataLists.value)
        pageParams.value.total = res.total
        console.log(pageParams.value)
      }else{
        dataLists.value = []
      }
      
    })
  }
  
</script>